0% found this document useful (0 votes)

48 views

HTML

Webpages are written in HTML, which is a markup language that uses tags to indicate text formatting, layout, and links. An HTML document is a plain text file that contains HTML tags that tell the browser how to display the text and other elements. The basic structure of an HTML document includes a head section for metadata and a body section for visible page content. Tags are used in the body to specify different text styles, sizes, and formatting.

Uploaded by

bunny doll

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOC, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

48 views

HTML

Uploaded by

bunny doll

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOC, PDF, TXT or read online on Scribd

You are on page 1/ 58

HTML 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...
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.

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

The basic structure of an HTML document

HTML documents are made up of elements called tags, which define the presentation of the
web page. Most tags in an HTML document must be followed somewhere in the file with a
closing tag. For example:

This is an opening tag: <blockquote>

This is a closing tag: </blockquote>

Note that the difference between these two tags is only the presence of a forward slash after
the opening bracket of the tag. The forward slash is what makes this a closing tag.

Nearly every HTML page is written in this basic format:

<html>
<head>
<title>Page Title</title>
</head>
<body>
The main part of the document goes here.
</body>
</html>

Every HTML document must include the opening <html> tag at the top of the file, and the
closing </html> tag at the very end of the file.
Beneath the opening html tag you'll find the <head> section. Here you will place your web
page keywords, description, and page title. Some of the tags associated with the head section
are:

 <head> </head>
These tags open and close the head section. Your keyword, description, and title tags must
be placed between these tags.
 <title> </title>
The title of your web page will go between these tags. The title you include here will appear
at the top of the browser window when someone views your web page, and will also appear
when someone creates a bookmark this page.
 <meta>
You can use meta tags to describe your site and help search engines catalog your web page.

The body of the page — your page content, including text, images, and links — appears after
the closing head tag. With the opening <body> tag, you can also set a background image or
color for your page, as well as the color of your text and HTML links. For example:

<body bgcolor="#000000" text="#ffffff" link="#0000ff" vlink="#800080">

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.

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 Formatting
o Resizing
o Layout
o Listing
 Links
o To local pages
o To pages at other sites
o To bookmarks
 Images
o Inserting images (GIF and jpg)
o Adding a link to an image
 Backgrounds
o Colors
o Images
o Fixed Image
 Tables
 Frames
 Forms
 Metatags
 Hexadecimal Colors

HTML TEXT
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.

ATTRIBUTES
1.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.

<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).
2.FONT TAG
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.

<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.

3.TEXT FORMAT
These are the tags for text formats:

<b>text</b> writes text as bold

<i>text</i> writes text in italics
<u>text</u> writes underlined text
<sub>text</sub> lowers text and makes it smaller
<sup>text</sup> lifts text and makes it smaller
<blink>text</blink> guess yourself! (Note: Netscape only.)
<strike>text</strike> strikes a line through the text
<tt>text</tt> writes text as on a classic typewriter
<pre>text</pre> writes text exactly as it is, including spaces.
<em>text</em> usually makes text italic
<strong>text<strong> usually makes text bold

Note:
The <blink> tag is only supported by Netscape browsers, and should be avoided.

4.TEXT SIZE
These are the tags for changing the font size.

<big>text</big> increase the size by one

<small>text</small> decrease the size by one

<h1> text</h1> writes text in biggest heading

<h6>text</h6> writes text in smallest heading

<font size="1">text</font> writes text in smallest fontsize. (8 pt)
<font size="7"> writes text in biggest fontsize (36 pt)
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.

5.TEXT LAYOUT
These tags will let you control the layout.

HTML EXPLANATION
Adds a paragraph break after the text.
<p>text</p>
(2 linebreaks).
<p align="left">text</p> Left justify text in paragraph.
<p align="center">text</p> Center text in paragraph.
<p align="right">text</p> Right justify text in paragraph.
Adds a single linebreak where the tag
text<br>
is.
Turns off automatic linebreaks
<nobr>text</nobr> - even if text is wider than the
window.
Allows the browser to insert a
linebreak
text<wbr> at exactly this point
- even if the text is within <nobr>
tags.
<center>text</center> Center text.
<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 Hello world -
insert a linebreak in HTML a linebreak does not
insert a linebreak in HTML

