Learning HTML
For Kids!
Attributes
come in all forms:
bgcolor="hex#"
text="hex#"
align="left, center or right."
Width="%"
7. Attributes: Adding interest to your page.
Bold headlines and organized lists are nice but there’s got to be more to a web page than that. How about some color and variety? Glad you asked, because that’s where attributes come in. Don’t let the word scare you. Attributes are just special codes placed within the HTML tags that describe how the tags will look.
Color Attribute
For instance, let’s say you want to have a green background on your Web page with red
text, like for Christmas time. You would type this code:
<html>
<head>
<title>Color Page</title>
</head>
<body bgcolor="#bee3c2"
text="#ff0000">
Hello. I am a page that can be used for Christmas.
</body>
</html>
With this code, your web page appears like this in your browser.
Notice how the attributes: bgcolor and text. They are placed within the <body> tag. There’s that nesting thing again. Attributes never stand alone. Instead, they always appear inside a body tag.
Let's look a little closer at the body attribute:
<body
bgcolor="#bee3c2">...</body>
- The bracket and tag appear first (<body).
- Always add a space between the tag and attribute.
- Then enter the attribute (bgcolor).
- Equal sign goes next (=).
- Then comes quotation marks that contain a description of how the attribute should look like ("#bee3c2"). In this case it's a code for the color green.
- Close with a bracket (>).
- Finally, if this is a container tag then add your closing tag </body>.
It's that simple. Now let's try some more. But first, here's something to remember...
Tip
to Remember
Colors are described in hexadecimal (hex) code—six digits or letters
that represent a color. Also, hex codes always start with a # sign.
For
example the hex code for black is #000000, while white is #ffffff. For a complete list of
colors and their hex codes, see:
http://www.wdvl.com/Authoring/Graphics/Colour/666.html
Align Attribute
Another attribute that comes in handy is: align. Often used with headlines and graphics,
this attribute let’s you place text or pictures to the left, center or right side of
the margin.
Here’s a simple example for the align attribute:
<html>
<head>
<title>My Spring Vacation</title>
</head>
<body bgcolor="#e3f04a" text="#000000">
<h4 align="center">My Spring Vacation<br>
by Russ Peabody</h4>
<p>My spring
vacation was wonderful, except for the terrible storms we had during the first part of the
week. Snuggle, my dog, enjoyed the walks we had on the beach and Jimmy, my teddy bear,
liked the hotel room. He said the maid was very nice to him.</p>
</body>
</html>
And here is the resulting page as if it were in a browser:
You can use the align attribute with all sorts of tags like: headlines, paragraphs, rules, graphics and so on.
Width
Attribute
What if we wanted to add a rule to the above story just under the title and
byline? But instead of having the rule go from margin to margin, we wanted it centered
just underneath, like this:
My
Spring Vacation
by Russ Peabody
The code would
look like this:
<html>
<head>
<title>My Spring Vacation II</title>
</head>
<body bgcolor="#e3f04a" text="#000000">
<h4 align="center">My Spring Vacation<br> by Russ Peabody</h4>
<hr align="center" width="40%">
</body>
</html>
And here's what it would look like in your browser.
Notice how we told the browser to center the rule <hr> tag and make it only 40% the size of the screen. Although this may seem a bit confusing in the beginning, you will find it becomes easier as you use these attributes to help design your web pages.
Let's apply what we've learn.
Step 1 Load your text editor and open your HTML document we have been working on: firstpage.html Your file should appear as below:
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first web page. There's more
to come.
<hr>
<p>
I am learning how to use the horizontal rule,
headline, paragraph and line break tags. Writing HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
<p>I can also create lists using numbers and bullets. Here is an example of a list with numbers:
<ol>
<li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ol>
</p>
</body>
</html>
Step 2 Let's add some attribute codes to your original HTML file. Enter the code listed below in red:
<html>
<head>
<title>This is my first web page.</title>
</head>
<body
bgcolor="#ffff00" text="#000000">
<h1 align="center">Hello world.</h1>
<p align="right"><b>This is my first web page. There's more
to come.</b>
<hr
align="center" width="50%">
<p>
I am learning how to use the horizontal rule, headline,
paragraph and line break tags. Writing HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
<p>I can also create lists using numbers and bullets. Here is an example of a list with numbers:
<ol>
<li>My first item on the list.</li>
<li>My second item on the list.</li>
<li>My third item on the list.</li>
<li>My fourth item on the list.</li>
</ol>
</p>
</body>
</html>
Step 3 Save your file.
Step 4 If Netscape Navigator is still open, hit the reload button. If not, then load Navigator following steps in Chapter 4.
Your resulting page should look like this in your browser.
Notice
the new changes:
- Background color is now yellow, text is black.
- The heading is centered.
- First paragraph is aligned to the right
- Horizontal rule is now 50% of the margin and centered.
All created by you! Now let's learn more about text formatting.
Go to Chapter 8: Advanced text formatting
|
Privacy
Statement |