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 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 (=).
- Next are 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 (>).
- Then, add your closing tag </body>.
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://mga-notes.blogspot.com/2010/07/browser-safe-colors.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>
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
by Russ Peabody
The code would look like this:
<html>
<head>
<title>My Spring VacationII</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 learned.
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.
Download in PDF Format HERE:
Learning HTML
Posts
No comments:
Post a Comment