HTML Lessons

So, you want to make a
Web Page!
Index & Quick

Reference
Basic Document Structure Basic Text Formatting

Structural Formatting Images Links Miscellaneous
Basic Document Structure
<html>
<head>
<title>My big ole bad page!</title>
</head>
<body>
Hello Joe!
</body>
</html>
With HTML 4.01 Transitional DocType:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
Hello Joe!
</body>
</html>
Basic Text Formatting
Make text bold: Sample
Make text italics: Sample
Make text underlined: Sample
Monospaced text: <tt>Sample</tt>
Change font size (sizes:1-7): Sample
Change the font name (face): Sample
Change the font color: Sample
Make text one size bigger: <big>Sample</big>

So, you want to make a Web Page!
Lesson 1
So, you want to make a Web Page! - Lesson 1

Just like "follow the bouncing ball", power up Notepad and start with this...
<html>
</html>
Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag
just add a / to the starting tag. Most, but not all tags have a closing tag. Think of tags as
enclosing a bit of text for the browser to interpret. The browser will interpret everything between
<html> and </html> as an HTML document. Different tags are interpreted different ways by the
browser. Let's proceed...
Every HTML document needs a pair of head tags.
<html>
<head>
</head>
</html>
The only thing we have to concern ourselves with in the head tags (for now) are the title tags.
<html>
<head>
<title></title>
</head>
</html>
And the bulk of the page is going to be within the body tags.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Oh, and one more thing, give your document a title, and put something in the body.
<html>
<head>
</head>
<body>
Hello Joe!
</body>
</html>
Now save it, not as a text document, but as a html document. Save it as page1.html in a new
folder somewhere. If yer a little fuzzy about how to do this then here's what you do...
In your Notepad window click File then Save As.
You will be presented with the Save As dialog box. Make a new folder by clicking the New
Folder icon in the Save As dialog box.
The New Folder icon will look something like this -->
Name the new folder whatever you want. Then double click on it to open it. Now you're ready to
save the file into the the new folder you just made. Where it says File name: type in page1.html
Where it says Save as type: make sure it says All Files(*.*)
Hit return and you're done!
Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to
a server and the whole world can see your creation! If you are using Internet Explorer, the file
you made might look something like this...
(if your icon is a little different, it's no biggie)
You should be able to double click on it now and see the results of your handiwork.
Now, it's common for people to get stuck here at saving the file. If you get stuck, just be
patient. When you save it, remember where you saved it. and make sure you save it with the file
extension .html
Next order of business is to start putting some neato stuff in your page.
The best way to use this tutorial is to run Notepad and two instances of your web browser. One
browser window containing this tutorial and the other containing your new page. Just toggle
between the three windows. You can open a second instance of your browser in one of two
ways...
1) Find the icon of the html file you just made (page1.html) and double click on it. Or...
2) In your browser, click on File/Open File (or something similar to that) and browse to the file
(page1.html).
Three quick points before we go on to the next lesson:
1. What you made is a skeleton HTML document. This is the minimum required
information for a web document and all web documents should contain these basic
components.
2. The document title is what appears at the very top of the browser window.
3. Of all the things on your web page, the title is what search engines consider most when
ranking a page. Choose your titles carefully, and keep them brief.
4.
So, you want to make a Web
Page!
Lesson 2
5.
6. So, you want to make a Web Page! - Lesson
7. To keep things a little cleaner I am only going to write what is in the <body> tags. I will
omit the <html>, <head> & <title> tags. Needless to say, keep these in your document.
8. <body>
9. </body>
10.
11. Type something really cool.
12.<body>
13.Something really cool
14.</body>
15.
16. Something really cool
17.
18. IMPORTANT NOTE: Whenever you make a change to your document, just save it,
then hit the Refresh/Reload button on your browser. In many instances just hitting the
refresh button doesn't quite do the trick. In that case...
19. Internet Explorer users: Click Refresh while holding down the CTRL key.
Netscape/FireFox users: Click Reload while holding down the SHIFT key.
20.
21. I think the first thing we are going to learn is how to change background colors.
22.<body bgcolor="#ccffcc">
24.</body>
25.
27. #ccffcc is computerese for light green. Here are a few more.
28. The topic of colors and browsers is rather interesting. Although it's not overly important
to understand how browsers and colors work together at this point in time, you may want
to come back to this section after the lessons and learn about Netscape's infamous 216
colors.
29.
30. You can specify a background image instead. (Note, the image should be in the same
folder as your HTML file. More on this below.)
31.<body background="swirlies.gif">
33.</body>
34.
36. Here's the background image
37. In order for the image to show up, the browser has to be able to find it. For now, we want
the image to be in the same folder as your HTML document (page1.html). The easiest
way to do this is to right click on the swirlies image above and choose Save Picture As
(or some variant thereof). Browse to wherever you put page1.html and save the image
there. Later we'll get into this stuff in a little more detail.
38.
39.
40. It's probably pretty obvious that the image is tiled. If you use a long skinny image you
can get an effect like this...
41.<body background="bluebar.gif">
43.</body>
44.
46. Here's the background image
So, you want to
make a Web Page!
Lesson 3
Let's go back to a plain old screen.
<body>
Something really cool
</body>
We can make things bold.
<body>
Something really cool
</body>
What we are (more or less) telling the browser is: at the start making things bold, and at the
 stop making things bold. Or, maybe a little more accurately, we are suggesting to the
browser that all text contained within the element should be rendered bold.
The same principle applies to italics...
<body>
Something really cool
</body>
...and underlining.
<body>
Something really cool
</body>
Back again to a plain screen.
<body>
</body>
We can use tags in combination if we wish...
<body>
Something really cool
</body>
This is an example of nested tags. If you are going to use tag pairs in combination (which you
will probably be doing quite a bit), then to avoid confusing the browser (not to mention
confusing yourself) they should be nested, not overlapping. Let me illustrate...
<-- Overlapping tags....

bad
<-- Nested tags.... good
So, you want to
make a Web
Page!
Lesson 4
<a href="http://media.fastclick.net/w/click.here?sid=3157&m=3&c=6518"
target="_top"><img
src="http://media.fastclick.net/w/get.media?t=s&sid=3157&m=3&tp=3&f=b&v=1.4&c=6518&r
=&d=n" width=120 height=600 border=0 ></a> <a
href="http://media.fastclick.net/w/click.here?sid=3157&m=3&c=1247"
target="_top"><img
src="http://media.fastclick.net/w/get.media?t=s&sid=3157&m=3&tp=3&f=b
&v=1.4&c=1247&r=http%3A//www.pagetutor.com/html_tutor/lesson03.html&a
mp;d=n" width=120 height=600 border=0 ></a>
A very useful type of text effect is the mono-spaced font, or Typewriter Text.
<body>
<tt>Something really cool</tt>
</body>
Each letter uses the same amount of horizontal space...
iiiiiiiiii
This is regular type -> oooooooooo
mmmmmmmmmm
iiiiiiiiii
This is monospaced type ->oooooooooo
mmmmmmmmmm
We can change the fon t si z e t o o... It's pretty easy!
First add the tags...
<body>
Something really cool
</body>
Then specify a size attribute.
<body>
Something really cool
</body>

Fonts come in 7 sizes:
teen s re extra la real

