The Web: Lesson 6

Ready to start coding HTML? This is a long lesson, so make sure you're comfortable.

Where to Code?

Where you actually copose your web pages will depend on how your web host is set up. Some hosts, like Yahoo!Geocities, let you work on your web pages in a browser window, and you don't have to worry about uploading because the files are already on the server. Others, like Drak.net, you create the files on your own computer and then upload them with an FTP program.

If your host lets you build your web pages directly on the server, like GeoCities, there will be instructions on how to do that on your host's website. If you need to FTP your files up, the easiest way to compose them is in Notepad. In Windows, Notepad can usually be found through the Program Files menu, under Accessories.

Go ahead and get ready to code - login to your host's site and navigate to the composing window or open a new file in Notepad. If you're working on your host's site, make sure you start without any writing in the code window! Erase any code that's already there before you get started below.

Code Time!

The first, and most important, tag on your page is <HTML>. This lets browsers know that the document is written in HTML. You'll also need to type in the ending command, </HTML>. The text in your editing window should now look like this:
<HTML>
</HTML>

At the top of your document will be the Head, which is marked out by <HEAD> and </HEAD> tags (note: browsers don't care whether you type tags in capital letters or not, but many people like to have tags in all caps to make them easier to see when editing. The choice is yours). The Head can contain a lot of information, but for now it will only hold the title of your page. To start with, simply call it "(your name)'s homepage." Type the title between the two tags <TITLE> and </TITLE>, which should go inside the Head tags, like this:
<HEAD> <TITLE>(your name)'s homepage</TITLE> </HEAD>

The title of your page is what will appear on search engines (like AltaVista and Yahoo!), the browser's title slot, the browser's "history" files, and bookmarks. For example, this page is entitled Lesson 6: Your homepage. Each page on your site must have a title!

Now, save your work so you can take a look at it. Make sure to call the file "index" - that way browsers will load it automatically when someone visits your site, even if they don't put "index.html" at the end of the URL.

If you're working on your host's site, you may be able to preview your work; if so, do that now. If you're working in Notepad, save your work, change its file extension to .html (you may need your teacher's help to do this), then open it in a browser. This will show you what browsers will show when they access your page, with the editing window below. Notice that there isn't anything appearing where you'd expect to see text? That's because the Head section of your page is for your visitors' browsers to read, not your visitors themselves!

Text and Colors

Time for some text. Get back to your code. Under the </HEAD> tag, type <BODY> (and its ending tag, </BODY>). That lets browsers know that the information between these tags should be displayed. The BODY tag can include more information, too... like the colors of your page! There are several different colors you should set: background (bgcolor), text, link, and viewed link (vlink). The link color sets what color links to other sites will be, and vlink sets what color links the viewer has already visited will be. To set the colors, add the following text to your body tag so it reads:
<BODY BGCOLOR="#" TEXT="#" LINK="#" VLINK="#">
There are many different colors to choose from, but the basic color codes are:

Red = #ff0000 Black = #000000

Orange = #ff9900 Brown = #996600

Yellow = #ffff00 Grey = #cccccc

Green = #339900 Tan = #cc9933

Blue = #0000ff White = #ffffff

Purple = #9933ff Lt. Blue = #9999ff

It is important when choosing colors for your page to consider two things:

Many colors will look slightly different when viewed by different browsers and platforms.
Light text on a light background and dark text on a dark background should be avoided at all costs.
You can see why #2 is important below. Note how difficult the text is to read.

This text is yellow-on-white, and hard to read. Here is white on yellow. Nasty stuff, eh?

Purple on black isn't too great, either. Colors that clash are nasty as well.

If you make your visitors' eyes sore, they won't come back to your page.
Go ahead and choose the colors for your page. Type their color codes after the appropriate # signs. your editing window should now read:
<HTML> <HEAD> <TITLE>(your name)'s homepage</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#cccccc" LINK="#CC0000" VLINK="#009900"> </HTML>

With, of course, your selected color codes. The above color scheme would look like this:

