HTML Tutorial

SANTOSH KUMAR
HTML TUTORIAL You can use this tutorial either as a complete introduction or as an A-Z reference to HTML. The pages are packed with: Easy to understand explanations, massive examples, tips, smart workarounds and useful quick references. If you're completely new to HTML you should start with the section that covers HTML Basics. Otherwise, just jump directly to the relevant pages. HTML Basics : INTRODUCTION Webpages are written in HTML - a simple scripting language. HTML is short for HyperText Markup Language.
Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information within documents.
Basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor. A more popular choice is to use a special HTML editor - maybe even one that puts focus on the visual result rather than the codes - a so-called WYSIWYG editor ("What You See Is What You Get"). Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you create pages more or less as you write documents in Word or whatever text editor you're using. However, there are some very good reasons to create your own pages - or parts of them - by hand...
SANTOSH KUMAR
WHY LEARN HTML? It is possible to create webpages without knowing anything about the HTML source behind the page. There are excellent editors on the market that will take care of the HTML parts. All you need to do is layout the page. However, if you want to make it above average in webdesign, it is strongly recommended that you understand these tags. The most important benefits are:
You can use tags the editor does not support. You can read the code of other people's pages, and "borrow" the cool effects. You can do the work yourself, when the editor simply refuses to create the effects you want.
You can write your HTML by hand with almost any available text editor, including notepad that comes as a standard program with Windows. All you need to do is type in the code, then save the document, making sure to put an .html extension or an .htm extension to the file (for instance "mypage.html"). TAGS Basically, a computer sees an "A" as simply an "A" - whether it is bold, italic, big or small. To tell the browser that an "A" should be bold we need to put a markup in front of the A. Such a markup is called a Tag. All HTML tags are enclosed in < and >. Example: a piece of text as it appears on the screen. This is an example of bold text.
SANTOSH KUMAR
HTML: the HTML for the above example: This is an example of <b>bold</b> text.
As you can see, the start tag <b> indicates that whatever follows should be written in bold. The corresponding end tag </b> indicates that the browser should stop writing text in bold. PAGE STRUCTURE All normal webpages consist of a head and a body. Head
Body
The head is used for text and tags that do not show directly on the page. The body is used for text and tags that are shown directly on the page.
Finally, all webpages have an <html> tag at the beginning and the end, telling the browser where the document starts and where it stops. The most basic code - the code you will use for any page you make, is shown below:
<html> <head>  </head> <body> 
SANTOSH KUMAR
</body> </html>
HEAD SECTION The head section of the webpage includes all the stuff that does not show directly on the resulting page. The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of your browser window when the page is loaded. Right now it should say something like "Basics - Html Tutorial" on top of the window containing this text. Another thing you will often see in the head section is metatags. Metatags are used for, among other things, to improve the rankings in search engines. Quite often the head section contains javascript which is a programming language for more complex HTML pages. Finally, more and more pages contain codes for cascading style sheets (CSS). CSS is a rather new technique for optimizing the layout of major websites. Since these aspects are way out of reach at this stage we will proceed with explaining the body section. BODY SECTION The body of the document contains all that can be seen when the user loads the page. In the rest of this tutorial you can learn in detail about all the different aspects of HTML, including:
Text
o o o
Formatting Resizing Layout
o Listing
SANTOSH KUMAR
Links
o o o
To local pages To pages at other sites To bookmarks
Images
o o
Inserting images (GIF and jpg) Adding a link to an image
Backgrounds
o o o
Colors Images Fixed Image Tables Frames Forms Metatags Hexadecimal Colors
The last page in this introduction will give you an overview of how to proceed with the HTML tutorial (and beyond). HOW TO LEARN MORE This introduction presented you with the very basics of HTML. In the rest of this tutorial you can study each of the different HTML tags in detail. To the upper right on all pages you will find the HTML tutorial menu.
SANTOSH KUMAR
The links are arranged so you can approach this tutorial as an ongoing course. Each link will take you to a "chapter" - 5 to 10 pages - explaining the selected topic in depth. If you are completely new to HTML, you should start with the chapter about text and work your way through the links - ending with the chapter about hexadecimal colors. Once you become familiar with HTML you could proceed to the javascript section, the java applet section or the Shockwave Flash section. For a complete overview of the tutorials and resources on this site you should look at the sitemap. HTML Text : INTRODUCTION To enter text on your pages - all you have to do is simply enter the text. If you do not specify any attributes for text it will use the default size, font etc. of the visitor's browser.
Browsers can only show fonts available on the visitor's PC. Therefore you are limited to using the fonts that are available on almost any computer. If you need to use a fancy font, you should use your graphics program to make an image with the text. This will assure that the visitor will see it - even if he doesn't have the fancy font you're using. Since images take up much more space than plain text, thus increasing download time, you should use this option with care.
On the following pages you will learn how to customize the font settings - both on normal text and text that works as a link. Furthermore, you will learn to control how the text aligns on your pages.
SANTOSH KUMAR
Now click the Read More link to get started... BASE FONT To specify the overall font for your page add the <basefont> tag at the beginning of the <body> section. Example: The page as it looks in the browser.
Hello! This is my page. All text looks the same since I only specified a basefont.
HTML: The code to produce the above example. <html> <head> <title>my page</title> </head> <body> <basefont face="arial, verdana, courier" size="4" color="green"> Hello! This is my page.<br> All text looks the same<br> since I only specified a basefont.<br> </body> </html>
The color attribute selects the desired color for your text. The face attribute selects the desired font. Note: If you enter a list of fonts, like in the example, the browser will use the first font in the list available on the visitor's computer. The size attribute specifies the desired size, between 1 (smallest) and 7 (biggest).
SANTOSH KUMAR
FONT The <font> tag will change the font. Example: How the output looks in the browser.
Hello! This is my page.

This local text looks different.
This text looks like the first line.
HTML: The code to produce the above example. <html> <head> <title>My Page</title> </head> <body> <basefont color="green" face="arial" size="4"> Hello! This is my page.<br><br> <font color="red" face="arial" size="2"> This local text looks different. </font> <br><br> This text looks like the first line. </body> </html>
The color attribute selects the desired color for your text. The face attribute selects the desired font. Note: If you enter a list of fonts, like in the example, the browser will use the first font in the list available on the visitor's computer.
SANTOSH KUMAR
TEXT LINKS The tags used to produce links are the <a> and </a>. The <a> tells where the link should start and the </a> indicates where the link ends. Everything between these two will work as a link. The target of the link is added to the <a> tag using the href="http://www.whateverpage.com" setting. The example below shows how to make the word here work as a link to yahoo. Click <a href="http://www.yahoo.com">here</a> to go to yahoo.
You simply:
Specify the target in the <a href=" ">.
Then add the text that should work as a link.
Finally add an </a> tag to indicate where the link ends.
You can read about more sophisticated link methods in the link section of this tutorial. TEXT FORMAT
These are the tags for text formats:

<b>text</b> <i>text</i> <u>text</u> <sub>text</sub> <sup>
text
writes text as bold writes text in italics writes underlined text lowers text and makes it smaller lifts text and makes it smaller
</sup>
SANTOSH KUMAR
<blink>text</blink> <strike>text</strike> <tt>text</tt> <pre>text</pre> <em>text</em> <strong>text<strong>
guess yourself! (Note: Netscape only.) strikes a line through the text writes text as on a classic typewriter writes text exactly as it is, including spaces. usually makes text italic usually makes text bold
Note: The <blink> tag is only supported by Netscape browsers, and should be avoided. TEXT SIZE
These are the tags for changing the font size.