you will need <p>you will need</p>

to insert <p align="right">to insert</p>

special tags <p align="left">special tags</p>

that will insert that will insert<br>

linebreaks linebreaks<br>
where where<br>
you want it! you want it!<br>
<br>
Another method is to write a sentence, Another method is of course to write a
that is long enough to force a sentence, that is long enough to force a
linebreak. 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 <center>You can center</center>

And turn the center off And turn the center off
And on! <div align="center">And on!</div>
Go left! <div align="left">Go left!</div>
Go right! <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.

LISTS
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.
This page shows how to make different kinds of bulleted lists.

You have the following bullet options:

 disc
 circle
 square
Look at these examples to see the detailed syntax.

HTML-CODE EXPLANATION / EXAMPLE

Makes a bulleted list using the default bullet
<ul> type:
<li>text</li>  text
<li>text</li>  text
<li>text</li>  text
</ul>

Starts a bulleted list using discs as bullets:

 This is one line
 This is another line
<ul type="disc">
 And this is the final line

Starts a bulleted list using circles as bullets:

o This is one line
o This is another line
<ul type="circle">
o And this is the final line

Starts a bulleted list using squares as bullets:

 This is one line
 This is another line
<ul type="square">
 And this is the final line

The following shows how to make different kinds of numbered lists.

You have the following number options:

 Plain numbers
 Capital Letters
 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 EXPLANATION / EXAMPLE

<ol> Makes a numbered list using the default
<li>text</li> number type:
1. text
<li>text</li> 2. text
<li>text</li> 3. text
</ol>

Starts a numbered list, first # being 5.

5. This is one line
6. This is another line
<ol start="5">
7. And this is the final line

Starts a numbered list, using capital letters.

A. This is one line
B. This is another line
<ol type="A">
C. And this is the final line

Starts a numbered list, using small letters.

a. This is one line
b. This is another line
<ol type="a">
c. And this is the final line

Starts a numbered list, using capital roman

numbers.
I. This is one line
<ol type="I"> II. This is another line
III. And this is the final line

Starts a numbered list, using small roman

numbers.
i. This is one line
<ol type="i"> ii. This is another line
iii. And this is the final line

Starts a numbered list, using normal numbers.

1. This is one line
2. This is another line
<ol type="1">
3. And this is the final line

<ol type="I" An example of how type and start can be

start="7"> combined.
VII. This is one line
VIII. This is another line
IX. And this is the final line

HTML IMAGES
GIF AND 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 JPG
256 colors Unlimited colors
Can handle transparent areas Can't handle transparent areas
This format is not good at Excellent for compressing
compressing photographs photographs and complex images
In general, it is excellent for In general, it is not good for
banners, buttons and clipart 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.

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:

ATTRIBUTES
1.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.

<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.

2.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.

3.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.

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.

4.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">

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!

5.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.

The note in the examples is only there to show how the circular sign is affected by
other images on the same line.

This means, that the alignments shown in the example are made to the circular sign and not
the note.

HTML EXAMPLE

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

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

6.WRAP TEXT AROUND

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
<img src="rainbow.gif" bla bla bla bla bla bla bla
align="left"> 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 blabla bla

bla bla bla bla bla bla bla
<img src="rainbow.gif" bla bla bla bla bla bla bla
align="right"> 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.

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.

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.

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.

COLOURS ON TEXT LINKS

There are a few settings that can be useful for controlling the colors of text links;
 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).

Define colors for individual links on the page

The method described above is for setting overall link colors for the page. 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.
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. But even more
because it shows a general approach to making your pages browser safe.

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:

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.

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.

For example:

<a href="myfile.htm"><img src="rainbow.gif" border="0" alt="Link

