Technology on the Planet: HTML Tutorial

HTML Backgrounds :

INTRODUCTION

When deciding whether you want to use a plain color or an image you should consider the fact that very few of the web's 100 most visited sites use background images.

More than 90 percent have a plain white background.

The few pages that actually do use images use very discrete and fast loading images for the purpose.

BACKGROUND COLOR

Adding a plain background color to your page is easy.

If you want to add a background image instead of a plain color there are some considerations you should make before doing so:

When you choose to use a background image for the page it is always a good idea to specify a background color as well.

The reason is that until the background image is loaded, the background color will be shown.

FIXED IMAGE

The background image will scroll when the user scrolls down the page, unless you have set it to be fixed:

By adding the bgproperties="fixed" you force the browser to let the background be fixed even if the user is scrolling down the page.

HTML Tables:

INTRODUCTION

Tables are used on websites for two major purposes:

· The obvious purpose of arranging information in a table

· The less obvious - but more widely used - purpose of creating a page layout with the use of hidden tables. Using tables to divide the page into different sections is an extremely powerful tool. Almost all major sites on the web are using invisible tables to layout the pages.

The most important layout aspects that can be done with tables are:

· Dividing the page into separate sections. An invisible table is excellent for this purpose.

· Creating menus.
Typically with one color for the header and another for the links following in the next lines.

· Adding interactive form fields.
Typically a gray area containing a search option.

· Creating fast loading headers for the page.
A colored table with a text on it loads like a bullet compared to even a small banner.

· Easy alignment of images that have been cut into smaller pieces.

· A simple way to allow text to be written in two or more columns next to each other.

Most important is, that the content of a table is not shown until the entire table is loaded. If you have extremely long pages, you should divide it into two or more tables - allowing the user to start reading the upper content while the rest of the page is loading.

BASIC TABLES

Tables are defined with the <table> tag.

To insert a table on your page you simply add these tags where you want the table to occur:

ROWS:

To add rows to your table use the <tr> and </tr> tags.
Example:

It doesn't make sense to write the above lines in itself, cause you can't write content outside of table cells.

If you do write things outside of cells it will appear right above the table.

COLUMNS:
You can divide rows into columns with <td> and </td> tags:
Example:

<table>
<tr> <td>This is row one, left side.</td> <td>This is row one, right side.</td> </tr>
<tr> <td>This is row two, left side.</td> <td>This is row two, right side.</td> </tr>
</table>

Result:

This is row one, left side.	This is row one, right side.
This is row two, left side.	This is row two, right side.

TABLE TAGS

The following properties can be added to the <table> tag:

Property	Description
align= left center right	left align table center table right align table
background=filename	image inserted behind the table
bgcolor=#rrggbb	background color
border=n	border thickness
bordercolor=#rrggbb	border color
bordercolordark=#rrggbb	border shadow
cellpadding=n	distance between cell and content
cellspacing=n	space between cells
Nowrap	protects agains linebreaks, even though the content might be wider than the browser window.
frame= void, above, below, lhs, rhs, hsides, vsides, box	removes all outer borders shows border on top of table shows border on bottom of table shows border on left side of table shows border on right side of table shows border on both horizontal sides shows border on both vertical sides shows border on all sides of table
valign= top bottom	aligns content to top of cells aligns content to bottom of cells
width= n,n n,n%	minimum width of table in pixels minimum width in percentage of window size

ROW/CELL TAGS

These settings can be added to both <tr> and <td> tags.

PROPERTY	DESCRIPTION
align= left right center	aligns content to the left of cells aligns content to the right of cells aligns content to the center of the cells
background=filename	sets a background image for the cells
bgcolor=#rrggbb	sets a background color for the cells
bordercolor=#rrggbb	sets color for the border of cells
bordercolordark=#rrggbb	sets color for the border shadow of cells
valign= top middle bottom	aligns to the top of cells aligns to the middle of the cells aligns to the bottom of cells
width= n n%	specify a minimum width for the cells in pixels specify a minimum width for the cells in percent of the table width
height= n n%	minimum height of cells in pixels minimum height of cells in percentage of table height