Plain text is in grey, while links are in red and viewed links are in green.
Pretty cool, eh?

There are lots and lots of other color codes - thousands of them, in fact. But it's important to remember that not all colors look the same on all browsers. What looks fine on your computer might clash horribly on someone else's. For a long list of color codes that look the same on most browsers, visit DotParagon (that link will open a new window for you).

Headings and Other Tags

Your page needs a heading (as opposed to a head). Headings are marked with tags like this: <H1> </H1>, and decrease in size from <H1> through <H6>. Standard format is to have the main heading on your page be in <H1>, the next in <H2> and so on. This page uses that format.

Under your body tag, put the title of your homepage ((Your Name)'s homepage) in a level one heading (<H1>). Don't forget the ending tag!

Now for the other text tags! Here they are.

<FONT>, </FONT> This allows you to manipulate the appearance of text between the beginning and ending tags. Simply add one or more of the following after the FONT in the beginning tag:

SIZE= Lets you enlarge or shrink the size of a font. For example, SIZE=+1 will increase its size by one (that's the size this text is in), and SIZE=-1 will shrink it by one).

COLOR="#" This lets you change the color of the text between the beginning and ending tags.

<CENTER> </CENTER> Centers the text between the beginning and ending tags.

<B> </B> Makes text bold.

<I> </I> Makes text italic.

<U> </U> Makes text underlined.

<BR> Inserts a break between lines, like
that. Has no ending tag.

<P> </P> Marks the beginning of a paragraph. Paragraphs will have a blank line above and below them, but won't be indented (that requires some non-HTML coding you'll learn later).

<BLOCKQUOTE> </BLOCKQUOTE> Brings the margins of the text between the beginning and ending tags in by about half an inch. All of the pages in this course use this tag. It also acts like the <P> tag in that it inserts a blank line before and after the marked text,
like this.

Now that you've learned all those tags, it's time to do what your page is meant for: be creative and express yourself! Using all the tags you've learned so far at least once, write a couple of paragraphs introducing yourself on your homepage. Here's an example.

<HTML> <TITLE>Jane Doe's homepage</TITLE> <BODY BGCOLOR="#000000" TEXT="#c0c0c0" LINK="#ff0000" VLINK="#aa0000"> <CENTER><H1>Jane Doe's homepage</H1></CENTER> <BLOCKQUOTE> <P>Hi! Welcome to my website! I'm a student at <I>Success! Learning Center</I>, where I'm studying HTML, Shakespeare, and algebra. <BR> I live with my parents, our dog Fluffy, our cat Spike, and my tank of goldfish. My favorite movie is <I>Star Wars</I>, my favorite book is <U>The Three Musketeers</U> <FONT SIZE=-1>(by Alexandre Dumas)</FONT>, and I <B><FONT SIZE=+1><FONT COLOR=#FF0000>love</FONT></FONT></B> swimming.</P> <P>I've only just started working on my website, so please bear with me while I learn how to build the rest of it! HTML is fun to work with, but complicated.</P> </BLOCKQUOTE> </BODY> </HTML>
When viewed with a browser, the code above looks like this (clicking on this link will open a new window; when you're done looking at the example, close the window and continue).

Be sure to save regularly!

When you're happy with the way your page looks so far, upload it using your FTP program or save it one last time. Then type the URL of your site into a new browser window to see how it looks! If you're completely satisfied with what you have so far (we'll be making your site more complex later on), go to the Grade Form (linked below), print it out, and ask your instructor to look your page over and grade it.

Grade Form

Now you're ready to learn links! Click the link below to continue to the next lesson.

Problems? Questions? Send us

Red = #ff0000	Black = #000000
Orange = #ff9900	Brown = #996600
Yellow = #ffff00	Grey = #cccccc
Green = #339900	Tan = #cc9933
Blue = #0000ff	White = #ffffff
Purple = #9933ff	Lt. Blue = #9999ff

This text is yellow-on-white, and hard to read.	Here is white on yellow. Nasty stuff, eh?
Purple on black isn't too great, either.	Colors that clash are nasty as well.