<big>text</big> <small>text</small> <h1>
increase the size by one decrease the size by one writes text in biggest heading writes text in smallest heading writes text in smallest fontsize. (8 pt) writes text in biggest fontsize (36 pt)
text</h1>
<h6>text</h6> <font size="1">text</font> <font size="7">
text
</font>
The <small> and <big> tags are special in that they can be repeated. If you want to increase the font size with a factor two, then you could do it like this: bla bla bla <big><big>whatever</big></big> bla bla bla
Note: While the font tag lets you specify font attributes in plain HTML, you really should look into the tutorial on CSS to learn how to get full, flexible and much more advanced control of your text.
10
SANTOSH KUMAR
TEXT LAYOUT These tags will let you control the layout. HTML <p>text</p> <p align="left">text</p> <p align="center">text</p> <p align="right">text</p> text<br> <nobr>text</nobr> EXPLANATION Adds a paragraph break after the text. (2 linebreaks). Left justify text in paragraph. Center text in paragraph. Right justify text in paragraph. Adds a single linebreak where the tag is. Turns off automatic linebreaks - even if text is wider than the window. Allows the browser to insert a linebreak at exactly this point - even if the text is within <nobr> tags. Center text.
text<wbr>
<center>text</center> <div Center text. align="center">text</div> <div align="left">text</div> Left justify text. <div align="right">text</div> Right justify text.
Example: the difference between layout tags: RESULT HTML

Hello world- a linebreak does not insert a linebreak in HTML Hello world a linebreak does not insert a linebreak in HTML <p>you will need</p> to insert <p align="right">to insert</p> special tags that will insert linebreaks where <p align="left">special tags</p> that will insert<br> linebreaks<br> where<br>
you will need
11
SANTOSH KUMAR
you want it!
you want it!<br> <br> Another method is to write a Another method is of course to sentence, that is long enough to write a sentence, that is long force a linebreak. enough to force a linebreak.<br> <br> This option can however be turned <nobr>This option can however be offwith the nobr-tag.unless a wbr is turned off<wbr>with the nobr used to force it! tag,<wbr>unless a wbr is used to force it!</nobr> You can also center And turn the center off And on! Go left! Go right! <center>You can center</center> And turn the center off <div align="center">And on!</div> <div align="left">Go left!</div> <div align="right">Go Right!</div>
Note in particular the difference between the <p> and the <div> tags. The <div> tag allows you to justify content without being forced to add a double linebreak. Also, note that these alignment tags are not limited to text. They work on text, images, applets or whatever it is that you insert on the page. HTML Lists : INTRODUCTION To create a bulleted list you need to add a <ul> and a </ul> tag at the beginning and the end of the list. Numbered lists have <ol> tags instead of <ul> tags. To separate single list items use <li> and </li> tags. There are special settings that you can use to customize the lists on your page. On the following two pages you can learn in detail about bulleted and numbered lists. BULLETED LISTS This page shows how to make different kinds of bulleted lists. You have the following bullet options:
disc circle square
12
SANTOSH KUMAR
Look at these examples to see the detailed syntax. HTML-CODE <ul> <li>text</li> <li>text</li> <li>text</li> </ul> EXPLANATION / EXAMPLE Makes a bulleted list using the default bullet type:

text text text
Starts a bulleted list using discs as bullets:

<ul type="disc">
This is one line This is another line And this is the final line
Starts a bulleted list using circles as bullets:

o o o
<ul type="circle">
This is one line This is another line And this is the final line
Starts a bulleted list using squares as bullets: <ul type="square"> This is one line This is another line And this is the final line
On the next page you can learn how to create and customize numbered lists.... NUMBERED LISTS This page shows how to make different kinds of numbered lists. You have the following number options:
Plain numbers Capital Letters
13
SANTOSH KUMAR
Small Letters Capital Roman Numbers Small Roman Numbers
In addition to these options you can specify at which number the list should start. The default start value for numbered lists is at number one (or the letter A). Look at these examples to see the detailed syntax. HTML-CODE <ol> <li>text</li> <li>text</li> <li>text</li> </ol> EXPLANATION / EXAMPLE Makes a numbered list using the default number type: 1. text 2. text 3. text
Starts a numbered list, first # being 5. 5. This is one line 6. This is another line 7. And this is the final line
<ol start="5">
Starts a numbered list, using capital letters. A. This is one line B. This is another line C. And this is the final line
<ol type="A">
Starts a numbered list, using small letters. a. This is one line b. This is another line c. And this is the final line
<ol type="a">
14
SANTOSH KUMAR
Starts a numbered list, using capital roman numbers. <ol type="I"> I. II. III. This is one line This is another line And this is the final line
Starts a numbered list, using small roman numbers. <ol type="i"> i. ii. iii. This is one line This is another line And this is the final line
Starts a numbered list, using normal numbers. 1. This is one line 2. This is another line 3. And this is the final line
<ol type="1">
An example of how type and start can be combined. <ol type="I" start="7"> VII. VIII. IX. This is one line This is another line And this is the final line
HTML Images : INTRODUCTION This section will show how to add images to your pages. We will start out with a presentation of the two main image types on webpages: jpg and gif. After that, we will proceed with various ways to insert and customize images, with a special focus on the different alignments you can choose. While the focus of this section is images, there are a couple of aspects related to
15
SANTOSH KUMAR
images that are not covered here.

If you want to learn how to make images work as links, you should go to the links section. If you want to learn about browser safe colors for images, you should go to the hexcolor section. If you want to learn about mouseover effects on images, you should go to the javascript section.
Otherwise - let's get started..... GIF & JPG Computers store images in several different ways. Some storage methods focus on compressing the size of the image as much as possible. A major problem with using images on websites is that images take much longer to load than text. To reduce download times as much as possible two of the best image compressing formats used on the web are: GIF 256 colors Can handle transparent areas This format is not good at compressing photographs In general, it is excellent for banners, buttons and clipart JPG Unlimited colors Can't handle transparent areas Excellent for compressing photographs and complex images In general, it is not good for banners, buttons and clipart.
This means that:

Banners, buttons, dividers, clipart and other simple images usually work best as GIF's. Photographs and other complex images usually work best as JPG's.
If you want to use an image that is in a format other than JPG or GIF, you will need to load the image into a graphics program and save it as either JPG or GIF.
16
SANTOSH KUMAR
INSERTING IN HTML The tag used to insert an image is called img. Below you see an image called "rainbow.gif".
Here is the HTML code used to insert the image on this webpage: <img src="http://www.echoecho.com/rainbow.gif">
If the image is stored in the same folder as the HTML page, you can leave out the domain reference (http://www.echoecho.com/) and simply insert the image with this code: <img src="rainbow.gif">
On the following pages we will discuss different ways to control how your image is inserted. RESIZING You can change the size of an image using the width and height attributes. In general, it is not advisable to reduce image size using these settings, since the image will be transferred over the internet in its original size no matter what reduction is set for it. This will slow the loading of your webpage. This means, that if you have an image that is bigger in size than you want it to be on your page, you should reduce the size in a graphics program, rather than reducing the size on the webpage using the width and height attributes. On the contrary, sometimes, it can be wise to enlarge images using this technique. Below are two presentations of the exact same image - with different settings for width and height.
17
SANTOSH KUMAR
<img src="http://www.echoecho.com/rainbow.gif" width="60" height="60">
<img src="http://www.echoecho.com/rainbow.gif" width="120" height="120">
If you leave out the settings for width and height, the browser will automatically use the real size of the image. However, you should always enter the settings for width and height, even when using the real size! The reason is that if the settings are left out, the browser can't build the page until the image is loaded entirely. This means, that the visitor cannot read text around the image while the image itself is loading - which in turn will give the visitor an impression of a slow loading page. This becomes especially true if the image is inside a table. In that case, the whole table will not be shown until the image is loaded entirely.
18
SANTOSH KUMAR
BORDER AROUND You can add a border to the image using the border setting shown in the example below: Note: Netscape browsers will only show the border if the image is a link.
<img src="http://www.echoecho.com/rainbow.gif" border="5">
Adding a border to your image might help the visitor recognize that the image is a link. However, the net is filled with images that work as links and have no borders indicating it - so the average visitor is used to letting the mouse run over images to see if they are links. Still - if you have an image that is often mistaken you might consider adding a border to it - although you should probably consider changing the image entirely - since if it does not indicate by itself that it is a link then it isn't serving it's purpose. ALTERNATIVE TEXT You can add an alternative text to an image using the alt setting shown in the example below:
<img src="http://www.echoecho.com/rainbow.gif" alt="This is a text that goes with the image">
You should always add alternative texts to your images, so the users can get an idea of what the image is about before it is loaded. This becomes particulary important if the image is a link.
19
SANTOSH KUMAR
Few things are as annoying as knowing that you want to leave the current page and at the same time being forced to wait for an image to load before being able to do so. It is extremely tempting to use the browser's straightforward options to leave the entire site instead. SPACING AROUND You can easily add space over and under your images with the Vspace attribute. In a similar way you can add space to the left and right of the image using the Hspace attribute. Below is an example using these attributes:
<img src="rainbow.gif" Hspace="30" Vspace="10">
As you see these settings allow you to add spacing around your image. Unfortunately, they also force you to add the same spacing to each side of the image (over and under - or left and right). The workaround for this, if you only want spacing on one side of the image is to use a 1x1 pixel transparent gif image. If, for example, you wanted a 10 pixel spacing to the left of your image you could use the transparent image (pixel.gif) this way:
<img src="pixel.gif" width="10" height="1"><img src="rainbow.gif">
20
SANTOSH KUMAR
The 1x1 pixel transparent gif image is simply stretched to whatever size you want the spacing to have. This 1x1 pixel "cowboy-trick" is probably one of the most widely used workarounds on the entire net. The reasons are obvious: It works on all browsers and it gives you complete pixel precision in your design! ALIGNMENT OF IMAGES You can align images according to the text around it, using the following alignments:
default aligns the image using the default settings of the Web browser. Same as baseline. left aligns the image in the left margin and wraps the text that follows the image. right aligns the image in the right margin and wraps the text that precedes the image. top aligns the top of the image with the surrounding text. texttop aligns the top of the image with the top of the tallest text in the line. middle aligns the middle of the image with the surrounding text. absmiddle aligns the image with the middle of the current line. baseline aligns the image with the baseline of the current line. bottom aligns the bottom of the image with the surrounding text. absbottom aligns the image with the bottom of the current line. center aligns the center of the image with the surrounding text.
In the table below you can see examples of the different vertical alignments you can make for an image.
21
SANTOSH KUMAR
The note in the examples is only there to show how the circular sign affected by other images on the same line.
is
This means, that the alignments shown in the example are made to the circular sign and not the note.
HTML <img src="rainbow.gif" align="texttop">
EXAMPLE
bla bla
bla
bla
<img src="rainbow.gif" align="top">
bla bla
bla
bla
<img src="rainbow.gif" align="middle">
bla bla
bla
bla
<img src="rainbow.gif" align="absmiddle">
bla bla
bla
bla
<img src="rainbow.gif" align="bottom">
bla bla
bla
bla
<img src="rainbow.gif" align="absbottom">
bla bla
bla
bla
<img src="rainbow.gif" align="baseline"> bla bla
bla
bla
22
SANTOSH KUMAR
WRAP TEXT AROUND In addition to the vertical alignments covered on the previous page, images can also be aligned horizontally. To do this, add align="left" or align="right" to the <img> tag. Consider these examples to see how it works: HTML-CODE EXAMPLE bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<img src="rainbow.gif" align="left"> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<img src="rainbow.gif" align="right"> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Another way to obtain the same effect would be to enter the image and text in an invisible table. Entering text in one column and the image in another would create a similar effect. You can learn more about tables here. Otherwise, you should proceed to the next section to learn how to use images as backgrounds for the entire page.
23
SANTOSH KUMAR
HTML Links : INTRODUCTION Links are the most fundamental part of the world wide web. It is the links that tie it all together. There are three different kinds of links you can have on your website:
Links to anchors on the current page (Internal). Links to other pages within the current site (Local) Links to pages outside the current site (Global).
It is possible to make texts and images work as links. With a little creativity other objects, such as pushbuttons or even drop-down menus can work as links as well. This section will cover the usual links: Texts and Images. Other types of more advanced links will demand use of javascript. Look in the javascript section to learn more. HOW TO MAKE A LINK The tags used to produce links are the <a> and </a>. The <a> tells where the link should start and the </a> indicates where the link ends. Everything between these two will work as a link. The target of the link is added to the <a> tag using the href="http://www.whateverpage.com" setting. The example below shows how to make the word here work as a link to yahoo. Click <a href="http://www.yahoo.com">here</a> to go to yahoo.
You simply:
Specify the target in the <a href=" ">. Then add the text that should work as a link.
24
SANTOSH KUMAR
Finally add an </a> tag to indicate where the link ends.
COLORS ON TEXT LINKS There are a few settings that can be useful for controlling the colors of text links. This page will teach you how to:
Define colors for all links on the page. Define colors for individual links on the page.
Define colors for all links on the page The general color of text links is specified in the <body> tag, like in the example below: <body link="#C0C0C0" vlink="#808080" alink="#FF0000">
link - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF). vlink - visited link - to a page the visitor has been to before. (standard color is purple - #800080). alink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).
Note You can click here to learn more about the hexadecimal colorsystem that is used in HTML.
Define colors for individual links on the page The method described above is for setting overall link colors for the page.
25
SANTOSH KUMAR
However, you might want one or more links to have different colors than the rest of the page. There are two methods for doing this:
Placing font tags between the <a href> and the </a> tag. This method will work on all browsers except MSIE 3. Using a style setting in the <a> tag. This method works on MSIE3 and newer browsers.
The first technique would look like this: Click <a href="http://www.yahoo.com"><font color="FF00CC">here</font></a> to go to yahoo. Note: It is important that both the <font> and the </font> tags are between the <a href> and </a> tags. The second technique would look like this: Click <a href="http://www.yahoo.com" style="color: rgb(0,255,0)">here</a> to go to yahoo.
Note: The RGB numbers indicate amounts of red, green, and blue using values between 0 and 255. You can read more about converting between RGB colors and hexadecimal colors here. Now, since neither of the two methods covers all browsers, we need to use both techniques at once. This example will work on all browsers: Click <a href="http://www.yahoo.com" style="color: rgb(0,255,0)"><font color="FF00CC">here</font></a> to go to yahoo.
The last example is interesting. Not only because it will work on all browsers.
26
SANTOSH KUMAR
But even more because it shows a general approach to making your pages browser safe. Since browsers simply leave out information that is not understood, you can work around browser differences by simply adding different settings for multiple browsers. If you want more advanced effects you should jump to the section about stylesheets. LINK TARGETS By default, links will open in the current window or frame. You need to add a target if you want the link to open in another window or frame than the link itself is placed in. To do this you simply add a target="" to the <a href>. This example will open yahoo in a new window: <a href="http://www.yahoo.com" target="_blank">
Predefined targets are:

_blank loads the page into a new browser window. _self loads the page into the current window. _parent loads the page into the frame that is superior to the frame the hyperlink is in. _top cancels all frames, and loads in full browser window.
In addition to these, you can also enter the name of a frame window if your page is within a frameset.
27
SANTOSH KUMAR
NO UNDERLINE By default, text links are underlined by the browser. If your page is visited by MSIE3 or newer, you can turn off the underlining for an entire page by adding a style tag to the head section of the document. Look at this example: <html> <head> <title>This is my page</title> <style type="text/css"> <!-A{text-decoration:none} --> </style> </head> <body> Welcome to my world!<br> <a href="http://www.yahoo.com">This Link To Yahoo has no underline</a> </body> </html>
Note: The style setting will not cause an error if viewed on a browser that doesn't support it. The browser will simply skip the effect - the link will look like an ordinary underlined link - but no errors will occur.
You can create much more advanced links with Cascading Style Sheets (CSS). If you're new to CSS you can learn about it in our CSS tutorial. If you're already familiar with CSS you can learn more about it in the section about CSS links.
28
SANTOSH KUMAR
ADVANCED TEXT LINKS Instead of just turning off the underline on all links you could be more specific in defining the way you want your links to work. In the example below underlining is turned off for all links. The A:hover tells the browser that when the mouse is over a link the underline should appear. The hover option only works on MSIE 4+. (But it does not cause an error on Netscape if you include it - the effect just does not appear.). <html> <head> <title>This is my page</title> <style type="text/css"> <!-A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline} --> </style> </head> <body> Welcome to my world!<br> <a href="http://www.yahoo.com">This Link To Yahoo has no underline</a> </body> </html>
The methods described above will turn off the underline effect for links on the entire page. If you want to turn off the effect for just a single link, add a style property to the <a href> tag:
29
SANTOSH KUMAR
<a href="http://www.yahoo.com" style="text-decoration: none">Go to Yahoo</a>
NOTE: The method described above only works on MSIE 3, Netscape 4 or newer browsers. You can make multiple style settings instead of just removing the underline. Why not define the colors you want for visited links as well? This example will show you how: <html> <head> <title>This is my page</title> <STYLE TYPE="text/css"><!-A.set1:link {color: #FF00FF; } A.set1:active {color: #FFFF00; } A.set1:visited {color: #00FFFF; } A.set2:link {color: #AA00FF; background: FF00AA; textdecoration: none} A.set2:active {color: #FF00AA; background: none transparent;} A.set2:visited {color: #FFFF00; text-decoration: none} --></STYLE> </head> <body> Welcome to my world!<br> <a href="http://www.yahoo.com CLASS=set1> Yahoo </a> <a href="http://www.hotbot.com CLASS=set2> Hotbot </a> </body> </html>
Try clicking the two links below to see how these effects would work. (links have been deactivated on this page)
30
SANTOSH KUMAR
Yahoo Hotbot
You can create much more advanced links with CSS (Cascading Style Sheets). If you're new to CSS you can learn all about it at our CSS-tutorial. If you're allready familiar with CSS you can learn all about CSS-links in the section about CSS-links. IMAGE LINKS If you want to make an image work as a link, the method is exactly the same as with texts. You simply place the <a href> and the </a> tags on each side of the image. Below is the HTML code used to make the image work as a link to a page called myfile.htm:
<a href="myfile.htm"><img src="rainbow.gif"></a>
If you haven't entered a border setting you will see a small border around the image after turning it into a link. To turn off this border, simply add border="0" to the <img> tag: <a href="myfile.htm"><img src="rainbow.gif" border="0"></a>
Images that work as links can show a popup text when you place the mouse over it. This is done with the alt property in the <img> tag.
31
SANTOSH KUMAR
For example: <a href="myfile.htm"><img src="rainbow.gif" border="0" alt="Link to this page"></a>
IMAGE MAPPING It is possible to make one image link to several pages, depending on where the image is clicked. This technique is called imagemapping. You simply specify which areas of the image should link to where. In the example below, if you position the mouse in the upper left corner it links to yahoo .... and in the lower right corner.... it links to hotbot.
<img src="rainbow.gif" usemap = #example border=0> <map name=example> <area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com"> <area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com"> </map>
In the above example we only used rectangular imagemappings. Possible shapes are:
<area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com">
32
SANTOSH KUMAR
<area shape=circle coords= x1,y1, x2,y2 Href="http://www.domain.com"> <area shape=polygon coords= x1,y1, x2,y2, .., xn,yn Href="http://www.domain.com">
There are excellent tools out there to help you create imagemaps. No one calculates the coordinates by hand. If you want to use imagemaps on your site you will need to get a program that will allow you to simply drag the mouse over the areas you want to work as links. Most HTML editors have this as a built-in function. If you do not use an HTML editor, you can still get programs that will do this boring job for you - best thing is - you can get it for free! Below are links to websites that will help you create your imagemaps on the fly. Just make sure that the image is uploaded to the web before using these tools. ImageMap Helper Java Application Poor Person's Image Mapper
LINK WITHIN A PAGE Linking to anchors is very similar to normal links. Normal links always point to the top of a page. Anchors point to a place within a page. A # in front of a link location specifies that the link is pointing to an anchor on a page. (Anchor meaning a specific place in the middle of your page). To link to an anchor you need to:
Create a link pointing to the anchor Create the anchor itself.
An anchor is created using the <a> tag. If you want to create an anchor called chapter4, you simply add this line where you want the anchor to be:
33
SANTOSH KUMAR
<a name="chapter4"></a>
After doing this, you can make a link pointing to the anchor using the normal <a href> tag, like this: Click <a href="#chapter4">here</a> to read chapter 4.
Note: When linking to an anchor on a page you need to put a # in front of the anchor. When you link to an anchor on the same page, simply enter <a href="#YourAnchor">blabla</a>
When you link to anchors on external pages use this syntax: <a href="http://www.yahoo.com#YahoosAnchor">blabla</a>
Anchors are generally used when you create pages with considerable amounts of text. You would typically make an index at the top of the page linking to the anchors that have been added to key places in the text that follows. LINKS IN FRAMESETS If a non-framebased HTML document contains a hyperlink that links to a page called analysis.htm then it appears in the HTML document somewhat like this: Click here to see the <a href="analysis.htm">Analysis</a> of the project.
Now if the same link was in a frameset, (say in the frame window called menu)
34
SANTOSH KUMAR
and we wanted it to link to a page that is loaded in the other frame window, (named main) then the HTML code would be: Click here to see the <a href="analysis.htm" target="main">Analysis</a> of the project
We simply added the desired frame window (main) as a target for the link. The link will be opened in the main frame window instead of the menu frame window where the link itself is located. LINK TO NEW WINDOW If you want your link to open a page in a new window use the target="_blank" in the <a href> tag. Targetting the link to "_blank" simply opens a new browser window that will load the linked page. Linking to Yahoo the traditional way would require this link: <a href="http://www.yahoo.com">Go to Yahoo</a>
If you add a target="_blank", the page will open in a new window: <a href="http://www.yahoo.com" target="_blank">Go to Yahoo</a>
Click the link below to see this link in action: Go to Yahoo
If you want to customize the new window as to which buttons, menus etc. should be available and which size it should have, you will need to do that with javascript. You can use our Popup Tool to create your own customized windows without knowledge of javascript.
You can learn more about predefined link targets
35
SANTOSH KUMAR
LINK TO EMAIL Having a link that allows visitors to send email from your website can be a great addition to your site, making it easy for your visitors to send questions or comments. There is a special link for this action. Email links are done much the same as links to other pages, using the <a href> tag. An email link would require the following code: <a href="mailto:youremailaddress">Email Me</a>
This will result in the visitor's email program opening a new email with your address already in the To: field.
If you wish to have a specific subject in the email, you can add it to the html code using subject= setting : <a href="mailto:email@echoecho.com?subject=SweetWords"> Send Email</a>
Suppose you want an email link for your visitors containing specific text in the body of their message, simply add &body=: <a href="mailto:email@echoecho.com?body=Please send me a copy of your new program!">Send Email</a>
Or combine all the options and allow your visitor to send email with the address, subject and text already entered. <a href="mailto:email@echoecho.com?subject=SweetWords
36
SANTOSH KUMAR
&body=Please send me a copy of your new program!">Email Me</a>
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.
When picking the desired color - whether it be plain or an image - you should also consider the fact that some colors work with almost any other color - while there are colors that only work with a limited number of contrasts. If you use green on a red background, it will look different than if you use the same green on a blue background. Without digging into deep theories about colors, we will make a note on the fact that white, gray and black colors tend to be balanced against other colors. That is, white, gray and black work with any of the colors in the rainbow. This is probably the reason that white, black and gray are the most widely used background colors found on the net.
If you're designing for a company that has a certain color they use in other graphics, it is very tempting to pick that same color for the background of the webpage. This might be a good idea, but there are other ways to emphasize a certain color than to use it as background for the page. If, for example, you see a huge white wall with a bright red dot on it, which color makes the biggest impression on you? The 500 square feet of white or the one square foot of red?
37
SANTOSH KUMAR
The conclusion is, that limited use of colors often makes the appearence of the colors more powerful than if the entire page was one big painting. Furthermore, when you limit your use of colors, you can use the colors more to underscore the navigation of the page. If secondary navigation elements are held in pale colors while primary elements are sharp - then the user will, by intuition, get the point. You can read more about colors on webpages.
Screen colors
Did you ever notice that many of the leading websites stick to the same
few colors? You probably noticed that almost all major sites uses a plain white background these days. But there are several other similarities concerning the colors of these sites.
Close to nobody changes the link-colors. Almost all major sites uses plain black colors for text. As if this wasn't enough - they even stick to the same fonts. Yeah you're right - it's boring. This page, will teach you that this boring tendency might have one or
two very good reasons.
On this page we will assume that you're familiar with the basics of
colors in HTML. The issue here is not to explain how to make colors in HTML-documents, but to explain how to choose among the possible ones.
You can learn about HTML-colors here.
Browser safe colors

38
SANTOSH KUMAR
No matter how many millions of colors the average computer can show, there
is this clear tendency among leading websites to stick to only a few of them.
The main reason is that only 216 colors look exactly the same on all browsers. Different browsers interpret all other colors differently. Stupid, yes, but more importantly: true! This does not mean (as it is often misunderstood) that only these 216 colors
should be used.
Many leading websites (including the most visited: Yahoo) use more than the
216 browser-safe colors - BUT: Non-browser-safe colors should only be used where images do not fade into the background.
Look at these examples:

EXAMPLE 1 NON-SAFE IMAGECOLOR #800000 EXAMPLE 2 NON-SAFE IMAGECOLOR #800000 EXAMPLE 3 SAFE IMAGECOLOR #660000
#800000
#870000
#660000
39
SANTOSH KUMAR
TABLECOLOR
TABLECOLOR
TABLECOLOR
Depending on which browser you're using one of the two images to the left will
fade into the color of the table. The other shows a slight border around it. (If you don't see any difference your screen-settings are wrong. Try change the luminosity or contrast to correct it. If you still don't see any difference i'm afraid it's not the screen that's the problem *grin* go buy some new eyes)
This is caused by an error in Netscapes color-interpretation. As you can see: on MSIE image- and table-colors are the same. On Netscape
they must be different in order to obtain the same color.
In example 3 the colors are the same for both the image and the table. Still it
works on Netscape browsers! This is because the image is based on one of the 216 colors that Netscape browsers (for some reason) interprets correctly.
Therefore:
If an image should fade correctly into an HTML background the image itself must be based on one of the 216 browser-safe colors.
This is not done in HTML but in your graphics program.

If the image is not based on a browser safe color - you can't correct it with HTML.
So to repeat the steps:
40
SANTOSH KUMAR
First you need to make sure your image is based on a specific browser safe color. Then you need to use that specific color in your HTML document where you specify the background.
Top of page
Popular colors
When i first decided to make a paragraph about popular colors i kept saying to
myself: forget about it. I just couldn't make myself write it, cause the entire idea of such a degree of conservatism was just too plain boring to fit into my head.
What i had been assuming more and more lately simply HAD to be wrong:
that the main websites were beginning to focus on just a handful of different colors.
Where is the artistic impression? i asked myself.

Humans simply are way too creative to accept such a degree of conservatism.
After designing tons of pages and surfing zillion others i was of course aware
of certain more or less common colors (yep I'm weird enough to dig into the HTML to see the hexcode if i like a color on a page).
As time went by i had a harder and harder time convincing myself that it
wasn't true. Then one night, i woke up screaming HEX #FFCC00!!!!!!!!! (well, not literally - but you get the point) and knew it was time to get back to reality.
I went online and went to ten random choosen sites.

(Well not more random than I knew they were all among the top-25 most visited on the web)
The result, was nothing less than shocking....
41
SANTOSH KUMAR
Backgrounds
SITE ALTAVISTA AMAZON AOL CNET CNN EXCITE BACKGROUND HEADLINE MENU AREA NONE FORM AREA NONE TOP MENU NONE
#FFFFFF #FFCC66
#FFFFFF #336633 #EEEECC #EEEECC #336633 #FFFFFF #FFCC66 NONE NONE #CC0000
#FFFFFF #FFCC00 #FFFFCC #CCCCCC #000000 #FFFFFF #FFCC00 #FFFFCC #999999 NONE NONE #000000 NONE NONE NONE
#FFFFFF #FFCC00 #FFFFCC #DDDDDD NONE
MICROSOFT #FFFFFF #6699CC #6699CC
NETSCAPE
ZDNET YAHOO
#FFFFFF #99CCCC #FFFFCC #CCCCCC #FFFFFF #003399 #FFFFCC #DCDCDC #FFFFFF #A0B8C8 #FFFFCC #DCDCDC
BACKGROUND : Color entered in the <BODY>-tag. HEADLINE : Color used for main focus areas. MENU AREA : Color used for Menus or Secondary heading-areas. FORM AREA : Color used to differ form-area from plain content. TOP MENU : Color used for top navigation menu if present. Since these sites differ in layout it is impossible to set up a perfect set of definitions for the listed items. For example: Some have different kinds of menu's on the same page. However we have tried to the best of our abilities to identify each of the listed items on each site. If a single item was present twice or more times on the same page
42
SANTOSH KUMAR
we picked the color from the one with the primary focus. If the item was not present on the main page we have identified the item on a primary subpage.
Text
SITE ALTAVISTA AMAZON AOL CNET CNN EXCITE TEXT LINK
VLINK
ALINK #FF0000 #996633
#000000 #000099 #663366 #000000 #003399 #FF9933
#000000 #0000CC #660099 #CCCCCC NONE NONE NONE NONE NONE NONE #FF0000 #003399 NONE
#000099 #777777
#000000 #000066 #990000
MICROSOFT #000000 #003399 #003399 NETSCAPE ZDNET YAHOO NONE NONE NONE NONE NONE
#333399 #0033CC #6666FF NONE NONE NONE
TEXT : Text-color entered in the <BODY>-tag. LINK : Link-color entered in the <BODY>-tag. VLINK : Visited-link-color entered in the <BODY>-tag. ALINK : Active-link-color entered in the <BODY>-tag. Of course conclusions from this survey should be made while keeping in mind that it's based on just 10 out of the thousands of websites available. However, if the surveys relevance was based on number of pageviews these 10 sites together represent several hundred million hits per week. Actually all ten sites are among the top-25 most visited sites on the entire net - that's why they were picked for the survey!
43
SANTOSH KUMAR
When i climbed up on my chair again i started thinking. (Kinda like a zenbudhist with a
mantra.) My mantra was the word WHY?
These similarities were just too obvious to be considered purely coincidential. My first impression was that - yeah - they probably sneaked in on each other when they designed their own pages. Thats why (Of course I knew that these giant websites were designed with the highest degree of professionalism - but sometimes it helps pretending they aren't). Still, the big question was: why? Im sure that if you went and asked belated Van Gogh or whomever they could talk for
days about how different colors appears to be more distant than others etc etc etc and I'm sure there has been analysis made to end up with these colors.
But i'm also certain that almost no matter which colors became standards for mainheaders and menu's etc. that the fact alone that they were standards would be enough. The entire web is about minimizing what people need to figure out about your navigation.
For example - in my early childhood on the web (4 years ago) i played with the idea of
removing the browsers back-buttons and replace them with my own. Cool!!! - people would say! Yes - very cool, but only from a stupid technical point of view. Not from the users point of view. Why force the user to unlearn what she already knows? Why pretend that users are as interested in my site as myself? Cause they aren't!
By adopting these standards - the visitors are already familiar with your navigation
structure before their brain even recognize that the page (finally) showed up. That is the point.
It's not important if the designer likes the colors or not. What matters is that people in
general like this way to do things, but most of all, that they're used to this way of doing things.
My final saying here is that no matter how conservative it may seem to adopt
standards - it simply makes things easier for the visitor. After all the page is not designed for the author - right?
Okay, now you know the rules and the standards. No biggy picking colors for your next
project - unless, of course, you want to set the standards of the future! Go out there and show, that there has to be more than one way to do it! But while doing so remember to keep the standards and their benefits in mind. Henrik Petersen
44
SANTOSH KUMAR
Whether you want to add an image or a plain color as background you need to specify it in the <body> tag. The following pages will teach you how..... BACKGROUND COLOR Adding a plain background color to your page is easy. All you need to do is add a bgcolor property to the body tag: <body bgcolor="#FF0000">
As you see, the background color (#FF0000) is entered as a hexadecimal value. You can click here to learn about the hexadecimal system used on HTML pages.
While plain white and plain black are the most widely used colors on the net, there seems to be a trend moving towards slight variations of these. The reason is that the sharp contrast between pure white or black and the text color might be less readable than a slightly faded white/black. Look at these examples and choose for yourself which is most readable. To the left are plain white/black and to the right are slight variations.
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
45
SANTOSH KUMAR
bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Another popular technique to give the background more of a paper touch is to use an image as background. The next page will teach you how..... BACKGROUND IMAGE If you want to add a background image instead of a plain color there are some considerations you should make before doing so:
Is the background image discrete enough to not take away the focus from what's written on it? Will the background image work with the text colors and link colors I set up for the page? Will the background image work with the other images I want to put on the page? How long will the page take to load my background image? Is it simply too big? Will the background image work when it is copied to fill the entire page? In all screen resolutions?
After answering these questions, if you still want to add the background image
46
SANTOSH KUMAR
you will need to specify in the <body> tag which image should be used for the background. <body background="drkrainbow.gif">
Note: If the image you're using is smaller than the screen, the image will be replicated until it fills the entire screen. If, say you wanted a striped background for your page, you wouldn't have to make a huge image for it. Basically you could just make an image that is two pixels high and one pixel wide. When inserted on the page the two dots will be copied to fill the page - thus making what looks like a full screen striped image.
When you choose to use a background image for the page it is always a good idea to specify a background color as well. <body background="drkrainbow.gif" bgcolor="#333333">
The reason is that until the background image is loaded, the background color will be shown. If there is too much difference between the background color and the background image, it will look disturbing once the browser shifts from the background color to the image. Therefore it is a good idea to specify a background color that matches the colors of the image as close as possible.
You may have noticed that background images scroll with the page when you use the scroll bar. The last page in this section will teach you how to add a fixed image to your page..... FIXED IMAGE
47
SANTOSH KUMAR
The background image will scroll when the user scrolls down the page, unless you have set it to be fixed: <body background="drkrainbow.gif" bgproperties="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. Note: Fixed backgrounds are only supported by MSIE and do not work in Netscape browsers - instead they simply act as normal backgrounds.
As mentioned earlier in this section a limited use of colors can add more power to the few colors that are used. The most important tool for adding colors to certain areas of the page rather than the entire background is tables. The next section will teach you how to add tables to your pages.... 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:
48
SANTOSH KUMAR
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.
The importance of using tables for these layout purposes can't be overrated. However there are a few things to keep in mind when doing so. 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. Now let's proceed with learning about the different techniques... 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: <table> </table>
The above table would be of no use since it has no rows and no columns.
49
SANTOSH KUMAR
ROWS: To add rows to your table use the <tr> and </tr> tags. Example: <table> <tr></tr> <tr></tr> </table>
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 two, left side. This is row one, right side. This is row two, right side.
50
SANTOSH KUMAR
This page has shown the core basics of tables. In addition to these, there are different options for customizing your tables. The following pages will focus on the different settings for <table>, <tr> and <td> tags.
TABLE TAGS The following properties can be added to the <table> tag: Property align= left center right background=filename bgcolor=#rrggbb border=n bordercolor=#rrggbb bordercolordark=#rrggbb cellpadding=n cellspacing=n nowrap frame= void, above, below, lhs, rhs, hsides, vsides, box valign= top bottom width= n,n n,n% Description left align table center table right align table image inserted behind the table background color border thickness border color border shadow distance between cell and content space between cells protects agains linebreaks, even though the content might be wider than the browser window. 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 aligns content to top of cells aligns content to bottom of cells minimum width of table in pixels minimum width in percentage of window
51
SANTOSH KUMAR
size
Note: Table properties are set for the entire table. If certain properties are set for single cells, they will have higher priority than the settings for the table as a whole. ROW/CELL TAGS These settings can be added to both <tr> and <td> tags. PROPERTY align= left right center background=filename bgcolor=#rrggbb bordercolor=#rrggbb bordercolordark=#rrggbb valign= top middle bottom width= n n% height= n n% DESCRIPTION aligns content to the left of cells aligns content to the right of cells aligns content to the center of the cells sets a background image for the cells sets a background color for the cells sets color for the border of cells sets color for the border shadow of cells aligns to the top of cells aligns to the middle of the cells aligns to the bottom of cells specify a minimum width for the cells in pixels specify a minimum width for the cells in percent of the table width 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
52
SANTOSH KUMAR
nowrap rowspan=n
protects agains linebreaks, even though the content of a cell might be wider than the browser window 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
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
53
SANTOSH KUMAR
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! Let's split it all up and add the lines one by one... 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:
54
SANTOSH KUMAR
The code would be: <frameset cols="120,*"> </frameset>
The screen is divided into two coloumns. 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. Proceed to learn how to add names and default pages that load into your frame windows... 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: <frameset cols="120,*" > <frame src="menu.htm" name="menu" > <frame src="frontf.htm" name="main" > </frameset>
55
SANTOSH KUMAR
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. Proceed to the next page to learn how.... BORDERS To make frame borders invisible you simply need to add the parameters "colsline" to the frameset : <frameset cols="120,*" frameborder="0" border="0" framespacing="0"> <frame src="menu.htm" name="menu" > <frame src="frontf.htm" name="main" > </frameset>
56
SANTOSH KUMAR
The entire frameset would now look like this: m e n u
main
We could still add a few more parameters to our frameset.... RESIZEABLE WINDOWS If you dont want the frame windows to be resizeable, you should add the parameter "noresize" to the frame src lines: <frameset cols="120,*" frameborder="0" border="0" framespacing="0"> <frame src="menu.htm" name="menu" noresize> <frame src="frontf.htm" name="main" noresize> </frameset>
Now let's proceed with even more parameters for our frameset... SCROLLBARS Lets say you dont want a scroll bar in the menu window. Furthermore the main window should have a scrollbar if needed (if the HTML document doesnt fit in the window), but if not needed - there should be no scrollbars. Then the code should look like this: <frameset cols="120,*" frameborder="0" border="0" framespacing="0"> <frame src="menu.htm" name="menu" noresize scrolling=no> <frame src="frontf.htm" name="main" noresize scrolling=auto> </frameset>
If you leave out the setting for scrolling, a scrollbar will appear if needed otherwise not. The next page explains in detail how to link within a frameset...
57
SANTOSH KUMAR
LINKS WITHIN If you have an HTML document with a hyperlink on the text "Analysis" for instance, that links to a page called "analysis.htm" then it appears in the document as: Jump to the <a href="analysis.htm">Analysis</a> of the project
Now if the link was in the menu window of our example, and we wanted it to load a page in the main window, the HTML code would be: Jump to the <a href="analysis.htm" target="main">Analysis</a> of the project
We simply added the parameter target="main" to the <a href> tag. Now the link will be opened in the main frame window instead of the menu frame window where the link itself is located. Four target names are reserved, and will be interpreted by the browser in this way:
_blank loads the page into a new browser window _self loads the page into the current window. _parent loads the page into the frame that is superior to the frame the hyperlink is in. _top cancels all frames, loads in full browser window.
If you read through the pages in this section you should know just about all there is to know about framesets in HTML. It is possible to further enhance the control of your framesets with javascript. For example javascript can prevent pages that were designed to work only within framesets, from being loaded outside the frameset.
58
SANTOSH KUMAR
The last page in this section will show you examples of different framesets. You can probably find and customize an example that is very close to what you want for your own site.... EXAMPLES On this page you can see examples of different framesets. top bottom
<frameset rows="16%,84%"> <frame src="top.htm" name="top"> <frame src="bottom.htm" name="bottom"> </frameset>
tl
tr
bottom
<frameset rows="16%,84%"> <frameset cols="50%,50%"> <frame src="tl.htm" name="tl"> <frame src="tr.htm" name="tr"> </frameset> <frame src="bottom.htm" name="bottom"> </frameset>
top left right
59
SANTOSH KUMAR
<frameset rows="16%,84%"> <frame src="top.htm" name="top"> <frameset cols="50%,50%"> <frame src="left.htm" name="left"> <frame src="right.htm" name="right"> </frameset> </frameset>
topleft topright botleft botright
<frameset rows="50%,50%" cols="50%,50%"> <frame src="topleft.htm" name="topleft"> <frame src="topright.htm" name="topright"> <frame src="botleft.htm" name="botleft"> <frame src="botright.htm" name="botright"> </frameset>
topleft topright brtl brtr botleft botrbot
<frameset rows="50%,50%" cols="50%,50%"> <frame src="topleft.htm" name="topleft"> <frame src="topright.htm" name="topright"> <frame src="botleft.htm" name="botleft"> <frameset rows="50%,50%">
60
SANTOSH KUMAR
<frameset cols="50%,50%"> <frame src="brtl.htm" name="brtl"> <frame src="brtr.htm" name="brtr"> </frameset> <frame src="botrbot.htm" name="botrbot"> </frameset> </frameset>
<frameset rows="240,240" cols="320,320"> <frame src="topleft.htm" name="topleft"> <frame src="topright.htm" name="topright"> <frame src="botleft.htm" name="botleft"> <frame src="botright.htm" name="botright"> </frameset>
<frameset rows="50%,*" cols="320,*"> <frame src="topleft.htm" name="topleft"> <frame src="topright.htm" name="topright"> <frame src="botleft.htm" name="botleft"> <frame src="botright.htm" name="botright"> </frameset>
61
SANTOSH KUMAR
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. You can use our online tool to create such a menu in less than 5 minutes without knowing anything about javascript. Otherwise - proceed to learn more about forms... 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:
62
SANTOSH KUMAR
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.
Both examples send the contents of the form fields to programs running on the server. On the next page you will learn how to run programs that can handle your forms (even if you technically can't do programming on your server).... 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. Windows and UNIX handle information differently - so if there were no CGI, then UNIX machines could only communicate with other UNIX machines etc. and that is pretty far from the basic idea of the world wide web.
63
SANTOSH KUMAR
Now, you might be thinking "Well, I can't run programs on my server so this is nothing for me". Fortunately you're most likely wrong. There are dozens of free services on the web that will offer you free CGI for almost any purpose you might have. We devoted an entire CGI section on this site, to help you find what you need including guestbooks, poll systems, counters, form mailers etc etc etc. On the following pages we will introduce the different form tags and settings you can use.... 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. This means that a form can easily include a table or an image along with the form fields mentioned on the next page. Look at this example: <html> <head> <title>My Page</title> </head> <body>  <form>  </form>  </body> </html>
Note: Unlike a table, forms are not visible on the page.
64
SANTOSH KUMAR
The form in our example is useless for two obvious reasons:

First it contains no form fields. It is simply comparable to a blank sheet of paper. Second, it does not contain a recipient for the form once it is submitted.
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 post and 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. In 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. <html> <head> <title>My Page</title> </head> <body>  <form method="post" action="http://www.echoecho.com/cgibin/formmail.cgi">  </form> 
65
SANTOSH KUMAR
</body> </html>
All we need now, is to allow the visitor to enter some information. The next page explains how to do that....
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
You can click on the field type to get a detailed explanation. If you are already familiar with form fields you can jump to our Quick Reference to view all fields at once. Finally, if you want to learn how to validate inputs to form fields (valid email
66
SANTOSH KUMAR
address etc.) you should check out this article from our javascript tutorial. TEXT FIELD Text fields are one line areas that allow the user to input text. If you want several lines you should use a text area instead.
SETTINGS: Below is a listing of valid settings for text fields:
HTML text size= maxlength= name= value= align= tabindex=
EXPLANATION 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.
EXAMPLE
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.
67
SANTOSH KUMAR
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><br> <input type="text" size="25" value="Enter your name here!"> <br><br> </div> </form> </body> </html>
And the resulting output from it:

Enter your name here!
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.
68
SANTOSH KUMAR
SETTINGS: Below is a listing of valid settings for password fields:
HTML password size= maxlength= name= value= align= tabindex=
EXPLANATION 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.
EXAMPLE
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.
69
SANTOSH KUMAR
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:
70
SANTOSH KUMAR
Below is a listing of valid settings for hidden fields:
HTML hidden name= value=
EXPLANATION Hidden field Name of the field. Value of the field.
EXAMPLE
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: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> <div align="center"> <input type="text" size="25" value="Enter your name here!"> <input type="hidden" name="Language" value="English"> <br><br> </div> </form> </body> </html>

71
SANTOSH KUMAR
The hidden field does not show, but still, when the form is submitted the hidden field is sent with it. In this example the hidden field would tell the program that handles the form, that the users preferred language is English.
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 textarea rows= cols= name= tabindex= wrap= off virtual physical
EXPLANATION Text area - several lines Rows in the field. Columns in the field. Name of the field. Tab order of the field.
EXAMPLE
Turns off linebreaking Shows linebreaking, but sends text as entered. Inserts linebreaks when needed and even sends it.
72
SANTOSH KUMAR
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>
73
SANTOSH KUMAR
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 checkbox name= value= align= tabindex= checked
EXPLANATION 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.
EXAMPLE
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
74
SANTOSH KUMAR
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
75
SANTOSH KUMAR
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 radio name= value= align= tabindex= checked
EXPLANATION 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.
EXAMPLE
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.
76
SANTOSH KUMAR
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:
Milk Butter Cheese Water Beer Wine
77
SANTOSH KUMAR
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. So whatever you decide - there is always a bonus and a price to pay.
Sometimes you may want to replace text fields with drop-down menus. This might be because selecting from a menu is easier than typing. But it could also be because the script that handles the form can't interpret just any text entry. For example, you will often be asked to choose your state from a drop-down menu. This might be because picking it from the menu is easier than typing the name of the state. Along the same line, you may often asked to enter the 2 letter initials of your state from a drop-down menu as well. This could prevent confusion for the script that handles the form input. If, say, the script was programmed to only accept capital letters, then a drop-down menu would secure that no invalid entries were made.
Another typical example would be replacing links with drop-down menus. This can be done with javascript. If you're not into programming you can easily create a drop-down link menu with our online tool.
78
SANTOSH KUMAR
SETTINGS: Below is a listing of valid settings for drop-down menus:
HTML select name= size= multiple= option selected value=
EXPLANATION 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.
EXAMPLE
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.
79
SANTOSH KUMAR
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>
80
SANTOSH KUMAR
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. Since visitors aren't always perfectionists you might consider adding a javascript validation of the content before it is actually sent.
SETTINGS: Below is a listing of valid settings for submit buttons:
HTML submit name= value= align= tabindex=
EXPLANATION Submit button Name of the button. Text written on the button. Alignment of the button. Tab order of the button.
EXAMPLE
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.
81
SANTOSH KUMAR
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><br> <input type="text" size="25" value="Enter your name here!"> <br><input type="submit" value="Send me your name!"><br> </div> </form> </body> </html>

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:
82
SANTOSH KUMAR
HTML reset name= value= align= tabindex=
EXPLANATION Reset button Name of the button. Text written on the button. Alignment of the button. Tab order of the button.
EXAMPLE
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: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> <div align="center"> <br><br> <input type="text" size="25" value="Enter your name here!"> <br><input type="submit" value="Send me your name!"> <input type="reset" value="Reset!"><br> </div> </form> </body> </html>
83
SANTOSH KUMAR

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. Since visitors aren't always perfectionists you might consider adding a javascript validation of the content before it is actually sent.
SETTINGS: Below is a listing of valid settings for image buttons:
HTML image name= src= align= border= width= height= vspace= hspace= tabindex=
EXPLANATION 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.
EXAMPLE
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.
84
SANTOSH KUMAR
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: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST"> <div align="center"> <br><br> <input type="text" size="25" value="Enter your name here!"> <br><input type="image" src="rainbow.gif" name="image" width="60" height="60"><br> </div> </form> </body> </html>
85
SANTOSH KUMAR

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 textarea rows= cols= name= wrap= off virtual physical text size= maxlength= name= value= password size= maxlength= name= value= EXPLANATION 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. One line text field Characters shown. Max characters allowed. Name of the field. Initial value in the field. Password field. Characters shown. Characters allowed to enter. Name of the field. Initial value in the field. EXAMPLE
86
SANTOSH KUMAR
checkbox name= value= radio name= value= select name= size= multiple= option selected value= hidden name= value= reset name= value= submit name= value= image name=
Choose one or more options Name of the field. Initial value in the field. Choose only one option Name of the field. Initial value in the field. 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. Does not show on the form. Name of the field. Value to send. Button to reset all fields Name of the button. Text shown on the button. Button to submit the form Name of the button. Text shown on the button. 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
87
SANTOSH KUMAR
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. The next page will explain why meta tags relevance to search engines is over rated... 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 and Keywords. 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
88
SANTOSH KUMAR
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 <META name="DESCRIPTION" content="AN HTML Tutorial">
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 <META name="KEYWORDS" content="html, webdesign, javascript">
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
89
SANTOSH KUMAR
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. <META name="GENERATOR" content="Frontpage 3.0">
Another common tag tells who created the page: <META name="AUTHOR" content="Bill Gates">
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. <META http-equiv="REFRESH" content="5; url=http://www.echoecho.com">
In the example www.echoecho.com is loaded after 5 seconds.
90
SANTOSH KUMAR
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.
91
SANTOSH KUMAR
Internet Explorer 3.0 and above, as well as new versions of Netscape support this service. Specifying information for content restricted browsers: <meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/ratingsv02.html" l gen true for "http://www.echoecho.com" r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.echoecho.com" r (n 0 s 0 v 0 l 0))' />
You need to visit www.icra.org for a full description of this tag, as well as obtaining your own clarification code for your page. 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.
92

HTML Tutorial

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Tutorial

Caricato da

Copyright:

Formati disponibili

SANTOSH KUMAR

Formatting Resizing Layout

To local pages To pages at other sites To bookmarks

Inserting images (GIF and jpg) Adding a link to an image

Hello! This is my page.

This text looks like the first line.

Specify the target in the <a href=" ">.

Then add the text that should work as a link.

Finally add an </a> tag to indicate where the link ends.

These are the tags for text formats:

<blink>text</blink> <strike>text</strike> <tt>text</tt> <pre>text</pre> <em>text</em> <strong>text<strong>

These are the tags for changing the font size.

<h6>text</h6> <font size="1">text</font> <font size="7">

Example: the difference between layout tags: RESULT HTML

you will need

you want it!

text text text

Starts a bulleted list using discs as bullets:

Starts a bulleted list using circles as bullets:

Small Letters Capital Roman Numbers Small Roman Numbers

images that are not covered here.

This means that:

<img src="http://www.echoecho.com/rainbow.gif" width="60" height="60">

<img src="http://www.echoecho.com/rainbow.gif" width="120" height="120">

<img src="http://www.echoecho.com/rainbow.gif" border="5">

<img src="http://www.echoecho.com/rainbow.gif" alt="This is a text that goes with the image">

<img src="rainbow.gif" Hspace="30" Vspace="10">

<img src="pixel.gif" width="10" height="1"><img src="rainbow.gif">

HTML <img src="rainbow.gif" align="texttop">

<img src="rainbow.gif" align="top">

<img src="rainbow.gif" align="middle">

<img src="rainbow.gif" align="absmiddle">

<img src="rainbow.gif" align="bottom">

<img src="rainbow.gif" align="absbottom">

<img src="rainbow.gif" align="baseline"> bla bla

Finally add an </a> tag to indicate where the link ends.

Predefined targets are:

<a href="http://www.yahoo.com" style="text-decoration: none">Go to Yahoo</a>

<a href="myfile.htm"><img src="rainbow.gif"></a>

For example: <a href="myfile.htm"><img src="rainbow.gif" border="0" alt="Link to this page"></a>

Click the link below to see this link in action: Go to Yahoo

&body=Please send me a copy of your new program!">Email Me</a>

You can learn about HTML-colors here.

Browser safe colors

Look at these examples:

This is not done in HTML but in your graphics program.

So to repeat the steps:

Where is the artistic impression? i asked myself.

I went online and went to ten random choosen sites.

The result, was nothing less than shocking....

#FFFFFF #FFCC00 #FFFFCC #DDDDDD NONE

MICROSOFT #FFFFFF #6699CC #6699CC

ALINK #FF0000 #996633

#000000 #000099 #663366 #000000 #003399 #FF9933

#000000 #000066 #990000

#333399 #0033CC #6666FF NONE NONE NONE

The obvious purpose of arranging information in a table

make an HTML document with the frameset

The code would be: <frameset cols="120,*"> </frameset>

The entire frameset will look like this: m e n u

The entire frameset would now look like this: m e n u

<frameset rows="16%,84%"> <frame src="top.htm" name="top"> <frame src="bottom.htm" name="bottom"> </frameset>

top left right