to this page"></a>

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:

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) 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>

LINK TO E-MAIL
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 protected]?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 protected]?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 protected]?subject=SweetWords
&body=Please send me a copy of your new program!">Email
Me</a>

BACKGROUND
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?

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.

Whether you want to add an image or a plain color as background you need to specify it in
the <body> tag.

BACKGROUND COLOUR

Adding a plain background color to your page is easy.

All you need to do is add a bgcolor property to the body tag:

As you see, the background color (#FF0000) is entered as a hexadecimal value.

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.

Another popular technique to give the background more of a paper touch is to use an image
as background.

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 you will need
to specify in the <body> tag which image should be used for the background.

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.

FIXED IMAGES
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.

TABLES
Tables are used on websites for two major purposes:
 The obvious purpose of arranging information in a table
 The less obvious - but more widely used - purpose of creating a page layout with the
use of hidden tables.

Using tables to divide the page into different sections is an extremely powerful tool.
Almost all major sites on the web are using invisible tables to layout the pages.

The most important layout aspects that can be done with tables are:
 Dividing the page into separate sections.
An invisible table is excellent for this purpose.
 Creating menus.
Typically with one color for the header and another for the links following in the next
lines.
 Adding interactive form fields.
Typically a gray area containing a search option.
 Creating fast loading headers for the page.
A colored table with a text on it loads like a bullet compared to even a small banner.
 Easy alignment of images that have been cut into smaller pieces.
 A simple way to allow text to be written in two or more columns next to each other.

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.

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:

The above table would be of no use since it has no rows and no columns.

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 one, right side.
This is row two, left side. This is row two, right side.

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

width= specify a minimum width for the cells in

n pixels
n% specify a minimum width for the cells in
percent of the table width
height=
minimum height of cells in pixels
n
minimum height of cells in percentage of
n%
table height

These settings are only valid for <td> tags.

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

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

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

FRAMES
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.
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>

</html>

Note that the frameset is only seven lines!

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

If the frameset looked like this:

The code would be:

<frameset cols="120,*">
</frameset>
The screen is divided into two columns.
The left being 120 pixels and the right using the rest of the screen (indicated by the *).

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

DEFAULT PAGES
You can add default pages to frame windows with the src setting.

Default pages are the pages that will be loaded when the frameset is opened the first time.

Furthermore, we can add names to each frame window using the name setting.

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

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

<frameset cols="120,*" >

The entire frameset will look like this:

m
main
e
n
u

We still have the screen divided in two columns, the left being 120 pixels the right using the
rest of the screen. (some screens are set to 640 pixels across, some to 800 and some to 1024,
thats why the * is needed).

But now we also have told the browser that the left frame window should load an HTML
page called menu.htm and that the right window should load an HTML document called
frontf.htm.

In addition we have assigned the names menu and main to the two frame windows, so now
we're even able to link to specific windows.

We called the frame windows menu and main, but you could name them whatever you
pleased.

The frameset with a menu window to the left and a main window to the right is the most
common frameset seen on the web.
There are a few more settings we could add to the frameset.

For instance you might want the frame borders to be invisible.

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

<frameset cols="120,*" frameborder="0" border="0"

framespacing="0">
<frame src="menu.htm" name="menu" >
<frame src="frontf.htm" name="main" >
</frameset>

The entire frameset would now look like this:

m
main
e
n
u

We could still add a few more parameters to our frameset....

RESIZABLE WINDOWS
If you don’t 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>

SCROLLBARS
Lets say you don’t want a scroll bar in the menu window.

Furthermore the main window should have a scrollbar if needed (if the HTML document
doesn’t fit in the window), but if not needed - there should be no scrollbars.

Then the code should look like this:

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

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.

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

top

left right

topleft topright

botleft botright

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

topleft topright
brtl brtr
botleft botrbot

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

topleft topright

botleft botright

<frameset rows="240,240" cols="320,320">

topleft topright

botleft botright

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

FORMS
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.

A typical form example would be a search engine.

SEARCH THIS SITE

This is what happens when the form is submitted:

 The search words are sent to a program on the server.
 The program will search a database for matches.
 The program creates a webpage with the results.
 The results webpage is sent back to the visitor.

Another example would be a logon page.

FREE WEB-EMAIL AT
ECHOECHO.COM

Username:
Password:

NEW USERS: SIGN UP HERE!

FORGOT YOUR PASSWORD?

This is what happens when the form is submitted:

 The ID and password are sent to a program on the server.
 The program will search a database for valid entries.
 If the entry is valid the visitor is sent to the protected page.
 If the entry is invalid the visitor is sent to a "failure" page.

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.

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.

Look at this example:

Note:
Unlike a table, forms are not visible on the page.

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.

FORM FIELDS
These fields can be added to your forms:

 Text field
 Password field
 Hidden field
 Text area
 Check box
 Radio button
 Drop-down menu
 Submit button
 Reset button
 Image button

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

If you want several lines you should use a text area instead.

SETTINGS:

Below is a listing of valid settings for text fields:

HTML EXPLANATION EXAMPLE

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

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

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

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

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

The align setting defines how the field is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM. The alignments are explained in the image section.

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

AN EXAMPLE:

Look at this HTML example:

And the resulting output from it:

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.

SETTINGS:

Below is a listing of valid settings for password fields:

HTML EXPLANATION EXAMPLE

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

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

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.

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">
Enter Password : <input type="password" size="25">
<br><br>
</div>
</form>
</body>
</html>

And the resulting output from it:

Enter Password :

HIDDEN FIELD

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

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

To submit information that is not entered by the visitor.

SETTINGS:

Below is a listing of valid settings for hidden fields:

HTML EXPLANATION EXAMPLE

hidden Hidden field
name= Name of the field.
value= Value of the field.

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

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

AN EXAMPLE:

Look at this HTML example:

And the resulting output from it:

Enter your name here!

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 EXPLANATION EXAMPLE

textarea Text area - several lines
rows= Rows in the field.
cols= Columns in the field.
name= Name of the field.
tabindex= Tab order of the field.

wrap=
off Turns off linebreaking
virtual Shows linebreaking, but
sends text as entered.
physical Inserts linebreaks when
needed and even sends it.

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

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

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

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

Look at this HTML example:

<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>
CHECKBOX

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

SETTINGS:

Below is a listing of valid settings for check boxes:

HTML EXPLANATION EXAMPLE

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

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

The value setting defines what will be submitted if checked.

The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.

AN EXAMPLE:

Look at this HTML example:

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

And the resulting output from it:

Milk
Butter
Cheese

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

Below is a listing of valid settings for radio buttons:

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

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

The value setting defines what will be submitted if checked.

The align setting defines how the field is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.

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

AN EXAMPLE:

Look at this HTML example:

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

And the resulting output:

Milk
Butter
Cheese

Water
Beer
Wine

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

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

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

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

SETTINGS:

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

HTML EXPLANATION EXAMPLE

select Drop-down menu
  name= Name of the field.
  size= Visible items in list.
  multiple= Allows multiple choices if yes.

option Individual items in the menu.
  selected Default select the item.
  value= Value to send if selected.

Drop-down menus combine <select> and <option>.

Both tags have an opening and a closing tag.

A typical example of the syntax would be:

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

The <select> tag defines the menu.

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

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

The multiple setting will allow for multiple selections if present.

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

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

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

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

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

AN EXAMPLE:

Look at this HTML example:

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

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 EXPLANATION EXAMPLE

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

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

The value setting defines what is written on the button.

The align setting defines how the button is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.

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

AN EXAMPLE:

Look at this HTML example:

And the resulting output from it:

Enter your name here!

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

SETTINGS:

Below is a listing of valid settings for reset buttons:

HTML EXPLANATION EXAMPLE

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

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

The value setting defines what is written on the button.

The align setting defines how the button is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.

AN EXAMPLE:

Look at this HTML example:

And the resulting output from it:

Enter your name here!

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 EXPLANATION EXAMPLE

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

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

The src setting defines the URL of the image.

The align setting defines how the image is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.

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

The width setting defines the width of the image.

The height setting defines the height of the image.

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

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

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

AN EXAMPLE:

Look at this HTML example:

And the resulting output from it:

Enter your name here!

QUICK REFERENCE
HTML EXPLANATION EXAMPLE
textarea Text area - several lines
  rows= Rows in the field.
  cols= Columns in the field.
  name= Name of the field.

  wrap= Control linebreaks.
    off     Turns off linebreaks.
    virtual     Shows linebreaks, but
    sends text as entered.
    physical     Inserts linebreaks when
    needed and even sends it.
text One line text field
  size= Characters shown.
  maxlength= Max characters allowed.
  name= Name of the field.
  value= Initial value in the field.
password Password field.
  size= Characters shown.
  maxlength= Characters allowed to enter.
  name= Name of the field.
  value= Initial value in the field.
checkbox Choose one or more options
  name= Name of the field.
  value= Initial value in the field.
radio Choose only one option
  name= Name of the field.
  value= Initial value in the field.
select Drop-down menu
  name= Name of the field.
  size= Number of items in list.
  multiple= Allow multiple choice if yes.

option Individual items in the menu.
  selected Make an item default.
  value= Value to send if selected.
hidden Does not show on the form.
  name= Name of the field.
  value= Value to send.
reset Button to reset all fields
  name= Name of the button.
  value= Text shown on the button.
submit Button to submit the form
  name= Name of the button.
  value= Text shown on the button.

image Image behaving as button

name= Name of the image.

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

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

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

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

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

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.

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 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.

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

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

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

Specifying information for content restricted browsers:

<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))' />

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.

