*
Web Site Development
Lesson 1.3
Title and Head, Body and Text
part three + the anchor tag/ELEMENT <a> </a>
By Alain Lareau
In the Lessons 1.1 and 1.2 HTML was introduced
in its version 2.0, then we ended on the topic that I was using HTML version
3.2 to do it. This was done to afford myself the use of the 'font' ELEMENT
and the attributes that it can use. So now we will talk about HTML 3.2
and forgive me if I insist on using HTML 4.01 this time because it affords
me the ability to use style, but let's stay focused on 'Fonts'.
This Page is HTML 4.01 Transitional and its DTD ( Document type Definition ) looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
The DTD is the first line of code, next
the <html> TAG should be the begining of the second line and
its pair </html> should be the last line of code in your saved file
that is to be your Web Page. This page "The Great Big
Website of Jobs" will be the subject of several lessons. In this case
we revist the 'Body' ELEMENT, for this page it is:
<body bgcolor="#a0d0f0" text="#663366" link="#000099" vlink="#336699"> ... </body>
When we say ELEMENT instead of TAG it may be because we mean the whole thing,
- the tags and the contents between them. If you get far enough in the lessons that you become interested
in learning JavaScript this concept of the ELEMENT will be important. So, as I am preparing you to form
your own .html template, a good time saver to start new web pages,
let's look at each part of that 'body' ELEMENT.
In it four default colors are reset to new values. The background color, the color of the text, the color for the
Hyper Text, and the links visited already take a different color to distinguish them.
The HTML 3.2 specification which we are
talking about now introduces new ELEMENTS.
Font is the first of them I wish to show you and the color of the text can be changed there as well.
Here is an example <font color="blue">text</font>
Two other useful attributes assigned to it
are: size=" " put ( 1 - 7 ), you saw in lesson 1.2,
and face=" " put the ( font name ), for instance "Arial" or "Comic Sans MS".
The font you see here is the default 'face', which is what you get if no font face
value is prescribed, but the size is set to the value 4, with code like
this:<p><font size="4">body of paragraph</font></p>
If the 'size' value is not prescribed in a 'font' tag the size defaults to size 3.
This page, 'The Great Big Website of Jobs' did not begin
with a 'header', I used a large font (size 7) instead.
|
This is the code: - I have indented it, - nested it to help
you see the relationships - don't overlook that the text is made
both bold and italic
and the closing tags must come in the right order.
<div align="center">
<font size="7" face="Arial">
<b>
<i>
<a name="top">The Great Big Website
of Jobs</a>
</i>
</b>
</font>
</div>
While we are on the subject let's look at the next bit of code as well.
<div align="center">
<font size="5" color="#800040" face="Comic Sans MS">
<span style='font-size:24.0pt; font-family:"Comic Sans
MS"'>
Online Jobs First - Job Hunt Club
</span>
</font>
<font size="2" color="#601080" face="Comic Sans MS"><br>
<a href="http://digg.com/business_finance/Jobs_First_2">
Vote digg it
</a><br><br>
</font>
<p align="right">
<font size="1">
<a href="003.html#d3"> go to lesson
1.3</a>
</font>
</p>
</div>
|
So what
is the first thing you notice about this new HTML 3.2 code?
Is it the new tag <div> ?
OK and the font tag has two attributes size and face,
values "7" & "Arial"
The next thing, see the <a> tag, with has a name attribute with
a value of "top", this is the 'anchor' for the URL of the link below.
"The Great Big Website of Jobs"
<a href="003.html#top">
Did you catch that? It was done with tags <u>#top</u>.
Now the 'font' tag again and
a new one 'span'
( sorry coudn't help my self),
a little reduncy here, done just for show. Please take
note of the 'syle' attribute in the 'span' tag and the way information is plugged
in has a different format.
Now the <a> tag again and the hashtag/pound sign just after
the .htm, this is the pointer to the anchor. The anchor is set in
the header Web Site Development at the top of the lesson.
|
This the code for the 'header' that holds the anchor:
<a name="d3"><h1 align="center"><br>Web
Site Development</h1></a>
,,that the 'go to lesson 1.3' link points to.
There's that <u> tag again. ';-)
|
Get Electrician Jobs
