 |
|
Now we will make the page title of your page look more like a title. Remember that the <head> is different from a page title. Viewers see the page title on the page. It helps them know what that page is about. The title tag is for use with the search engines and other media, such as Facebook.
Note that this exercise is using an old-fashioned text formatting coding system just to illustrate how HTML works. These tags are "deprecated". They still work in modern browsers, but most of our formatting is now best done in CSS, which is another lesson entirely.
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 for your page.]
</p>
</body></html>
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, putting things out of order may work just fine, but as your code gets more complicated, things will start to break. 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.
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 your title again.]
</p></b></center></h>
<p><blockquote>
[Type a nice introduction for your page.]
</p></blockquote>
</body>
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 pages 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.]
</p></b></center></font>
<hr>
<p><blockquote>
[Type a nice introduction for your page.]
</p></blockquote>
</body>
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.
© 2012, Nora McDougall-Collins