What is HTML?

HTML stands for the HyperText Markup Language. HTML is the major language of the Internet's World Wide Web. Web sites and web pages are written in HTML. With HTML and the world wide web, you have the ability to bring together text, pictures, sounds, and links... all in one place! HTML files are plain text files, so they can be composed and edited on any type of computer... Windows, Mac, UNIX, whatever.

Getting Started

This document will teach you how to write your own web pages by using HTML. You do not need any special what-you-see-is-what-you-get HTML editor to use this guide; any old text editor will do just fine. By learning HTML, you will have much more control over how your web pages look, and you'll more easily discover ways to make your web pages look even better. HTML is platform independent, meaning it can be written and viewed on any type of computer (Windows, Mac, UNIX/Linux, whatever!)

Because HTML is platform independent, you'll need to save your HTML files in standard (ASCII) text format. The easiest way to do this is use a program like notepad.exe in Windows, pico in Linux, and the like. If you'd prefer to use a word processor like Word or WordPerfect to write your HTML code, you can do so, but you need to save your files as "Text" or "Text Only." You'll see this option in a drop down box in your "Save As." screen. If you use a word processor and forget to save it as Text, you'll see only garbled data when you try to view your page with a web browser.

If you'd like to immediately start learning HTML, you can skip to Mini Chapter 1 now. If you choose to do so, please come back to this chapter later. The very important sections below discuss issues such as finding a place to put your web site and tips for getting your web page to work correctly on the first shot.

Finding a Host Service (Web Server)...

Unless you run your computer and Internet connection 24 hours a day, 7 days a week, 365 days a year, and have special permission to run a web server through your Internet connection, you will need to find a company that is willing to host (serve) your web site. By finding a host, your pages will be available all day, every day, except during temporary network outages (when your host is disconnected from the Internet, usually lasting less than 10 minutes) and hardware maintenance upgrades (when your host is putting your web server on an even faster computer *wink*).

If you are learning HTML primarily for a personal web site, you can contact your ISP (Internet Server Provider) or Commercial Online Service (AOL, Prodigy, CompuServe, etc.) and ask them about personal home page services. Most ISPs and COS’s will provide links on their home pages giving you information about setting up your personal web page.

Many people starting out with HTML choose to use a free home page host instead of an ISP/COS host. A free host will give you space to store your pages and graphics at no cost. Most show ad banners when your page is loaded so they can pay for their servers. I'd suggest getting a host with 10 to 20MB (megabytes) of space. HTML files are very small, and web graphics formats (.gif and .jpg) are compressed formats, which means they are saved smaller and more efficiently. (To give you some idea as to how much space is enough, the entire davesite.com web site is less than 15MB of data, including all web pages and graphics.)

A few good free home page hosts include Tripod and Angelfire. (These free hosts display ads, usually pop-ups, when someone visits your web site.) (Update: I no longer recommend Yahoo! Geocities because of a new price plan which forces you to pay about $5 per month if you want FTP access to publish your site. It would be silly to pay $5 for a 'free host' when you can have your very own domain (.com, .net, or .org) registered and hosted for less than $8 per month at a reputable host such as Globat or iPowerWeb .)

When you sign up for a free host or a domain host, you get to pick a username and password. (On free hosts, your username is generally the directory people type to get at your site, so choose wisely.)

Only you (or anyone that you tell your password to) can modify your web pages. I prefer free home pages hosts and domain hosts to ISP/COS hosts because if you leave your ISP/COS, they will no longer host your pages for you (the minority that will *still* host your site after you leave may charge you a hefty monthly fee). If all of your friends have links to your web site, those links will no longer work. If your pages are hosted on a free service, you can change your ISP/COS without any effect to your site's address. And if you decide to get a domain, you'll never have to worry about changing ISPs or hosts, because it will always be transparent to your site's visitors.

Writing your Files...

Once you have found a place to host your web site on the web, you'll need to start creating your pages. When you are starting out with HTML files, it's a good idea to have two copies of it. One copy should be on your host (accessible to anyone on the Internet) and the second copy should be on your hard drive or a floppy disk. Once you have edited your pages from your own computer using a text editor, you can use FTP (file transfer protocol, explained in Mini Chapter 10) to upload, or copy, them to your host. I suggest having these two copies for backup reasons. (However, If your computer crashes, and your host computer crash, you no longer have your files, and you'll have to start over from scratch unless you've backed them up elsewhere.)

I recommend that when you write your web page, you first create a directory on your hard drive to place the HTML files and graphics files. Simply find your hard drive, and create a new directory (folder), and call it something like homepage. (You could also use a floppy disk or Zip disk.) Then, when you save an HTML file, you can save it to that directory. You'll want to save the file with an extension of .html. (If you are using an older operating system like Windows 3.1/3.11, you could just save it as .htm; it'll act the same way on a web server.)

(Caution: Although you don't *have* to have the extra l at the end of the file, it does not mean it will *be* the same file. You can have one file called mycat.htm and one file called mycat.html on your host, and they are two completely separate files.)

Using "index.html"

Your main web page file must be titled index.html; because this is the way almost all web hosts' servers are set up to handle the main page of your site. (You can check with the teacher in charge of your host/web server if you can't get index.html to work. Some systems use other filenames, for example: default.html)

Note to Microsoft Windows Users: If you are using notepad.exe to edit your HTML files, and you type index.html as the name of your file when you save it, notepad may automatically name it index.html.txt! To get around this, when you save an html file with notepad, type quotation marks around the file. Instead of typing index.html, type "index.html". This tells notepad not to use the default .txt extension.

How index.html Acts:
Let's say you saved three HTML files to your hard drive, one is your main home page file, one is a page about yourself, and one is a page with your favorite links. It would look something like this:

Directory homepage

• Aboutme.html
• Links.html
• Index.html

Now, say you got a Tripod Account as your_user_name. When you FTP these three files onto your Tripod space, they can be accessed on the web by anyone as:

• http://members.tripod.com/~your_user_name/aboutme.html
• http://members.tripod.com/~your_user_name/links.html
• http://members.tripod.com/~your_user_name/index.html

The latter of the three files, index.html, can also be accessed as http://members.tripod.com/~your_user_name/, because almost all web servers use index.html as the default web page. (When the user asks for / on a directory, it merely shows the index.html file transparently.)

Browsing your Hard Drive...

If you are editing index.html with your text editor, wouldn't it be nice to see what your page looks like while you are editing it? Well you can! Just start up your web browser, and select File, Open File and find the file on your hard drive. Then go back to your text editor, change a line, hit save, and click reload/refresh with your browser! It changes!

Common Errors when editing pages...

Say you wrote a link page, called links.html on your hard drive, saved as c:\homepage\links.html (on a Windows PC, or similarly on other operating systems). Then you decide to link it from index.html as c:\homepage\links.html. You browse your files on your hard drive, and the link works fine. Then you upload it to the web, and get one of your friends to try. When they click the link, they will get an error saying "File Not Found"! Why? Because there is no c:\homepage\links.html on their hard drive!

When you're starting out, don't use directories. Just save both HTML and graphics in the same directory. If you are trying to link or load a file (discussed later) called taco.jpg, just use taco.jpg, not c:\homepage\taco.jpg or the like. Your finished HTML file should never mention your hard drive's letter (or name).

Mini Chapter 1: The Basics

Tags...

The Page you are viewing right now is an HTML document. HTML documents look a lot like word processing documents...

You can have bold and italicized, Larger and Smaller, or it could look typewritten.

Of course, the HTML code for this looks like a bunch of gibberish...

You can have <b>bold</b> and <i>italicized</i>, <font size=+2>Larger</font> and <font size=-2>Smaller</font>, or it could look <tt>type-written</tt>.

So what are all these "<" and ">" things doing here? When you place a certain thing within these you are making something known as a tag. For example the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. The tag with the slash (/) is known as the closing tag. Many opening tags require a following closing tag, but not all do. Tags make up the entire structure of an HTML document.

<b>This Text is Bold</b>

^^^--Opening Tag    ^^^^--Closing Tag

Here are two pieces of HTML code, the second of the two has an error in it, and what is it?

#1 - Bob jumped OVER the fence.
#1 - Bob jumped <b>OVER</b> the fence.
#2 - Bob jumped UNDER the fence.
#2 - Bob jumped <b>UNDER<b> the fence.

