Introduction to HTML, Page 3
Now we will make the title of your page look more like a title. Remember that the page title is different than the <title> in the <head>.
Note that this exercise is using an old-fashioned text formatting coding system just to illustrate how HTML works.
First let's bold and center the page title.
<html>
<head>
<title>[Type 10 - 15 words that describe your page..]</title>
</head>
<body>
<p><b><center>
[Type a title for your page.]
</center></b></p>
<p>
[Type a nice introduction, subtitle or motto for your page.]
</p>
</body>
</html>
What it should look like.
The <b> and <center> tags wrap around your title. If you have forgotten to put the closing tags in (</b> and </center>), all the words on your page will be bold and centered. Notice that before the title, the tags are in the order: 1) paragraph, 2) bold, 3) center. When the tags close, they are in the opposite order. For simple tags like this, the order is not very important, but in other situations, the order is very important. It's a good idea to start with the practice of putting the tags in the proper order.
That looks a little more like a title, but usually titles have a larger font size. One way to tell the Browser to make the lettering size bigger is with H tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. <h1> is the largest font size. Try a couple of sizes on your page to see which one looks best to you. Notice that H tags also make the words bold. On page 3, you will learn another way to set the font size.
If your block of text doesn’t have at least two sentences, please add another sentence.
In most browsers, if you just put the text in loose, it will stretch from one side of the screen to the other with no margins. There are a couple of ways to change this. The first one is to put <blockquote> </blockquote> around the text. If you want it to be indented even more, you can put two or more sets of <blockquote> tags.
To save space on these pages, I will only show the body part of the instructions.
<body>
<p><b><center><h2>
[Type a title for your page.]
</h2></center></b></p>
<p><blockquote>
[Type a nice introduction, subtitle or motto for your page.]
</blockquote></p>
</body>
What it should look like.
The layout of your page is now easy for the eye to follow, but rather boring. One of the things that is missing is color. It is very important to consider you audience when you choose colors. Remember that there a are a lot of folk out there who have vision problems. There are two places we will use color 1) the background, 2) the letters.
Use the color charts on the last page to choose the colors you would like to use on your page. The next piece of code has a place for you to use both a background color and another color for the text of your title. The rest of the words on your page will remain black, so be careful not to choose a background color that is too dark.
There are two kinds of codes to use for color: 1) the codes listed on the color chart - be sure to use # with the numbers, 2) words such as “blue” - be sure to use the “ “.
There is also a second way to show the font size. On the next piece of code, the <H2> has been changed to <font size=6 ... >. This allows all the font information to be together. With this system the number is different: 6 is large.
<body bgcolor = #33cc99>
<p><b><center><font size=6 color=#330099>
[Type your title again.]
</font></center></b></p>
<hr>
<p><blockquote>
[Type a nice introduction for your page.]
</p></blockquote>
</body>
What it should look like.
Another new piece of code is the <hr> tag. It puts a line across the screen. If you put it inside the <blockquote> tag, the line goes only to the margins. Otherwise it will go all the way across the screen. Try both ways.
Old versus New
Legacy HTML color codes are in hexadecimal, but today there are alternatives for all of them in decimal. For example: <body bgcolor="#A43900">
in a newer decimal notation would be: <body style="background-color:rgb(164,57,0)">
You need to be aware of both. If you doing strictly new coding then learn the new, but if you are looking at old code chances are it will have some of the older notions.
|