These settings are only valid for <td> tags.

PROPERTY	DESCRIPTION
colspan=n	number of columns a cell should span
Nowrap	protects agains linebreaks, even though the content of a cell might be wider than the browser window
rowspan=n	number of rows a cell should span

Note:
Settings for columns(<td> tag) have higher priority than settings for rows(<tr> tag).

Settings for cells (<tr> or <td> tags) have higher priority than settings for the table as a whole(<table> tag).

HTML Frames :

INTRODUCTION

Frames can divide the screen into separate windows.

Each of these windows can contain an HTML document. A file that specifies how the screen is divided into frames is called a frameset.

If you want to make a homepage that uses frames you should:
make an HTML document with the frameset and make the normal HTML documents that should be loaded into each of these frames.

When a frameset page is loaded, the browser automatically loads each of the pages associated with the frames.

BASIC EXAMPLE

A frameset is simply an HTML document that tells the browser how to divide the screen into split windows.

The HTML for the above frameset:

<html>
<head>
<title>My Frames Page</title>
</head>

<frameset cols="120,*">
<frame src="menupage.htm" name="menu">
<frameset rows="*,50">
<frame src="welcomepage.htm" name="main">
<frame src="bottombanner.htm" name="bottom">
</frameset>
</frameset>
</html>

Note that the frameset is only seven lines!

CREATING A FRAMESET

As stated on the previous page, a frameset is simply an HTML document that tells the browser how to divide the screen into split windows.

If the frameset looked like this:

The code would be:

The screen is divided into two columns.
The left being 120 pixels and the right using the rest of the screen (indicated by the *).

The frame windows would have no names, so the frameset really couldn't be used for any purpose.

DEFAULT PAGES

You can add default pages to frame windows with the src setting. Default pages are the pages that will be loaded when the frameset is opened the first time. Furthermore, we can add names to each frame window using the name setting.

This will allow us to make a link in one frame window, open a page in another frame window.

In this example we added names and default pages to the frame windows:

The entire frameset will look like this:

m
e
n
u

main

We still have the screen divided in two columns, the left being 120 pixels the right using the rest of the screen. (some screens are set to 640 pixels across, some to 800 and some to 1024, thats why the * is needed). But now we also have told the browser that the left frame window should load an HTML page called menu.htm and that the right window should load an HTML document called frontf.htm. In addition we have assigned the names menu and main to the two frame windows, so now we're even able to link to specific windows.

We called the frame windows menu and main, but you could name them whatever you pleased. The frameset with a menu window to the left and a main window to the right is the most common frameset seen on the web.
There are a few more settings we could add to the frameset. For instance you might want the frame borders to be invisible.

BORDERS

To make frame borders invisible you simply need to add the parameters "cols-line" to the frameset :

The entire frameset would now look like this:

m
e
n
u

main

RESIZEABLE WINDOWS

If you don’t want the frame windows to be resizeable, you should add the parameter "noresize" to the frame src lines:

SCROLLBARS

Lets say you don’t want a scroll bar in the menu window. Furthermore the main window should have a scrollbar if needed (if the HTML document doesn’t fit in the window), but if not needed - there should be no scrollbars.

Then the code should look like this:

If you leave out the setting for scrolling, a scrollbar will appear if needed - otherwise not.

EXAMPLES

On this page you can see examples of different framesets.

top

bottom

tl	tr
bottom

top
left	right

topleft	topright
botleft	botright

topleft	topright
botleft	brtl	brtr
	botrbot

topleft	topright
botleft	botright

topleft	topright
botleft	botright

HTML Forms :

INTRODUCTION

A form is simply an area that can contain form fields. Form fields are objects that allow the visitor to enter information - for example text boxes, drop-down menus or radio buttons. When the visitor clicks a submit button, the content of the form is usually sent to a program that runs on the server. However, there are exceptions.

JavaScript is sometimes used to create magic with form fields. An example could be when turning options in a drop-down menu into normal links.

EXAMPLES

A typical form example would be a search engine.

SEARCH THIS SITE

This is what happens when the form is submitted:
The search words are sent to a program on the server.

