By this time you should be familiar with the Editor and know what
tags
are, you should also know what the
<html>
,
</html>
and
<head>
,
</head>
and
<title>
,
</title>
tags are used for. If not then you should see
Lesson 2
before going any further. Go ahead I'll wait!
What you put inbetween the body tags will determine what goes where on your
page, the example I give is a basic one, I will go deeper in a later lesson
CENTER
tags
Now lets take a look at the
test page
again (you do have your editor running dont you?). The first tag you see
inbetween the body tags is:
<center>
, if you go further down you will see:
</center>
. Everything inbetween these tags will be centered on the page (which in this
case, is the entire page). If the tags were not there, then everything would be
aligned to the left of the page.
FONT tags
The next set of tags we see are:
<font>
,
</font>
. These tags control the look of your text, in this case I have set the
face
or style of the text to Georgia and the
size
to 6 and the
color
to blue (Note I have used the word blue in quote marks instead of a code, this
works with basic colors only). If you do not specify a color here the color of
the text would be the
defualt
color in your body tag. There are seven basic font sizes 1-7. 1 being the
smallest, Heres what they look like:
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
I will go into more detail about the font
face
, in a later lesson.
BOLD
& ITALIC tags
The next couple of sets of tags are:
<b>
,
</b>
meaning
Bold
and
<i>
,
</i>
meaning
Italic
, and they should be self explanitory. These tags do not have to be inside the
font tags, they just have to be on either side of the text that you want
bold
or
italic
, they do not have to be used with each other, they can be used separately.
Another set of tags that can be used around text are:
<u>
,
</u>
these are used to underline text
like this
.
LINE
BREAK & HORIZONTAL RULE tags
The next couple of tags after the font tags do not have
End
tags, they are:
<br>
meaning
Line Break
(This tag will start the next "item" on a new line), and
<hr>
meaning
Horizontal Row
or
Horizontal Rule
(This tag makes a line across your page). If the
Line Break
was not there, the
Horizontal Rule
would be put
next
to the text, and not below it.
NOTE:
The font size examples in the Font section are separated by
Line Breaks
! This tag:
<p>
is called a
Page Break
and this note is separated above and below by
Page Breaks
!
IMAGE
tags
Now, the next new tag is the magic
"IMAGE"
tag! This tag puts an image on your page. You will notice it does not need an
End
tag, all the info it needs is inside the tag. The first thing you see inside
this tag is:
img src=
. Yep, it means "
im
a
g
e
s
ou
rc
e" and it is asking for the
Source
of the image (or the
Address
to the image). In this example I have a directory called
webhelp
and inside it I have an image file called
bye(1).gif
. Make
sure
you add the
" "
quote marks to either side of the address and that the address points to an
image file(.gif, .jpg, .bmp)! If you know the width and height of the image you
can put it in here (I dont know why, but your page will load faster if you do!)
NOTE:
For more on
Addresses
, go
here
!
The only thing I want you to take note of in the next set of font tags is that
the color command in the tag has no
" "
quote marks around the word
red
, that is because you dont need them when you are using the word instead of the
color code. the next 2 sets of font tags do not have the color command at all
and the text will be the
defualt
color that is in the body tag.
LINK
tags
Inside those last 2 sets of font tags you see:
<a href="">
And
</a>
these are
link
tags and they provide the means to
link
to another page or to an image! The
a
in "a href" stands for
Anchor
, I'm not sure what that and
href
mean, but I do know it is asking for the
Address
to the page or image you want to link to. It can be almost any file type
(.html, .cgi, .gif, .jpg). As with the image tag, be
sure
to include the
" "
quote marks on either side of the address. In the second set of link tags the
address has been shortened, you can do that if the link is to another page on
your web site, otherwise you
must
include the
whole
address! The text that you want to use as a link goes inbetween the
<a href="">
and
</a>
tags, the second set of link tags has an image tag inbetween them,
<a href=""><img src=""></a>
, thats how you use an image as a link!
Well thats about it, except to say that this is by no means a full set of tags
that are availible, I will be covering more tags as we go. For now, save a copy
of the
Test Page
as a back up and play around with the original! (I back up everything, my
whole site is saved on my hard drive!) Once you get bored with what you can do,
come back here and we'll take a look at
Table's
.
Lesson 4
Remember, If you have any questions, check out the
Forum
at
The Gunners Gallery
>>Printable Page<<
