Html Editor and "tags"
In
lesson 1
you got started with your own free web site (or else you skipped that one and
came directly here). Now we're ready to move on.
This lesson will deal with editing and writing HTML. The next lesson will deal
with uploading it to your web site and getting it on the
web.
So on with the first part....
Editor
NOTE:
You
do not need to use an Editor
to follow along in this lesson! But now would be a good time to play around
with it or if you are working offline you will need it!
The first thing you will need is an
"Editor"
, Something that will allow you to
write
html as well as
view
it. I recommend
Arachnophilia 4.0 you can get it at my
Downloads
page at
The Gunners Gallery
. If you have any problems with it, dont be afraid to ask me, I'd be happy
to help!
Once you have your Editor running open a new file and name it
"test.html"
(on
arach. v4 its the globe with the page on it in the upper left corner, click on
it and type in the word
"test"
were it says Page Title). It needs to be a blank
page, so if it has any text, delete it (in arach.v4 it will have text, click on
edit then select all, go back to edit again and click on clear.) Then click on
the following link, copy the entire text and paste it on your blank page in the
Editor.
(page opens in new window)
TEST PAGE
, or use the test page to follow along without an Editor!
HTML
tags
The First thing you will see is:
<html>
, the two signs
<
,
>
and everything inbetween is called a
"tag"
, the example above is called a
"start"
tag, almost all tags have an
"end"
tag, look at the end of your test page you will see:
</html>
, all end tags have a
/
symbol in it! The
"html"
in these tags stand for "
H
yper
T
ext
M
arkup
L
anguage", (go to
Html Goodies
for a more detailed explanation). Everything on your html page will go
inbetween these tags. your page
must
start and end
with these tags!!
HEAD
& TITLE tags
There are a few more sets of tags you need to be aware of, the next set is the
<head>
and
</head>
tags, these tags are known as the
"Header"
, anything inbetween these tags are read by your computer and by certain things
on the Internet, such as search engines and do not show up on your page, but
that is
another lesson. The only thing you need to note at this time is the
<title>
and
</title>
tags, whatever you put here is what shows up at the top of your browser! These
tags have to go
inbetween
the
"head"
tags
BODY
tags
The next set of tags,
<body>
and
</body>
, are the second most important set of tags (The "html" tags being the most
important), everything that shows up on your page goes inbetween these tags!
These tags go
below
the
"head"
tags and
not inbetween!
Now lets take a look at what goes inbetween those body tags.
Hold it you say! The
start
body tag looks different, its got more text than
just "body" in it!
Yep, your right! The extra text defines the characteristics of the page! Lets
look at them.
-
bgcolor="#ffffff"
: The
"bg"
means "background" and the
"#ffffff"
is the color code for white. Yep, you guessed it this will make the background
white!
-
text="#000000"
: the
"text"
means the text on your page and the
"#000000"
is the color code for black, this will set your
"defualt"
text color to black!
-
link="#0000ff"
: The
"link"
means a link that you have not clicked on (or "visited"), the
"#0000ff"
is the color code for blue!
-
vlink="#800080"
: The
"vlink"
means "visited link", and the
"#800080"
is a purple color code!
-
alink="#ff0000"
: The
"alink"
means "active link" or the link that you just clicked on, and the
"#ff0000"
is the color code for red!
There other properties that can go here, such as if you wanted to use an image
for a background you would put that here, but we will discuss that later! For
now you can preview the test page(if you have an Editor), change the color
codes and see what it does!
you can get color codes
here
!
Now lets take a look at what goes inbetween those "body" tags.
Lesson 3
>>Printable Page<<