y ti
ny
m
al
l
gu medi
lar um rg
big
y
e
& elli
ng
1 2 3 4 5 6
!
7
Two things I want to discuss now. First, a <tag> tells the browser to do something. An attribute
goes inside the <tag> and tells the browser how to do it.
Second point is about defaults. As you probably know, the default value is a value that the
browser assumes if you have not told it otherwise. A good example is the font size. The default
font size is 3 (usually). If you say nothing it will be 3. If you make faces at your computer it will
still be 3.
Every browser has a default font setting - font name, size and color. Unless you have messed
with it, the default is probably Times New Roman or Verdana 12pt (which translates into 3 for
our purposes) and it's black. Of course we can specify font names other than the defaults. Like
arial and comic sans ms.
<body>
Something really cool
</body>
The font will only display if your visitor has that font installed on their computer. Let me
repeat... If the person looking at the page doesn't have installed on their computer the font you
specify, then they will only see the default font. So be very judicious in your use of fonts. Arial
and Comic Sans MS are pretty widely distributed with Windows. So is Impact. You can hedge
your bets a little by specifying more than one font. (Yes! You can do that!). Just do something
like this...
Hidee Ho
For lunkheads like me that might not understand that right away, here's what's happening... The
browser looks for arial. If it finds it, it uses it. If not, it goes on to helvetica. If it can't find that, it
looks for lucida sans. And if it can't find that it uses the default font.
What are some common fonts that are on *most* computers and are pretty safe bets?
Arial
Luc ida Conso le
Arial Black Comic Sans MS
Tahoma
Arial Narrow Courier New
Times New Roman
Bookman Old Georgia
Trebuchet MS
Style Impact
Verdana
Century Gothic
To see how various fonts might look through your browser, you might want to play with the
Simple Font Widget.
FAQ: Can I somehow embed a font or force a download of my font so my visitors automatically
get the font I'm using?
A: For all practical purposes... no. The only way that they will see the font you specify is if they
have that font on their system. There are some emerging web technologies that actually do
embed special fonts in a web page, but these are very rarely used, not very widely supported and
generally a pain in the butt. You can always offer a simple link to your font. Your visitors can
download & install it if they wish.
So, you want
to make a
Web Page!
Lesson
5
Now I guess is a good time to yap a bit about syntax. You'll notice here and there I use quotation
marks. They are important. Whenever you have an attribute="value", the value should really
be in quotes. It's a good habit to get into.
You have no idea how many times I made a page and it was all screwed up... I mean all screwed
up because of a single missing or misplaced quotation mark or a missing space or a missing
greater than (>) sign . Someday we may be separated from this kind of coding, but for now we
just have to be careful.
Also, regarding case, HTML is largely case INsensitive. You could just as well use 
instead of . However, for a couple reasons, one being it's easier, it's a fine idea to keep
everything lower case.
Alright, back to the fun stuff...
A handy way to make big or small text is the big tag and the small tag.
<body>
<big>Something</big> really cool
</body>
big bumps the text up one size, small bumps it down one size.
You can change the font color if you like.
<body>
Something really cool
</body>
We can, of course use more than one attribute in a tag...
<body>
Something really cool
</body>

Oh boy we're on a roll now!
<body bgcolor="#ccffcc">
Something really cool
</body>

feel the need to point out once again that multiple tags should be nested...
In most instances, it doesn't matter which tag is first. It's not like if you want to make something
red and bold you have to do one or the other first. You can do them in any order you want. Such
as...
The fastest way to confuse the browser, not to mention yourself is to overlap the tags...
(I couldn't think of a way to explain it so I hope the use of examples makes it clear.)
So, you want to
make a Web
Page!
Lesson 6
Another occasionally useful tag worth mentioning are section headings. While they're a little old
fashioned in today's very graphic web, they are still a handy little thing to have in your toolbox.
They come in sizes 1-6.
<h1>Something really cool</h1>



A useful heading attribute is align. It's fairly self-explanatory...
<h2 align="left">Something really cool</h2>

<h2 align="center">Something really cool</h2>
<h2 align="right">Something really cool</h2>

One more thing and we'll wrap up this lesson. The browser has default settings for text color, link
color, active link color and visited link color in addition to the background color. The defaults
are...
Background is usually
white
Text is usually black
Links are usually blue
Visited links are usually
purple
Active links are often
red
You can change these if you need to (notice I said need to). The whole world has gotten used to
links being blue. Why confuse us?
FAQ: What is an "active link"?
A: Let's back up a bit and let me give you a complete answer...
A regular link (normally blue) is a link to a page or file that you have not visited yet.
A visited link (normally purple) is a link to a page or file that you have visited recently.
An active link (sometimes red, sometimes purple... depending on the browser) is the color of a
link when it has focus, either by clicking on it or tabbing to it.
You can change these defaults for the entire document in the <body> tag.
<body bgcolor="#000000" text="#ffff66" link="#00ff33" vlink="#00bb33"

alink="#00ddff">
</body>
I know that we have not gotten into how to make links, so that information is not shown
above (why muddy the water?) This is simply to show you how to make the color changes
when you do learn how to make links.
You can see that the background is now black and the text is now yellow.
Links are now neon green
Visited links are darker green
And active links are sky blue
I've written a neat little HTML & JavaScript widget called Color Picker that makes it easy (and
kind of fun) to experiment with different color settings. With it, you can not only pick colors, but
you can choose different fonts and font sizes, switch to bold or italic, and even easily experiment
with different background images. The <body> tag is automagically generated for you.
There! You now know just about everything that has to do with manipulating the text in
your document. You can now make Big red letters or
small bold letters. You can use other Fonts, or monospaced fonts.
You could even make a r oll ercoast er!

