HTML Old School
I found this information while searching through my old files. A lot of this information has been replaced with new codes but there are still a lot of people that use the old html code and if you buy templates you will find a lot of this old code there as well.
This used to be an html website and as the information is not copyrighted I am going to share it with you.
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 type-written.
Of course, the HTML code for this can look confusing…
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, 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…
<head><title>Title goes here</title></head>
<body>Body goes here</body>
</html>
<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. [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.
Your own HTML page...
To begin writing your own HTML page, type the following into a new text file:
<head><title>My Home Page</title></head>
<body>
</body>
</html>
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…
H1: Bob fell over the chicken.
H2: Bob fell over the chicken.
H3: Bob fell over the chicken.
H4: Bob fell over the chicken.
H5: Bob fell over the chicken.
H6: Bob fell over the chicken.
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>
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!
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.
Text Formatting Properties...Font Tags
The <font size=n> and </font> tags come in handy.
n is the number of font points by which to change the size of the current font.
n can be positive or negative: a positive number will increase the font size, and a negative number will decrease it.
n can also be an absolute number, indicating an absolute size for the font (not a relative size).
Example of font tags…
Bob is a Cool Guy isn’t he?
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 Two.
Sentence Three.
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…
The cat ran after the dog. ^ ^-verb ^noun ^-noun
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…
The cat ran after the dog.
^ ^-verb ^noun
^-noun
<pre>
The cat ran after the dog.
^ ^-verb ^noun
^-noun
</pre>
Your own HTML page...
Add the following to your HTML page (“Home.htm”), between the lines <body> and </body>:
<h1>YOURNAME's Home Page</h1>
<hr>
This is the home page of <b>YOURNAME</b>.
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
Save the text file as “Home.htm”.
Chapter 4: A little more tags
The CENTER 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
The BODY attributes...
In Chapter 1 you learned the BODY tag. The BODY tag has many attributes… here are a the most useful ones…
- BACKGROUND="location_of_image" – Background Image
- BGCOLOR="#hexadecimal_here" – Background Colour
- LINK="#hexadecimal_here" – Colour of Links
- VLINK="#hexadecimal_here" – Colour of Links the User has Already Visited
- TEXT="#hexadecimal_here" – Text Colour
- Click Here to Learn how to specify Colours
Your own HTML page...
Right click in the centre of the image below, and select “Save Image As” / “Save Picture As”, or similar. Save it as “bgnd.gif” in the same directory where your home page “Home.htm” is stored.
Add the following to your HTML page (“Home.htm”): (the blue text is what to add)
<head><title>My Home Page</title></head>
<body background="bgnd.gif">
<center><h1>YOURNAME's Home Page</h1></center>
<hr>
This is the home page of <b>YOURNAME</b>.
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
</body>
</html>
Save the text file as "Home.htm".
Please note that the NBA logo is the sole property of the National Basketball Association. All rights reserved.
Chapter 5: Extended Fonts and Text Color
Extended Fonts...
The newest version of many browsers 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>
Helvectica
<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!
Your own HTML page...
Add the following to your HTML page (“Home.htm”): (the blue text is what to add)
<head><title>My Home Page</title></head>
<body background="bgnd.gif">
<center><font color="Blue"><h1>YOURNAME's Home Page</h1></font></center>
<hr>
This is the home page of <b>YOURNAME</b>.
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
</body>
</html>
Save the text file as "Home.htm".
Chapter 6: 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 Sybase South Africa!
Visit <a href="http://www.sybase.co.za/">Sybase South Africa</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 Webmaster!
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…
Combining Links and Images...
Many times you may want to have an image that is linked, so that if someone clicks the image, they 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!
When an image is also a link, it has a border around it by default. You can control the width of the border – or turn it off completely – by using border=n within the img tag. n is the width of the border (n = 0 for no border).
Example of a linked image…
Your own HTML page...
Right click on the image in the centre of the black-bordered box below, and select “Save Image As” / “Save Picture As”, or similar. Save it as “bullet.gif” in the same directory where your home page “Home.htm” is stored.
Add the following to your HTML page (“Home.htm”): (the blue text is what to add)
<head><title>My Home Page</title></head>
<body background="bgnd.gif">
<center><font color="Blue"><h1>YOURNAME's Home Page</h1></font></center>
<hr>
This is the home page of <a href="mailto:YOUR EMAIL ADDRESS"><img src="bullet.gif" border=0><b>YOURNAME</b>.<img src="bullet.gif" border=0></a>
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
</body>
</html>
Save the text file as "Home.htm".
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> <li>pens</li> <li>erasers</li> <li>paper</li> <li>glue</li> </ul>
The <ul> tag is the opening Unordered List Tag. Therefore, the </ul> is the closing tag. Between these two tags you place LIST ITEMS, each one having an individual <li> opening tag, and an optional </li> closing tag. 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…
- pencils
- pens
- erasers
- paper
- glue
Notice the Number Before each List Item. Now here is the HTML Code for the Ordered List Above…
<ol> <li>pencils</li> <li>pens</li> <li>erasers</li> <li>paper</li> <li>glue</li> </ol>
The Definition List...
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 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>
Your own HTML page...
Add the following to your HTML page (“Home.htm”): (the blue text is what to add)
<head><title>My Home Page</title></head>
<body background="bgnd.gif">
<center><font color="Blue"><h1>YOURNAME's Home Page</h1></font></center>
<hr>
This is the home page of <a href="mailto:YOUR EMAIL ADDRESS"><img src="bullet.gif" border=0><b>YOURNAME</b>.<img src="bullet.gif" border=0></a>
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
<hr>
<h2>My favourite Web Sites</h2>
<br>
<li> <a href="http://www.xencon.com">Xenon Web Design</a> </li>
<li> <a href="http://www.microsoft.com">Microsoft</a> </li>
<li> <a href="http://www.sybase.com">Sybase</a> </li>
<li> <a href="http://www.sybase.co.za">Sybase South Africa</a> </li>
</ul>
</body>
</html>
Save the text file as "Home.htm".
Chapter 8: Clean Code, Comments, and Escape Codes
Clean Code...
Clean code means that your HTML coding follows all specifications. 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 <
- For the > type >
- For the © type ©
- For the & type &
- For the " type "
- 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>.
- 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>
- Wrong Way (Overlaps):
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 -->.
Your own HTML page...
Add the following to your HTML page (“Home.htm”): (the blue text is what to add)
<head><title>My Home Page</title></head>
<!-- The body starts here - and a background image is loaded -->
<body background="bgnd.gif">
<center><font color="Blue"><h1>YOURNAME's Home Page</h1></font></center>
<!-- This is a horizontal line -->
<hr>
<!-- My name and the two images are all part of a link - which is a "mailto" link -->
This is the home page of <a href="mailto:YOUR EMAIL ADDRESS"><img src="bullet.gif" border=0><b>YOURNAME</b>.<img src="bullet.gif" border=0></a>
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
<hr>
<h2>My favourite Web Sites</h2>
<br>
<!-- This list is an unordered list -->
<ul>
<li> <a href="http://www.xencon.com">Xenon Web Design</a> </li>
<li> <a href="http://www.microsoft.com">Microsoft</a> </li>
<li> <a href="http://www.sybase.com">Sybase</a> </li>
<li> <a href="http://www.sybase.co.za">Sybase South Africa</a> </li>
</ul>
</body>
</html>
Save the text file as "Home.htm".
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">.
Your own HTML page...
Add the following to your HTML page (“Home.htm”) (the blue text is what to add).
<head><title>My Home Page</title></head>
<!-- The body starts here - and a background image is loaded -->
<body background="bgnd.gif">
<center><font color="Blue"><h1>YOURNAME's Home Page</h1></font></center>
<!-- This is a horizontal line -->
<hr>
<!-- My name and the two images are all part of a link - which is a "mailto" link -->
This is the home page of <a href="mailto:YOUR EMAIL ADDRESS"><img src="bullet.gif" border=0><b>YOURNAME</b>.<img src="bullet.gif" border=0></a>
<p>Type something about yourself here. Describe briefly who you are and what you do for a living. Remember to use bold and italic text, for emphasis.</p>
<ol>
<!-- The first item is a link to a section labelled FavLinks -->
<li><a href="#FavLinks">My Favourite Web Sites</a></li>
<!-- The second item is a link to a section labelled Hobbies -->
<li><a href="#Hobbies">My Hobbies</a></li>
</ol>
<!-- This command labels this point as section FavLinks -->
<a name="FavLinks">
<h2>My favourite Web Sites</h2>
<!-- This list is an unordered list -->
<ul>
<li> <a href="http://www.xencon.com">Xenon Web Design</a> </li>
<li> <a href="http://www.microsoft.com">Microsoft</a> </li>
<li> <a href="http://www.sybase.com">Sybase</a> </li>
<li> <a href="http://www.sybase.co.za">Sybase South Africa</a> </li>
</ul>
<hr>
<a name="Hobbies">
<h2>My Hobbies</h2>
</a>
Talk about your hobbies here.
</body>
</html>
Save the text file as "Home.htm".
Chapter 10: Tables
Tables...
Example of a Table…
| What are tables used for? |
|---|
| Tables are used to make data easier to interpret or to just give your document more impact. |
<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…
| Heading A | Heading B | Heading C |
|---|---|---|
| Cell A | Cell B | Cell C |
| Cell D | Cell E | Cell F |
<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> </tr> </table>
But what if you want your table to look like the following?
| Heading A | Heading B | Heading C |
|---|---|---|
| Cell A & D | Cell B | Cell C |
| Cell E | Cell F |
<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> </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…
| Left Alignment | Center Alignment | Right Alignment |
<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>
Your own HTML page...
Right click on the image in the centre of the black-bordered box below, and select “Save Image As” / “Save Picture As”, or similar. Save it as “phxsuns.jpg” in the same directory where your home page “Home.htm” is stored.
Tables can be used without borders, to align images and text next to each other. Change the heading of your home page to a table, like this:
<head><title>My Home Page</title></head>
<!-- The body starts here - and a background image is loaded -->
<body background="bgnd.gif">
<table border=0 width=100%>
<!-- Beginning of the row -->
<tr>
<!-- Beginning of the first cell -->
<td align=center>
<!-- The first cell contains an image -->
<img src="fraidbut.gif">
<!-- End of the first cell -->
</td>
<!-- Beginning of the second cell -->
<td align=center>
<!-- The second cell contains the original heading -->
<font color="Blue"><h1>YOURNAME's Home Page</h1></font>
<!-- End of the second cell -->
</td>
<!-- Beginning of the third cell -->
<td align=center>
<!-- The third cell contains an image -->
<img src="fraidbut.gif">
<!-- End of the third cell -->
</td>
<!-- End of the row -->
</tr>
<!-- End of the table -->
</table>
<hr>
.
.
.
</body>
</html>
Save the text file as "Home.htm".
Chapter 11: Using Frames
What Frames Are...
Frames is one of the newer features of HTML which is only implemented on the newest browsers (Netscape 2.0 and higher, and the new Internet Explorers, and many others) which allows a single browser window to be divided into multiple sections, each with an independent HTML page loaded inside it, and these HTML pages can interact with each other. Each page loaded within each section of the frames window is a separate HTML document.
Example of the code to a simple frames page…
<head><title>testing frames...</title></head>
<frameset>
<frame src="test.html" name="indexbar">
</frameset>
<frameset>
<frame src="main.html" name="main">
</frameset>
</frameset>
<noframes>
This page requires a frames-capable browser... please get one!
</noframes>
</html>
The frames page itself in most cases does not actually contain any content, all content is placed on the separate HTML pages loaded within each frame (section). Instead, the frames page acts as a guide, defining which page to be loaded into each frame, and the frame attributes themselves. As you may have noticed, a frames page closely resembles a normal HTML page, except that the body is replaced with frameset, and an additional noframes tag is added.
Using The Frameset Tag...
The frameset tags are used to define the characteristics of the frames, and the noframes tags are used to define what a browser that is not frames-enabled will see. Because the frameset tags are ignored by a non-frames browser, anything within the noframes tags will be considered a normal HTML page. So after the <noframes> tag should be placed the <body> tag, and then any content and tags, then concluded with the </body> tag, followed by the </noframes> tag. The noframes content will not be seen by someone using a frames-enabled browser unless they choose ‘view source’.
The frameset tag will be used multiple times throughout a single frames page. The first frameset tag is used to define the number of separate frame columns within the browser window, and what width each of those windows will be. The next set of frameset tags will be used to define how many frame rows will be in the browser window, and each one’s height. The row attribute is set separately for each column, for example, your first column may have 4 frames, and your second column may have 2 frames, etc. There is no specific limit on the number of frames you may have within a single browser window, but you must realize that your page will be viewed in different resolutions, from 640 x 480 pixels to 1024 x 768 pixels and greater. My advice is to limit your page to no more than 4 frames within a single browser window.
Defining Columns...
The first frameset tag should read <frameset cols="SIZE_OF_COLUMN_1,SIZE_OF_COLUMN_2,ETC">. This first tag will be closed with a </frameset> tag, but only after the frameset rows for each column are also defined. The SIZE_OF_COLUMN can be one of three numbers…
- x% – each column is set by a percent of the available browser window. (x is a number from 1 to 100)
- x – each column is set by a fixed pixel amount. (not recommended, because pixel widths vary depending on the viewer’s resolution) (x is any number)
- * – the * tells the browser to use all available space that is left for this column.
So a frameset reading <frameset cols="20%,80%"> would mean that the first column is the browser window will take up 20% of the browser window’s width, and that the second column will take up 80% of the total browser’s width. Another example is <frameset cols="120,*"> in which the first column is exactly 120 pixels wide, and the second column takes up all remaining width. Only one column is required, and there is no limit on how many columns can be defined.
Defining Rows...
Within the column defining frameset opening and closing tag are the row defining frameset tags. The number of row defining frameset tags is directly dependent on the number of columns defined in the column defining frameset tag. If there are two columns defined, there will be two separate row defining frameset tags, if three columns are defined, there will be three row defining frameset tags.
The row frameset tag should read <frameset rows="SIZE_OF_ROW_1,SIZE_OF_ROW_2,ETC">. The SIZE_OF_ROW is defined almost identically to the SIZE_OF_COLUMN… x% is the percent of available browser height, x is a defined pixel value in height, and * is all remaining space. Rows are defined top to bottom, and Columns are defined left to right.
Defining Frames...
Within each row frameset tag comes the frame tag, which defines which page is to be loaded in that frame and a few attributes on that frame. The simple frame tag reads <frame src="document_to_load.html">, where document_to_load is the name of the web page that is to be loaded in that frame, and the frame tag has no closing tag. The frame tag has some other useful attributes:
- SCROLLING=”yes|no|auto” – This defines if the frame has a scroll bar or not. By default the frame sets scrolling to auto, which means the browser determines if a scroll bar is needed. If set to yes, the frame will always have a scroll bar, and if set to no, the frame will never have a scroll bar.
- NORESIZE – this attribute states that the user should not be able to resize the frame. By default the user is able to resize all frames within the browser window.
- NAME=”x” – this attribute defines the name of the frame, which is used to target pages to be loaded in that frame, which will be explained later. (x is any alphanumerical combination)
If you want scrolling to be disabled, just use the code:
<frame src="document_to_load.html" SCROLLING="no">
or if you want resizing to be disabled just use the code:
<frame src="document_to_load.html" NORESIZE>
Example of a complex frames page…
<head><title>testing complex frames</title></head>
<frameset rows="*,100">
<frame src="page1.html" NAME="index">
<frame src="page2.html" NORESIZE>
</frameset>
<frameset>
<frame src="main.html" NAME="main">
</frameset>
<frameset rows="50%,50%">
<frame src="page3.html">
<frame src="page4.html" SCROLLING="no">
</frameset>
</frameset>
<noframes><body>
This page requires a frames-enabled browser!
</body></noframes>
</html>
What this frames page looks like…
---------------------------------------------- | page1.html | main.html | page3.html | | | | | | | | | | | | | | | | | | | | | | | |--------------| | | | page4.html | | | | | | | | | |--------------| | | | page2.html | | | | | | | ----------------------------------------------
Using the TARGET attribute...
What if you have a page in one frame with a link, but when the user clicks the link, you want it to be loaded into one of the other frames you defined? This is what the TARGET attribute is for. The TARGET attribute is part of the <a href> tag. The a href tag used with the TARGET attribute reads:
<a href="page_to_load.html" TARGET="target_frame">text</a>
Where page_to_load.html is the name of the file which should be loaded in the frame, target_frame is the defined name you gave to the frame that you wish the link to load into, and text is the anchored text of the link. If you link without a target, the linked page will load into the current frame. There are also a few other special magic targets which can be used where target_frame is:
- TARGET=”_blank” – link is loaded into a new blank browser window.
- TARGET=”_self” – link is loaded into frame that link was clicked in.
- TARGET=”_top” – link is loaded into current full browser window, and all frames disappear, leaving the new page to have the entire window.
Your own HTML page...
Create a new file, called “frames.htm”, which contains the following:
<head><title>My Home Page</title></head>
<!-- The first frameset defines the rows: two rows, the second one is narrower -->
<frameset rows="85%,15%">
<!-- The second frameset defines the columns in the first row -->
<frameset cols="15%,85%">
<!-- Specify the two files to display in the first row -->
<!-- The first file will contain an index for your home pages -->
<frame src="indexbar.htm" name="indexbar">
<!-- The second file is Home.htm: the file you have been working on so far -->
<frame src="Home.htm" name="mainframe">
</frameset>
<!-- Specify the file to display in the second row -->
<!-- This file contains copyright information -->
<frame src="copyright.htm" name="copyright">
</frameset>
<!-- Define what to display to browsers which aren't frames-capable -->
<noframes>
This page requires a frames-capable browser... please get one!
</noframes>
</html>
Create another new file, called “indexbar.htm”, which contains the following:
<body background="bgnd.gif">
<!-- The index page contains links to the main home page, and a feedback page -->
<!-- Those pages will load into the "main" target -->
<a href="Home.htm" target="mainframe">Home</a>
<a href="feedback.htm" target="mainframe">Feedback</a>
</body>
</html>
Create yet another new file, called “copyright.htm”, which contains the following:
<body background="bgnd.gif">
<center>Copyright © 1997 YOURNAME's Web Page Development</center>
</body>
</html>
Create an essentially blank file, called “feedback.htm”. We will complete this file later.
<body background="bgnd.gif">
</body>
</html>
Chapter 12: 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. (Spaces are not needed to separate keywords)
Example of a real-life meta situation…
<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.co.za/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 sybase.co.za after 5 seconds it would be as follows:
<meta http-equiv=REFRESH CONTENT=5;URL="http://www.sybase.co.za/">
Chapter 13: Forms
Forms...
Forms allow you to add interactivity to your web documents by way of the <FORM> tag. With the form tag you can add to your web pages a guestbook, order forms, surveys, get feedback or whatever.
The basic construction of a html form is this…
<FORM> begin a form
<INPUT> ask for information in one of several different ways…
<INPUT> …there can be as many input areas as you wish
</FORM> end a form
The <INPUT> tag provides the user with various ways of inputting information. There are several different <INPUT> tags.
Form Input...
Text
The most common TYPE of form <INPUT> is TEXT.
<INPUT TYPE=TEXT>
Every input needs a NAME.
<INPUT TYPE=TEXT NAME="ADDRESS">
When the user types in his address (for example 1313 Mockingbird Lane), it will become the input’s value and be paired with ADDRESS so the end result after running it through Mailto Formatter will be ADDRESS=1313 Mockingbird Lane.
We can if we want, type in a VALUE.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St">
This will automatically pair the value 44 Cherry St with the name ADDRESS, unless the user changes it. Note- be sure to use quotes where I’ve specified.
We can specify the size of the text input box.
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=10>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=20>
<INPUT TYPE=TEXT NAME="ADDRESS" VALUE="44 Cherry St" SIZE=30>
The default value is 20.
If we want, we can specify how many characters a user can input.
Go ahead and try to input more than 10 characters in the text box below:
<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>
Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same, except it dispays *** instead of the actual input. The browser will send you the input, it just won’t display it.
<INPUT TYPE=PASSWORD>
Remember that each <INPUT> must have a NAME.
<INPUT TYPE=PASSWORD NAME="USER PASSWORD">
SIZE, VALUE, and MAXLENGTH modifiers/attributes work here also. By the way, a <TAG> tells the browser to do something.
Radio Buttons and Check Boxes
Radio buttons allow the user to choose one of several options. Check Boxes allow the user to choose one or more or all of the options.
First let’s build some Radio Buttons.
<INPUT TYPE=RADIO NAME="POSITION">
Now add 2 more.
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
<INPUT TYPE=RADIO NAME="POSITION">
Hmmm… I suppose we should put a line break after each one.
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><BR>
<INPUT TYPE=RADIO NAME="POSITION"><P>
Note that each input has the same name. The reason will become apparent very shortly.
Each of the Radio Buttons must be assigned a VALUE.
Now label each button.
Powerbuilder Developer
Database Administrator
None of the above
You can also modify these labels with other html tags if you wish.
Essentially your Radio Buttons are done. You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection (optional).
What is your position within the company?
Powerbuilder Developer
Database Administrator
None of the above
The user of course can only choose 1 option. Their choice will be returned to you as the name/value pair POSITION=PB (or whichever they pick).
Building Check Boxes is pretty much the same thing. Start with this.
<INPUT TYPE=CHECKBOX NAME="PB">
Add 3 more, but this time give each one a different NAME. (Also add in line breaks if you want)
<INPUT TYPE=CHECKBOX NAME="PB"><BR>
<INPUT TYPE=CHECKBOX NAME="DBA"><BR>
<INPUT TYPE=CHECKBOX NAME="NOTA"><BR>
Each Check Box gets the same VALUE.
Note- For Check Boxes the NAME changes and the VALUE stays the same and with Radio Buttons, the VALUE changes but the NAME stays the same. Don’t feel bad, my simple mind still gets confused.
OK, let’s label each box.
Powerbuilder Developer
Database Administrator
None of the above
And lastly, you may want to add a little something above your check boxes and maybe pick a couple defaults.
What positions do you occupy within the company?
Powerbuilder Developer
Database Administrator
None of the above
The user can choose 1, 2, none or all of the options. Their choices will be returned to you as the name/value pairs…PB=YES
DBA=YES
(or what ever they choose… if they choose nothing, nothing will be returned to you)
Your own HTML page...
We will now construct the feedback page we created in Chapter 11. Open the blank page “feedback.htm” in Notepad, and add the following (the blue text is what to add).
<body background="bgnd.gif" bgcolor=#FFFFFF>
<br>
<form>
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
<input type=radio name="position" value="Developer" checked>Developer<br>
<input type=radio name="position" value="ProjMan">Project Manager<br>
<input type=radio name="position" value="TechMan">Technical Manager<br>
<input type=radio name="position" value="NOTA">None of the above
</p>
<p>
<b>When it comes to web browsers:</b><br>
<input type=checkbox name="Netscape" checked>I use Netscape Navigator<br>
<input type=radio name="NetscapeVer" value="2.0">version 2.0<br>
<input type=radio name="NetscapeVer" value="3.0" checked>version 3.0<br>
<input type=checkbox name="IExplorer">I use Microsoft Internet Explorer<br>
<input type=radio name="IEVer" value="2.0">version 2.0<br>
<input type=radio name="IEVer" value="3.0">version 3.0<br>
</p>
</html>
Save the file.
Chapter 14: Forms Continued
<SELECT>
</SELECT>
Don’t forget to give it a name.
<SELECT NAME="POSITION">
</SELECT>
Next add a few options.
<SELECT NAME="POSITION">
<OPTION>Powerbuilder Developer
<OPTION>Database Administrator
<OPTION>None of the above
</SELECT>
And give each <OPTION> a VALUE.
<SELECT NAME="POSITION">
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA">Database Administrator
<OPTION VALUE="NOTA">None of the above
</SELECT>
The default option is the one that is listed first.
We can specify a default other than the first option in the list.
<SELECT NAME="POSITION">
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA" SELECTED>Database Administrator
<OPTION VALUE="NOTA">None of the above
</SELECT>
A Scrolling List is very similar in construction to a Pull Down List. We’ll add a few more options first. Then, all we do to turn it into a Scrolling List is add a SIZE attribute to the <SELECT> tag.
<SELECT NAME="POSITION" SIZE=4>
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA">Database Administrator
<OPTION VALUE="VB">Visual Basic Developer
<OPTION VALUE="ADMIN">Administration staff
<OPTION VALUE="JANITOR">Janitor
<OPTION VALUE="NOTA">None of the above
</SELECT>
The SIZE is simply how many options show in the window.
Again, the default value is the first <OPTION>, and again we can change that by selecting one.
<SELECT NAME="POSITION" SIZE=4>
<OPTION VALUE="PB">Powerbuilder Developer
<OPTION VALUE="DBA" SELECTED>Database Administrator
<OPTION VALUE="VB">Visual Basic Developer
<OPTION VALUE="ADMIN">Administration staff
<OPTION VALUE="JANITOR">Janitor
<OPTION VALUE="NOTA">None of the above
</SELECT>
TextareaA very useful type of input is <TEXTAREA>.
<TEXTAREA NAME="COMMENTS">
</TEXTAREA>
You control the size of the box like so…
<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50>
</TEXTAREA>
ROWS is the height, COLS is the width.
A good attribute to include in <TEXTAREA> is WRAP. Some browsers do not understand it, but if that’s the case, they will just ignore it.
Go ahead and type in the boxes…
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=VIRTUAL>
</TEXTAREA>
WRAP=VIRTUAL means that the text in the box wraps, but it is sent as one long continuous string.
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=PHYSICAL>
</TEXTAREA>
WRAP=PHYSICAL means that the text in the box wraps, and it is sent that way too.
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP=OFF>
</TEXTAREA>
This is the default.
WRAP=OFF means that the text in the box does not wrap, but it is sent exactly the way it was typed in (like the little man a few textareas back).
Your own HTML page...Open the page “feedback.htm” in Notepad, and add the following (the blue text is what to add).
<body background="bgnd.gif">
<br>
<form>
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
.
.
</p>
<p>
<b>When it comes to web browsers:</b><br>
.
.
</p>
<select name="Rating">
<option value="Wow">Wow! How did you do it?
<option value="good">Really good
<option value="interesting">Interesting
<option value="hmmm">Hmmm - seen better
<option value="tryagain">Try again bud!
</select>
</p>
<p>
<b>Comments:</b><br>
<textarea name="comments" rows="6" cols="50" wrap="physical">
</textarea>
</p>
</body>
</html>
Save the file.
Chapter 15: Forms Continued
Hidden fields
Yet another type of input is HIDDEN input.
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Company Position Form 1">
A HIDDEN input is a name/value pair that is returned to you but does not show up anywhere on the web page. The hidden input above is needed for use with Mailto Formatter.
Let’s suppose you were a company trying to generate leads for a new product. You have a standard form for gathering information… name, company, phone, products interested in, etc. The only problem is there are 6 slightly different versions of the form in 6 slightly different places. You need to know what’s coming from where. What to do?
You could add a HIDDEN input to your forms like so…
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 1"> …for the first version
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 2"> …for the second version
<INPUT TYPE=HIDDEN NAME="FORMNAME" VALUE="Version 3"> …for the third version
And so on and so forth.
By the way, it doesn’t matter what the name/value pair in the hidden input is (or any input for that matter). I have just been using "FORMNAME" because it saved me some typing. This would be a perfectly legitimate HIDDEN input…
<INPUT TYPE=HIDDEN NAME="E" VALUE="Mc^2"> …You would get back E=Mc^2
HIDDEN inputs are also useful for cgi scripts. For example, many Internet Service Providers have a script you can have your forms sent to. It then spits the form back to you all nice and neat and ready for human consumption. The hidden input tells the cgi script who you are, where to send the parsed data, etc.
Submit and Reset Buttons
Last on the list are the SUBMIT and RESET buttons.
They really are very simple…
<INPUT TYPE=SUBMIT>
SUBMIT of course, sends the data…
…and RESET, clears the form.
<INPUT TYPE=RESET>
We can easily change what the buttons say.
<INPUT TYPE=SUBMIT VALUE="Send it away Ray!"><BR>
<INPUT TYPE=RESET VALUE="Clear the form Norm!"><P>
If necessary, the SUBMIT button can also have a NAME. You would need this if, for whatever reason, you had more than one SUBMIT button.
Next we must tell the browser where to send the data we gather and how to send it. There are two basic things you can do:
1) you can send the data to a cgi script for processing, or
2) you can have the data emailed to you.
As for the first, whoever wrote the script can tell you how the data should be sent.
The second, or mailto form should have the following attributes in the <FORM> tag.
Note- Microsoft’s Internet Explorer 3.0 does not support mailto forms. When you try to submit the information, the new mail message window pops up. Explorer does however support forms sent to a CGI script.<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx" ENCTYPE="application/x-www-form-urlencoded">
This line is very important. The only thing you have to do is plug in your email address after mailto: The rest must be written exactly as shown. The words FORM, METHOD, POST & ACTION do not have to be capitalized but there must be a space between each attribute.. between FORM & METHOD, between POST & ACTION, and between .com" & ENCTYPE.Unfortunately the data will be sent to you in this ‘only useful to a computer’ format…
FORMNAME=New+Entrant&NAME=R.U.+Havinfun&ADDRESS=1313+Mockingbird+Lane
&CITY=Beverly+Hills&STATE=CAWhat you’ll need is a program to turn it into ‘useful to a human’ format…
FORMNAME=New Entrant
NAME=R.U. Havinfun
ADDRESS=1313 Mockingbird Lane
CITY=Beverly Hills
STATE=CA
Some mail programs are capable of converting the data without resorting to a separate program. You may want to try this method first. Just remove the instruction ENCTYPE="application/x-www-form-urlencoded" and in its place use ENCTYPE="text/plain". When you put a mailto form on your page and someone sends you information, you’ll notice that it is sent with a default Subject. If your visitor was using Netscape you’d get the default Subject “Form posted from Mozilla“. Other browsers might send “Form Response“, etc.
You can change this by editing what’s in the <FORM> tag as follows…
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx?subject=Company feedback form" ENCTYPE="application/x-www-form-urlencoded">
Your own HTML page...Open the page “feedback.htm” in Notepad, and add the following (the blue text is what to add).
<html>
<body background="bgnd.gif"><center><h1>Feedback Form</h1></center>
<br>
<form method=post action="mailto:YOUREMAILADDRESS?subject=Feedback" enctype="text/plain">
<b>My name is: </b><input type=text name="name">
<p>
<b>I work as a:</b><br>
.
.
</p>
<p>
<b>When it comes to web browsers:</b><br>
.
.
</p><b>I rate your site as:</b><br>
.
.
</p>
<p>
<b>Comments:</b><br>
.
.
</p>
<p>
<input type="submit" value="Send it!"><br>
<input type="reset" value="Clear it!">
</p>
</body>
</html>
Save the file.
Chapter 16: Counters, Guestbooks and Search Engines
Note: This chapter only applies if your web page is stored on a web server, and not on your local hard drive.Both counters and guestbooks require access to the web server on which your web pages are hosted, and the ability to write CGIs.
However, for those of us who host our web pages at a service provider, and not on our own web server, and do not want to write our own CGIs, there are free services who offer counters and guestbooks.
Counters
A counter is just what you would imagine it to be: a count of how many people have accessed your web site.
This is very useful information, but not necessarily information you would like to display to everyone! If you don’t expect your site to get many “hits” (visits), consider displaying the counter on a page that only you know the address for, and not on your main home page.The following web sites will keep count for you, and provide you with various ways of accessing the counter:
Count 4 All http://www.count4all.com/ WebTracker http://www.fxweb.holowww.com/tracker/ Internet Count http://www.icount.com/ Guestbooks
A guestbook is a page where visitors can enter comments about your site, and especially view the comments left by other people.
The following web sites provide you with free guestbook facilities (they typically provide you with a page where visitors enter comments, and then store all the entered comments for you):
Piett Guestbooks http://www.piett.com/pgb/ LPage http://www.lpage.com/ Search Engines
If you are providing a commercial service, it is a good idea to submit your web page location to several different search engines. All the major search engines provide you with a screen where you can submit your location. Look for a link to this on their home pages.
There are also a few services which will submit your location for you to many different search engines at once, saving you having to go to each search engine yourself.
The most well-known of these services is SubmitIt: http://www.submit-it.com/. Links to a few such sites can be found at http://www.submit.com/sub/.
Chapter 17: Graphics
A web page without images is very boring, and visitors will probably not stay very long. There are a couple of clever things that can be achieved with images:
- Make your images as small (in terms of file size) as possible. Large images which take a long time to download and display are very irritating to users with slow Internet connections.
- When inserting an image into your HTML page, use the width and height attributes, i.e.:
<img src=”myimage.gif” width=”150″ height=”50″>
This causes the browser to display the text on the page before the image has completed downloading, allowing visitors to read the text, and giving the impression that the page loads quickly.- Use a utility such as GIF Construction Set (Win95/NT, 1.2MB) to set the background of your image to transparent. This does not look good if the background of your web page is very busy, and therefore interferes with the look of the image. However, if you have a plain page background, making its background transparent causes it to appear as if it is floating on the page.
Animated ImagesImages which are in GIF format can be animated. The specific GIF format which allows for animation is GIF89a.
Creating animated GIFs is really very simple. You need to create a small GIF for each frame of your animation. This may result in several GIF files. Then, use a utility such as GIF Construction Set (Win95/NT, 1.2MB), to create a single animated GIF image from your separate GIF files.
This is an example of an animated GIF:
Tips and Tricks
Some tips for creating web-friendly images:
Leave a Reply
You must be logged in to post a comment.
Recent Comments