HEXACOLOURS
For some reason colors in HTML are specified using hexadecimal numbers.

Hexadecimal numbers are numbers based on the value of 16 rather than the classical numbers
based on the value of 10.
When you count to 15 using hexadecimal numbers it goes like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
A, B, C, D, E, F

As you see the numbers from 10 to 15 have been replaced with letters.

A typical hexadecimal color value would be A53C8D.

In this section you will learn how to understand hexadecimal color codes.

You will also learn to convert between hexadecimal and RGB color codes. (RGB codes are
used by most graphics programs to identify colors.)

Finally you will learn about an error in the color interpretation by Netscape browsers, causing
only 216 colors to look the same on all browsers.

First we will proceed to learn about the difference between hexadecimal numbers and
traditional numbers...

DEC VS. HEX

In classical numbers you have ten different figures, whereas in hexadecimal numbers you
have 16 different figures.

Below are numbers from 0 to 15 in both systems:

DEC 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
HEX 0 1 2 3 4 5 6 7 8 9 A B C D E F

The highest hexadecimal number you can specify using one figure is F equaling 15.
With two figures the highest value is FF equaling 255.

To prevent confusion on numbers higher than 9 hexadecimal colors are often entered with a #
in front of them.

In HTML, color codes have 6 digits, like #FF3C96.