Or a RAINBOW
(The markup for the roller coaster and the rainbow is here if you'd like to check it out.)
Before we wrap up this lesson, there's one little thing I want to bring to your attention. You can
view the HTML code of any page you happen to be viewing by choosing View/Document
Source in your browser. Your browser may word this a little differently, but nearly all browsers
have this facility. So, as you surf along and you run into a really neat page and you find yourself
thinking "How'd they do that?", the answer may be only a couple clicks away.
Tell you what... have some practice viewing source. View the source of this page and find the
secret message. (It's the same secret message that Ralphie decoded in A Christmas Story.)
So, you want to
make a Web Page!
Lesson 7
I think we'll continue by learning something about the way a browser works.
First an example...
<body>
like an icecube!
</body>
Something really cool like an icecube!

<body>
Hey!
What's
going
on
here??
</body>
Hey! What's going on here??
The browser doesn't recognize formatting. Unless you tell it otherwise, it just displays the
characters in a steady stream. If you want to start a new line you have to use a line break...
<body>
Hey! 
What's 
going 
on 
here??
</body>
Hey!
What's
going
on
here??
 basically says - start a new line.
Can you use to skip a line? Sure.
<body>
Hey! 
What's 
going 
 
on 
here??
</body>
Hey!
What's
going
on
here??
Skip lots of lines? You betcha.
<body>
Hey! 
What's 
going 
 
 
 
 
 
 
 
on 
here??
</body>
Hey!
What's
going
on
here??
So, you want to
make a Web
Page!
Lesson 8
Let's go back to our simple page.
<body>
</body>
This is the paragraph tag. Think of a paragraph as a block of text.
<body>
Something really cool
</body>
By itself it doesn't "do" much except act as a sort of a container. And with most browsers,
starting a new paragraph has the effect of skipping a line.
<body>
Something really cool
like an icecube
</body>
like an icecube
So, what else is this tag good for? Well, it's great for aligning stuff.
<body>
Something really cool
like an icecube
or a popsicle

Something really cool 
like an icecube 
or a popsicle

like an icecube 
or a popsicle

like an icecube 
or a popsicle
</body>
like an icecube
or a popsicle

like an icecube
or a popsicle

like an icecube
or a popsicle
like an icecube
or a popsicle
Another simple way to center stuff on your page is the <center> tag. Everything between the
center tags gets centered. Can't get simpler than that ;-)
<body>
<center>Something really cool</center>
</body>

So, you want to
make a Web
Page!
Lesson 9
Have a look at this...
<body>
</body>
The browser won't recognize more than 1 space. I know at first this might all seem pretty stupid
for it to be this way, but really, it's better like this. It gives you absolute control over the
document's appearance.
There is a nifty little code that means "space" to the browser:
Try this instead...
<body>
Something
really
cool
</body>

The & means we are beginning a special character, the ; means ending a special character, and
the letters in between are sort of an abbreviation for what it's for. There are quite a few of these
special characters. Here are five more. (Note: these should always be lower case.)
non-breaking space

< < less-than symbol
> > greater-than symbol
& & ampersand
" " quotation mark
You don't need to use them all the time, just when typing the real character would confuse the
browser. How do you know when that is? No hard and fast 'rule' that I can think of. It will just
come with a little practice and a few screw-ups. I will say this... the only ones you're really going
to need to remember are the non-breaking space (because it's the simplest way to add a few
spaces) and less-than & greater-than <> (because a stray one of those in your web page can
really cause you some grief).
By the way, some thoughts on mistakes & screw-ups. There are those that are of the opinion that
mistakes are bad. They are afraid to try anything new for fear of messing it up. Making the same
mistake over and over might be a little dumb, but especially while you are learning, don't be
afraid to screw everything all up. Mistakes are our friends :-) If you are not screwing something
up then you are not learning anything and probably not doing anything. Remember, messing
things up is a perfectly acceptable part of learning!
OK, enough babbling. There are other special characters too. You won't use them very often, but
when you do need one, it's good thing to know.
Let's go over the last couple points real quick because if you're at all like me, it will get
confusing. The browser will dispay your text in a steady stream unless you tell it otherwise with
line breaks, etc. It will reduce any empty areas to 1 space. If you want more spaces, you must use
the space code ( ). Here's a tidbit that we didn't cover... If you hit Return (or Enter) while
you are typing, most browsers will interpret that as a space... unless there is already a space
there.
One more quick example...
<body>
Something really cool like an icecube!
</body>
Something
really
cool
like
an
icecube!
Pretty clear?? I hope so. I gave it my best shot!

So, you want to
make a Web
Page!
Lesson
10
Let's get into putting images into a web page. We're going to use this one. Right click to save it
off this page. Save it as chef.gif to the same directory you previously saved page1.html.
You specify an image with the <img> tag...
<body>
<img>
</body>
We must also specify the source and the size.
<body>
<img src="chef.gif" width="130" height="101">
</body>
FAQ: How do I find out the width and height of an image?
A: Well, there are a couple different ways. One way is to load it in a graphics viewer. An
outstanding (and free) viewer that I use is Irfan View.
Another very popular graphics editor is Paint Shop Pro. It's is time limited shareware but it is one
fine editor. If you goYou'll find there an older version that I VERY highly recommend for
beginning web designers.
Another method is to use a text or html editor that imports the size when you insert the image. I
use NoteTab, and an image tag of my design is built for me when I simply drag the filename on
to the current file. I can insert an image in about 6 tenths of a second I told you NoteTab was
my favorite!
Let me make the point that not only does the source specify what image, it also specifies where is
the image. The above source, src="chef.gif", means that the browser will look for the image
named chef.gif in the same folder (or directory) as the html document itself. Below are a few
diagrams...
src="chef.gif" means that the image is in the

same folder as the html document that called for
it.
src="images/chef.gif" means that the image

is one folder down from the html document that
called for it. This can go on down as many
layers as necessary.
src="../chef.gif" means that the image is in

one folder up from the html document that
called for it.
src="../../chef.gif" means that the image
is two folders up from the html document that
called for it.
src="../images/chef.gif" means that the

image is one folder up and then another folder
down in the images directory.
src="../../../other/images/chef.gif"
I'm not even going to try and put this into
words. I hope you get the drift.
There is another way that this can be done. All references to images can have as their
source the complete URL. For example:
http://www.yourdomain.net/LottzaStuff/images/chef.gif
Why, you ask, does it make so much more sense to use relative (partial) URLs as opposed to
absolute (complete) URLs?? Because you can build your site locally and all the links will work.
When your pages are done, you just upload the whole pile to your server and everything will
work just fine. In addition, it is easier for the browser to get the images and your page will load
faster.
Is there ever a reason to use an absolute URL? Sure, if the image resides on a completely
different server.
FAQ: As soon as I upload my stuff to the Web, all my image links are broken. I used relative
URLs and I definitely uploaded them because I can see them there with my FTP program. What
gives?
A: Sounds like it could be a case problem. To a Windows based system, Chef.gif is the same as
CHEF.GIF is the same as chef.gif. Put that image on a (often) UNIX server and they become 3
distinct filenames. You're telling the server to look for Chef.gif, but all it can find is CHEF.GIF.
The fix? Always use lower case filenames. Make this a definite habit and you'll never get bit by
the case bug.
Another really good habit is to avoid spaces in your web filenames. Swap an underscore_ for any
spaces. Change My Mommy.gif to my_mommy.gif.
Have a look at Where are my images? for more on missing images.

So, you want to
make a Web
Page!
Lesson
11
Another <img> attribute that deserves mention is alt...
<img src="chef.gif" width="130" height="101" alt="My Chef">
alt is sort of a substitute for the image when the user is using a browser that isn't (for whatever
reason) displaying images. Someone may be using a text only browser, he may have image
loading turned off for speed or he may be using a screen reader (a browser where the web page is
read aloud). In those cases, that alt attribute could be very important to your visitor.
Something really neato you should know about images and their size.
Try this...
<body>
<img src="chef.gif">
</body>
As you can see, the browser figures out how big the image is all by itself. Why bother with
dimensions then? Because with dimensions, the browser can simply reserve a space for the
image, then load the rest of page. Once the entire page loads it can go back and fill in the images.
Without dimensions, when it runs into an image, the browser has to pause loading the page, load
the image, then continue loading the page. All in all, the browser functions much better with
image dimensions.
Well Joe, that's all well and good <yawn>, but what's the neato part??
Check this out...
<body>
</body>
<body>
</body>
You can specify whatever dimensions you want and override the proper dimensions. Still
foggy on the neato part?
Well, look at this little red dot --> It's a 1x1 square. Look what I can do with it though...
<body>
<img src="red_dot.gif" width="500" height="1">
</body>
Pretty nifty huh?