· The program will search a database for matches.

· The program creates a webpage with the results.

· The results webpage is sent back to the visitor.

Another example would be a logon page.

FREE WEB-EMAIL AT ECHOECHO.COM
Username:
Password:

NEW USERS: SIGN UP HERE! FORGOT YOUR PASSWORD?

This is what happens when the form is submitted:
The ID and password are sent to a program on the server.

· The program will search a database for valid entries.

· If the entry is valid the visitor is sent to the protected page.

· If the entry is invalid the visitor is sent to a "failure" page.

CGI SCRIPTS

When your form is submitted you need a program that can receive the information and do something with it.

Such programs are sometimes referred to as: CGI programs. CGI stands for Common Gateway Interface, which is computer latin for a program that translates information. This translation is necessary because the server might be a UNIX machine while the visitor might be sending information from a Windows platform.

THE FORM TAG

When a form is submitted, all fields on the form are being sent.

The <form> tag tells the browser where the form starts and ends. You can add all kinds of HTML tags between the <form> and </form> tags.

Look at this example:

To let the browser know where to send the content we add these properties to the <form> tag:
action=address

method=post or method=get

The address is the url of the cgi script the content should be sent to. The postand get methods are simply two different methods for submitting data to the script.

If you are using a pre-programmed script (which we assume here) it is not important to understand the difference between get and post.

n the description of the script you are using it will be made clear whether the scripts should be addressed using one method or the other.

Below is an example of a typical form tag, with both action and method specified.

FORM FIELDS

These fields can be added to your forms:

· Text field

· Password field

· Hidden field

· Text area

· Check box

· Radio button

· Drop-down menu

· Submit button

· Reset button

· Image button

TEXT FIELD

Text fields are one line areas that allow the user to input text.

Instead you enter a <textarea> tag where you want the text area to start and a closing </textarea> tag where you want the area to end.

Everything written between these tags will be presented in the text area box.

SETTINGS:

Below is a listing of valid settings for text fields:

HTML	EXPLANATION	EXAMPLE
text size= maxlength= name= value= align= tabindex=	One line text field Characters shown. Max characters allowed. Name of the field. Initial value in the field. Alignment of the field. Tab order of the field.

The size option defines the width of the field. That is how many visible characters it can contain.

The maxlength option defines the maximum length of the field. That is how many characters can be entered in the field.
If you do not specify a maxlength, the visitor can easily enter more characters than are visible in the field at one time.

The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will appear in the box as the default value.

The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM. The alignments are explained in the image section. You can learn about the different alignments here.

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

AN EXAMPLE

Look at this HTML example:

And the resulting output from it:

TEXT AREA

Text areas are text fields that can span several lines. Unlike most other form fields, text areas are not defined with an <input> tag.

Instead you enter a <textarea> tag where you want the text area to start and a closing </textarea> tag where you want the area to end.
Everything written between these tags will be presented in the text area box.

SETTINGS:
Below is a listing of valid settings for text areas:

HTML	EXPLANATION	EXAMPLE
textarea rows= cols= name= tabindex= wrap= off virtual physical	Text area - several lines Rows in the field. Columns in the field. Name of the field. Tab order of the field. Turns off linebreaking Shows linebreaking, but sends text as entered. Inserts linebreaks when needed and even sends it.

The cols and rows settings are straightforward and simple. They specify how many columns and rows you want in your text area.

The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

The wrap options are the most tricky part of text areas.
If you turn wrap off the text is handled as one long sequence of text without linebreaks.
If you set it to virtual the text appears on your page as if it recognized linebreaks - but when the form is submitted the linebreaks are turned off.
If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks included.

AN EXAMPLE:

Look at this HTML example:

<html>
<head>
<title>My Page</title>
</head>

<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
This is outside the area<br><br>
<textarea cols="40" rows="5" name="myname">
Now we are inside the area - which is nice.
</textarea>
<br><br>
And now we are outside the area again.
</div>
</form>
</body>
</html>

PASSWORD FIELD

Password fields are similar to text fields.

