The HTML Body Tag - Setting The Colors

Guest Author - Diane Cipollo

In this lesson you will take a look at the anatomy of the HTML tag by breaking it down into its various parts. You will create a webpage and use the HTML body tag to control the color of the background and the color of the text on that webpage.

REVIEW:
In the Say Hello World With HTML lesson you created your first HTML webpage, Template1.html. We discussed what HTML was (a computer language made up of tags) and you were introduced to these eight HTML tags.

Template1.html - source code

<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello World
</body>
</html>

Now we are going to take a look at the body tag and its parts.

Opening body tag: <body>
Closing body tag: </body>

<	Every HTML tag begins with this left angle bracket. That's how the computer can tell the tags from the rest of the words on the page.
/	Every closing HTML tag has this just after the left angle bracket.
body	"body" is the element name for the body tag
>	Every HTML tag ends with this right angle bracket.

That's simple enough. But suppose you want to control the background color of the page and the color of the words on the page. To do this you need to tell the computer what you want to do. This is done by adding attributes and values inside the tag. What are attributes and values? Glad you asked.

Suppose you wanted to buy a pair of shoes. You need to consider such things as color and size. So if there was an HTML tag for shoes (<shoes>), the attributes for the shoe tag would be size and color. OK, we need to add these attributes inside the tag itself.

So the tag <shoes> becomes <shoes size color> .

Now the computer knows what you want to control about this tag, but it doesn't know what size or color you want to use. Let's say you want size=10 and color=black. I bet you know what is coming next.

<shoes size="10" color="black">

As you can see the attribute is on the left of the equal sign. The value is on the right of the equal sign and the value is enclosed inside quotation marks.

Next →

|