They are explained in detail on the following pages...

RGB
Screen colors are defined by the colors Red, Green and Blue.

Therefore it is smart that HTML colors are defined in a system based on the amount of each of the
three basic colors.

This system is called an RGB color system.

(Yes, - RGB stands for Red, Green and Blue!)

Most graphics tools (Photoshop, Photopaint, Paintshop Pro etc.) can handle colors in a RGB color
system.

The problem is that while most graphics programs define the RGB code using normal decimal
numbers, HTML defines them with hexadecimal numbers.

This means, that you have to convert between decimal and hexadecimal numbers if you want to use
the same color in your graphics program and on your homepage.

We will explain the technique for this soon, but first, we will explain how RGB codes are written in
HTML...

HEXADECIMAL RGB
A typical color definition in HTML would look like this:

The color is defined to be "#FF8C67".

The # simply states that the following numbers are hexadecimal.
The first two digits are the amount of red (FF).
Digits 3 and 4 specify the amount of green (8C).
Digits 5 and 6 specify the amount of blue (67).
Since there are two hexadecimal figures for each color you can specify 256 gradients of each
basic color. This gives a total of 256*256*256 = 16,777,216 different combinations.

However, not all of these colors will look the same on all browsers and operating systems.

Proceed to learn about the 216 colors that are "safe"...