The difference is that what is entered into a password field shows up as dots on the screen. This is, of course, to prevent others from reading the password on the screen.

SETTINGS:
Below is a listing of valid settings for password fields:

HTML	EXPLANATION	EXAMPLE
password size= maxlength= name= value= align= tabindex=	One line password field Characters shown. Max characters allowed. Name of the field. Initial value in the field. Alignment of the field. Tab order of the field.

AN EXAMPLE:

Look at this HTML example:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
Enter Password : <input type="password" size="25">
<br><br>
</div>
</form>
</body>
</html>

And the resulting output from it:

Enter Password :

HIDDEN FIELD

Hidden fields are similar to text fields, with one very important difference!

The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:

To submit information that is not entered by the visitor.

SETTINGS:
Below is a listing of valid settings for hidden fields:

HTML	EXPLANATION	EXAMPLE
hidden name= value=	Hidden field Name of the field. Value of the field.

The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will be sent once the form is submitted.

AN EXAMPLE:

Look at this HTML example:

And the resulting output from it:

The hidden field does not show, but still, when the form is submitted the hidden field is sent with it.

CHECK BOX

Check boxes are used when you want to let the visitor select one or more options from a set of alternatives. If only one option is to be selected at a time you should use radio buttons instead.

SETTINGS:

Below is a listing of valid settings for check boxes:

HTML	EXPLANATION	EXAMPLE
checkbox name= value= align= tabindex= checked	Choose one or more options Name of the field. Value that is submitted if checked. Alignment of the field. Tab order of the field. Default check this field.

The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will be submitted if checked.

The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section. You can learn about the different alignments here.

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

AN EXAMPLE:

Look at this HTML example:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center"><br>
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<br>
</div>
</form>
</body>
</html>

And the resulting output from it:

Milk
Butter
Cheese

RADIO BUTTON

Radio buttons are used when you want to let the visitor select one - and just one - option from a set of alternatives. If more options are to be allowed at the same time you should use
check boxes instead.

SETTINGS:

Below is a listing of valid settings for radio buttons:

HTML	EXPLANATION	EXAMPLE
radio name= value= align= tabindex= checked	Choose one - and only one - option Name of the group. Value that is submitted if checked. Alignment of the field. Tab order of the field. Default check this field.

The name setting tells which group of radio buttons the field belongs to. When you select one button, all other buttons in the same group are unselected.
If you couldn't define which group the current button belongs to, you could only have one group of radio buttons on each page.

The value setting defines what will be submitted if checked.

The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section. You can learn about the different alignments here.

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

AN EXAMPLE:

Look at this HTML example:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center"><br>
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
<input type="radio" name="group2" value="Wine" checked> Wine<br>
</div>
</form>
</body>
</html>

And the resulting output:

DROP DOWN MENU

Drop-down menus are probably the most flexible objects you can add to your forms.

Depending on your settings, drop-down menus can serve the same purpose as radio buttons (one selection only) or check boxes (multiple selections allowed).

The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space.
But that is also a disadvantage, because people can't see all options in the menu right away.

There is a workaround for this - with the size setting, you can customize the menu so it shows more than just one option at a time, but when you do that - you also lose the advantage of taking up less space.

SETTINGS:

Below is a listing of valid settings for drop-down menus:

HTML	EXPLANATION	EXAMPLE
select name= size= multiple= option selected value=	Drop-down menu Name of the field. Visible items in list. Allows multiple choices if yes. Individual items in the menu. Default select the item. Value to send if selected.

Drop-down menus combine <select> and <option>.
Both tags have an opening and a closing tag.

A typical example of the syntax would be:

<select>
  <option>Milk</option>
  <option>Coffee</option>
  <option>Tea</option>
</select>

The <select> tag defines the menu.

The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The size option defines how many items should be visible at a time. Default is one item.

The multiple setting will allow for multiple selections if present.

The <option> tag defines the single items in the menu.

The value setting defines what will be submitted if the item is selected. This is not always the same as what it says in the menu. If our field was defined this way:

<option value="ID">Idaho</option>

then, in the menu it would say "Idaho" but when the form was submitted the abbreviated "ID" would actually be sent.

