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

Making It Pretty

Next

Coloring the Text

The black text on the orange background is a little Halloween-ish. No fear! We can change the color of the text similar to the way we changed the background color. For this, we use the <font> tag again. Here's how:

<font color="purple">This text is purple.</font>
will show up in the browser as
This text is purple.

As we mentioned earlier, there are other attributes to the <font> tag such as face, which changes the style of the text, and size, which can have a value between 1 (the smallest) and 7 (the largest).* Note that this is the opposite of the heading tags where <h1> was the largest size and <h6> the smallest. Confusing much? :)

<font face="Comic Sans MS" color="purple" size="6">I'm the Jolly Purple Giant.</font>
will show up in the browser as
I'm the Jolly Purple Giant.

Change the color of your text in the HTML Playground so that it stands out more on the orange background. Go back to the last lesson for color codes and names by clicking on the Previous button below.

*FYI: Some of you might have noticed that we're using the <font> tag to change the size of the text instead of one of the heading tags like we did earlier. This is because when you use the heading tags, the browser leaves empty space above and below the text of the heading to make it stand out more. That doesn't happen with the <font> tag. Experiment in the HTML Playground and see for yourself!

HTML Playground

Your Code

The Results