So, you want to
make a Web
Page!
Lesson 12
Let's learn about links.
It's really very simple. We'll make a link to Yahoo. Start with this...
<body>
Go to Yahoo!
</body>
Go to Yahoo!
Then add a pair of anchor tags.
<body>
Go to <a>Yahoo!</a>
</body>
Go to Yahoo!
Add the URL and you're done! URL stands for Uniform Resource Locator. That's a big fancy
phrase that the computer people came up with. They tend to do that a lot. A URL is just an
address on the web. You specify it like so: href="url". And since Yahoo's URL is
http://www.yahoo.com/ our link ends up like so...
<body>
Go to <a href="http://www.yahoo.com/">Yahoo!</a>
</body>
Go to Yahoo!
Let's do one more.
<body>
Go to CNN
</body>
Go to CNN
<body>
Go to <a href="http://www.cnn.com/">CNN</a>
</body>
Go to CNN
So, you want to make
a Web Page!
Lesson 13
An email link works in much the same way. We just use mailto: and an email address instead of
a page address.
<body>
Send me <a href="mailto:forrest@bubbagump.com">Mail!</a>
</body>
Send me Mail!
FAQ: How can I specify a Subject for my email message?
A: Very easily, but there's a catch. You can add a subject to the link as follows...
<a href="mailto:forrest@bubbagump.com?subject=Hey Bubba!">
... but, be advised that floating around out there is the occasional email client that doesn't know
what to do with that subject. For those people, the email may appear to be sent, but in reality it
may simply disappear into oblivion. If this rare glitch is a concern to you, then don't specify a
subject.
FAQ: How can I get rid of the underline in my links?
A: Well, technically that can't be done with HTML. But, it can using Style Sheets. If you put the
following between the <head> tags of your document, the browser should render all the links on
a page without an underline...
<style type="text/css">
a:link, a:visited, a:active {text-decoration:none}
</style>
That's just dandy, but what if I just want to get rid of the underline on only one or two links?
You can use a style suggestion within the link itself...
<a href="mailto:forrest@bubbagump.com"
style="text-decoration:none">Mail!</a>
You'll find much more on Style Sheets (or CSS... Cascading Style Sheets) in CSS Tutor. But
that's for another day. Remember, walk before run ;-)
We can make an image a link if we want. Using the "Go to CNN" example, we simply substitute
an <img> tag for the word CNN.
<body>
Go to <a href="http://www.cnn.com/"><img src="chef.gif"
width="130" height="101"></a>
</body>
Go to
FAQ: How do you get rid of that ugly blue border around an image link?
A: Simple... add border="0" to the <img> tag. (See below.)
<body>
Go to <a href="http://www.cnn.com/"><img src="chef.gif"
width="130" height="101" border="0"></a>
</body>
Go to
So, you want to
make a Web
Page!
Lesson
14
<a href="http://media.fastclick.net/w/click.here?sid=3157&m=3&c=4313"
target="_top"><img
src="http://media.fastclick.net/w/get.media?t=s&sid=3157&m=3&tp=3&f=b&v=1.4&c=4313&r
=&d=n" width=120 height=600 border=0 ></a> <a
href="http://media.fastclick.net/w/click.here?sid=3157&m=3&c=6463"
target="_top"><img
src="http://media.fastclick.net/w/get.media?t=s&sid=3157&m=3&tp=3&f=b
&v=1.4&c=6463&r=http%3A//www.pagetutor.com/html_tutor/lesson13.html&a
mp;d=n" width=120 height=600 border=0 ></a>
FAQ: How do I link to a _____ file so people can download it?
A: Simple, just link to it. Let's suppose you have a few Microsoft Word documents that you
would like to offer. Just link to them...
<a href="myresume.doc">Download my resume</a> 

<a href="mybio.doc">Download my autobiography</a>
Download my resume
Download my autobiography
You may wonder how to be sure the file gets saved to disk rather than being displayed or loaded
or whatever. In short you have little control over what happens when a user downloads a file.
Most people know how to right click and Save To Disk. Others may have a plugin to handle the
file. Just let people manage that part by themselves. Your job is simply to offer it for download.
FAQ: How do I make a link open in a new browser window?
A: Well, first of all, this can be done easily by your visitor if he wishes. All he has to do is right
click on the link and choose "Open In New Window".
If we figure that you want to force this action for whatever reason, you can add target="_blank"
to the link...
Go to <a href="http://www.cnn.com/" target="_blank">CNN</a>
There's more on targets in Frames Tutor.
One more note about links... It is perfectly acceptable to link to someone's web page(s)
without asking. Links are what makes the Web the Web. Again, because this is a very common
newbie misconception... if you want to link to another web page... just link to it. You don't have
to ask permission, even if you really really feel like asking would just be the polite thing to do...
it's just not necessary. Now, that said, it's NOT a good idea to link to someone else's media... such
as images, movies or sounds.
Now that you've learned how to make links, I'm going to tell you about one of my pet peeves. I
hate searching for information on widgets and all I get are pages with 14 dozen LINKS to widget
sites and nothing else. I follow some of those links and I get MORE LINKS to more widget link
sites... but never any friggin widgets!
If you're making a web site, of course include links if you think it adds value, but try to refrain
from having a site that consists of nothing more than a bunch of links... especially links that link
to even more links!
So, you want to
make a Web
Page!
Lesson 15
Before we go on, we need to go over something. When you include images on your page,
remember that they contain a lot of data and therefore can be slow to load. One way to reduce the
size (by size I mean Kb) is to reduce the dimensions. Cutting the length and width in half can
result in an image only 1/4 the size in Kb. Also you can reduce the number of colors. For
example:
Dimensions 310 x 304

# of colors- 238
Size - 69 Kb
Dimensions 207 x 203 Dimensions 207 x 203
# of colors- 238 # of colors- 48
Size- 34 Kb Size - 19 Kb
All image editing was done with Paint Shop Pro 3.