You can force an item to be default selected by adding the selected option:<option selected>

AN EXAMPLE:

Look at this HTML example:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
</div>
</form>
</body>
</html>

And the resulting output from it:

SUBMIT BUTTON

When a visitor clicks a submit button, the form is sent to the address specified in the action setting of the <form> tag.

SETTINGS:

Below is a listing of valid settings for submit buttons:

HTML	EXPLANATION	EXAMPLE
submit name= value= align= tabindex=	Submit button Name of the button. Text written on the button. Alignment of the button. Tab order of the button.

The name setting adds an internal name to the button so the program that handles the form doesn't confuse the button with the other fields.

The value setting defines what is written on the button.

The align setting defines how the button is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

AN EXAMPLE:

Look at this HTML example:

And the resulting output from it:

RESET BUTTON

When a visitor clicks a reset button, the entries are reset to the default values.

SETTINGS:
Below is a listing of valid settings for reset buttons:

HTML	EXPLANATION	EXAMPLE
reset name= value= align= tabindex=	Reset button Name of the button. Text written on the button. Alignment of the button. Tab order of the button.

And the resulting output from it:

IMAGE BUTTON

Image buttons have the same effect as submit buttons. When a visitor clicks an image button the form is sent to the address specified in the action setting of the<form> tag.

SETTINGS:

Below is a listing of valid settings for image buttons:

HTML	EXPLANATION	EXAMPLE
image name= src= align= border= width= height= vspace= hspace= tabindex=	Submit button Name of the image. Url of the image. Alignment of the image. Border width around the image. Width of the image. Height of the image. Spacing over and under image. Spacing left and right of image. Tab order of the image.

The name setting adds an internal name to the image button so the program that handles the form doesn't confuse it with the other fields.

The src setting defines the URL of the image.

The align setting defines how the image is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.

The border setting defines the width (in pixels) of the border around the image.

The width setting defines the width of the image.

The height setting defines the height of the image.

The vspace setting defines the spacing over and under the image (in pixels).

The hspace setting defines the spacing to the left and right of the image (in pixels).

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

AN EXAMPLE:

Look at this HTML example:

And the resulting output from it:

QUICK REFERENCE

If you're not familiar with the form tags you can learn in detail about each tag listed in the left menu. Otherwise - use this quick reference for an easy overview of form tags and properties.

HTML	EXPLANATION	EXAMPLE
textarea rows= cols= name= wrap= off virtual physical	Text area - several lines Rows in the field. Columns in the field. Name of the field. Control linebreaks. Turns off linebreaks. Shows linebreaks, but sends text as entered. Inserts linebreaks when needed and even sends it.
text size= maxlength= name= value=	One line text field Characters shown. Max characters allowed. Name of the field. Initial value in the field.
password size= maxlength= name= value=	Password field. Characters shown. Characters allowed to enter. Name of the field. Initial value in the field.
checkbox name= value=	Choose one or more options Name of the field. Initial value in the field.
radio name= value=	Choose only one option Name of the field. Initial value in the field.
select name= size= multiple= option selected value=	Drop-down menu Name of the field. Number of items in list. Allow multiple choice if yes. Individual items in the menu. Make an item default. Value to send if selected.
hidden name= value=	Does not show on the form. Name of the field. Value to send.
reset name= value=	Button to reset all fields Name of the button. Text shown on the button.
submit name= value=	Button to submit the form Name of the button. Text shown on the button.
image name=	Image behaving as button Name of the image.

Note: This is a quick reference showing the most common settings for each field. For a complete listing and explanation you should follow the link to the relevant field in the menu.

HTML Metatags :

INTRODUCTION

Meta tags are used to store information usually relevant to browsers and search engines.

For example, some search engines look to meta tags for descriptions, keywords, etc.

Other examples have relevance to the browser: Examples would be tags telling it to load a specific url after x seconds or tags telling it that a certain page should not be cached.

Another example is the ICRA meta tag. This tag can prevent sites with adult content from being seen on IE browsers.

