| Lesson
#3
Now that we
have the basic concept down, I am only going to write the <body>
tags. I will omit the <html>,<head>,
and
<title>
tags, but KEEP them in your document.
<body>
</body>
Lets talk about
Text. As you probably know, text is the most used element of any
site. There are many ways to modify your text to cater to the way
you want it to appear. To write text to be viewed on an html document,
you need to use the <font>
tag. The font tag, like most other tags, has a closing tag, </font>.
Inside the font tag, you should specify what you want the font to do.
First of all, you should specify the type of font you want. This
is done with face
added into the <font>
tag. Say, for example, we wanted to use Times New Roman, and we wanted
to type 'Look at my big, bad page!' We would type.
<body>
<font face="Times
New Roman">Look at my big, bad page!</font>
</body>
That would
result in this.
Look at my
big, bad page!
Ok, now you
can change the font to anyway you want it, this time, lets try... oh....
lets try Book Antiqua, Most of you probably have that on your computer.
<body>
<font face="Book
Antiqua">Look at my big, bad page!</font>
</body>
And you would
get.
Look at my big, bad
page!
Ok, now I want
to stress how to use the fonts. If you use a newer font, say... like
Eclipse, only half of your viewers would see it as you intend them to see
it, because they may not have the Eclipse font installed on their computer.
So the best advice is to keep the fonts simple, and if you really want
to use a certain font that some people might not have, don't use it all
over your site, just use it sparingly. If you aren't sure what font
to use because of some people not being able view it, you can specify multiple
fonts, and let the browser use the ones that they have. Just separate
the fonts in the <font>
tag with a comma (,).
<body>
<font face="Times
New Roman, Verdana, Arial">Look at my big, bad page!</font>
</body>
Then you would
see it as what font your computer has installed. I Highly
Recommend the following combination for your
font tags: Verdana, Helvetica, Times New Roman,
Arial For the rest of this tutorial,
I will keep the examples Times New Roman, needless to say, when writing
your documents, it is best to use the above combination. Lets move
on to size of the text. The easiest way to do this is to use plain
numerical values, yes I'm talking about numbers! Just use the size
attribute after the font. Lets experiment, we'll use 3 as our size.
<body>
<font face="Times
New Roman" size="3">Look at my big, bad page!</font>
</body>
And it looks
like this.
Look at my big, bad page!
Lets try 1 now.
<body>
<font face="Times New Roman" size="1">Look
at my big, bad page!</font>
</body>
There it is.
Look at my big, bad page!
Cool. Keep in mind though, that different fonts
look different sizes, so test it out first, to make sure it is the size
that you want the viewers of your page to see. Next lets experiment
with COLOR.
First you should learn the RRGGBB Hex (Hexadecimal)
code for that color. But... I personally don't see how it is humanly
possible to remember all of the codes, without a cheat sheet, I might add,
so I have a little (Well, actually quite large)
page that shows *some*
of the different colors and their RRGGBB Hex codes, RRGGBB
Hex codes , thank god for that, eh? I will
use probably the three most used colors, Black, the code is #000000,
Red, the code is #FF0000,
and White, the code is #FFFFFF
for the examples in this tutorial. Lets try to make our words above
red.
<body>
<font face="Times New Roman" size="3" color="#FF0000">Look
at my big, bad page!</font>
</body>
Did it work?
Look at my big, bad page!
Good, and anytime you want a different color,
just use the hexcode for that color. Finally, I'm am going to give
you some tags that modify the text in various ways. And as usual,
don't use these constantly for, say a whole page. Insert the tags
right before the <font>
and their ending tags right after the closing </font>
tag. Below is a list of *some*
of the modifying tags.
-
<b>Bold</b>
-
<i>Italics</i>
-
<u>Underlined</u>
-
<strong>Strong</strong>
-
<blink></blink> (Note:
The Blink tag only works with Netscape)
-
<em>Emphasize</em>
-
<code>Code</code>
-
<cite>Citation</cite>
-
<address>
Address
</address>
<samp>Sample</samp>
<kbd>Keyboard Entry</kbd>
<tt>Typerwriter or Teletype</tt>
<big>Big Print</big>
<small>Small Print</small>
<sup>Superscript</sup>
<sub>Subscript</sub>
<strike>Strikeout</strike>
<pre>
Preformatted Text
</pre> (Note: With the <pre></pre>
tags you cannot moddify the text style, it will just keep appearing as
plain text. However, it will show up exactly as you type it, making
it good if you want to use Typography on your web page? If you are
a poet perhaps?)
Ok, well, that wasn't that hard to do,
was it? Now, I think the next
thing we should learn about are links. You can modify the way a link
looks the same way as modifying how text looks. Just insert the <font></font>
tags before and after the entire link code, respecitvely. Links,
as you probably already know, just instruct your browser to connect to
another part of the site or the internet by a URL.
A URL,
or Universal Resource Locator,
is simply an address on the internet. You need to learn links, because
they are a very important aspect of any site. The anchor tags <a>
and </a> tell
the browser that it is a link. The bulk of the link goes in the first anchor
tag, like the address you want the link to lead too. Look at the example
below.
<body>
<a href="Where
you want the link to lead too">What you want the link to say</a>
</body>
Now, lets try
one.
<body>
Go to Microsoft!
</body>
Now, lets make
that into a link.
<body>
Go to <a
href="http://www.microsoft.com/">Microsoft</a>
</body>
Here's what
happens.
Go to Microsoft
Lets try another
one.
<body>
Go to Netscape
</body>
We'll make
it into a link....
<body>
Go to <a
href="http://www.netscape.com/">Netscape</a>
</body>
And again....
Here's what happens.
Go to Netscape
Now, have you
ever wondered how you make an Email link? Well, if you have, here's how.
We'll use my email address as an example. All you do is replace the
http://
with
mailto:
<body>
Send me <a
href="mailto:Just1Viper@juno.com">Email</a>
<body>
And....
Send me Email
You can also
make an image act as a link, but lets learn how to put a picture or image
on your page first. Pictures spruce up any site, giving it contrast, just
look at the pictures at the top of this page, that says 'The Web Design
Continuum & HTML Tutorials'. They look a lot better than text
that says the same thing. You can set a picture on your page like
so.
<body>
<img src="url
of picture" alt="What you want it to say on mouseover">
</body>
Now, lets put
a real image in place.
<body>
<img src="images/wizard.gif"
alt="The Wizard">
</body>
Ok, now lets
see what the result is.
It worked!
Ok, finally, lets learn how to make that picture into a link. Just insert
a regular link in front of the Image link, but leave out the </a> in
the regular link until after the image tag(<img
src="").
<body>
<a href="wizardlink.html"><img
src="images/wizard.gif" alt="The Wizard"></a>
</body>
And finally
the result!!!
A lot of images
are not optimized, and that makes the page load slower. I recommend
GifCruncher,
its a free service that optimizes your .gifs in seconds right from the
web. Also, GifCruncher has just introduced JpegCruncher,
another free service, so now you can optimized your Jpegs too. Ok, that
is that! Now you know the basis of links and images, good job. Pat yourself
on the back, get something to drink, and lets go to Lesson #4! |