(This older, non time limited version is still available. Even though it's older and not as
fancy as the latest version, it's a GREAT graphics editor - PERFECT for new web authors.)
Now granted, the first one is a larger, nicer and better quality picture, but think of it this way... if
your page takes forever to load, your visitors may leave and they won't see anything.
I suppose that these days, with cheap bandwidth and so many folks hooked up to broadband
internet connections, watching your image sizes seems unimportant... but I'd argue it's still a
good thing to keep a handle on. All things being equal, you are better off with a trim and quickly
loading site rather than one that's needlessly bogged down with a bunch of overly bloated
images.
If you like playing with online toys, and just to see how much images can be reduced, try
GIFWorks...
GifWorks is a really nifty online GIF editor and optimizer. You don't need to download a thing.
You can send it an image and optimization is just one of the many things it can do. While you're
there, you can check out their other neat tools or browse their vast image collection. Go ahead
and give it a whirl.
FAQ: What should I use for my pages... GIF or JPG?
A: Good question. The short answer is... use a JPG for photographs or images with a lot of
blends or gradients, and use a GIF for simple or line drawn type images that contain relatively
few colors. A more throrough answer is given in GIF or JPG?
And for a couple more interesting image related pages, have a look at GIF Compression
Explained and Image Compression Examples.
So, you want to
make a Web
Page!
Lesson
16
Another option that can be used if you want to offer a lot of imagery is to provide thumbnails
that link to larger versions of the image. Let's suppose that I want to offer three very nice pictures
of let's say a few of my cars (I wish).
Click on the thumbnail to see a larger image
The first thing you need to do is fire up your image editor and make smaller versions of your
images. This bit about making a smaller version is very important. I have seen many instances of
someone trying to make a thumbnail by simply reducing its dimensions in the <img> tag. All this
does is cram the full image into a smaller space. What you need to do is create a smaller copy of
the image and use that as a link to the big image.
Let's do one. I think we'll use the Corvette (that's the blue one if there's anyone out there that for
some silly reason doesn't know). Put the full sized image and the small image in your working
folder. Once again... right-click & Save Picture As (or something similar).
Start with an <img> tag using the smaller image.
<body>
<img src="car2-sm.gif" width="90" height="62">
</body>
Add your <a> tags.
<body>
<a><img src="car2-sm.gif" width="90" height="62"></a>
</body>
Then add the URL of the big picture and bingo, you're done!
<body>
<a href="car2.jpg"><img src="car2-sm.gif" width="90" height="62"></a>
</body>
You can, if you'd like, get rid of the blue border. Or, you may wish to keep it so that your viewers
know that it is a link. It's up to you.
<body>
<a href="car2.jpg"><img src="car2-sm.gif" width="90" height="62"
border="0"></a>
</body>
So, you want to
make a Web
Page!
Lesson
17
FAQ: My image links have these little blue dashes next to them. Also I keep getting spaces
between them and I want them to be flush up against each other. I don't understand... it works
right in Browser B.
A: Most browsers interpret a carriage return between images as a space. A few browsers don't.
It's that simple. The little blue dash (seen in some browsers) is simply the link underlining an
empty space. The cure is to eliminate carriage returns right before or right after the image.
This is the markup for the above images:

<a href="myhome.html">
<img src="myhome.gif"
width="66" height="23"
border="0" alt="Home">
</a>
<a href="mailto:me@my.house">
<img src="myemail.gif"
border="0" alt="Email">
</a>
<a href="mylinks.html">
<img src="mylinks.gif"
border="0" alt="Links">
</a>

If we were to change it to this we would eliminate the little blue dashes:

<a href="myhome.html"><img
src="myhome.gif"
border="0" alt="Home"></a>
<a href="mailto:me@my.house"><img
src="myemail.gif"
border="0" alt="Email"></a>
<a href="mylinks.html"><img
src="mylinks.gif"
border="0" alt="Links"></a>

Another adjustment and the spaces disappear too:

<a href="myhome.html"><img
src="myhome.gif"
border="0" alt="Home"></a><a
href="mailto:me@my.house"><img
src="myemail.gif"
border="0" alt="Email"></a><a
href="mylinks.html"><img
src="mylinks.gif"
border="0" alt="Links"></a>

Take the time to understand what's going on in the above examples.
Is this a pain in the butt? Only if you don't understand what's happening and how to fix it. Is
Browser A a crappy browser? Not necessarily, it's just different than Browser B. Browsers
sometimes do different things with the same markup.
Another way to link is to link not just to a page, but to a specific part of a page. Click here to be
magically transported to where we first talked about URLs. Since it would be kind of hard to
have you build an example, I'll just do the best I can to explain how it's done.
First start with the spot you want people to be transported to. Pick a word and wrap it in the <a>
tags.
<a>Add</a> the URL and you're done!
Next give that spot a name...
<a name="upabit">Add</a> the URL and you're done!
What you have done is marked that spot. Now that spot can be referenced and linked to.
Start building the link...
Click <a>here</a> to be magically transported...
Add the URL of the document to be referenced...
Click <a href="lesson12.html">here</a> to be magically transported...
And lastly, add the anchor name like so...
Click <a href="lesson12.html#upabit">here</a> to be magically transported...
And that's all there is to it! Not exactly brain surgery is it??
So, you want to
make a Web Page!
Lesson 18
We've covered a lot so far... text & font manipulation, images, links. As far as the basics go,
there's not a whole heck of a lot more.
I think I'm going to take this time to tell you about screen resolution. Most people use a screen
resolution of 800x600. That means that the screen is divided into 800 pixels (dots) horizontally
and 480 pixels vertically. A few people use 640x480, some use 1024x768 and some even use an
even higher resolution.
Using a bit of javascript in this page I can detect YOUR current screen resolution...
Your current screen resolution:
1024 × 7681024
× 768 Javascript is disabled in this browser.
Cannot detect screen resolution

What does this have to do with anything? It has a lot to do with how your pages will look to
different visitors. Here are a couple screen shots of my old homepage at different resolutions.
640×480 800×600 1024×768
It is a very good idea to check your page at other resolutions. Your carefully crafted layout might
fall apart at other resolutions. Especially if you design your page at a higher resolution. View
your creation at a lower res and you might be surprised.
If you're not sure how to change your screen resolution I've written a few instructions here.
What resolution to design for is an ongoing debate. The ideal is not to design for ANY particular
resolution at all. Ideally your pages should be presentable at all resolutions. Since idealistically
this is possible and realistically it's a little harder, a nice compromise is to design for a minimum
horizontal resolution of about 560, then test your layout at a few different resolutions.
While this is a fine compromise, it's still not enough for some folks. Some are content in the
knowledge that since "most" people run at 800x600, that's what they will design for. Just be
careful if you're page layout is as fragile as a house of cards. The more you fiddle with exact
layout, quite often the less dependable that layout will be. Your finely crafted page may fall apart
for more people than you realize. Web page layout is not an exact thing even under the best of
circumstances... keep it loose, keep if flexible, test your pages with a couple browsers and at a
few resolutions.
Now we are going to look at a couple formatting tools available to you. First one is
<blockquote>. In most browsers it pulls your margins in from both sides. (I don't know if that's
the proper terminology but if you understand what I mean I guess it's close enough).
<body>
<blockquote>
WE THE PEOPLE of the United States, in order to form a more perfect
Union, establish Justice, insure domestic Tranquility, provide for the
common defense, promote the general Welfare, and secure the Blessings
of Liberty to ourselves and our Posterity, do ordain and establish this
Constitution for the United States of America.
</blockquote>
</body>
WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice,
insure domestic Tranquility, provide for the common defense, promote the general Welfare, and
secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this
Constitution for the United States of America.
I'm sure when <blockquote> was first devised it had a loftier

purpose, such as quoting profound bits of prose from authors I've never even heard of. But here
in the trenches it serves a more mundane purpose... easy indenting.
It's also important to note that although most browsers render blockquoted text by indenting it,
that's not specifically what it's designed to do. It's conceivable that some future browser may
render blockquoted text in some other way (such as red italics). That said however, for the
forseeable future, it is perfectly safe to indent blocks of text with <blockquote>.
So, you want to
make a Web
Page!
Lesson
19
Another very useful little tool is a list. There are ordered lists and unordered lists.
This is an ordered list: This is an unordered list:
1. something big • something red

2. something small • something blue
3. something short • something old
4. something tall • something new
First, we will build an unordered list. It's mind-numbingly simple... really.
Start with this...
<body>
What I want for Christmas
</body>
(Technically we have not started to build the list yet. This is just a sort of heading.)
Add a pair of unordered list tags.
<body>
<ul>
</ul>
</body>
Add a list item.
<body>
<ul>
<li>a big red truck
</ul>
</body>
• a big red truck
Add a few more...
<body>
<ul>
<li>a big red truck
<li>a real fast speedboat
<li>a drum set
<li>a BB gun
<li>a Melanie Griffith
</ul>
</body>
• a big red truck

• a real fast speedboat
• a drum set
• a BB gun
• a Melanie Griffith
Bingo! You made a list!
How to make an ordered list? Easy! Change the <ul> tag to <ol>.
<body>
<ol>
<li>a big red truck
<li>a drum set
<li>a BB gun
</ol>
</body>
1. a big red truck

2. a real fast speedboat
3. a drum set
4. a BB gun
5. a Melanie Griffith
And you thought HTML was hard.

So, you want to
make a Web
Page!
Lesson 20
We can change the type of an ordered list...
<body>
<ol type="A">
<li>a big red truck
<li>a drum set
<li>a BB gun
</ol>
</body>
A. a big red truck

B. a real fast speedboat
C. a drum set
D. a BB gun
E. a Melanie Griffith
And we can change the type in an unordered list...
<body>
<ul type="circle">
<li>a big red truck
<li>a drum set
<li>a BB gun
</ul>
</body>
o a big red truck

o a real fast speedboat
o a drum set
o a BB gun
o a Melanie Griffith
The following list types are available...
<ol> Ordered List <ul> Unordered List
type="1" - numeric: 1,2,3,4... • type="disc" (default)

(default)
type="a" - lower alpha: a,b,c,d... o type="circle"
type="A" - upper alpha: A,B,C,D...
type="i" - lower roman: i,ii,iii,iv...  type="square"
type="I" - upper roman: I,II,III,IV...
One more example before we move on. Note that lists can also be nested...
<ol>
<li>Fruits
<ul>
<li>apples
<li>oranges
<li>bananas
</ul>
<li>Nuts
<ul>
<li>peanuts
<li>macadamia
</ul>
<li>Vegetables
<ul>
<li>cucumbers
<li>peppers
<li>lettuce
</ul>
</ol>
1. Fruits
o apples
o oranges
o bananas
2. Nuts
o peanuts
o macadamia
3. Vegetables
o cucumbers
o peppers
o lettuce
So, you want to
make a Web Page!
Lesson 21
Another type of list is a definition list.
aardvark
A burrowing, ant-eating African mammal. And, as everyone knows, the first word in
every self-respecting dictionary. (Did you know there is such a thing as an aardwolf?)
Start with this...
<body>
<dl>
</dl>
</body>
Then add a definition title...
<body>
<dl>
<dt>10th Amendment
</dl>
</body>
10th Amendment
And then the definition...
<body>
<dl>
<dt>10th Amendment
<dd>The powers not delegated to the United States by the
Constitution, nor prohibited by it to the States, are
reserved to the States respectively, or to the people.
</dl>
</body>
10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to
the States, are reserved to the States respectively, or to the people.
As a finishing touch I like to make the definition title bold. It's not required, but I think it looks
much better that way.
<body>
<dl>
<dt>10th Amendment
<dd>The powers not delegated to the United States by the
Constitution, nor prohibited by it to the States, are
reserved to the States respectively, or to the people.
</dl>
</body>
10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to
the States, are reserved to the States respectively, or to the people.
So, you want to
make a Web
Page!
Lesson 22
Another little widget that you will find yourself using a lot is the Horizontal Rule.
<body>
<hr>
</body>
We have a few options available to us...
<body>
<hr width="20%">
<hr width="50%">
<hr width="100%">
<hr width="20">
<hr width="50">
<hr width="100">
</body>
Be careful with large absolute widths, such as width="1000". If your visitor is running a screen
resolution of 1024x768 or greater, a <hr> width of 1000 is no problem. But if he's running at a
lesser resolution (such as 800x600... which many folks do) your horizontal rule will run off the
right side of the screen. If you wish to alter the default length of a horizontal rule, best use a
percentage value.
This attribute is pretty self-explanatory.
<body>
<hr width="60%" align="left">
<hr width="60%" align="right">
<hr width="60%" align="center">
</body>
We can control the thickness of the line...
<body>
<hr width="60%" size="1">
</body>
And we can make it a solid line.
<body>
<hr width="60%" size="1" noshade>
</body>
You can also color horizontal rules. (Although not included in any official HTML specification,
the color attribute in a <hr> is supported by most common browsers.)
<body>
<hr width="60%" size="1" noshade color="#ff9900">
<hr width="60%" size="3" noshade color="#99ff00">
<hr width="60%" size="8" noshade color="#9900ff">
<hr width="60%" size="15" noshade color="#ff0099">
</body>
You'll notice the result is a solid color... as if a colored noshade. This is fairly consistent across
the the browsers that support it. If you're going to use the color attribute, you might want to leave
the noshade in there. That way the occasional browser that doesn't support color will just default
to the grayish color.
So, you want to

make a Web Page!
Lesson 23
Remember when I said that the browser doesn't understand formatting, it just displays text in a
steady stream? Kind of like this...
<body>
///\\___
(@ @)
+----oOO----(_)-----------+
| BARRY GOLDWATER |
| for |
| President |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</body>
///\\___ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President |

+-----------------oOO-----+ |__|__| || || ooO Ooo
Well, with the <pre> (preformat) tag, we can put a stop to that and have things displayed the way
we type them.
<body>
<pre>
///\\___
(@ @)
+----oOO----(_)-----------+
| BARRY GOLDWATER |
| for |
| President |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</pre>
</body>
///\\___
(@ @)
+----oOO----(_)-----------+
| BARRY GOLDWATER |
| for |
| President |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
Notice that a monospaced font is used.
The last tag we're going to discuss is a comment.
<body>

This is not.
A comment can be placed anywhere in the document and the browser
will ignore everything inside the brackets. You can insert hidden
messages,  notes to yourself,  or
write a helpful message to someone looking at the source of your
page.
</body>
This is not. A comment can be placed anywhere in the document and the browser will ignore
everything inside the brackets. You can insert hidden messages, notes to yourself, or write a
helpful message to someone looking at the source of your page.
Just to be absolutely clear, the comment must start with 
You can (usually) even put other html tags in a comment and they will be ignored. The browser
will just keep ignoring everything until it sees a -->
So, you want to
make a Web
Page!
Lesson
24
If you've ever looked at a busy city street... cars flying this way and that... people walking around
and crossing those streets... it's almost a wonder that they all don't just crash into each other. The
reason they don't (or don't very often) is because of standards... otherwise known as traffic laws.
Well, HTML is much the same way. Over the years, standards have developed that, while not
"laws", are guidelines for HTML structure and well formed web pages so that things work as
expected. The current HTML standard (or specification) is HTML 4.01. There are three
variations of this standard...
• HTML 4.01 Transitional

• HTML 4.01 Frameset
• HTML 4.01 Strict
The flavor of HTML that we have been learning here is HTML 4.01 Transitional. It's a less
strict HTML specification that allows more traditional markup. Not to mention it's a whole lot
easier for beginners to learn.
HTML 4.01 Frameset is the specification that deals with framed pages and we'll get into that in
Frames Tutor.
HTML 4.01 Strict seeks to completely separate presentational markup (colors, fonts, borders,
alignment, etc.) from structural markup (paragraphs, lists, line breaks, tables, etc). This is
accomplished using somewhat limited and rigid HTML markup for the document structure, and
CSS (Cascading Style Sheets) for presentational items.
Ok Joe, that's all well and good, but what does that have to do with the HTML I'm learning
today?
Good question. It's a perfect introduction to learning about Document Type Declarations and
Validation.
Here's a simple HTML document...
<html>
<head>
</head>
<body>
Hello Joe!
</body>
</html>
Now add a DocType declaration at the very top...

<html>
<head>
</head>
<body>
Hello Joe!
</body>
</html>
This is the Document Type declaration for HTML 4.01 Transitional. It has two purposes.
One, to tell web browsers or other "user agents" which specification the document is using. (That
said, for nearly all normal web browsing, browsers can easily do without it and process your
HTML in a perfectly proper manner.)
And two, more importantly, it helps with validation.
A HTML validator is nothing more than a software program that scans your HTML markup
looking for errors. In order to work properly, you must first tell the validator which specification
you wish to conform to. In our document above, we are telling the validator to check our
document against the HTML 4.01 Traditional specification.
The next thing you need is a validator. The most popular validator can be found at web site of the
World Wide Web Consortium... the folks that write the specifications.
To validate your HTML, first open validator.w3.org in another browser window. You'll find
three options for input. Find the section labeled "Validate by Direct Input". Now copy the HTML
code above into that box and click the Check button. The result should be valid HTML 4.01
Transitional.
Now, let's play a little. We'll deliberately create an error in the HTML document. We'll wrap
"Hello Joe!" in two closing bold tags...

<html>
<head>
</head>
<body>
Hello Joe!
</body>
</html>
Now copy and paste this altered HTML doc into the validator and check it. You'll note it tells us
that there are errors. You can see how such validation can be quite useful.
I suppose I should be very clear here... a validator ONLY checks for structurally correct HTML
and proper attributes against a particular specification. It doesn't check for broken links, it
doesn't assure that your page will look good at all resolutions, it doesn't make sure your images
can be found and it doesn't make sure that you don't use dark blue text on a black background.
Think of a validator as an inspector that certifies your automobile has 4 wheels and doors that
open, but has no control over how you drive...
So, you want to

make a Web
Page!
Lesson 25
Well, that about does it! You now know all the tags you'll need to create a basic web page! Aren't
there more tags? Oh yeah. Lots more. But rest assured you've got most of the basic weaponry
you'll need. After you tinker with these main tags awhile, you may want to look at some of my
other slightly more advanced tutorials: Table Tutor, Form Tutor and Frames Tutor. They will
give you a few more really neat things to have in your bag of web publishing tricks. Beyond that,
there are quite a few redundant tags, that is tags that in theory have a specialized use, but in
practice, duplicate more common tags presented here. There are a few outdated tags, and a few
that have such a limited use, it wasn't even worth it to go over them.
As I noted earlier, there is a push to separate structural markup (paragraphs, lists, tables etc)
from presentational markup (colors, fonts etc.). This can be a very powerful thing from a web
designer's point of view and can also go a long way towards making your content even more
accessible as people begin to access the internet in ever expanding ways.
An important component of this separation is CSS (Cascading Style Sheets). And while a
knowledge of CSS is not at all necessary for making web pages, it is a related area where you
definitely might wish to further your studies. Eventually, using both your HTML skills and your
knowledge of CSS, you may wish dig into the strict version of HTML 4.
One of the neatest things you can do with a web page is to make it DO stuff. You can
investigate the wonderful world of JavaScript and learn to write mini programs that you can
insert in your pages. It's a little bit more complex than HTML, but I've written JavaScript Tutor,
and that will give you a solid start on some of the basics. In addition there are dozens of "copy-n-
paste" javascript sites that offer code for the taking.
I mentioned at the beginning of this tutorial some of my thoughts on HTML editors. In my

opinion the best editors to use are not the big clunky wizard types. You know, the ones that say
you don't need to know a lick of HTML to author a page. The problem is, a large number of the
pages I see that have been put together with these programs look as if the author didn't know a
lick of HTML. Not only that, if a problem arises, a person with a basic knowledge of HTML is
going to solve that problem a heck of a lot faster than a person who has been leaning on one of
those page maulers.
Most experienced authors use some sort of text-based editors. What these editors do is pop in a
set of tags for you with a simple click. They make it so you don't have to manually type in color
codes, left, right, center or whatever. You have absolute control over your page design. I once
heard the phrase "text editor on steroids" to describe one. That's about what they are. What do I
use? I use NoteTab Pro, not only for web authoring, but for almost EVERYTHING than has
anything to do with text of any sort. Its "Clipbook" makes it truly an amazing application.
Anyhow, once you have made your pages you will need to upload them to a server. The server is
a computer that is running a server program that doles out documents to whoever requests them.
For a little bit of guidance on putting your pages on the Web, have a look at Uploading Your
Pages.
And before I go, I must say something about web page style and content. Better yet, I think I'll
defer to Jeffrey Glover's Top 10 ways to tell if you have a sucky homepage.
Good luck and happy HTML'ing!
There is still one more lesson that has some further recommended reading, links and info...
Netscape's (web
safe) 216 colors
Just a quick note: The topics covered below are not exceptionally important to making modern web pages. A
perfectly good web page can be made without ever learning about this stuff. It is just a little sidetrack that you might
say is for somewhat "advanced" HTML students. If you are just learning HTML authoring, I would recommend
going back to the tutorial and not cluttering your head with this stuff. Believe me, you have plenty to learn as it is.
Once you have a few basic skills under your belt, you can come back here and learn about some of the "finer
points".
In addition, nowadays, most people are running their computers using thousands or millions of colors. Color issues
that were relevant several years ago are almost non-existant today. Still, the following piece will give you useful
knowledge on the topic of colors... knowledge that might be useful in a variety of applications.
And lastly, all these references to "Netscape" are a little dated. Back in the day, Netscape Navigator was THE
web browser. Internet Explorer was an amusing "also ran" trying madly to catch up. My how things have changed ;-)
Have you ever been surfing along and noticed that some images look pretty crappy? Like all full
of speckles? If so, then you have fallen victim to the CLUT. (Keep in mind this was written in
1996. Unless you're using a VERY old box, you probably haven't seen any "speckles". That said,
read on.)
Now, before I go any further, let me warn you that I'm really not all that much of a computer
geek, so I can only explain things as I understand them. That means I know what I'm talking
about... most of the time. That said, let me try to tell you about the how's and why's of computer
displays and colors... as I understand it.
* * *
Most computers can run in one of 3 (maybe more) color modes...
1. 256 Color
2. High Color (64,000 colors)
3. and True Color (16.7 million colors)
If you are in true color mode your computer is configured to display up to 16.7 million distinct
colors. That gives you a couple million shades of red alone. It's kind of nice because feathered
edges look feathered, photographs look fantastic and nice backgrounds actually look nice!
There is a price to pay however. Your poor computer has to work extra hard trying to display
everything. Consequently things tend to work a little slower and often a little jerkier. But I gotta
admit, images look very good.
If you want to give your processor a bit of a break, you can set your computer to display
64,000 colors rather than 16.7 million. This is the high color mode. Although there is a huge
difference between 16.7 million and 64,000 to your computer, the difference is hardly noticeable
to your average run-of-the-mill human. You get nice looking images, nicely feathered edges and
there's not much in the way of jerkiness or slowness in your display.
Now if your like me, and super high image quality takes a back seat to speed, and you want your
display to take up as little resources as possible, or if you have an older computer, you putz
around in 256 color mode. All this means is your computer says "Listen, I know that there are
16.7 million colors. But what I'm going to do is only use 256 at a time. If I have to display an
image that technically has 80,000 colors in it, I'm just going to try and find the closest 256 colors
and just use them. Deal with it."
Now let's take that one step further. Let's suppose your computer is in 256 color mode and you're
running Netscape. Netscape says, "I am taking over your colors. Since you only have 256 colors
to play with, I am assigning a permanent value to 216 of them. The remaining 40 can be used any
way you want." The end result is Netscape dithers all images to those 216 colors.
Dithering is when your computer takes a couple colors it has and tries to blend them to make a color
Why does it do this?? Let's suppose you have a web page with two pictures on it. One picture
contains 150 distinct colors. The second picture contains another 150 distinct colors. If you
display them together then all of a sudden your computer has to deal with 300 separate colors,
not to mention the colors for your taskbar and buttons, etc. This throws a serious monkeywrench
into the 256 color idea. So what Netscape does is say "Here are the 216 colors we will use for
ALL images. Everything gets dithered to these colors."
Netscape's 216 colors
This group of colors is called a CLUT. As far as I know, all browsers have one. However, I don't
know if all browsers use the same colors in their clut, or how colors and cluts and such work on
operating systems other than Windows. (Hey, I warned you that I didn't know everything)
About Netscape's Colors (part 2) >>

Netscape's (web
safe) 216 colors -
part 2
Gradient 1 - 1021 Gradient 2 - 66
colors colors
If both of the above images look about the same, then you are running a 256 color display and
Netscape is dithering the image on the left to it's 216 colors. If the image on the left looks
smooth but the image on the right looks all speckled, then you are running a high or true color
display. The image on the left is a few simple gradients, saved in a low compression jpg format.
In true color mode the gradient is very smooth and in high color mode it is still quite smooth
(although the number of distinct colors falls to 419). The image on the right is a screen capture of
the left image through 256 color mode.
I know its tempting to say phooey on anyone using only 256 colors, but keep in mind that a lot of
people do just that. If your image is a photograph in jpg format there's not too much you can do.
Photographs are simply going to look a little worse to those running 256 colors.
Photo 1 - 20186 colors Photo 2 - 61 colors
Once again, if the images look about the same then you are in 256 color mode. If the image on
the left looks significantly better than the image on the right then you are in high or true color
mode. If this is the case then the image on the right is how people running 256 colors will see
your picture. But, like I said, with photographs, there's not a whole heck of a lot you can do.
It's a very similar situation using gif images. Even though a gif image can only contain 256
colors, if they are not Netscape's colors, the image will get dithered... ...except when you view a
single image through the browser. By that I mean not an image in a web page, but viewing the
image directly. As an exercise, right click on the image Ball 1 and choose View Image (Netscape
only). What you will then see is the browser displaying the image directly and not by way of a
web page. Since the browser knows that no other image will be coming down the pike, it will
relax it's 216 color rule and allow your computer to display whatever 256 colors it wants to.
Ball 1 - 232 colors Ball 2 - 62 colors
One area where we can make a difference, is in drawings. Anything that doesn't contain a lot of
gradients. Below are a couple of good examples.
Flag 1 - 18 colors Flag 2 - 28 colors Flag 3 - 9 colors