Finally, some meta tags serve a purpose that is unique for the site in question. An example might be a newspaper site, where the journalist sends a text of an article to an advanced tool that creates an HTML document of it. This program may add special meta tags to allow an indexing of the articles. So if you ever see a strange meta tag that is not listed the books, this is probably the reason.

SEARCH ENGINES

THE MYTH

It is a myth among web designers that with the right meta tags you can make it to the top on all search engines.
The truth is close to being the opposite.

With the wrong meta tags you can make it to the bottom,
but meta tags alone do not take you to the top anywhere.

THE ABUSE

Two meta tags have special relevance for search engines: Description andKeywords.

When search engines first started to look for these meta tags, the intention was that web designers could emphasize what the pages were about. For example, a scientific page about the surface of the moon might not have the word "moon" on it, although the page definately related to the topic "moon".

Creative minds didn't take long to find out that this could be an excellent tool for improving search rankings. Many webmasters included keywords and descriptions that held no relevance to their page.

THE STRIKE BACK

After some time, the meta tags did not serve the purpose they were intended for. Most were being used for spamming. Therefore, some search engines, such as Excite, stopped looking at them entirely.

Other search engines, such as Infoseek, directed the spammers weapons back at them. They simply ranked sites lower if the meta tags included words that were not present in the content of the page.

THE CONCLUSION

· Use meta tags with care.

· Do not include words that are not present on your pages.

· Do not repeat words.

· Use the meta tags the way they were intended, because the search engines are well aware that meta tags are an excellent filter for spam sites.

Let's proceed to the details about the tags.

DESCRIPTION

Most search engines will display the description when they list results from a search.
If you do not include this tag, then the engine will simply list the first words on the page - which is not always very meaningful.

KEYWORDS

This meta tag was intended to be used for keywords with special relevance for the page.
But because of misuse, many engines skip them. Others use them as an indicator of whether a page is spam or not.
The few that use them to indicate what the page is really about, do not value them as much as they used to.

OTHER TAGS

Many HTML editors create a meta tag telling which program was used for the page.

Another common tag tells who created the page:

Finally there are some meta tags that are only relevant to certain search engines.

Individual search engines will recognize different tags telling it when to come back and re-index the site etc.

Look at the help sections for particular search engines to see which meta tags are supported.

AUTOLOAD PAGES

You can use the refresh meta tag to automatically load a page after x seconds.

In the example www.echoecho.com is loaded after 5 seconds.

Below are a few examples on using this tag.

EXAMPLE 1: REDIRECT TO NEW DOMAIN

The most common use of the REFRESH meta tag is for redirection. Typically when a site changes the domain name.

If you take a site down from the old domain - people who go to there from bookmarks will get an: Error 404 - File Not Found.

Instead you should place a page on the old domain saying something like "This site has moved. Please wait and you will be taken to the new domain. Remember to update your bookmarks."

If you keep this page on the old domain for a few months you will not loose the visitors that already have your site bookmarked with the old domain name.

EXAMPLE 2: INTRO SEQUENCE OF PAGES

Another more creative use of the REFRESH tag is a fancy intro to a site.
Say, you wanted the page to write "Welcome", then after 1 second, "Get Ready!", and after one more second it should say "For A Special Experience". Finally, after a few seconds the real page would be loaded.

This could be achieved by creating 3 pages with a refresh tag on them. The first page would load the second page after 1 second, which in turn would have a refresh tag that loads the third page after 1 more second.

RSACi CONTENT

It is possible to lock the browser from viewing pages that have not been classified using the ICRA system (Internet Content Rating Association, formerly known as RSACi).

To see how the rating system works on Internet Explorer, choose the Tools->Internet Options->Content. Try enable the "content advisor" to turn the function on.

Internet Explorer 3.0 and above, as well as new versions of Netscape support this service.

Specifying information for content restricted browsers:

The service is free and should be used on all pages, even the pages that do not contain bad language or adult content. The reason being, that many company browsers have been set up to not allow viewing of pages without a content rating.

Technology on the Planet

Wednesday, 12 September 2012

HTML Tutorial

No comments:

Post a Comment

About Me