216 SAFE COLORS

Only 216 colors are what we refer to as "browser safe".

Browser safe colors are colors that look the same no matter which browser you see them on.

The reason is that browsers running on different platforms interpret the colors differently.

The only 216 colors that look the same no matter what, are the colors made out of pairs of 00,
33, 66, 99, CC and FF.

An example would be: "#990066".

You should always strive to limit your use of colors to these combinations.
You can use our color picker to pick browser safe colors.

The technical reason for unsafe colors is that Netscape browsers have their own color system.
A system that does not match with typical graphics programs.

You can easily make a simple test of the Netscape error.

 Try making a small image in your graphics program.
 The image should just be a plain fill with an unsafe color.
 Now convert the color value to hex.
 Then make a page with the hexcolor as background.
 Finally insert the image on the page.

Since you used the same RGB color for both your page and your image, the image should be
invisible on the page.
But on Netscape browsers you can actually see the image!

CONVERTING HEX-DEC
It's easy to convert between hex values and decimal values.

All you need is a calculator that can handle both types.

If you're using Windows, start the calculator that comes with the operating system.
Make sure the view option is set to "scientific".
Enter the decimal value.

Click the Hex field - and watch the calculator convert the number to hex.

Needless to say, you can do it the other way around to calculate decimal values from hex
values.

There are a few colors that are so common that they can be defined by their common name.

NAMED COLOURS

A few colors can be referred to using names rather than hex values.

Below is a listing of these colors and their names:

Black Yellow Red Maroon

   Gray    Lime    Green    Olive
   Silver    Aqua    Blue    Navy
   White    Fuchsia    Purple    Teal

If you want to use other colors, you should make sure to pick safe ones.