Button 1 Button 2 Button 3
18 colors 12 colors 5 colors
We have Image 1 and Image 2 just like the ones before. (depending on your browser and it's
configuration). But now we have this third image. The third one should look just fine to
everyone. It is nice and smooth even at 256 colors.
Netscape's (web
safe) 216 colors -
part 3
I did this by using a Netscape pallet in my graphics editor. You can do this too. If you load this
image...
...into most any graphics editor you can make a color pallet from it. (Consult your graphic
editor's instructions if you don't know how to do this). Then you're ready to go! You can import
an existing picture and substitute the closest Netscape color for all the colors in the image. As
you can see from the images above, the results are well worth the two minutes (at most) it takes
to do this. If you are starting a new image, you can start with the Netscape colors. If your major
areas are already done in Netscape's colors, and if you switch to 16.7 million colors for some
further editing, when you go to substitute Netscape's colors back in, your image will look pretty
much the way you intended. Plus it will look that way to everyone.
I have to say again... with nearly all modern computers displaying millions of colors with ease, it's really not
necessary to force your images into this color palette. You'll probably do more harm than good. But by all means, if
you have gotten this far, keep reading. The information below is still quite useful and will add to your understanding
of web colors.
If you want to delve a little further into Netscape's browser clut, here's how they came up with
the 216 colors. In our everyday life we use a decimal (base 10) number system. We use the
following numbers...
0-1-2-3-4-5-6-7-8-9
Somewhere along the line, computer people decided that certain things would be easier to do if
they used a hexidecimal (base 16) number system...
0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F
Since we don't have a unique symbol for 10, 11, 12 etc, we use letters to represent those values.
Below are both number systems counting to our 50...
dec: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
hex: 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14
dec: 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
hex: 15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 21 22 23 24 25
dec: 38 39 40 41 42 43 44 45 46 47 48 49 50
hex: 26 27 28 29 2A 2B 2C 2D 2E 2F 30 31 32
So when someone talks about a "hex code" or "hexadecimal number" or if you see cryptic color
codes like 09EC0A, CCFFCC, 00AACC, etc., this is what they're talking about and where it
comes from. Taking it a little further, your computer understands colors in terms of red, green
and blue values...
RED - GREEN - BLUE
or
R-G-B
Each of those can have a value from 0 to 255. 0 being the absence of color, 255 being full color.
Using that scale, we get the following values...
RED = 255-0-0
GREEN = 0-255-0
BLUE = 0-0-255
BLACK = 0-0-0
WHITE = 255-255-255
Since we have 3 colors, each with a value that can range from 0 to 255 we have 16,777,216
possible color combinations (256 × 256 × 256). So, that's how we get 16.7 million colors.
If we replace the decimal number with it's hexadecimal equivalent we start to get something that
looks a little more like those "hex codes".
RED = FF-0-0
GREEN = 0-FF-0
BLUE = 0-0-FF
BLACK = 0-0-0
WHITE = FF-FF-FF
If we then use 00 for 0, and 01 for 1, etc., and if we get rid of the dashes(-), we then got
ourselves some genuwine color codes!
RED = FF0000
GREEN = 00FF00
BLUE = 0000FF
BLACK = 000000
WHITE = FFFFFF
Now, how did Netscape go about choosing which colors to use? Rather than using 256
values for each of the three colors, they only use 6. Namely 0, 51, 102, 153, 204 and 255. If we
translate those numbers into their hexadecimal equivalents we get 00, 33, 66, 99, CC and FF.
Since that is six different values for each of 3 colors, there are 216 possible color combinations
(6 × 6 × 6).
If you go back to the color chart you saw before, you'll see a rendering of all these color
combinations.
One last item. If a person is running a 256 color display and you have chosen a background color
that is something other than one of Netscape's 216, then there is a very good chance that
Netscape will instead pick the closest match from it's own colors. Sometimes this is not a good
thing. I have seen pages where this left the text almost unreadable. Once again, I know it may be
tempting to say 'too bad' to those of us in 256 color land. But...as I said before, there are a lot of
us. And if your goal is to design smart looking web pages, then you might want to consider
spending the extra couple minutes to fine tune your graphics so you look good to everyone.
"And that's all I have to say about that." - Forrest Gump

