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.
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").
HTML
Tags : Tags are the instructions that are
embedded directly into the text of the document. An HTML tag is a
single to the browser that it should do something other than
just throw text upon the screen. By convention all HTML tags begin
with an open angle bracket (<) and end with a close angle
bracket (>).
HTML tags can be of two types:
Paired tags : A tag is said to be
paired tag if it, along with a companion tag, flanks the text. For
example the <B> tag is a paired tag. The <B> tag with its companion
tag </B>causes the text contained between them to be rendered
in bold. The ct of other paired tags is applied only to the text
they contain.
In paired tags, the irst tag (<B>) is often called
the opening tag and the second tag (</B>) is called the closing tag.
The opening tag activities the effect and the closing tag turns the
effect off.
Singular tags : The second type of tag
the singular tag or stand-alone tag. A stand-alone tag does
not have a companion tag . For example <BR> tag will insert a line
break. This tag does not require any companion tag.
Every HTML program has a rigid structure .
The entire web page is enclosed with in the <HTML> </HTML> tags.
With in these tags two distinct sections are created using the <HEAD
></HEAD> tags and the <BODY> </BODY> tags. These sections are
described below :
Document Section : Information placed in this
section is essential to the inner working of the document and has
nothing to do with the content of the document . With the
exception of information contained within the <TITLE> </TITLE> tags
, all information placed the <HEAD> </HEAD> tags is not displayed in
the browser. The HTML tags used to indicate the start and end of the
head section are :
<HEAD>
<TITLE>..............</TITLE>
</HEAD>
Document Body
The tags used to indicate the start and end of the
main body of textual information are :
<BODY>
</BODY>
<html>
<head>
<!-- This section is for the title and technical info of the page.
-->
</head>
<body>
<!-- This section is for all that you want to show on the page. -->
</body>
</html>
Page default like
background color, text color, font size, font weight and so on
can be specified as attribute of the <BODY> tag . The information
that the <BODY> tag takes are :
BGCOLOR
:
change the background color of the page
BACKGROUND
:
specify the name of JPG, GIF file that will
be used as the background of the page. This picture tiles up
across the page to give a background.
TEXT
:
Changes the body of text color from its
default value to the color specified with this attribute.
EXAMPLE:
<BODY BACKGROUND="starfield.jpg" TEXT=red>
<BODY BGCOLOR=PINK>
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.
Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra picnk line before
and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra picnk line before
and after a paragraph.
Line Breaks
The <br> tag is used when you want to end a line,
but don't want to start a new paragraph. The <br> tag forces a line
break wherever you place it.
<p>This <br> is a para<br>graph with line
breaks</p>
The <br> tag is an empty tag. It has no closing
tag.
Comments in HTML
The comment tag is used to insert a comment in the
HTML source code. A comment will be ignored by the browser. You can
use comments to explain your code, which can help you when you edit
the source code at a later date.
<!-- This is a comment -->
Note that you need an exclamation point after the
opening bracket, but not before the closing bracket.
To
specify the overall font for your page add
the <basefont>
tag at the beginning of the
<body> section.
Example: The
page as it looks in the browser.
Hello!
This is my page.
All text looks the same
since I only specified a
basefont.
HTML: The
code to produce the above example.
<html>
<head>
<title>my page</title>
</head>
<body>
<basefont face="arial,
verdana, courier" size="4"
color="green">
Hello! This is my page.<br>
All text looks the same<br>
since I only specified a
basefont.<br>
</body>
</html>
The
color attribute selects the desired color
for your text. The face attribute selects
the desired font.
Font
The
<font> tag will
change the font.
Example: How
the output looks in the browser.
Hello!
This is my page.
This local
text looks different.
This text looks like the
first line.
HTML:
The code to produce the above example.
<html>
<head>
<title>My Page</title>
</head>
<body>
<basefont color="green"
face="arial" size="4">
Hello! This is my
page.<br><br> <font
color="red" face="arial"
size="2">
This local text looks
different.
</font>
<br><br>
This text looks like the
first line.
</body>
</html>
The
color attribute selects the desired color
for your text. The face attribute selects
the desired font.
Text Links
The tags
used to produce links are the
<a> and
</a>.
The
<a> tells
where the link should start and the
</a>
indicates where the link ends.
Everything
between these two will work as a link.
The
target of the link is added to the
<a> tag
using
the href="http://www.whateverpage.com"
setting.
The
example below shows how to make the word
here work as
a link to yahoo.
Click
<a
href="http://www.yahoo.com">here</a>
to go to yahoo.
You
simply:
Specify the target
in the <a
href=" ">.
Then add the text
that should work as a link.
Finally add an
</a> tag
to indicate where the link ends.
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></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.
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">
text</font>
writes text in
biggest fontsize (36 pt)
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:
Adds a
paragraph break after the
text.
(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.
text<br>
Adds a
single linebreak where the
tag is.
<nobr>text</nobr>
Turns off
automatic linebreaks
- even if text is wider than
the window.
text<wbr>
Allows the
browser to insert a
linebreak
at exactly this point
- even if the text is within
<nobr> tags.
<center>text</center>
Center
text.
<div
align="center">text</div>
Center
text.
<div
align="left">text</div>
Left
justify text.
<div
align="right">text</div>
Right
justify text.
Example:
the difference between layout tags:
RESULT
HTML
Hello world- a
linebreak does not insert a
linebreak in HTML
you will need
to
insert
special tags
that will insert
linebreaks
where
you want it!
Another method is to write a
sentence, that is long enough to
force a linebreak.
This option can however be
turned offwith the
nobr-tag.unless a wbr is used to
force it!
You can also center
And turn the center
off
And on!
Go left!
Go right!
Hello world -
a linebreak does not
insert a linebreak in HTML
<p>you
will need</p>
<p
align="right">to insert</p>
<p
align="left">special tags</p>
that will insert<br>
linebreaks<br>
where<br>
you want it!<br>
<br>
Another method is of course to write
a sentence, that is long enough to
force a linebreak.<br>
<br>
<nobr>This
option can however be turned off<wbr>with
the nobr tag,<wbr>unless
a wbr is used to force it!</nobr>
<center>You
can center</center>
And turn the center off
<div
align="center">And on!</div>
<div
align="left">Go left!</div>
<div
align="right">Go Right!</div>
Note in
particular the difference between the
<p> and the
<div> tags. The
<div> tag allows
you to justify content without being forced
to add a double linebreak.
Also, note
that these alignment tags are not limited to
text. They work on text, images, applets or
whatever it is that you insert on the page.
Makes a
bulleted list using the
default bullet type:
text
text
text
<ul
type="disc">
Starts a
bulleted list using discs as
bullets:
This is
one line
This is
another line
And
this is the final line
<ul
type="circle">
Starts a
bulleted list using circles
as bullets:
This is
one line
This is
another line
And
this is the final line
<ul
type="square">
Starts a
bulleted list using squares
as bullets:
This is
one line
This is
another line
And
this is the final line
Numbered List
This
page 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.
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 compressing
photographs
Excellent
for compressing photographs
and complex images
In general,
it is excellent for banners,
buttons and clipart
In general,
it is not good for banners,
buttons and clipart.
This
means that:
Banners, buttons,
dividers, clipart and other simple
images usually work best as
GIF's.
Photographs and other
complex images usually work best as
JPG's.
If
you want to use an image that is in a format
other than JPG or GIF, you will need to load
the image into a graphics program and save
it as either JPG or GIF.
Insert an
Image
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.gatewaysol.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.gatewaysol.com/) and
simply insert the image with this code:
<img src="rainbow.gif">
On
the following pages we will discuss
different ways to control how your image is
inserted.
Resizing
Image
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.
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.
Image
Border
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.
You
can add an alternative text to an image
using the alt
setting shown in the example below:
<img
src="http://www.gatewaysol.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
particularly 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.
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:
The
1x1 pixel transparent gif image is simply
stretched to whatever size you want the
spacing to have. This 1x1
pixel "cowboy-trick" is probably one of the
most widely used workarounds on the entire
net. The reasons
are obvious: It works on all browsers and it
gives you complete pixel precision in your
design!
Alignment
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.
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.
How to
make a Link
The
tags used to produce links are the
<a> and
</a>.
The
<a> tells where
the link should start and the
</a> indicates
where the link ends.
Everything
between these two will work as a link.
The target
of the link is added to the
<a> tag using
the href="http://www.whateverpage.com"
setting.
The example
below shows how to make the word
here work as a
link to yahoo.
Click
<a
href="http://www.yahoo.com">here</a>
to go to yahoo.
You
simply:
Specify the target in
the <a href=" ">.
Then add the text that
should work as a link.
Finally add an
</a> tag to
indicate where the link ends
LINK
COLORS
There
are a few settings that can be useful for
controlling the colors of text links.
This page
will teach you how to:
Define colors for all
links on the page.
Define colors for
individual links on the page.
Define
colors for all links on the page
The general
color of text links is specified in the
<body> tag, like
in the example below:
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).
efine
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. You can read more about converting
between RGB colors and hexadecimal colors
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.
LINK TARGET
By
default, links will open in the current
window or frame.
You need to
add a target if you want the link to open in
another window or frame than the link itself
is placed in.
To do this
you simply add a
target="" to the
<a href>.
This example
will open yahoo in a new window:
<a
href="http://www.yahoo.com"
target="_picnk">
Predefined
targets are:
_picnk 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.
not underline
By
default, text links are underlined by the browser.
If your page is visited
by MSIE3 or newer, you can turn off the underlining for
an entire page by adding a style tag to the head section
of the document.
Look at this example:
<html>
<head>
<title>This is my page</title> <style
type="text/css">
<!--
A{text-decoration:none}
-->
</style>
</head>
<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com">This Link
To Yahoo has no underline</a>
</body>
</html>
image link
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>
IMAGE MAPPING
It
is possible to make one image link to
several pages, depending on where the image
is clicked.
This
technique is called imagemapping.
You simply
specify which areas of the image should link
to where.
In the
example below, if you position the mouse in
the upper left corner it links to yahoo ....
and in the lower right corner.... it links
to hotbot.
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:
<a
name="chapter4"></a>
After doing
this, you can make a link pointing to the
anchor using the normal
<a href> tag, like this:
Click <a href="#chapter4">here</a>
to read chapter 4.
Note:
When linking to an anchor on a page you need
to put a # in front of the anchor.
When you
link to an anchor on the same page, simply
enter
<a href="#YourAnchor">picpic</a>
When
you link to anchors on external pages use
this syntax:
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 FRAMESET
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 EMAIL
Having
a link that allows visitors to send email from
your website can be a great addition to your
site, making it easy for your visitors to send
questions or comments.
There is a
special link for this action.
Email links are
done much the same as links to other pages,
using the <a href> tag.
An email link
would require the following code:
<a
href="mailto:youremailaddress">Email
Me</a>
This
will result in the visitor's email program
opening a new email with your address already in
the To: field.
If
you wish to have a specific subject in the
email, you can add it to the html code using
subject= setting :
To insert a
table on your page you simply add these tags
where you want the table to occur:
<table>
</table>
The
above table would be of no use since it has
no rows and no columns. 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.
Table Tags
The
following properties can be added to the
<table> tag:
Property
Description
align=
left
center
right
left align table
center table
right align table
background=filename
image
inserted behind the table
bgcolor=#rrggbb
background
color
border=n
border
thickness
bordercolor=#rrggbb
border
color
bordercolordark=#rrggbb
border
shadow
cellpadding=n
distance
between cell and content
cellspacing=n
space
between cells
nowrap
protects
agains linebreaks, even
though the content might be
wider than the browser
window.
removes all outer borders
shows border on top of table
shows border on bottom of
table
shows border on left side of
table
shows border on right side
of table
shows border on both
horizontal sides
shows border on both
vertical sides
shows border on all sides of
table
valign=
top
bottom
aligns content to top of
cells
aligns content to bottom of
cells
width=
n,n
n,n%
minimum width of table in
pixels
minimum width in percentage
of window size
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.
ROWS/CELL
TAGS
These
settings can be added to both
<tr> and <td>
tags.
PROPERTY
DESCRIPTION
align=
left
right
center
aligns content to the left of cells
aligns content to the right of cells
aligns content to the center of the
cells
background=filename
sets a background
image for the cells
bgcolor=#rrggbb
sets a background
color for the cells
bordercolor=#rrggbb
sets color for the
border of cells
bordercolordark=#rrggbb
sets color for the
border shadow of cells
valign=
top
middle
bottom
aligns to the top of cells
aligns to the middle of the cells
aligns to the bottom of cells
width=
n
n%
specify a minimum width for the
cells in pixels
specify a minimum width for the
cells in percent of the table width
height=
n
n%
minimum height of cells in pixels
minimum height of cells in
percentage of table height
These settings are
only valid for <td>
tags.
PROPERTY
DESCRIPTION
colspan=n
number of columns a
cell should span
nowrap
protects agains
linebreaks, even though the content
of a cell might be wider than the
browser window
rowspan=n
number of rows a
cell should span
Note:
Settings for columns(<td> tag) have higher priority
than settings for rows(<tr> tag).
Settings for cells
(<tr> or <td> tags) have higher priority than
settings for the table as a whole(<table> tag).
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.
BOREDRS
To
make frame borders invisible you simply need
to add the parameters "cols-line" to the
frameset :
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.
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:
_picnk 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.
<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>
Meta
tags are used to store information usually relevant to browsers
and search engines.
For example, some search engines
look to meta tags for descriptions, keywords, etc.
Other examples have relevance to
the browser: Examples would be tags telling it to load a
specific url after x seconds or tags telling it that a certain
page should not be cached.
Another example is the ICRA meta
tag. This tag can prevent sites with adult content from being
seen on IE browsers.
Finally, some meta tags serve a
purpose that is unique for the site in question. An example
might be a newspaper site, where the journalist sends a text of
an article to an advanced tool that creates an HTML document of
it. This program may add special meta tags to allow an indexing
of the articles. So if you ever see a strange meta tag that is
not listed the books, this is probably the reason.
SEARCH ENGINES
THE MYTH
It is a myth among
web designers that with the right meta tags you can
make it to the top on all search engines.
The truth is close to being the opposite.
With the wrong
meta tags you can make it to the bottom,
but meta tags alone do not take you to the top
anywhere.
THE ABUSE
Two meta tags have
special relevance for search engines:
Description and
Keywords.
When search engines
first started to look for these meta tags, the
intention was that web designers could emphasize
what the pages were about. For example, a scientific
page about the surface of the moon might not have
the word "moon" on it, although the page definately
related to the topic "moon".
Creative minds
didn't take long to find out that this could be an
excellent tool for improving search rankings. Many
webmasters included keywords and descriptions that
held no relevance to their page.
THE STRIKE BACK
After some time, the
meta tags did not serve the purpose they were
intended for. Most were being used for spamming.
Therefore, some search engines, such as Excite,
stopped looking at them entirely.
Other search
engines, such as Infoseek, directed the spammers
weapons back at them. They simply ranked sites lower
if the meta tags included words that were not
present in the content of the page.
THE CONCLUSION
Use meta tags with care.
Do not include words that are
not present on your pages.
Do not repeat words.
Use the meta tags the way they
were intended, because the search engines are
well aware that meta tags are an excellent
filter for spam sites.
Let's
proceed to the details about the tags.
DESCRIPTION
<META
name="DESCRIPTION"
content="AN HTML Tutorial">
Most
search engines will display the description when
they list results from a search.
If you do not include this tag, then the engine will
simply list the first words on the page - which is
not always very meaningful.
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.
Gateway Educational and Welfare Society
is an NGO Regd. with Govt. Of Punjab to promote the skills of poor and
needy youth of INDIA so that they may earn respectful living hood.
Presently the area of functioning of Society is Sangrur Distt.
Favorite
PRIDE OF GATEWAY
in the examples is only there to show how
the circular sign
