Trevor Hunsaker

Strengthen Your New HTML Muscles with Exercises

So, you learned a couple of new things in the HTML 101 lesson. If you're like me, you need to actually do something with that knowledge or it will fade as quickly as an etch-a-sketch portrait. So, I came up a couple exercises to help you lodge that HTML-y goodness into your cranium. Time to write your first HTML.

Step 0: Get a Text Editor

First things first: an HTML file is just a simple text file. It contains none of the fancy-pantsy formatting that you're so fond of adding to your church newsletters and lost puppy fliers. When creating HTML you might be tempted to open a word processor like Microsoft Word, or OSX's Pages. DO NOT! These have a nasty tendency to add all kinds of extra tags to your file which will make maintaining pages in the future a royal pain in the tail.

Instead of a word processor, you want a text editor. Both Windows and OSX come with a very minimal text editor, but there are literally scads of free and low-cost ones for both platforms with a lot of features that make writing web code much nicer. At the very least you'll want an editor that does syntax highlighting. Syntax highlighting is a feature that gives different kinds of characters different colors, like so:

1
<p>See how <strong>easy</strong> it is to find your tags and their attributes when you've got an editor with syntax highlighting? <a href="https://www.google.com/search?q=text+editor">Google around</a> for a text editor that works on your platform.</p>

If you'd like a suggestion on Windows, lot's of people like Notepad++, which is free. And I've heard nice things about TextWrangler for OSX, but I've never used it so I can't comment much about it.

Step 1: Create an HTML File

Open up your new text editor, and tell it to create a new file. Now, before you type anything into it, save the file wherever you like. Give it a name, maybe something like: exercies01.html. The only thing that matters is that the part after the dot is actually html.

Step 2: Exercises

You can put all of these exercises in one file, or you can put them in separate files, it doesn't matter. What I want you to do, is write the HTML for each of the exercises. There may be lots of right ways to do this, so there's no single correct answer. If you like, when you're finished, you may email your file(s) to me (address at the bottom of the page) and I'll look them over and provide feedback. Whatever you do, don't skip the exercises, you won't get big and strong without doing them.

Exercises

  1. Write the HTML for the most important heading of an article about a recent sporting event.
  2. Create HTML that could be used to display a list of instructions for how to hook a DVD player up to a TV.
  3. Write a short article (a few paragraphs) teaching something you know. Include links to relevant online articles.
  4. Include an image in the article.

If you have any questions, please feel free to email me: trevor@saturdayplace.com. There are a few more blog posts planned along these lines for complete beginners. Let me know if you'd like me to cover something specific. I'm also writing an eBook with the same audience in mind.

Web Dev 101

More free lessons delivered to your inbox!

You might want to subscribe to my newsletter. I'm writing a complete guide to web development for beginners, and subscribers get notified when there's an update.