HTML Lessons

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Lessons

Hochgeladen von

Copyright:

Verfügbare Formate

So, you want to make a

Index & Quick

Basic Document Structure Basic Text Formatting

With HTML 4.01 Transitional DocType:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Make text bold: <b>Sample</b>

Make text italics: <i>Sample</i>

Make text underlined: <u>Sample</u>

Monospaced text: <tt>Sample</tt>

Change font size (sizes:1-7): <font

Change the font name (face): <font face="fontname1,fontname2,etc">Sample</font>

Change the font color: <font color="#0000ff">Sample</font>

Make text one size bigger: <big>Sample</big>

So, you want to make a Web Page! - Lesson 1

Every HTML document needs a pair of head tags.

In your Notepad window click File then Save As.

Hit return and you're done!

(if your icon is a little different, it's no biggie)

Three quick points before we go on to the next lesson:

Something really cool

We can make things bold.

Something really cool

The same principle applies to italics...

Something really cool

Back again to a plain screen.

Something really cool

We can use tags in combination if we wish...

Something really cool

<-- Overlapping tags....

Something really cool

Each letter uses the same amount of horizontal space...

First add the <font> tags...

Then specify a size attribute.

Something really cool

teen s re extra la real

Something really cool

Alright, back to the fun stuff...

Something really cool

You can change the font color if you like.

Something really cool

We can, of course use more than one attribute in a <font> tag...

Something really cool

Something really cool

<h1>Something really cool</h1>

Something really cool

Something really cool

Something really cool

Something really cool

Something really cool

<h2 align="left">Something really cool</h2>

Something really cool

FAQ: What is an "active link"?

A: Let's back up a bit and let me give you a complete answer...

<body bgcolor="#000000" text="#ffff66" link="#00ff33" vlink="#00bb33"

Something really cool

your document. You can now make Big red letters or

You could even make a r oll ercoast er!

Something really cool like an icecube!

Hey! What's going on here??

<br> basically says - start a new line.

Can you use <br> to skip a line? Sure.

Skip lots of lines? You betcha.

Something really cool

This is the paragraph tag. Think of a paragraph as a block of text.

non-breaking space