Web design has always seemed a bit mystical to me — a jumble of words and numbers creating images and manipulating content on a screen. It always seemed confusing, and I wrote it off as something only “web developers” needed to know.
But then I got my first “real” job in communications, and one of my first projects was to manage content for the organization’s website and web pages. I can’t remember if I broke into a cold sweat before or after I got to my desk, but needless to say, I felt like I was in over my head. I needed a crash course in HyperText Markup Language, also known as HTML.
You might not be an aspiring webmaster or even a manager of website content either, but knowing your way around the world of HTML isn’t a bad idea. With the accessibility of website builders like WordPress and Drupal, employers have a growing expectation that potential hires have at least a cursory understanding of HTML.
Now, don’t panic. I’m not suggesting you become proficient in website building, but, like any widely spoken language, it’s helpful to know a few key phrases just in case.
Here are a few life-saving resources and tips that got me started with HTML and will hopefully be helpful for you as well.
Use a trusted tutorial.
One of the best places I have found to learn the basics is www.w3schools.com. This site is the Rosetta Stone of HTML, leading you through examples, quizzes and exercises to get you comfortable with how the language works. The site presents concepts in bite-sized chunks to make it easier to digest. Use the “Try it Yourself” button to see how the concept works in real time! It also provides tutorials on CSS, PHP and JavaScript.
Tag it!
When creating content, either for a PowerPoint or Word Document, you sometimes want text to stand out. So what do you do? You bold, italicize or underline it, right? The same concept is present with HTML, but instead of clicking a bold B button or leaning I, you include a tag around your content, which will tell a web browser (Internet Explorer, Chrome) how you want content displayed.
Example time! Let’s bold the word “champions” in the sentence: “We are the champions, my friends!”
To do this, insert a bold tag, which is <strong> or <b>, before (to open) and after (to close) the word champions. Both the open and close tags will be enclosed with angle brackets. The result will look like this:
We are the <strong>champions</strong>, my friends!
And when read by a web browser, it will look like this:
We are the champions, my friends!
And just like that, champions got tagged!
Making the most of your Attributes.
Attributes provide further information on how you want content to appear or perform. This is where you start looking like a pro, so pay attention…
Let’s make the sentence “We are the champions, my friends!” a link that, when clicked, will take you to a YouTube video of Queen performing this epic melody.
The tag for a link is <a> so start by hugging the tag around your content.
<a>We are the champions, my friends!</a>
Now, you need to reference the location of the YouTube video by including an attribute to the tag. The attribute is “href” and will be placed right after the “a” in the opening tag and will include both an equal sign and quotations around the YouTube URL as well. The result will look like this:
<a href=”https://youtu.be/04854XqcfCY”>We are the champions, my friends!</a>
And when read by a web browser, it will look like this:
We are the champions, my friends!
Rock on!
Practice, play and make mistakes.
With any new language, you won’t learn unless you practice. HTML is no different, but the more you work at it, the easier it will be.
And it can be fun! Play around with changing font sizes and colors. Try to figure out how to put a border around an image (hint, you will need to use an attribute!). Creating something from nothing is thrilling.
Finally, accept the fact that you will need to make mistakes. By trying and failing to accomplish a task, you will discover new ways to work with HTML. This is your opportunity to explore!
Want more information on learning HTML? Check out these resources:
- https://www.codecademy.com/learn/make-a-website
- http://learn.shayhowe.com/html-css/
- http://websitesetup.org/html-beginners-guide/
- https://mva.microsoft.com/en-US/training-courses/html5-css3-fundamentals-development-for-absolute-beginners-14207?l=Y4COscFfB_7500115888
Please leave a comment below with any additional resources or tips on learning HTML!
Lacey Scully is part of the GovLoop Featured Blogger program, where we feature blog posts by government voices from all across the country (and world!). To see more Featured Blogger posts, click here.
Leave a Reply
You must be logged in to post a comment.