HTML
100% (4)
HTML
88 pages
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
From Everand
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
Steven Bright
No ratings yet
PHP W3schools Tutorial
No ratings yet
PHP W3schools Tutorial
25 pages
Hypertext: HTML Basics
No ratings yet
Hypertext: HTML Basics
18 pages
Introduction To HTML:-: Hypertext Markup Language
No ratings yet
Introduction To HTML:-: Hypertext Markup Language
55 pages
Introduction
No ratings yet
Introduction
76 pages
Written Report in HTML
No ratings yet
Written Report in HTML
8 pages
HTML-Notes for 11
No ratings yet
HTML-Notes for 11
13 pages
HTML Basic Lesson
No ratings yet
HTML Basic Lesson
8 pages
Unit 2 Introduction To HTML: Structure
No ratings yet
Unit 2 Introduction To HTML: Structure
21 pages
Hyper Text Markup Language (HTML) : Unit 5
No ratings yet
Hyper Text Markup Language (HTML) : Unit 5
12 pages
introdution-to-html
No ratings yet
introdution-to-html
45 pages
Introdution To HTML
No ratings yet
Introdution To HTML
45 pages
ch2 html (2)
No ratings yet
ch2 html (2)
79 pages
INTRODUTION TO HTML CODING FOR WEBSITE DESIGN - by Engr Peter A Ogbeide
No ratings yet
INTRODUTION TO HTML CODING FOR WEBSITE DESIGN - by Engr Peter A Ogbeide
45 pages
Lab-8-HTML Basics
No ratings yet
Lab-8-HTML Basics
14 pages
ITaS Lect01
No ratings yet
ITaS Lect01
75 pages
HTML Complete
No ratings yet
HTML Complete
52 pages
Lecture 2 IntroHTML
No ratings yet
Lecture 2 IntroHTML
66 pages
Introdution To HTML
No ratings yet
Introdution To HTML
51 pages
HTML and Javascript Notes: From Fayaz
No ratings yet
HTML and Javascript Notes: From Fayaz
85 pages
Hypertext Markup Language Basic Code and Tags
No ratings yet
Hypertext Markup Language Basic Code and Tags
15 pages
HTML
No ratings yet
HTML
50 pages
HTML Basics: This Work Is Licensed Under A
No ratings yet
HTML Basics: This Work Is Licensed Under A
83 pages
CH-7 HTML
No ratings yet
CH-7 HTML
12 pages
What Is HTML? HTML Stands For Hypertext Markup Language. If You Know This Language, You Will Be Able To
No ratings yet
What Is HTML? HTML Stands For Hypertext Markup Language. If You Know This Language, You Will Be Able To
12 pages
ICT Lab 6
No ratings yet
ICT Lab 6
19 pages
HTML Tags
No ratings yet
HTML Tags
94 pages
HTML Tutorials
No ratings yet
HTML Tutorials
29 pages
HTML
No ratings yet
HTML
10 pages
yahxee 1st class
No ratings yet
yahxee 1st class
27 pages
CS1 CHAPTER 4_New
No ratings yet
CS1 CHAPTER 4_New
41 pages
HTML_SEO mcq
No ratings yet
HTML_SEO mcq
32 pages
How To Make A Website Notes
No ratings yet
How To Make A Website Notes
27 pages
Introdution to HTML
No ratings yet
Introdution to HTML
45 pages
Introduction to HTML CSC 221
No ratings yet
Introduction to HTML CSC 221
23 pages
Unit-1 HTML
No ratings yet
Unit-1 HTML
45 pages
HTLM Intro
No ratings yet
HTLM Intro
28 pages
chapter 2 (web design and programming)
No ratings yet
chapter 2 (web design and programming)
74 pages
Introdution-To-Html Tags
No ratings yet
Introdution-To-Html Tags
45 pages
Introdution To HTML
No ratings yet
Introdution To HTML
47 pages
Lesson 1 Learning The Basics: A Beginner's Tutorial To HTML Demo
No ratings yet
Lesson 1 Learning The Basics: A Beginner's Tutorial To HTML Demo
33 pages
introdution-to-html
No ratings yet
introdution-to-html
45 pages
Introduction To HTML: - Udit Agarwal
No ratings yet
Introduction To HTML: - Udit Agarwal
13 pages
Introdution To HTML
No ratings yet
Introdution To HTML
45 pages
Lecture 2- Introduction to HTML
No ratings yet
Lecture 2- Introduction to HTML
119 pages
A Crash Course in HTML
No ratings yet
A Crash Course in HTML
14 pages
HTML - Learn HTML With Ultimate Zero To Hero Programming Crash Course For Beginners
No ratings yet
HTML - Learn HTML With Ultimate Zero To Hero Programming Crash Course For Beginners
73 pages
Html class notes
No ratings yet
Html class notes
124 pages
word2pdf_Chapter 2- Basics of HTML_1743060597810
No ratings yet
word2pdf_Chapter 2- Basics of HTML_1743060597810
62 pages
Word2pdf_Chapter 2- Basics of HTML_1743060597810
No ratings yet
Word2pdf_Chapter 2- Basics of HTML_1743060597810
62 pages
Chap 2 PDF
No ratings yet
Chap 2 PDF
17 pages
CH - 6 - Creating - Website - Using - HTML 9TH
No ratings yet
CH - 6 - Creating - Website - Using - HTML 9TH
21 pages
HTML
100% (1)
HTML
50 pages
HTML - Basic Elements
No ratings yet
HTML - Basic Elements
9 pages
What Is HTML?: What Is HTML? What Are Tags? Explanation of Document Structure Explanation of Document Structure Tags
No ratings yet
What Is HTML?: What Is HTML? What Are Tags? Explanation of Document Structure Explanation of Document Structure Tags
13 pages
chapter 1
No ratings yet
chapter 1
27 pages
James Learning Javascript Programming
From Everand
James Learning Javascript Programming
James Lombard
No ratings yet
HTML in 30 Pages
From Everand
HTML in 30 Pages
U.Q. Magnusson
4.5/5 (14)
Learn Html In 1 Hour
From Everand
Learn Html In 1 Hour
John Bura
No ratings yet
Easy html and css
From Everand
Easy html and css
S VASIST
No ratings yet
HTML Paragraphs: Example
No ratings yet
HTML Paragraphs: Example
4 pages
React - Js by Example
100% (9)
React - Js by Example
28 pages
mcq web tech
No ratings yet
mcq web tech
5 pages
Lecture 1: IT Infrastructure: After Completing This Topic, You Will Be Able To
No ratings yet
Lecture 1: IT Infrastructure: After Completing This Topic, You Will Be Able To
21 pages
ESP8266 NodeMCU With BME280 Gauges Chart
No ratings yet
ESP8266 NodeMCU With BME280 Gauges Chart
7 pages
HTML (Hyper Text Markup Language)
No ratings yet
HTML (Hyper Text Markup Language)
18 pages
Fundamentals of CSS - Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy PDF
No ratings yet
Fundamentals of CSS - Learn CSS - Selectors and Visual Rules Cheatsheet - Codecademy PDF
7 pages
2023_QB CSE 505_Updated (1) (1)
No ratings yet
2023_QB CSE 505_Updated (1) (1)
8 pages
Ebin - Pub Ai Powered Search Meap v17
50% (2)
Ebin - Pub Ai Powered Search Meap v17
910 pages
BTech Report Writting
No ratings yet
BTech Report Writting
42 pages
Information Technology and Its Applicatiion Business
No ratings yet
Information Technology and Its Applicatiion Business
31 pages
B.tech 2 1 Computer Science Engineering R20 Course Structure Syllabi
No ratings yet
B.tech 2 1 Computer Science Engineering R20 Course Structure Syllabi
22 pages
CSS Lab Material
No ratings yet
CSS Lab Material
49 pages
JS-DOM-Events
No ratings yet
JS-DOM-Events
51 pages
Advertising Agency Management System Project Report
No ratings yet
Advertising Agency Management System Project Report
113 pages
Vivek Computer File
No ratings yet
Vivek Computer File
40 pages
ip notes
No ratings yet
ip notes
10 pages
HTML Web Designing
No ratings yet
HTML Web Designing
12 pages
Grade 9-Second Quarter Rubrics (CSS)
No ratings yet
Grade 9-Second Quarter Rubrics (CSS)
3 pages
Chinmay s Resume
No ratings yet
Chinmay s Resume
1 page
Internship Report: Muffakham Jah College of Engineering and Technology Banjara Hills, Hyderabad
No ratings yet
Internship Report: Muffakham Jah College of Engineering and Technology Banjara Hills, Hyderabad
20 pages
Web Programming
No ratings yet
Web Programming
12 pages
Web App - Xi - HTML
No ratings yet
Web App - Xi - HTML
8 pages
Writing About Architecture
No ratings yet
Writing About Architecture
5 pages
CSS Micro Project
0% (1)
CSS Micro Project
19 pages
HTML, CSS, Bootstrap, Javascript and Jquery: Meher Krishna Patel
No ratings yet
HTML, CSS, Bootstrap, Javascript and Jquery: Meher Krishna Patel
6 pages
unit 5 - Django Template Language.docx
No ratings yet
unit 5 - Django Template Language.docx
21 pages
Report On Coursera To Intern
No ratings yet
Report On Coursera To Intern
2 pages
KMM Institute of Post Graduate Studies:: Online Gas Booking System
No ratings yet
KMM Institute of Post Graduate Studies:: Online Gas Booking System
61 pages