You should have noticed that the second code is missing a slash (/) in the tag after the word UNDER, which causes the web browser to interpret the code as leaving the bold face on! This is a common error, so be careful of it!

Note: Tags in HTML are NOT case sensitive. For example... <title> and <Title> both mean the same thing and are interpreted as being the same.

Document Structure...

HTML files are just normal text files... they usually have the extension of .htm, .html, or .shtml. HTML documents have two (2) parts, the head and the body. The body is the larger part of the document, as the body of a letter you would write to a friend would be. The head of the document contains the document's title and similar information, and the body contains most everything else.

Example of basic HTML document Structure...

<html>
<head><title>Title goes here</title></head>
<body>Body goes here</body>
</html>

You may find it easier to read if you add extra blank lines such as follows...

<html>

<head>
<title>Title goes here</title>
</head>

<body>
Body goes here
</body>

</html>

Note: Extra spaces and line breaks (blank lines) will be ignored when the HTML is interpreted... so add them if you wish to do so.

Whatever falls between the TITLE tags will be the title of the document, when the page is viewed it is usually found in the title bar at the top of the screen. (On Windows Machines, this is to the left of the maximize/minimize buttons at the very top of the window.) [Note: You may NOT use other tags within the TITLE tags (Example: You cannot have the code read: <title><b>title goes here</b></title>.]

Example of how titles are viewed...

In Netscape Navigator...
Netscape - [Title goes here] OR Title goes here - Netscape [depending on version]

In Microsoft Internet Explorer...
Title goes here - Microsoft Internet Explorer

Whatever you place between the BODY tags will fall into the major area of the document window, and therefore it is the largest part of your HTML document.

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags just to try it out.

Try typing this:

<html>
<head><title>Title goes here</title></head>
<body>Body goes here</body>
</html>

Note: Feel free to use COPY and PASTE in notepad

Mini Chapter 2: The Common Tags

Headings...

Headings are some of the most important tags within the BODY of your HTML document. You will usually use a heading to tell what the following section of your page is about. The opening tag for a heading is <hy> and the closing tag is </hy> with y being the size of the heading... from 1 to 6. (1 being largest, and 6 being smallest)

Example of heading tags...

Bob fell over the chicken. [H1]

<h1>Bob fell over the chicken. [H1]</h1>

Bob fell over the chicken. [H2]

<h2>Bob fell over the chicken. [H2]</h2>

Bob fell over the chicken. [H3]

<h3>Bob fell over the chicken. [H3]</h3>

Bob fell over the chicken. [H4]

<h4>Bob fell over the chicken. [H4]</h4>

Bob fell over the chicken. [H5]

<h5>Bob fell over the chicken. [H5]</h5>

Bob fell over the chicken. [H6]

<h6>Bob fell over the chicken. [H6]</h6>

Horizontal Ruled Lines...

Horizontal Ruled Lines are used to separate different areas of a web page. The tag for a horizontal ruled line is <hr>. The horizontal ruled line DOES NOT have a closing tag. You may also add certain attributes to the <hr> tag, such as WIDTH=n (for fixed pixel width) or WIDTH=n% for a certain percentage of the screen wide, SIZE=n to make the line a certain pixel amount thick, and NOSHADE to turn the line's shading off. A plain <hr> with no attributes will make the line the full width of the screen.

Example of horizontal ruled lines...

<hr width=50>

<hr width=50%>

<hr size=7>

<hr noshade>

You may also use several attributes within one tag...

<hr width=50% size=10 noshade>

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags and the tag attributes just to try it out.

Try typing this:

<html>
<head><title>Title goes here</title></head>
<body>
<h1>Body goes here</h1>
<hr>
<h3>Headings are Cool!</h3>
</body>
</html>

Mini Chapter 3: More Common Tags

Paragraphs...

You will often use paragraphs in HTML, just as you do when you write stories. The opening tag for a paragraph is <p>, and the closing tag is </p>. The closing tag for a paragraph is not always needed, but I recommend using it anyway.

Example of a paragraph...

Bob starts to chase the chicken around. Bob trips over a string and goes flying into the pig's mud pit! eww! What a pity!

<p>Bob starts to chase the chicken around. Bob trips over a string and goes flying into the pig's mud pit! eww! What a pity!</p>

Text Formatting Properties...

If you had an entire web page without formatted text, it would look rather dull and boring. This is why we use text-formatting tags. Some common text formatting tags are <b> and </b> for bold, <i> and </i> for italics, <u> and </u> for underlined, and <tt> and </tt> for typewriter. The <font size=n> and </font> tags also come in handy.

Example of font tags...

Bob is a Cool Guy isn't he?

<font size=+1>Bob</font> <font size=+2>is</font> <font size=+3>a</font> <font size=+2>Cool</font> <font size=+1>Guy</font> isn't <font size=-1>he?</font>

ALIGN attributes...

Many tags support ALIGN attributes... if you want something to be aligned from the left margin, from the center, or from the right margin. The ALIGN attribute is placed in the opening tag before the >.

Left Align

<h1 align=left>Left Align</h1>

Center Align

<h1 align=center>Center Align</h1>

Right Align

<h1 align=right>Right Align</h1>

The Line Break...

When your HTML document is viewed, normally the text will do a word-wrap at the end of a line. If you want to have the text BREAK (go to another line) you will use the <br> tag. This tag has no closing tag.

Example WITHOUT line Break...

Sentence One. Sentence Two. Sentence Three.

Sentence One.
Sentence Two.
Sentence Three.

Example WITH line Break...

Sentence One.
Sentence Two.
Sentence Three.

Sentence One.<br>
Sentence Two.<br>
Sentence Three.<br>

Preformatted Text...

If you wish to have text line up properly (a.k.a. fixed width text) that will include line breaks without the use of the <br> you may find the <pre> and </pre> tags helpful.

Example of text WITHOUT preformatting...

Output:

The cat ran after the dog. ^ ^-Verb ^noun ^-noun

Code:

The cat ran after the dog.

    ^   ^-Verb        ^noun

    ^-Noun

HTML ignores the extra line breaks, so the text does not line up properly.
Example of text WITH preformatting...

Output:

The cat ran after the dog.

    ^   ^-Verb        ^noun

    ^-Noun

Code:

<Pre>

The cat ran after the dog.

    ^   ^-Verb        ^noun

    ^-Noun

</pre>

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags and the tag attributes just to try it out.

Try typing this:

<html>
<head><title>Title goes here</title></head>
<body>
<h1 align=right>Body goes here</h1>
<hr>
<h3 align=center>Headings are kewl! </h3>
<p><b>Bold text is fun! </b><br>
<u>Underline is kewl too! </u></p>
</body>
</html>

Mini Chapter 4: Links and Images

Anchored Links...

Without Links, the World Wide Web wouldn't be a web at all! To add a link... you will use the <a href="location"> opening tag and </a> closing tag. Whatever appears between these two tags will become underlined and colored, and if you click on the underlined text it will send the browser to the location within the quotes.

Example of a link...

Visit Dave's Site!

Visit <a href="http://www.davesite.com/">Dave's Site</a>!

If you are just linking to a page in the same directory as your current page, you don't need the domain, just the page name. If you have a page called contactme.html, you can use the code <a href="contactme.html">Contact Me</a>.

Note: Although Links are usually used to send people to other web pages; you may also use it to send email to a specific address by using a location of mailto:user@host.

Example of a Mailto: Link...

Send email to the Author [Dave]!

Send email to <a href="mailto:webmaster@davesite.com">the Author [Dave]</a>!

If you want a link to open in a new window, add target="_blank" the end of the anchor tag, e.g. <a href="http://www.neonlollipops.com/" target="_blank">NeonLollipops.com</a>.

Example of a link opening in a new window...

Visit NeonLollipops.com.

In-line Images...

You may also add images (pictures) to your web page, as long as the image is in the .gif or .jpg (or .jpeg) file formats. You will not be able to use .bmp format files! The basic tag for in-line images in <img src="location">. It is also recommended to add HEIGHT and WIDTH attributes to the IMG tag, which will allow the image to take proper proportions on a browser that is not currently viewing images. It is also recommended to use the ALT="what picture is" to tell a person what a picture is in case it is still loading or they are not viewing images. (The IMG tag has no closing tag!)

Example of a basic in-line image...



<img src="http://www.davesite.com/graphx/davesmll.gif" WIDTH=200 HEIGHT=50 ALT="Dave's Site">

If your image is in the same directory as your HTML file, just use the image name. If your file is welcome.jpg, you can use <img src="welcome.jpg"> Then add the appropriate height, width, and alt attributes as mentioned above.

Combining Links and Images...

Many times you may want to have an image that is linked, so that if someone clicks the image, the person will be taken to another page. This is rather simple- you just need to place the IMG tag within the A HREF tags. (<a href="location_of_link"><img src="location_of_image"></a>) You may also use the ALIGN tags with images!

Example of a linked image...



<a href="http://www.davesite.com/"><img src="http://www.davesite.com/graphx/davesmll.gif" align=right></a>

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags and the tag attributes just to try it out.

Try typing this:

<html>
<head><title>Title goes here</title></head>
<body>
<h1 align=right>Body goes here</h1>
<hr>
<h3 align=center>Headings are Cool!</h3>
<p><b>I can use text links... Visit <a href="http://www.davesite.com/">Dave's Site</a>!</b><hr width=50>
and Image Links... <a href="http://www.davesite.com/"><img src="http://www.davesite.com/graphx/davesmll.gif"></a></p>
</body>
</html>

Mini Chapter 5: A little more tags

The CENTER tag and DIV tag...

The center tag pretty much explains itself! The opening center tag is <center> and the closing center tag is </center>. Whatever you put between will be centered on the current line!

Example of CENTER tag...

Center Works!!!

<center><h1>Center Works!!!</h1></center>

Note: Recently, the W3C (the group that decides on HTML standards) has recommended that when writing HTML, you use <div align="center">centered text</div> instead of the center tag. Although div does not work in many older web browsers, it works in virtually all-recent versions of popular web browsers. The neat thing about div is that you can align both left and right in addition to center.

The BODY attributes...

In Chapter 1 you learned the BODY tag. The BODY tag has many attributes... here are the most useful ones...

• BACKGROUND="location_of_image" - Background image for web page. Example: If you have kitten.jpg in the same directory as your HTML file, use <body background="kitten.jpg"> to load it as your background image.
• BGCOLOR="#hexadecimal_here" - Hexadecimal Color Code for Background Color
• LINK="#hexadecimal_here" - Hexadecimal Color Code for Links (if left blank, most browsers default to blue.)
• VLINK="#hexadecimal_here" - Hexadecimal Color Code for Links the User has Already Visited (if left blank, most browsers default to purple.)
• TEXT="#hexadecimal_here" - Hexadecimal Color Code for Text Color
• Click Here to Learn how to use the Hexadecimal Color System

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags and the tag attributes just to try it out.

Try typing this:

<html>
<head><title>Title goes here</title></head>
<body bgcolor="#FFFFFF" link="#FF0000" vlink="#00FF00">
<h1 align=right>Body goes here</h1>
<hr>
<center><h3>Headings are kewl!</h3></center>
<div align="right">div is also a cool tag!</div>
<a href="http://www.davesite.com/">This link should be red if you haven't visited davesite.com/ and green if you have.</a>
</body>
</html>

Mini Chapter 6: Clean Code, Comments, and Escape Codes

Clean Code...

Clean code means that your HTML coding follows all specifications, I personally don't use true clean code, but very close to it. Here are a few ways to keep your code clean:

• Don't type special characters into your code, instead type their escape code... many characters should NEVER be typed directly into HTML code... for example the "<", ">", the "©", "&", and the " itself. Instead, type &escape_code; (Ampersand, Escape Code for Character, then a semicolon). For these 5 characters, here are the escape codes...
• For the < type &lt;
• For the > type &gt;
• For the © type &copy;
• For the & type &amp;
• For the " type &quot;
• Use quotes around values in attributes... For example, if you want a horizontal rule that is half of the screen width, type <hr width="50%"> rather than <hr width=50%>, or if you want one that is size 5 type <hr size="5"> rather than <hr size=5>. Isn't it ironic that I don't? <g>
• Don't overlap tags... Overlapping occurs when Tag A starts, Tag B starts, Tag A closes, then Tag B closes. This will cause errors in sensitive browsers. For Example, it will not render correctly in Navigator 4.0 Beta1, Netscape purposefully built into the browser so developers could catch errors. Examples:
• Wrong Way (Overlaps):
  <font size=+1><b>This is Bold and One Font Size Bigger</font></b>
  Right Way (Doesn't Overlap):
  <font size=+1><b>This is Bold and One Font Size Bigger</b></font>
• Wrong Way (Overlaps):
  <a href="here.html"><i>This link is italicized</a></i>
  Right Way (Doesn't Overlap):
  <a href="here.html"><i>This link is italicized</i></a>

The Comment Tag...

If you are writing an HTML document, sometimes you may want to put little reminders to yourself with your code so that you will be able to interpret your coding better. A comment will not appear in a web browser when the page is displayed... it is only visible when the source code is viewed. You start commented text with <!-- and end it with -->.

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags just to try it out.

Try typing this:

<html>
<head><title>TITLE HERE</title></head>
<body>
<!-- No One Will see this really long comment I have typed right here unless they decide to view the source. -->
This page Copyright &copy; 1998 Little Joe's Pages &amp; davesite.com.

</body>
</html>

Mini Chapter 7: Lists, Lists, Lists

The UNORDERED LIST...

The Unnumbered List is the first of the three types of lists. This is probably the most common list you will use.

Example of an Unordered List...

• pencils
• pens
• erasers
• paper
• glue

Notice the Bullet Before each List Item. Now here is the HTML Code for the Unordered List Above...

<ul>

 <li>pencils

 <li>pens

 <li>erasers

 <li>paper

 <li>glue

</ul>

The <ul> tag is the opening Unordered List Tag. Between these two tags you place LIST ITEMS, each one having an individual <li> opening tag. (If you want, you can use an optional </li> closing tag, but it is not needed.) There is no limit to the number of List Items you may have in a single list.

The ORDERED LIST...

The Ordered List, also known as the Numbered List, is very similar in structure to the unordered list, except each list item has a number in front of it, instead of a bullet. Also, the opening tag for the list is <ol> instead of <ul>, and the closing tag is </ol> instead of </ul>. List Items within the list still use the same tags.

Example of an Ordered List...

1. pencils
2. pens
3. erasers
4. paper
5. glue

Notice the Number Before each List Item. Now here is the HTML Code for the Ordered List Above...

<ol>

 <li>pencils

 <li>pens

 <li>erasers

 <li>paper

 <li>glue

</ol>

The Definition List...

I have never used this type of List, but it may be helpful to you. This type of list is a little more complicated, but still very easy to use. This list starts with the <dl> opening tag, and ends with the </dl> closing tag. This has another tag known as <dt> for Definition Term, and <dd> for Definition. These two tags do not need closing tags.

Example of a Definition List...

alliance

A union, relationship, or connection by kinship, marriage, or common interest.

alligator

Large amphibious reptile with very sharp teeth, powerful jaws.

alliterate

To arrange or form words beginning with the same sound.

Now here is the HTML code for this Definition List...

<dl>

 <dt>alliance

 <dd>A union, relationship, or connection by kinship, marriage,

 or common interest.

 <dt>alligator

 <dd>Large amphibious reptile with very sharp teeth, powerful jaws.

 <dt>alliterate

 <dd>To arrange or form words beginning with the same sound.

</dl>

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags and the tag attributes just to try it out.

Try typing this:

<html>
<head><title>Title goes here</title></head>
<body bgcolor="#AABBCC">
<h1 align=right>Body goes here</h1>
<hr>
<center><h3>Headings are Cool!</h3></center>
<hr size=10>
<ul>
<li>pencils
<li>pens
<li>erasers
<li>paper
<li>glue
</ul>
</body>
</html>

Mini Chapter 8: Extended Fonts and Text Color

Extended Fonts...

The newest version of many browser’s supports extended fonts, in which you can choose to have the document fonts be other than the normal one. This is accomplished by adding the FACE="font_name" attribute to the <FONT> tag. The most commonly supported fonts are Verdana, Arial, Helvetica, Impact, Comic Sans MS, and a few others. It is not recommended to make your page font dependent, because the older versions of many browsers don't yet support this feature.

Example of Extended Fonts...

<font size=+2 face="Verdana">Verdana</font>
Verdana
<font size=+2 face="Arial">Arial</font>
Arial
<font size=+2 face="Helvetica">Helvetica</font>
Helvetica
<font size=+2 face="Impact">Impact</font>
Impact
<font size=+2 face="Comic Sans MS">Comic Sans MS</font>
Comic Sans MS

Note: If you don't see one or more of the above fonts, then your browser probably doesn't support the extended fonts.

Text Color...

You can change the color of the text by setting the COLOR="font_color" attribute in the <FONT> tag. The Color is usually set by using the hexadecimal system (#000000 black to #FFFFFF white) but can also be set in newer browsers by using the simple word of the color. (Red for Red, Blue for Blue, etc.)

Example of Text Color...

<font color="Blue">Hey I'm Blue!</font>
Hey I'm blue!
<font size=+2 face="Impact" color="Green">Hey I'm green and in Impact Font!</font>
Hey I'm green and in Impact Font!
<font color="Red">Hey I'm red!</font>
Hey I'm red!

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags just to try it out.

Try typing this:

<html>
<head><title>Fonts and Colors Are Cool</title>
</head>
<body>

<font color="Yellow" face="Arial">Hey I'm Yellow Text... Change my color!</font><br>
<font size=+2 color="purple">Hey I'm Purple Change My Color!</font><br>
This page Copyright &copy; 1997 Little Joe's Pages &amp; davesite.com.

</body>
</html>

Mini Chapter 9: Navigation Within A Document

Navigation Within A Document...

Wouldn't it be nice to be able to click a link and move to another area within the same page? Well you can. You will use the normal anchor tag (<A HREF>) except instead of placing another page in the quotes, we will use a named portion of the document, which begins with a #. To name the part of the document, go to the area you want to name, and place <a name="name_of_area">text</a>, then to call a link to that place from somewhere else in the document, use <a href="#name_of_area">text</a> Example:

<a href="#section2">Go To Section 2</a><br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
<a name="section2">Welcome To Section 2!</a>

Go To Section 2
blah
blah
blah
blah
blah
blah
Welcome To Section 2!

Once you have the section named, you can even call it from other documents... for example, if you named a section in index.html called section2, you could call it from bookmarks.html using <a href="index.html#section2">.

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags just to try it out.

Try typing this:

<html>
<head><title>Navigation is Cool</title>
</head>
<body>

<a name="section1">This Is Section One</a><hr>
<a href="#section2">Click Here to Go to Section 2!</a><br><br><br><br><br><br><br><br><br>
<a name="section2">This Is Section Two</a><hr>
<a href="#section3">Click Here to Go to Section 3!</a><br><br><br><br><br><br><br><br><br>
<a name="section3">This Is Section Three</a><hr>
<a href="#section1">Click Here to Go to Section 1!</a><br><br><br><br><br><br><br><br><br>
This page Copyright &copy; 1997 Little Joe's Pages &amp; davesite.com.

<a href="http://www.davesite.com/webstation/html/chap09.shtml">Back to The Tutorial!</a>
</body>
</html>

Mini Chapter 10: Publishing your Page

Using FTP to upload...

Some web hosts no longer require you to use FTP to publish your files. Instead, they have an upload via web browser function. While upload via web browser is useful to send perhaps one or two files, it can be tedious to send multiple files. Nearly all web hosts support FTP, and that is why I choose to explain it in detail. It is also a good skill to have if you plan to design web sites for other people.

How to structure your Links...

As a beginner, it is probably best to leave all files, HTML and graphics, in one directory. That way, when you link to and from your files with <a href="filename.html"></a> you do not need to have the full path.

For example, say you have two pages:

http://www.yourhost.com/~YOURNAME/index.html
http://www.yourhost.com/~YOURNAME/links.html

If you want to place a link from the index.html page to the links.html page, all you need to put is <a href="links.html">My Links Page</a>. If you are editing your links.html page, and want to link it to the index.html, all you need to type is <a href="index.html">My Home Page</a>.

Now if you want to get a little more advanced and your host supports directories, things get a little more challenging. Let's say you have a pet and you want it to have a web page at http://www.yourhost.com/~YOURNAME/mypet/. So you decide to create a directory on your hard drive as c:\homepage\mypet. Then you (or your pet) write a home page called index.html and saves it to c:\homepage\mypet\index.html. You log onto your ftp server, and make a directory called mypet. You upload your pet's index.html file into that directory.
Now your File Structure looks like this:

http://www.yourhost.com/~YOURNAME/index.html
http://www.yourhost.com/~YOURNAME/links.html
http://www.yourhost.com/~YOURNAME/mypet/index.html

On YOUR index.html page, you want a link to your pet's index.html page in the mypet directory. The most common way to do this is type out the full URL (uniform resource locator) as

<a href="http://www.yourhost.com/~YOURNAME/mypet/">Visit My Pet's Page!</a>
OR
<a href="http://www.yourhost.com/~YOURNAME/mypet/index.html">Visit My Pet's Page!</a>

But because your index.html is in the directory http://www.yourhost.com/~YOURNAME/ you can do it an easier way. Remember how when you linked to links.html from index.html without using the full URL? Well that is because they are in the same directory. Since your pet's home page is only one directory further down, all you need to type for the link is:

<a href="mypet/index.html">Visit My Pet's Page!</a>
OR
<a href="mypet/">Visit My Pet's Page!</a>

Now you have a link to your pet's page... but say you want (or your pet wants) to link to your index.html in /~YOURNAME/. Because the directory is up one directory in the file structure, you can use two periods (..) and then a slash (/) to move back. So you are editing your pet's index.html page in the directory mypet and want to link to your page... here is how you can do it:

<a href="../index.html">Visit My Owner's Page!</a>
OR
<a href="../">Visit My Owner's Page!</a>

Important Read about Copyright Laws

All copyright laws still apply on the Internet as they do in other media. But it is often confusing about what is legal to do and what isn't. Their authors copyright all original web pages on the web unless noted otherwise. Pages that do not have a Copyright © notice can still be protected under copyright laws, and almost always are. All images (including backgrounds, icons, etc.) are copyrighted. In order to use them you must have permission from the author. Links to pages are not copyrighted, so you may link to copyrighted pages, but you may not use them as though they were yours. (to get the © symbol in your page, use the html code &copy; .)

Legal stuff you can do:

• Write Original Pages, make Original Graphics, and claim copyright on them.
• Link to another web page that does not belong to you, as long as you do not claim it is yours.
• Use graphics files that are noted as "free", such as graphics from a "free backgrounds" page or "free icons" page.
• Use someone else's graphics with their permission.
• Express your opinions on someone else's web page on your page, as long as no material from their page is used in your page. (You must realize that if you do this to them, and they don't like it, they can do the same to you.)

Illegal stuff you can't do:

• Take someone else's web page and/or graphics, unmodified, and use it on your server.
• Take someone else's web page and/or graphics, modify it, and claim ownership upon it.
• Take someone else's graphics files, such as backgrounds, pictures, etc., and use them in your web pages.
• Post or use any copyrighted material without permission of the copyright holder, whether it be text, books, magazine articles or pictures, music, whatever. If you didn't create it, and it's not in the public domain, chances are you can't use it.
• A lot more, if you get in trouble, for something else, tell me so I can add it. webmaster@davesite.com.

Using FTP...

While all FTP software looks a little different, they all have the same goal. The goal of an FTP program is to move files from a local host (in this case, your computer) to a remote host (in this case, your web page host's computer), and vice versa.

To upload a file is to send ('copy') a file from your computer (the local host) to your host's computer (the remote host). To download a file is to retrieve ('copy') a file from your host's computer to your computer.

(The terms of uploading and downloading apply to other forms of Internet communications, not just FTP. You download a file someone sends you via e-mail, and you upload a file when you attach one to an e-mail you send out, although we usually don't call it uploading, instead we call it "attaching.")

Oh, and in case you were wondering, FTP stands for File Transfer Protocol.

Before you can start FTP'ing, you need FTP software. I suggest WS-FTP or CuteFTP for Windows users. For other FTP programs (and if you are using an operating system other than Windows) I suggest searching for an FTP program at download.com. (If you go to the WS-FTP site, you will find two separate programs, WS-FTP LE, a program free for personal use, and WS-FTP Pro, a shareware program you can purchase for business use.)

The examples below describe WS-FTP procedures, although it will be very similar regardless of what FTP software you choose to use.

You'll need to gather a few pieces of information from your host before you can upload your HTML files and graphics to your web site.

You will need:

1. username and password (usually the same as you would use to log on to the Internet if you are using an ISP for your web space, but it's a good idea to double-check-sometimes it is slightly different for FTP'ing.)
2. remote host address/server name (usually ftp.your-host.com or www.your-host.com, but it can vary. Example: If you are using tripod.com for a host, you will probably use a remote host address of ftp.tripod.com.)
3. the name of the directory where your files are to be placed (Many times this directory is the main directory, but sometimes it may be www or web. If your host does not specify, it is probably just the main directory. If no directory is specified, don't worry about this piece of information.)

In addition, you will need to know the location/name of the directory on your computer where you have placed your HTML files.

Once you have installed your FTP software, and you start it, you should be prompted with a server profile screen (in WS_FTP, it says session profile). It has areas ('fields') to type your remote host address/name, your username and password, and there is an area to enter your remote directory (In WS-FTP, it's in the Startup tab).

Type in your host's name and your username. You can include your password now, or leave it blank. Leaving it blank will require you to type it every time you connect with FTP, and will prevent someone else with access to the computer you use from changing your web site.

If your host's documentation specifies a remote directory ('path') enter the name in that box. Otherwise, leave that area blank.

Now, you can choose connect to log on. (If you are unable to connect after following these directions, I suggest that you read the FTP FAQ/help section of your host's web site, which may help you figure out the problem.)

If all your setting are correct, the files in the right-side window (in WS-FTP, in other programs it probably says remote host somewhere) are the files that are on your server (there may be no files in this directory, or a single temporary index.html, if you've never logged on before with FTP), and the left-side window (in WS-FTP, in other programs it probably says local host somewhere) shows files on your computer.

You may need to navigate in the local host window to get to the directory where you've placed your HTML files on your computer. You may see two periods ('..'). If you click that, it will take you one level back in your directory tree. (Example: If you are in /Docs and you've placed your HTML files in /WebPage, one click on '..' will take you from /Docs to /, and then you will see a directory called /WebPage [you may have to scroll down]. You can then click WebPage, and you'll be in the right directory.)

Once you have the correct directory loaded on the local host side, and the correct directory loaded on the remote host side, you can begin to upload (and download) files.

To upload a file from your computer to your host, select your file in the left side by clicking it once, and then press the arrow to the right towards the remote host side. This will copy that file from your computer to your host. (It will also replace an old file with the same name if you have one on your host. Example: You are uploading index.htm. You have an index.htm on the remote host side of your FTP program. Once you click the arrow towards remote host, you will lose the old file on your server. I only warn you about this because if you set up multiple directories, you may at one time or another accidentally overwrite a file because you were in the wrong directory. Happens to all of us when we are just starting out!)

If you want to copy a file from your web host to your computer, select the file you want in the remote host side of the FTP program and click the arrow left towards the local host side.

Note: You may see a selection in your FTP software (WS-FTP included) for ASCII mode, binary mode, and auto mode. If auto is available, check it. Otherwise, select ASCII mode when you transfer HTML files, and binary mode when you transfer graphics and music files.

You should be on your way to FTP'ing successfully now. Most hosts will have instructions or a FAQ in their help section if you have further questions or are running into difficulties.

Mini Chapter 11: More About Graphics

Aligning Images with Text...

You may have noticed by now that if you load an image without any alignment, it will take up almost all of the room and only allow you to have one line of text next to it, if you are confused, here's an example:

<img src="html_small.jpg">Here is an image<br>
Isn't it cool?

Here is an image
Isn't it cool?

If you want to be able to have the text start at the top next to the image, you must use the ALIGN attribute... example:

<img src="html_small.jpg" align=left>Here is an image<br>
Isn't it cool?

Here is an image
Isn't it cool?

Using <BR CLEAR=ALL>...

When you use the ALIGN attribute with images you may notice a problem when you use the <HR> tag, because in some cases you may want the horizontal rule to fall below the image.. not next to it.. example:

<img src="html2.gif" align=left>this is a big image.<hr>

this is a big image.

If you want the horizontal rule to fall below the image, you can add the <br clear=all> tag between the image and the horizontal rule. Example:

<img src="html2.gif" align=left>this is a big image.
<br clear=all><hr>

this is a big image.

This is also useful in other instances, such as when you want the text to fall below the image.

Transparent Gifs...

.gif files support a feature called transparency, in which one color out of the 256 colors is set to be transparent. The HTML: Advanced and Enhanced graphic pictured above is an example of a transparent gif, because the background of the file is invisible, letting the web page's background show through. In many graphics programs you will find an option to save the background color as transparent, which allows you to make your own transparent gifs.

Interlaced vs. Non-Interlaced...

When a graphic is downloaded into a web page, it is loaded one of two ways, interlaced (every other line the first time, then the other lines the second time) or non-interlaced (first line, then second line, then third line) Here is an Example of each type:

Interlaced Gif - flowers_int.gif
Non-Interlaced Gif - flowers_non.gif
Non-Interlaced Jpg - flowers_nonjpg.jpg
The two gifs take about the same time to load, so it is up to you which one you wish to use on your web pages. This feature is not determined by a tag, rather by the format you saved the file in. (You'll notice the jpg is clearer... that's because jpg was made for photographs.)

"I'm Lost" - Why do I write a small paragraph about interlaced vs. non-interlaced images? When this tutorial was first written, 28.8kbps modems were the newest and greatest thing. In speeds of 28.8kbps and less (most cell phone/PDA browsers circa 2000/2001 still run at 9.6kbps to 14.4kbps) an interlaced image has the appearance of loading faster, and makes your site look a bit more professional. In current day when most modem speeds are 56kbps and it is common to have cable or DSL in the home, this is not nearly as much of a concern.

Animated Gifs...

The gif version 89a supports an advanced technology which allows animation. Inside a single .gif file is stored many picture frames and an index telling how long each frame should be shown, if they should repeat after they are done, etc. If you wish to create your own animated gifs, try using UnFREEz [freeware] or the Gif Construction Set from Alchemy Mindworks [shareware] if you are using Windows. Animated .gifs are treated as a standard img file, so it is loaded with the standard <IMG> tag.

The Button pictured to the right is also an animated .gif.

Reference to the standard IMG tag...

<img src="image.ext" width=x height=x border=x alt="x">

Name Of File--^    pixels--^ pixels-^ border-^ text-^

                     wide       deep      size  description

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags just to try it out.

Try typing this:

<html>
<head><title>Little Joe's Graphics</title></head>
<body>

<img src="http://www.davesite.com/webstation/html/html2.gif" align=left><br clear=all><hr>
<img src="http://www.davesite.com/webstation/html/learnnow.gif" border=0 align=left>
This is a cool animation:)
This page Copyright &copy; 1997 Little Joe's Pages &amp; davesite.com.

</body>
</html>

Mini Chapter 12: Tables

Tables...

Example of a Table...

<table border=4>

<tr>

<th>What are tables used for?</th>

</tr>

<tr>

<td>Tables are used to make data easier to interpret or to just

give your document more impact.</td>

</tr>

</table>

Tables are one of the most challenging things to code with HTML. It isn't very hard, it just takes a while to get the hang of. Tables start with the <table> tag, and usually contain the border=n attribute within the opening tag. If the border=0, than the table's border is invisible. Usually when you do not use the border attribute the table border will become invisible. This is useful when you want to align text in rows and columns, but don't want a table border around it. border=1 is a thin border. border=2 is a little thicker, border=3 a little more thick.. and so on. The table MUST end with a </table> tag, or the table will not appear at all!

Example of tables with borders...

<table border=0>

<tr>

<td>This table has a

border of 0.</td>

</tr>

</table>

<table border=3>

<tr>

<td>This table has a

border of 3.</td>

</tr>

</table>

Each row within the table is defined by the opening <tr> tag and the optional </tr> closing tag. Within each table row are table cells, which are defined by the <td> opening and </td> closing tags. Most table rows contain more than one cell. Many times, you will need a heading for a column of cells of the first row. To do this, you will use the <th> opening and </th> closing tag. The table heading tag makes the text in that cell BOLD and CENTERED. You only need use the heading cells when necessary.

Example of a table with multiple rows and columns...

<table border=2>

<tr>

<th>Heading A</th><th>Heading B</th><th>Heading C</th>

</tr>

<tr>

<td>Cell A</td><td>Cell B</td><td>Cell C</td>

</tr>

<tr>

<td>Cell D</td><td>Cell E</td><td>Cell F</td>

</tr>

</table>

But what if you want your table to look like the following?

<table border=2>

<tr>

<th>Heading A</th><th>Heading B</th><th>Heading C</th>

</tr>

<tr>

<td rowspan=2>Cell A & D</td><td>Cell B</td><td>Cell C</td>

</tr>

<tr>

<td>Cell E</td><td>Cell F</td>

</tr>

</table>

Notice how the rowspan=2 attribute was added. This allows that cell to span two rows. If you want a cell to span more than column, use the colspan=n attribute. Also, you may wish to use the ALIGN and VALIGN attributes to align the contents of cells. If you wish to change the horizontal alignment of the contents of a certain cell, add ALIGN=LEFT, ALIGN=CENTER, or ALIGN=RIGHT to the opening <td> tag. If you wish to change the vertical alignment of the contents of a cell, use the VALIGN=TOP, VALIGN=MIDDLE, or VALIGN=BOTTOM attributes. You may also want to try out the WIDTH=n% attribute, to change the width of a table or a cell.

Example of ALIGN attributes within a table...

<table border=1 width=100%>

<tr>

<td align=left>Left Alignment</td>

<td align=center>Center Alignment</td>

<td align=right>Right Alignment</td>

</tr>

</table>

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags and the tag attributes just to try it out.

Try typing this:

<html>
<head><title>Title goes here</title></head>
<body bgcolor="#AABBCC">
<h1 align=right>Body goes here</h1>
<hr>
<center><h3>Headings are kewl!</h3></center>
<hr size=10>
<table border=2 width=75%>
<tr>
<td>Tables</td><td>give</td><td>impact!</td>
</tr>
</table>
</body>
</html>

Mini Chapter 13: Adding Sounds

Adding Sounds...

To add sounds to a web page... we will use the <EMBED> tag. This tag supports many common file formats... such as .wav, .mid, and .au. Here is the basic structure of the tag:

<embed src="filename.ext" width=x height=x autoplay=x hidden=x loop=x volume=x></embed>

If you want the file to automatically play when the web page is loaded, set autoplay=true, if you do not want the file to automatically start, set autoplay=false. If you want the control box to be hidden, use the hidden=true attribute. Normally the file will stop playing after it is completed the first time, so if you want it to start over once it is done use the attribute loop=true. You can set the volume setting with the volume attribute, a value from 1 to 100 (default is 50). The control box size that plays the sound can vary from browser to browser, but some versions of Netscape won't show the box at all unless you specify. (145 and 60 are usually good)

Example of the embed tag...

<embed src="http://www.davesite.com/webstation/html/davesite.wav" loop=true autoplay=false width=145 height=60></embed>


NOTE: Because this embed tag was not set to autoplay=true, you will need to click the play button to play the sound file.
You may use multiple embed tags within one page, but it is recommended to never set more than one on autoplay. It is also not recommended to use .wav or .au files in the embed tag, because they are very large and take a few minutes to download. (.mp3 also falls into the category of "too large to use".)

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags just to try it out.

Try typing this:

<html>
<head><title>Little Joe's Sound Page</title></head>
<body>

<embed src="http://www.davesite.com/webstation/html/davesite.wav" width=145 height=60 autoplay=false></embed>
welcome to davesite.com<br>

This page Copyright &copy; 1997 Little Joe's Pages &amp; davesite.com.

</body>
</html>

Mini Chapter 14: Using Frames

What are Frames?

Frames are a way to divide the browser screen to allow easier navigation under some circumstances. Frequently, frames are used to add a side menu bar to a web site where the constant back and forth clicking would become tedious in a single page. In this example, the side menu bar would allow the user to just click in the side menu bar, and their choice would load into the main window.

Example: Side Menu Bar

This is what the index.htm would look like:

<html>

<head><title>title here</title></head>

<frameset cols="15%,85%">

 <frame src="menu_bar.htm" name="sidemenu">

 <frame src="main.htm" name="mainwindow">

</frameset>

<noframes>

 Your browser does not support frames.

 <a href="frameless_main.htm">Please visit the frameless page.</a>

</noframes>

</html>

Notice that there is no actual <body> coding. It is common courtesy, however, to place a <noframes> area after the frameset, but this is completely optional. This <noframes> area only displays in browsers that are not able to show frames.

If you create a special page for those without frames, you may be doubling your work. It is best, with effort and practice, to create a page, in this case, main.htm, that will work in both frames and noframes browsers. Then your noframes would read:

<noframes>

 Your browser does not support frames.

 <a href="main.htm">Please visit the frameless page.</a>

</noframes>

About <frameset> and <frame>

The frameset tag is used to declare multiple frames. As you can see in our first example, the menu bar side, there was one frameset. It read:

<frameset cols="15%,85%">

This tells the browser, we are creating column of framed pages, the first one is to take up 15% of the total browser screen, and the second is to take up 85% of the total browser screen. Then, we introduced <frame>, which is what actually loads the pages. Each frame must have a src, such as src="some_page.htm". So, because we used two framed areas within the frameset, we need two frame tags, each of them to load a page.

 <frameset cols="15%,85%">

 <frame src="menu_bar.htm" name="sidemenu">

 <frame src="main.htm" name="mainwindow">

</frameset>

If we would like to add a third column, we would need to add a third size definition in the cols (so that all would add up to 100%) and another frame tag inside the frameset.

Likewise, we can use a rows definition instead of a columns definition. If we wanted the menu to be a bottom menu bar, we would do something like:

 <frameset rows="80%,20%">

 <frame src="main.htm" name="mainwindow">

 <frame src="menu_bar.htm" name="bottommenu">

</frameset>

If you wanted the menu at the top, just switch it around a little bit:

 <frameset rows="20%,80%">

 <frame src="menu_bar.htm" name="topmenu">

 <frame src="main.htm" name="mainwindow">

 </frameset>

Mini Chapter 14.2: More About Using Frames

Special Linking with Frames

Okay, so let's go back to our original example, the side menu bar.

In file index.htm:

<html>

<head><title>title here</title></head>

<frameset cols="15%,85%">

 <frame src="menu_bar.htm" name="sidemenu">

 <frame src="main.htm" name="mainwindow">

</frameset>

</html>

Now, we are going to need to create our menu_bar.htm page, and our main.htm page. Each of these must be edited separately. Each of these pages is almost exactly like a regular HTML page, except that there is an advanced linking option called the target attribute.

If you added regular links in menu_bar.htm and clicked on them, each page would load into the small, side frame! To get around this, you'll want to add a target attribute to each link you want to load in the main window.

inside menu_bar.htm:

<a href="oranges.htm" target="mainwindow">Load oranges</a><br>

<a href="apples.htm" target="mainwindow">Load apples</a><br>

<a href="kiwis.htm" target="mainwindow">Load kiwis</a><br>

Now, when you click on any of those links, they will end up loading in the larger window instead of the smaller window.

If you wanted to change the menu, to say animals instead of fruits from the main window, you could do something like <a href="animals.htm" target="sidemenu">Load animals into side menu bar</a> in main.htm.

There are three important target attributes you should be aware of:

target="_blank" - link is loaded into a new blank browser window (and your old window stays open).
target="_self" - link is loaded into frame that link was clicked in. (this is the default selection. Leave it out if you so please.)
target="_top" - link is loaded into current full browser window, and all frames disappear, leaving the new linked page to occupy the entire window.

Mini Chapter 14.3: Even More About Using Frames

Special attributes of <frame>

There are two special attributes you should be aware of for the <frame> tag. Let's go back to the side menu example.

<frameset cols="15%,85%">

 <frame src="menu_bar.htm" name="sidemenu">

 <frame src="main.htm" name="mainwindow">

</frameset>

Say you wanted to lock in the sidemenu frame (the menu bar frame) so that the user couldn't resize it. (Imagine the user moving the divider bar so that half the browser has the menu, and half has the main window. Wouldn't that look silly?)

In order to lock the size, add the words noresize to the frame you want to lock:

<frameset cols="15%,85%">

 <frame src="menu_bar.htm" name="sidemenu" noresize>

 <frame src="main.htm" name="mainwindow">

</frameset>

This does not prevent you from changing the pages inside the windows, it just prevents the user from modifying the frame size when the page loads.

The other useful attribute is scrolling. Say you always want a scrollbar to appear in the main window. Add scrolling="yes". Want there to never be a scrollbar? Add scrolling="no".

Example:

<frameset cols="15%,85%">

 <frame src="menu_bar.htm" name="sidemenu" noresize>

 <frame src="main.htm" name="mainwindow" scrolling="yes">

</frameset>

More Advanced Frames

You can embed a frameset anywhere there is a frame if you want to split that section further. Want a special, fixed area for your logo graphic at the top of the menu bar? Try this:

<frameset cols="15%,85%">

 <frameset rows="20%,80%">

   <frame src="logo.htm" noresize>

   <frame src="menu_bar.htm" name="sidemenu" noresize>

 </frameset>

 <frame src="main.htm" name="mainwindow" scrolling="yes">

</frameset>

Now, here are some things to think about. How would you get four even frames in two rows?

You could do:

<frameset rows="50%,50%">

 <frameset cols="50%,50%">

   <frame>

   <frame>

 </frameset>

 <frameset cols="50%,50%">

   <frame>

   <frame>

 </frameset>

Three even columns?

<frameset cols="33%,33%,33%">

  <frame>

  <frame>

  <frame>

</frameset>

How about three rows, the first one 1/4 of the screen, the second 1/2 of the screen, and the third 1/4 of the screen?

<frameset rows="25%,50%,25%">

 <frame>

 <frame>

 <frame>

</frameset>

Same as above, but the very bottom frame split into two equal columns?

old...

<frameset rows="25%,50%,25%">

 <frame>

 <frame>

 <frame> <-- replace this

</frameset>

new...

<frameset rows="25%,50%,25%">

 <frame>

 <frame>

 <frameset cols="50%,50%">

  <frame>

  <frame>

 </frameset>

</frameset>

Mini Chapter 15: Using Meta Tags

Improving Search Engine Results...

When a search engine finds your page, it will need to index it (that is, add it to its searchable database) with some information off the page. Many search engines now support the <META> tags, which allow you to give keywords and a description to your page. This gives you more control over how your page will show up during a search, and will often cause more traffic to your page.

The <META> tag can be used for a few different purposes. Usually, you should place the <META> tag within the <head> tags at the beginning of your document. To improve search engine results, we will use two specific attributes within the meta tag. Here is an example:

<meta name="description" content="description of page goes here">
<meta name="keywords" content="keywords go here">

When a user searches a search engine that supports meta tags and they query a phrase (search for a keyword) related to your page, your page may show up in the list of results. Your page will be listed by its Title, and then underneath its title will be the first hundred or so characters of the description you placed in the meta tag. It is recommended that you keep the description content to no more than 200 characters. Although the keywords content is not seen by the user when searched, it is recommended to keep this less than 1000 characters, because if you have more the search engine will either ignore the rest or delete you from the index. (Commas are not needed to separate keywords)

Example of a real-life meta situation...

<html>

<head>
<title>Little Joe's Sound Page</title>
<meta name="description" content="Joe's Collection of Cool Sound files for you to use in your home page!">
<meta name="keywords" content="music sounds midi wav joe collection">
</head>

<body>
Page Goes Here
</body>

</html>

Meta tags are not visible in the web page unless the user selects to 'view source'.

Auto-refreshing...

Automatic Refreshing is supported by many newer versions of Netscape Navigator and Microsoft Internet Explorer. This also uses a modified form of the <META> tag. Auto refreshing means that once one page loads, you can set a certain number of seconds and then the browser will load another page automatically. The basic structure is as follows:

<meta http-equiv=REFRESH CONTENT="x_seconds; url=http://www.yourhost.com/pagetosendto.html">

The URL is the page you want it to refresh to, CONTENT is the number of seconds you want it to wait before refreshing, and http-equiv=REFRESH just tells it that this is the refresh meta tag. For example, if you wanted the page to refresh to davesite.com after 5 seconds it would be as follows:

<meta http-equiv=REFRESH CONTENT="5; URL=http://www.davesite.com/">

Try it Yourself!

In the Box below, type the following HTML code, then click "Check it Out!" The HTML document you made will be displayed in your browser. You may wish to change the words within the tags just to try it out.

Try typing this:

<html>
<head><title>Pratice Meta Tags</title>
<meta name="description" content="Joe's Collection of Cool Sound files for you to use in your home page!">
<meta name="keywords" content="music sounds midi wav joe collection">
<meta http-equiv=REFRESH CONTENT="5; URL=http://www.davesite.com/webstation/html/chap15.shtml">
</head>
<body>

This page Copyright &copy; 1997 Little Joe's Pages &amp; davesite.com.
</body>
</html>

Mini Chapter 16: Adding Counters and Guest books

Adding Counters...

An access counter will give you an estimate on the amount of traffic (visitors) your page has had. Access counters are usually a graphic odometer. Counters are not always accurate, because if someone visits your page in a text browser such as Lynx, or with graphics loading turned off, their visit will not increment (add 1) your counter. Also, if a visitor hits the reload button, your access counter will increment by one. To add a counter to your page, the place you get the counter from will give you a few lines of HTML code to paste into your page where you want the counter to appear.

The most reliable counter will come from your home page hoster if they offer one. If your page is hosted by your ISP, contact them to see if they offer a free counter to you. If your page is located on a free hoster, they may offer a free counter to you also...

• Adding Counters to Angelfire Pages
• Adding Counters to GeoCities Pages

Many other hosts offer free counters... be sure to check out the help/FAQ of their site. If your home page hoster does not provide a free counter, or you wish to get a free counter from elsewhere, you have a few other options. One of them used to be Digits.com, but they recently shut down new counter requests because their servers were overloaded. Also, CyberHits, which I formerly recommended as a counter, has shut down its servers. If you still need to find a counter outside your home page provider, you should find a few good options on the Web Page Access Counters and Trackers Page @ markwelch.com.

Adding Guestbooks...

Guestbooks help you to know who is visiting your site, and what their comments are about it. When you view your guestbook, it will show anyone that has signed it. When someone signs your guestbook, they usually have options to put their name, email address, home page url, where they found your page from, where they live, and any comments they have about your page.

Over the past, Lpage.com has been slow at serving guestbooks, but recently they have increased capacity and are again my recommended guestbook server. When your create your guestbook, you will receive the HTML code to cut and paste into your page. Another place to consider is Alxbook.com.

Mini Chapter 17: Adding Forms and the mailto form

Adding Forms

Forms are used to take input from a user at a web page. Generally, a form is used in conjunction with a CGI, PHP, or ASP script -- all three of these types of scripts require quite a bit of programming knowledge to use successfully. For your benefit, I have included brief descriptions of many form elements and a short tidbit on using a mailto (CGI-less) form if you feel you absolutely must have a form on your page.

If you have no interest in forms, feel free to skip this chapter.

Regardless of whether you use this knowledge immediately or not, it may be useful to you if you one day decide to learn a web programming language or are just viewing someone else's page that contains forms and want to understand it better.

A form opens with <form>, and closes with </form>. The opening <form> tag should contain an action attribute to a script (or e-mail address in the case of a mailto) and a method to post, either method="GET" or method="POST".

Data from a form with method="GET" is posted by appending the data to the end of the script URL, while data from a form with method="POST" is send as a separate packet to the HTTP server. (Basically, POST data is much less obvious to the visitor than GET data, because it is more out of sight. This does not mean that the visitor cannot view the data that will POST, because they can view the source of the form by using the View Source option of their web browser.)

All elements must be enclosed within the opening and closing <form> tags. This allows one page to have multiple independent forms.

Forms: input TEXT and input SUBMIT

The two most basic elements of a form are the text input and the submit button. A text input looks like this:

<input type="text" name="mytextbox" size="10" maxlength="25">

name is a unique name, so you need to give each input a different name, otherwise your script may not recognize the data properly. A name is required.

size and maxlength are optional. size is the size of the box, and maxlength is the maximum number of characters or digits that can be typed into the box.

Here's what the box coded above looks like:

If you wanted the box to include data (to which the user could add, modify, or delete completely) add a value="your data" attribute. If we wanted a box to be displayed with My name is: we could use something like this:

<input type="text" name="yourname" value="My name is:">

Including the value, the text input box now looks like this:

If you are requesting a password, you can hide it from the screen by using type="password" instead of type="text". The other values can be the same.

The submit button looks like this:

<input type="submit" value="Submit Info!">

type="submit" tells the browser that this is a button, and value tells the browser what text should be displayed on the button.

(Notice how the type switched from text to submit. Many other form elements will be modified in this same fashion.)

Let's put this all together. He's a simple form (with no action, for display purposes only) that has an input box and a submit button.

<form method="post">
Visitor name: <input type="text" name="visitorname" size="10" maxlength="20"><br>
<input type="submit" value="Submit Info!">
</form>

And here's what it looks like:

(Clicking this button will not do anything because there was no action in the opening form tag.)

Forms: additional input types

Other important input types are checkbox, radio, image, and button.

A checkbox is self-explanatory. Here's an example:

Which fruits do you like?<br>
<input type="checkbox" name="fruit" value="apples"> Apples<br>
<input type="checkbox" name="fruit" value="oranges"> Oranges<br>
<input type="checkbox" name="fruit" value="bananas"> Bananas<br>

This question as a part of a form would appear like this:

If we thought most people liked apples, we could pre-select it by adding the word checked in the input.
(i.e. <input type="checkbox" name="apples" checked> Apples<br>)

Radio buttons are sets of circle-like selectors in which the user may only make one choice. If we wanted to ask for a user's favorite fruit (meaning only *one* favorite) we could do it like this:

Which fruit is your favorite?<br>
<input type="radio" name="fav" value="apples"> Apples<br>
<input type="radio" name="fav" value="oranges"> Oranges<br>
<input type="radio" name="fav" value="bananas"> Bananas<br>

This question as a part of a form would appear like this:

Forms: graphical submit button, reset, buttons, hidden fields

Instead of using a regular button as a submit, you can use a .jpg or .gif you've created and placed on your host. The syntax is as follows:

<input type="image" src="graphic_URL" alt="Submit!">

So, if I had a graphic called submitbutton.gif I could use:

<input type="image" src="submitbutton.gif" alt="Submit!"> in place of a regular <input type="submit"> button.

If you were programming in JavaScript, you might find <input type="button"> useful. It creates buttons that do not submit the form, but rather can perform a JavaScript action.

If you wanted a button to reset (usually clear) a form, use <input type="reset" value="Clear Form">

If you wanted to include data in a form that could not be edited or seen (unless the source was viewed), you could use <input type="hidden" name="your_data_name" value="your_value">. For example, if you had two forms on two separate pages, one in a section of your site about coffee, and another in a section of your site about flowers, you could put:

<input type="hidden" name="section" value="coffee"> in the coffee section, and:

<input type="hidden" name="section" value="flowers"> in the flowers section so you could distinguish between forms submitted from each page.

Forms: textarea and option/select

Two final parts of forms that are very important: the <textarea> and the <option>.

The <textarea> was used in the interactive feature of this tutorial. It allows the user to enter multiple lines of text or information. It has an opening and closing tag, unlike most form elements. A textarea has just a name, rows and cols (as in the amount of rows of text, and the number of columns of characters in each row.) You can also set wrap="virtual" if you don't want the text a user types to go outside the right side of the box.

Example of textarea:

<textarea name="body" cols="35" rows="4" wrap="virtual"></textarea>

Anything you include between the opening and closing textarea tags will appear in the textarea box.

The <select> element works a lot like a radio button, except in that it used a cool drop down box. It also has a closing tag, </select>. Choices for the drop down box are created by using <option> tags.

We could ask the favorite fruit question with a select (drop down) box like this:

<select name="fav">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>

You can include many of the elements together on a single form. Just have your opening form tag with an action and method, then at least one input box, and a submit button, and you're set! Finish off the form with a </form>.

the Mailto form

A mailto form is an undependable way for a web page to ask for information from a user without actually using a web script. Although I *do not* recommend using this type of form, I am including because I receive frequent requests for it. You should know immediately that this does not work in all web browsers (it *usually* works in Netscape).

A mailto form starts out the same way any other form starts out. Instead of specifying the location (URL) of a web script, it merely specifies an e-mail addrress, preceded by mailto:. It doesn't matter a whole lot whether you use GET or POST. If you want the resulting e-mail to be somewhat readable, you need to add enctype="text/plain". So, the basic opening tag would like something like this (if your e-mail address was tacoman@davesite.com):

<form action="mailto:tacoman@davesite.com" method="POST" enctype="text/plain">
</form>

This form is very silly. It doesn't even have any input boxes or a submit button. Let's add those, as well as a question or two about taco preferences. While we're at it, let's throw in an image instead of a regular submit button.

Code:

<form action="mailto:tacoman@davesite.com" method="POST" enctype="text/plain"><br>

Your first name: <input type="text" size="15" maxlength="25"><br>

<p>Do you like?<br>
<input type="checkbox" name="likes" value="soft"> Soft Tacos<br>
<input type="checkbox" name="likes" value="hard"> Hard Tacos<br>
<input type="checkbox" name="likes" value="bean"> Bean Burritos<br>

<p>What is your favorite taco sauce?<br>
<select name="favsauce">
<option value="mild">Mild</option>
<option value="medium">Medium</option>
<option value="hot">Hot</option>
</select>

<p><input type="image" src="submitbutton.gif" alt="Submit!">

</form>

Results:

Forms-related Resources

You will see a form that uses a CGI-script instead of mailto when you finish the tutorial. The feedback form uses CGI with Perl.

• For the most detailed information on forms, please visit the W3C (choose HTML, then forms).
• For information on Perl (a scripting language commonly used with CGI) visit perl.org.
• For information on PHP (commonly used in dynamic web pages, and easily connected with mySQL and other databases for awesome web sites) visit PHP.net.

Promo Chapter 1: Getting in Search Engines

Why Should I take the time?

Unless you publish a major newsletter, magazine, newspaper, or know someone with a really high-traffic site who is willing to give you a link, you probably won't get many people visiting your page when you first start it. Most of you first visitors will have found you by word of mouth, probably you bragging about your new page.:)

Traffic usually comes one of the following ways: word of mouth, by being mentioned in printed media, links from other sites, and search engines. Search Engines don't really take all that much of your time to submit to, so it is really worth the time you spend in the long run.

Unless you are linked to by someone else on the internet, your new page is probably not in any search engine yet. To get in a search engine, you should submit your site. For most search engines, all you will need is your URL (http://www.yourprovider.com/yourdir/yourpage.html) and possibly a contact email address.

The Two Main Types of Search Engines

Indices - An Index is a collection of the text off web pages that it has spidered or crawled, as it visits new pages it collects links from it, and visits the linked pages, and so on. It slowly makes its way around the web collecting more pages and links, updating the index about old pages and deleting pages that no longer exist or that have moved. Normally all you will need to get into an index search engine is submit your URL, and the spider (program that collects the data) will visit your page, possibly the next day, possible the next week, or possibly in the next month, depending on the engine. In many indices your page will be found better if you add META tags BEFORE you submit, which was covered in MiniChapter 15.

Catalogs - A Catalog doesn't actually visit your page, instead you submit your URL, Title, and Description to it, and place it in the proper category. Often these are verified by a real person which usually delays entry a few weeks, but sometimes your entry is automatically added once you have submitted. Catalogs are often more accurate in finding a page on a well known topic. META tags are not used by many catalogs.

Major Indices

A lot of sites still offer free submits, it just takes a few clicks to find the right page. Most of the sites below offer a free listing. It may take a few minutes to locate the proper page, but many sites make it difficult for me to link directly to the free submit section.

• Google (http://www.google.com/) - Google has a fascinating ranking engine. If you want to get into Google, your best bet is to network with like minds: exchange links (we call it reciprocal linking) with related sites.
  Boost your Google rankings! Download your copy of "Google Ranking Secrets Revealed!"
• AltaVista (http://www.altavista.com/) - Search - Submit
• MSN (http://www.msn.com) - Search - Submit
• HotBot (http://www.hotbot.com/) - Search - Submit
• Lycos (http://www.lycos.com/) - Search - Submit
• Excite (http://www.excite.com/) - Search - Submit
• Webcrawler (http://www.webcrawler.com/) - Search - Submit