HTML Tutorial

Follow the steps in this HTML Tutorial to learn how to write and design your own webpage. Use the playground below to practice your skills.

Previous

About the Internet

Next

How to learn with SmartGirl

In order to make it simple to learn HTML, we've set up this neat tool called the HTML Playground. It gives you a place to experiment with the parts of the language you're learning and then see how browsers will display it. When you finish the tutorial, we'll show you how to save your text in a file and put it on a computer so that anyone can see it.

Try out the Playground and start experimenting!

  1. Find the text box below the Your Code heading. You can see that there is already some funny looking text in it. This is an example of some HTML code.
  2. Find the box for The Results. This shows what the browser will display when it sees a file containing the code that was found in the Your Code box.
  3. Look in the Your Code box for the words "REPLACE ME!" Delete that text and type into it "Look! I am making a web page already!"
  4. Click on the Try It Out! button below the Your Code box. Then look at how the box under The Results changed to display the text you typed in. Neat, huh?
  5. Now, click on the Start Over button. This resets the Your Code box back to how it started out.

Feel free to play around with this as much as you like. You can't break anything because clicking the Start Over button will return everything to where you started from.

HTML Playground

Your Code

The Results

Steps

  1. Overview
  2. About the Internet
  3. Hello, HTML
  4. Make it pretty
  5. Adding pictures
  6. Fancy layouts
  7. Show it to the world