mr.tnagarjuna@gmail.com
The reason is that until the background image is loaded, the background color will be shown.
By adding the bgproperties="fixed" you force the browser to let the background be fixed even if the user is scrolling down the page.
Result:
These settings are only valid for <td> tags.
Each of these windows can contain an HTML document. A file that specifies how the screen is divided into frames is called a frameset.
If you want to make a homepage that uses frames you should:
make an HTML document with the frameset and make the normal HTML documents that should be loaded into each of these frames.
The HTML for the above frameset:
Note that the frameset is only seven lines!
The code would be:
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.
If you leave out the setting for scrolling, a scrollbar will appear if needed - otherwise not.
HTML Forms :
This is what happens when the form is submitted:
The search words are sent to a program on the server.
This is what happens when the form is submitted:
The ID and password are sent to a program on the server.
Look at this HTML example:
And the resulting output from it:
TEXT AREA
Text areas are text fields that can span several lines. Unlike most other form fields, text areas are not defined with an <input> tag.
Instead you enter a <textarea> tag where you want the text area to start and a closing </textarea> tag where you want the area to end.
Everything written between these tags will be presented in the text area box.
And the resulting output from it:
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.
And the resulting output from it:
And the resulting output from it:
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.
And the resulting output:
Drop-down menus combine <select> and <option>.
Both tags have an opening and a closing tag.
A typical example of the syntax would be:
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>
And the resulting output from it:
The name setting adds an internal name to the button so the program that handles the form doesn't confuse the button with the other fields.
The value setting defines what is written on the button.
The align setting defines how the button is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
And the resulting output from it:
RESET BUTTON
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:
The name setting adds an internal name to the image button so the program that handles the form doesn't confuse it with the other fields.
The src setting defines the URL of the image.
The align setting defines how the image is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.
The border setting defines the width (in pixels) of the border around the image.
The width setting defines the width of the image.
The height setting defines the height of the image.
The vspace setting defines the spacing over and under the image (in pixels).
The hspace setting defines the spacing to the left and right of the image (in pixels).
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
And the resulting output from it:
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.
THE ABUSE
Two meta tags have special relevance for search engines: Description andKeywords.
When search engines first started to look for these meta tags, the intention was that web designers could emphasize what the pages were about. For example, a scientific page about the surface of the moon might not have the word "moon" on it, although the page definately related to the topic "moon".
Creative minds didn't take long to find out that this could be an excellent tool for improving search rankings. Many webmasters included keywords and descriptions that held no relevance to their page.
THE STRIKE BACK
After some time, the meta tags did not serve the purpose they were intended for. Most were being used for spamming. Therefore, some search engines, such as Excite, stopped looking at them entirely.
Other search engines, such as Infoseek, directed the spammers weapons back at them. They simply ranked sites lower if the meta tags included words that were not present in the content of the page.
THE CONCLUSION
Let's proceed to the details about the tags.
DESCRIPTION
Most search engines will display the description when they list results from a search.
If you do not include this tag, then the engine will simply list the first words on the page - which is not always very meaningful.
KEYWORDS
This meta tag was intended to be used for keywords with special relevance for the page.
But because of misuse, many engines skip them. Others use them as an indicator of whether a page is spam or not.
The few that use them to indicate what the page is really about, do not value them as much as they used to.
OTHER TAGS
Many HTML editors create a meta tag telling which program was used for the page.
Another common tag tells who created the page:
Finally there are some meta tags that are only relevant to certain search engines.
Individual search engines will recognize different tags telling it when to come back and re-index the site etc.
Look at the help sections for particular search engines to see which meta tags are supported.
In the example www.echoecho.com is loaded after 5 seconds.
Below are a few examples on using this tag.
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.
More than 90 percent have a plain white background.
The few pages that
actually do use images use very discrete and fast loading images for the
purpose.
BACKGROUND COLOR
Adding a plain
background color to your page is easy.
|
If you want to add a
background image instead of a plain color there are some considerations you
should make before doing so:
When you choose to
use a background image for the page it is always a good idea to specify a
background color as well.
|
The reason is that until the background image is loaded, the background color will be shown.
FIXED IMAGE
The background image
will scroll when the user scrolls down the page, unless you have set it to be
fixed:
|
By adding the bgproperties="fixed" you force the browser to let the background be fixed even if the user is scrolling down the page.
HTML Tables:
INTRODUCTION
Tables are used on
websites for two major purposes:
·
The obvious purpose of arranging
information in a table
·
The less obvious - but more widely used
- purpose of creating a page layout with the use of hidden tables. Using tables to
divide the page into different sections is an extremely powerful tool. Almost
all major sites on the web are using invisible tables to layout the pages.
The most important layout aspects that can be done with tables are:
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.
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.
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.
A colored table with a text on it loads like a bullet compared to even a small banner.
·
Easy alignment of images that have been
cut into smaller pieces.
·
A simple way to allow text to be
written in two or more columns next to each other.
Most important is,
that the content of a table is not shown until the entire table is loaded. If
you have extremely long pages, you should divide it into two or more tables -
allowing the user to start reading the upper content while the rest of the page
is loading.
BASIC TABLES
Tables are defined
with the <table> tag.
To insert a table on your page you simply add these tags where you want the table to occur:
To insert a table on your page you simply add these tags where you want the table to occur:
|
ROWS:
To add rows to your table use the <tr> and </tr> tags.
Example:
To add rows to your table use the <tr> and </tr> tags.
Example:
|
It doesn't make sense
to write the above lines in itself, cause you can't write content outside of
table cells.
If you do write things outside of cells it will appear right above the table.
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:
You can divide rows into columns with <td> and </td> tags:
Example:
|
Result:
|
TABLE TAGS
The following
properties can be added to the <table> tag:
|
ROW/CELL TAGS
These settings can be
added to both <tr> and <td> tags.
|
These settings are only valid for <td> tags.
|
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).
Settings for columns(<td> tag) have higher priority than settings for rows(<tr> tag).
Settings for cells (<tr> or <td> tags) have higher priority than settings for the table as a whole(<table> tag).
HTML Frames :
INTRODUCTION
Frames can divide the
screen into separate windows.
Each of these windows can contain an HTML document. A file that specifies how the screen is divided into frames is called a frameset.
If you want to make a homepage that uses frames you should:
make an HTML document with the frameset and make the normal HTML documents that should be loaded into each of these frames.
When a frameset page
is loaded, the browser automatically loads each of the pages associated with
the frames.
BASIC EXAMPLE
A frameset is simply an HTML document that tells
the browser how to divide the screen into split windows.
The HTML for the above frameset:
|
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:
If the frameset looked like this:
The code would be:
|
The screen is divided
into two columns.
The left being 120 pixels and the right using the rest of the screen (indicated by the *).
The frame windows would have no names, so the frameset really couldn't be used for any purpose.
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:
This will allow us to make a link in one frame window, open a page in another frame window.
In this example we added names and default pages to the frame windows:
|
The entire frameset
will look like this:
m
e n u |
main |
We still have the screen divided in two columns, the left being 120 pixels the right using the rest of the screen. (some screens are set to 640 pixels across, some to 800 and some to 1024, thats why the * is needed). But now we also have told the browser that the left frame window should load an HTML page called menu.htm and that the right window should load an HTML document called frontf.htm. In addition we have assigned the names menu and main to the two frame windows, so now we're even able to link to specific windows.
We called the frame windows menu and main, but you could name them whatever you pleased. The frameset with a menu window to the left and a main window to the right is the most common frameset seen on the web.
There are a few more settings we could add to the frameset. For instance you might want the frame borders to be invisible.
BORDERS
To make frame borders
invisible you simply need to add the parameters "cols-line" to the
frameset :
|
The entire frameset
would now look like this:
|
RESIZEABLE WINDOWS
If you don’t want the frame windows to
be resizeable, you should add the parameter "noresize" to the frame
src lines:
|
SCROLLBARS
Lets say you don’t
want a scroll bar in the menu window. Furthermore the main
window should have a scrollbar if needed (if the HTML document doesn’t fit in
the window), but if not needed - there should be no scrollbars.
Then the code should look like this:
Then the code should look like this:
|
If you leave out the setting for scrolling, a scrollbar will appear if needed - otherwise not.
EXAMPLES
On this page you can see examples of
different framesets.
top
|
bottom
|
|
tl
|
tr
|
bottom
|
|
|
top
|
|
left |
right |
|
topleft
|
topright
|
botleft |
botright |
|
topleft
|
topright
|
|
botleft |
brtl
|
brtr
|
botrbot
|
||
|
topleft
|
topright
|
botleft |
botright |
|
topleft
|
topright
|
botleft |
botright |
|
HTML Forms :
INTRODUCTION
A form is simply an
area that can contain form fields. Form fields are objects that allow the
visitor to enter information - for example text boxes, drop-down menus or radio
buttons. When the visitor clicks a submit button, the
content of the form is usually sent to a program that runs on the server.
However, there are exceptions.
JavaScript is sometimes used to create magic with form fields. An example could be when turning options in a drop-down menu into normal links.
JavaScript is sometimes used to create magic with form fields. An example could be when turning options in a drop-down menu into normal links.
EXAMPLES
A typical form example would be a search engine.
SEARCH THIS SITE |
This is what happens when the form is submitted:
The search words are sent to a program on the server.
·
The program will search a database for
matches.
·
The program creates a webpage with the
results.
·
The results webpage is sent back to the
visitor.
Another example would
be a logon page.
|
||||||||||
This is what happens when the form is submitted:
The ID and password are sent to a program on the server.
·
The program will search a database for
valid entries.
·
If the entry is valid the visitor is
sent to the protected page.
·
If the entry is invalid the visitor is
sent to a "failure" page.
CGI
SCRIPTS
When your form is submitted you need a program
that can receive the information and do something with it.
Such programs are sometimes referred to as: CGI programs. CGI stands for Common Gateway Interface, which is computer latin for a program that translates information. This translation is necessary because the server might be a UNIX machine while the visitor might be sending information from a Windows platform.
Such programs are sometimes referred to as: CGI programs. CGI stands for Common Gateway Interface, which is computer latin for a program that translates information. This translation is necessary because the server might be a UNIX machine while the visitor might be sending information from a Windows platform.
THE
FORM TAG
When a form is submitted, all fields on the form
are being sent.
The <form> tag tells the browser where the form starts and ends. You can add all kinds of HTML tags between the <form> and </form> tags.
The <form> tag tells the browser where the form starts and ends. You can add all kinds of HTML tags between the <form> and </form> tags.
Look at this example:
|
To let the browser
know where to send the content we add these properties to the <form> tag:
action=address
action=address
method=post or method=get
The address is the url of the
cgi script the content should be sent to. The postand get methods are simply
two different methods for submitting data to the script.
If you are using a pre-programmed script (which we assume here) it is not important to understand the difference between get and post.
If you are using a pre-programmed script (which we assume here) it is not important to understand the difference between get and post.
n the description of the script you are using
it will be made clear whether the scripts should be addressed using one method
or the other.
Below is an example of a typical form tag, with both action and method specified.
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
Text fields are one line areas that allow the
user to input text.
Instead you enter a <textarea> tag where you want the text area to
start and a closing </textarea> tag
where you want the area to end.
Everything written between these tags will be presented in the text area box.
Everything written between these tags will be presented in the text area box.
SETTINGS:
Below is a listing of valid settings for text fields:
Below is a listing of valid settings for text fields:
|
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.
The maxlength option defines the maximum length of the field. That is how many characters can be entered in the field.
If you do not specify a maxlength, the visitor can easily enter more characters than are visible in the field at one time.
The name setting adds an internal name to the field so the program that handles the form can identify the fields.
The value setting defines what will appear in the box as the default value.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM. The alignments are explained in the image section. You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
AN EXAMPLE
Look at this HTML example:
|
And the resulting output from it:
TEXT AREAText 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:
Below is a listing of valid settings for text areas:
|
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.
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:
Look at this HTML example:
|
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.
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:
Below is a listing of valid settings for password fields:
|
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.
The maxlength option defines the maximum length of the field. That is how many characters can be entered in the field.
If you do not specify a maxlength, the visitor can easily enter more characters than are visible in the field at one time.
The name setting adds an internal name to the field so the program that handles the form can identify the fields.
The value setting defines what will appear in the box as the default value.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM. The alignments are explained in the image section. You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
Look at this HTML example:
|
And the resulting output from it:
|
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.
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:
Below is a listing of valid settings for hidden fields:
|
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:
Look at this HTML example:
|
And the resulting output from it:
The hidden field does not show, but still, when
the form is submitted the hidden field is sent with it.
CHECK
BOX
Check boxes are used when you want to let the
visitor select one or more options from a set of alternatives. If only one
option is to be selected at a time you should use radio buttons instead.
SETTINGS:
Below is a listing of valid settings for check boxes:
Below is a listing of valid settings for check boxes:
|
The name setting adds an internal
name to the field so the program that handles the form can identify the fields.
The value setting defines what will be submitted if checked.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section. You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
The value setting defines what will be submitted if checked.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section. You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
Look at this HTML example:
|
And the resulting output from it:
|
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.
check boxes instead.
SETTINGS:
Below is a listing of valid settings for radio buttons:
Below is a listing of valid settings for radio buttons:
|
The name setting tells which group of radio buttons the field belongs to. When you select one button, all other buttons in the same group are unselected.
If you couldn't define which group the current button belongs to, you could only have one group of radio buttons on each page.
The value setting defines what will be submitted if checked.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section. You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
Look at this HTML example:
|
And the resulting output:
|
DROP
DOWN MENU
Drop-down menus are probably the most flexible
objects you can add to your forms.
Depending on your settings, drop-down menus can serve the same purpose as radio buttons (one selection only) or check boxes (multiple selections allowed).
The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space.
But that is also a disadvantage, because people can't see all options in the menu right away.
There is a workaround for this - with the size setting, you can customize the menu so it shows more than just one option at a time, but when you do that - you also lose the advantage of taking up less space.
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:
Below is a listing of valid settings for drop-down menus:
|
Drop-down menus combine <select> and <option>.
Both tags have an opening and a closing tag.
A typical example of the syntax would be:
|
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 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:
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:
|
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:
Look at this HTML example:
|
And the resulting output from it:
SUBMIT
BUTTON
When a visitor clicks a submit button, the form
is sent to the address specified in the action setting
of the <form> tag.
SETTINGS:
Below is a listing of valid settings for submit buttons:
Below is a listing of valid settings for submit buttons:
|
The name setting adds an internal name to the button so the program that handles the form doesn't confuse the button with the other fields.
The value setting defines what is written on the button.
The align setting defines how the button is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
|
And the resulting output from it:
RESET BUTTON
When a visitor clicks a reset button, the
entries are reset to the default values.
SETTINGS:
Below is a listing of valid settings for reset buttons:
Below is a listing of valid settings for reset buttons:
|
The name setting adds an internal name to the button so the program that handles the form doesn't confuse the button with the other fields.
The value setting defines what is written on the button.
The align setting defines how the button is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key. AN EXAMPLE:
Look at this HTML example:
|
And the resulting
output from it:
IMAGE
BUTTON
Image buttons have the same effect as submit
buttons. When a visitor clicks an image button the form is sent to the address specified
in the action setting of the<form> tag.
SETTINGS:
Below is a listing of valid settings for image buttons:
Below is a listing of valid settings for image buttons:
|
The name setting adds an internal name to the image button so the program that handles the form doesn't confuse it with the other fields.
The src setting defines the URL of the image.
The align setting defines how the image is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.
The border setting defines the width (in pixels) of the border around the image.
The width setting defines the width of the image.
The height setting defines the height of the image.
The vspace setting defines the spacing over and under the image (in pixels).
The hspace setting defines the spacing to the left and right of the image (in pixels).
The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
AN EXAMPLE:
Look at this HTML example:
Look at this HTML example:
|
And the resulting output from it:
QUICK
REFERENCE
If you're not
familiar with the form tags you can learn in detail about each tag listed in
the left menu. Otherwise - use this quick reference for an easy overview of
form tags and properties.
|
Note: This is a quick reference showing the most common settings for each field. For a complete listing and explanation you should follow the link to the relevant field in the menu.
HTML Metatags :
INTRODUCTION
Meta tags are used to store information usually
relevant to browsers and search engines.
For example, some search engines look to meta tags for descriptions, keywords, etc.
Other examples have relevance to the browser: Examples would be tags telling it to load a specific url after x seconds or tags telling it that a certain page should not be cached.
Another example is the ICRA meta tag. This tag can prevent sites with adult content from being seen on IE browsers.
Finally, some meta tags serve a purpose that is unique for the site in question. An example might be a newspaper site, where the journalist sends a text of an article to an advanced tool that creates an HTML document of it. This program may add special meta tags to allow an indexing of the articles. So if you ever see a strange meta tag that is not listed the books, this is probably the reason.
For example, some search engines look to meta tags for descriptions, keywords, etc.
Other examples have relevance to the browser: Examples would be tags telling it to load a specific url after x seconds or tags telling it that a certain page should not be cached.
Another example is the ICRA meta tag. This tag can prevent sites with adult content from being seen on IE browsers.
Finally, some meta tags serve a purpose that is unique for the site in question. An example might be a newspaper site, where the journalist sends a text of an article to an advanced tool that creates an HTML document of it. This program may add special meta tags to allow an indexing of the articles. So if you ever see a strange meta tag that is not listed the books, this is probably the reason.
SEARCH
ENGINES
THE MYTH
It is a myth among web designers that with the right meta tags you can make it to the top on all search engines.
The truth is close to being the opposite.
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.
but meta tags alone do not take you to the top anywhere.
THE ABUSE
Two meta tags have special relevance for search engines: Description andKeywords.
When search engines first started to look for these meta tags, the intention was that web designers could emphasize what the pages were about. For example, a scientific page about the surface of the moon might not have the word "moon" on it, although the page definately related to the topic "moon".
Creative minds didn't take long to find out that this could be an excellent tool for improving search rankings. Many webmasters included keywords and descriptions that held no relevance to their page.
THE STRIKE BACK
After some time, the meta tags did not serve the purpose they were intended for. Most were being used for spamming. Therefore, some search engines, such as Excite, stopped looking at them entirely.
Other search engines, such as Infoseek, directed the spammers weapons back at them. They simply ranked sites lower if the meta tags included words that were not present in the content of the page.
THE CONCLUSION
·
Use meta tags with care.
·
Do not include words that are not
present on your pages.
·
Do not repeat words.
·
Use the meta tags the way they were
intended, because the search engines are well aware that meta tags are an
excellent filter for spam sites.
Let's proceed to the details about the tags.
DESCRIPTION
|
Most search engines will display the description when they list results from a search.
If you do not include this tag, then the engine will simply list the first words on the page - which is not always very meaningful.
KEYWORDS
|
This meta tag was intended to be used for keywords with special relevance for the page.
But because of misuse, many engines skip them. Others use them as an indicator of whether a page is spam or not.
The few that use them to indicate what the page is really about, do not value them as much as they used to.
OTHER TAGS
Many HTML editors create a meta tag telling which program was used for the page.
|
Another common tag tells who created the page:
|
Finally there are some meta tags that are only relevant to certain search engines.
Individual search engines will recognize different tags telling it when to come back and re-index the site etc.
Look at the help sections for particular search engines to see which meta tags are supported.
AUTOLOAD
PAGES
You can use the
refresh meta tag to automatically load a page after x seconds.
|
In the example www.echoecho.com is loaded after 5 seconds.
Below are a few examples on using this tag.
EXAMPLE 1: REDIRECT TO NEW DOMAIN
The most common use of the REFRESH meta tag is for redirection. Typically when a site changes the domain name.
If you take a site down from the old domain - people who go to there from bookmarks will get an: Error 404 - File Not Found.
Instead you should place a page on the old domain saying something like "This site has moved. Please wait and you will be taken to the new domain. Remember to update your bookmarks."
If you keep this page on the old domain for a few months you will not loose the visitors that already have your site bookmarked with the old domain name.
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
Another more creative use of the REFRESH tag is a fancy intro to a site.
Say, you wanted the page to write "Welcome", then after 1 second, "Get Ready!", and after one more second it should say "For A Special Experience". Finally, after a few seconds the real page would be loaded.
This could be achieved by creating 3 pages with a refresh tag on them. The first page would load the second page after 1 second, which in turn would have a refresh tag that loads the third page after 1 more second.
RSACi CONTENT
It is possible to
lock the browser from viewing pages that have not been classified using the
ICRA system (Internet Content Rating Association, formerly known as RSACi).
To see how the rating system works on Internet Explorer, choose the Tools->Internet Options->Content. Try enable the "content advisor" to turn the function on.
Internet Explorer 3.0 and above, as well as new versions of Netscape support this service.
Specifying information for content restricted browsers:
To see how the rating system works on Internet Explorer, choose the Tools->Internet Options->Content. Try enable the "content advisor" to turn the function on.
Internet Explorer 3.0 and above, as well as new versions of Netscape support this service.
Specifying information for content restricted browsers:
|
The service is free
and should be used on all pages, even the pages that do not contain bad
language or adult content. The reason being, that many company browsers have
been set up to not allow viewing of pages without a content rating.
No comments:
Post a Comment