HTML
What we have for you in this
section.................
Most of GUI-based web page authoring tools have
their own fancy ways of generating the HTML code, and by the time
they are through, you have a page three times the size of what you
would have had, had you simply written the HTML commands.
Mathematically, if you generate a page through FrontPage2000, for
instance, and it's size is 30 units [bytes, kilobytes], you can have
the SAME look by hand-coding, and the size will be 9-10 units. Yes,
this is the amount of junk code generated.
On the Net, size does matter.
When for the first time I saw the source-code
of an HTML page, I got so scared that I quickly closed the window.
Then gradually, my web developer friends talked me into learning the
ropes line by line, and within a week, I felt like an HTML dude. I'm
not exaggerating. It really is so easy.
So if you are psychologically ready, and would
like to give it a try, follow these steps and in about 10 minutes,
you'll have your first [if you have never done it before] hand-coded
HTML page. Don't get disheartened with the look, I understand you
could be used to the fancy-frills of your tool. Just remember one
thing, an HTML page is mostly made of tags. There is a beginning
tag:
, and
an ending tag. Note the
forward slash in the ending tag. In this first article, we'll be
discussing the basic tags. In the proceeding articles, we'll go
deeper and deeper.
Anoter thing before we progress: get hold of
HomeSite, if you can. It's a very neat HTML coder - very humble. It
let's you run amuck with your hand-coding, but now and then,
provides help in the form of drop-down menus, so that you do not
have to memorize all those spooky options associated with HTML tags.
It automatically pops out the closing tag so you don't miss it.
== Step 1: ==
Create a separate directory where you are going
to store your file(s).
== Step 2: ==
Open your favorite text editor. I would suggest
for this first file, use NOTEPAD because it loads very fast, and no
matter how many copies you open, it doesn't act fussy.
== Step 3: ==
Write these two lines first, as they are
visible here:
<HTML>
</HTML>
Your entire web page is going to exist within
the confines of these two tags. I suggest you write the closing tag
as soon as you write the opening tag so that later on, when there
are too many tags, you don't get mixed up.
At this moment, you can save the file in the
new directory you just created. Remember while saving, if you are
using NotePad, that while writing the name of the file, for
instance, firstpage.html, you have to enclose it within quotes in
order to save it as an HTML page: "firstpage.html".
NOTE: Due to character per line limitations,
some of the HTML text may appear broken, but when you are typing in
your text editor, press enter only when you have typed the closing
tag, for instance, </P>.
In the following two sections, you get to get
your hands dirty with pure viscera of HTML.
ELEMEMTARY HTML
TAGS
We had concluded the previous section with the
all pervasive tag: <HTML> </HTML>. This tag informs the
reader (a browser or a word-processor, or anything that reads HTML)
that the file being considered is a web page.
Let's see what step 4 has in store.
== Step 4: ==
Within <HTML> </HTML> tags, insert
another tag so that your lines look like:
<HTML>
<HEAD>
</HEAD>
</HTML>
Within the head tag, we
store all the information that we want the browser to read first
before proceeding to read the rest of the stuff, for instance, the
title of the page, information about the author, meta tags (some of
the meta tags causes your page to be found when the user tries to
find a page like yours, through his/her preferred search engine or
directory, for instance, "Description" and "Keywords" meta tags),
etc. For the time being, we'll have just the Title tag here, as
right now we are in no hurry to be found by all and sundry.
Although it is not within the scope of this
article to tutor you on how to be search engine friendly, it is
recommended you choose the words of your title after careful
scrutiny. Try to include in it the words that you think the surfer
might type at the search engine prompt. The search engine guys
recommend that if it is your company page, then put the name of your
company there.
<HTML>
<HEAD>
<TITLE>This is my first, hand-coded HTML
page</TITLE>
</HEAD>
</HTML>
If a tag is not going to contain many lines of
code, we can have the opening and closing tags in the same line, for
instance,
<TITLE>.....</TITLE>
instead of
<TITLE>
.....
</TITLE>
This applies to all the tags.
Clear till here? Now if you want to see how
your page looks on your browser, load your browser, and in the URL
window, type the complete path of your file, like
c:\newfolder\firstpage.html
and press Enter.
See nothing? Don't get alarmed, and don't think
you've goofed up big somewhere. We haven't yet put anything in the
code that should come up in the browser. Yes, on the browser's
window title bar, you can view the text that you've put within
<TITLE> </TITLE>.
From now onwards, leave your browser open, and
keep pressing the Refresh or Reload button to see the changes, when
you make them. Just remember to save the modified file [File ->
Save: In the text editor] before refreshing.
== Step 5: ==
Now we come to the body of the page. Modify
your page so that it looks like:
<HTML>
<HEAD>
<TITLE>This is my first, hand-coded HTML
page</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<BODY> tag tells the browser that from
now onwards, the actual content of the page will come into the
picture.
We leave
this section here because the last stage of our First Page course
shouldn't have an abrupt break. In the concluding section we shall
see how we can display simple text, hyperlinks and graphic files on
our web page.
 TEXT AND
HYPERLINKS
In the preceding section, we had left the
discussion at the <BODY> </BODY> tag, so let us continue
from here.
For showing simple text, we use the <P>
tag in such a manner:
<P>Ah! This is for the first time I'm
writing my own HTML. The world is so different out here.
Marvelous!</P>
You can consider <P></P> to be a
paragraph.
OK, now the page should look like:
<HTML>
<HEAD>
<TITLE>This is my first, hand-coded HTML
page</TITLE>
</HEAD>
<BODY>
<P>Ah! This is for the first time I'm
writing my own HTML. The world is so different out here.
Marvelous!</P>
</BODY>
</HTML>
Refresh the page. See something?
If you want to highlight a section, for
instance, "Marvelous!", you
can do it like this:
<P>Ah! This is for the first time I'm
writing my own HTML. The world is so different out here.
<B>Marvelous!</B></P>
Refresh the page. See something?
The use of some of the tags have been
discontinued by some of the newer browsers, but we'll handle those
complexities when we cover style sheets. At the moment, these should
work.
The browser will show the text in the default
font. If you want to use your own font, size and color, you'll have
to use the font size for a particular portion of the text like
this:
<P>Ah! This is for the first time
<FONT SIZE="10pt" FACE="Verdana" COLOR="Red">I'm writing my
own HTML</FONT>. The world is so different out here.
<B>Marvelous!</B></P>
If you find it confusing, just type it as it
is, save the file, and refresh the page in the browser, and you'll
understand what I'm trying to say.
Notice the opening and closing tags everywhere?
SIZE, FACE and COLOR are the main basic attributes of the
<FONT> </FONT> tag.
== Step 6: ==
Let us now create a hyperlink and get over with
the current article. A hyper link is the fancy text over which when
you hover your cursor, the cursor metamorphoses into a pointing
finger, indicating that you are going to be taken to some other
web-destination upon clicking the left mouse button. A graphic can
act as a hyper-link too, but we'll come to that later.
Suppose you want to add the following lines to
the page:
<P>For more cool content, go to
Bytesworth.com.</P>
So that the page looks like now:
<HTML>
<HEAD>
<TITLE>This is my first, hand-coded HTML
page</TITLE>
</HEAD>
<BODY>
<P>Ah! This is for the first time
<FONT SIZE="10pt" FACE="Verdana" COLOR="Red">I'm writing my
own HTML</FONT>. The world is so different out here.
<B>Marvelous!</B></P> <P>For more cool
content, go to Bytesworth.com.</P>
</BODY>
</HTML>
Save and refresh the page. </P> also acts
as a line break, so the next text appears like a new
paragraph.
You want the message in such a way, that when
someone clicks on Bytesworth.com, the person is taken to http://www.bytesworth.com. To
accomplish this, you'll have to re-write the second paragraph like
this:
<P>For more cool content, go to <A
HREF="http://www.bytesworth.com"> Bytesworth.com
</A>.</P>
exactly like this. Don't worry if the lines
appear broken, you should write the entire thing in one line, as it
is.
The latest page now is:
<HTML>
<HEAD>
<TITLE>This is my first, hand-coded HTML
page</TITLE>
</HEAD>
<BODY>
<P>Ah! This is for the first time
<FONT SIZE="10pt" FACE="Verdana" COLOR="Red">I'm writing my
own HTML</FONT>. The world is so different out here.
<B>Marvelous!</B></P> <P>For more cool
content, go to <A HREF="http://www.bytesworth.com">
Bytesworth.com </A>.</P>
</BODY>
</HTML>
Save it, and refresh it. Bytesworth.com should
appear as a hyperlink.
Don't get distraught by the drab look. If you
follow all the articles, you'll be able to make the coolest pages
possible in HTML/JavaScripts.
So this is your first, basic page. Using the
given tags, you can keep adding further content according to how
creative you feel. In the next article, we'll be discussing general
layout, tables, and a couple of more tags.
IMAGES AS
HYPERLINKS
In the preceding sections, you learnt how to
come up with an elementary HTML page. You learnt the tags that are
the backbone of an average HTML page, namely, <HTML> </HTML>, <HEAD> </HEAD>, <TITLE> </TITLE>, <BODY> </BODY>, <P> </P> and <A> </A>.
Assuming you could assimilate the gushing
fountain of wisdom in the previous articles, we move onto the
streams of more evolved tags. Let's start with graphics.
Graphics enhance the look of a page, they make
it more informative [One picture is worth a thousand words, etc.],
and they give your page an identity. But don't go over board - the
total size of one page should not, ideally, exceed 25 KB. There are
many other issues involved with web-based graphics, but at this
moment, we are just covering the HTMLization of graphic
files.
== Step 7: ==
To include graphics, we use the <IMG> tag
in this manner:
<IMG
SRC="picture.gif">
Where "picture.gif" is some graphic file that
you already have in the same folder. If the graphic file is not
present in the same folder as your HTML page, then you have to
specify the entire path of the file being used. For example, if your
HTML file is in the root directory, and "picture.gif" is in a
sub-directory - graphics - of your root-directory, the syntax turns
out to be:
<IMG
SRC="graphics/picture.gif">
"/" (forward slash) is for servers. For your
local hard-drive, you should use "\" (back slash).
SRC is an attribute of <IMG> and it
stands for "source".
There are primarily two graphic file formats
prevalent on the web, namely, GIF and JPG. GIF files use lesser
colors, and hence are smaller in size and load quicker, and further,
animated graphics can be created out of GIF files. JPG files are
more refined, and we use them to display graphics that require
clarity and greater pixel density, for instance, a photograph. More
efficacious formats are being developed in the meantime to suit
Internet compatibility.
In some tags, you don't have to use the closing
tag. We don't use </IMG> with <IMG>, but with the advent
of XML, closing tags are going to be compulsary.
Let us borrow the HTML code of our existing
page, and in that, include the <IMG> tag too.
<HTML>
<HEAD>
<TITLE>This is my first, hand-coded HTML
page</TITLE>
</HEAD>
<BODY>
<IMG SRC ="picture.gif">
<P>Ah!
This is for the first time <FONT SIZE="10pt" FACE="Verdana"
COLOR="Red">I'm writing my own HTML</FONT>. The world is so
different out here. <B>Marvelous!</B></P>
<P>For more cool content, go to <A
HREF="http://www.bytesworth.com"> Bytesworth.com
</A>.</P>
</BODY>
</HTML>
Save and refresh your page.
You might have observed that on many web pages,
they use fancy graphics to show various links, as you can see the
fancy gray buttons on this web site. We perform this by
<A HREF =
"morelinks.html"><IMG SRC = "morelinks.gif"></A>
We have inserted the <IMG> tag between
<A> </A>, so instead of the text link, now we have a
graphic link.
Our modified HTML source page, looks like this
(repetitive code has been replaced by dots):
<IMG SRC ="picture.gif">
<A HREF ="morelinks.html"><IMG SRC
="morelinks.gif"></A>
You can explore the <IMG> tag further on
your own, but there is another crucial attribute of this tag that we
are going to cover before moving on to the next section - the ALT
attribute - alternative.
We use the ALT attribute inside <IMG> to
insert text that gets displayed or sounded when the cursor is
hovered over the image, or while the image is being loaded, or when
the graphics display has been disabled in the browser, or when your
site is being viewed on a non-graphics browser, or when visually
challenged people are browsing on a voice-enabled
browser.
<IMG SRC
="picture.gif" ALT ="Your Title in Text">
<A HREF ="morelinks.html"><IMG SRC
="morelinks.gif" ALT ="More Links"></A>
This sums up the <IMG> tag. It's an
important tag, and hence, has taken up an entire chapter. You'll
find yourself implementing it again and again, but please don't
over-do it.
We move on to tables now.
HTML TABLES
Tables are used to display information in an
orderly manner. Incidentally, here we are not talking furniture. A
table means tabular representation of certain data on your computer
screen or in printed form.
Ideally, a table consists of rows and columns.
Mathematically, every table has at least one row, and at least one
column.
In an empty square box, even if you don't see
multiple vertical and horizontal lines, there is at least one row
and at least one column.
So when we are defining a table, there are
three tags that are deeply involved in the entire tabular
configuration. The chief tag <TABLE> </TABLE> kindles
the initiation. Then we have the child tag, namely, <TR> </TR> which brings on
the row, and the last, but not the least, we have a grandchild tag
here, <TD> </TD>
which originates a column.
The legal sequence of these three tags goes
like this:
<TABLE
WIDTH="n%" BGCOLOR="some color" BORDER="n">
<TR>
<TD>
The
information you want to show off about.
</TD>
</TR>
</TABLE>
Where n can be any positive number. Within
every <TABLE> </TABLE>, there can be n numbers of
<TR> </TR>, and within every <TR> </TR>,
there can be n numbers of <TD> </TD>. Then you can have
nested tables. For instance, within a single cell of nth row and mth
column, you can have more tables.
Note: If the upper row has a single column, and
the preceding one has multiple columns, its better to define the
single-columned row in a separate table.
Let's promenade through a day-to-day example.
Let us create a tiny table displaying your marks in English,
Mathematics and Philosophy, in two semesters and see how it fairs on
your upcoming web page. Don't get intimidated by so many tags and
their attributes - once you are able to create and apprehend the
architecture of one table, you'll be able to create any kind of
table.
Note: Within <!-- and --> we can insert
comments so that we can keep account of complex HTML coding.
Literally, you insert the comments like this - Less-than sign,
exclamation mark, dash dash, space, you comment, space, dash dash,
greater-than sign.
The code:
<!-- The title
table -->
<TABLE WIDTH="100%"
BORDER="1">
<!-- The row begins here -->
<TR BGCOLOR="black">
<!-- Column
-->
<TD WIDTH="100%"
ALIGN="center"> <P><FONT COLOR="white"><B>My
Marks</B></FONT></P> </TD>
<!-- Column ends -->
</TR>
<!-- Row ends -->
</TABLE>
<!-- The title table ends -->
<!-- The rest of
the table starts here -->
<TABLE
WIDTH="100%" BORDER="1">
<!-- First row -->
<TR BGCOLOR="silver">
<!-- First column -->
<TD WIDTH="25%"> </TD>
<!-- First column ends -->
<!-- Second column
-->
<TD WIDTH="25%" ALIGN="center">
<FONT COLOR="black"><B>English</B></FONT>
</TD>
<!-- Second column ends
-->
<!-- And
so on
-->
<TD WIDTH="25%" ALIGN="center"> <FONT
COLOR="black"><B>Mathematics</B></FONT>
</TD>
<TD
WIDTH="25%" ALIGN="center"> <FONT
COLOR="black"><B>Philosophy</B></FONT>
</TD>
</TR>
<TR BGCOLOR="white">
<TD WIDTH="25%">
<FONT COLOR="black"><B>SEM1</B></FONT>
</TD>
<TD
WIDTH="25%" ALIGN="center"> <FONT
COLOR="black"><B>72%</B></FONT> </TD>
<TD WIDTH="25%"
ALIGN="center"> <FONT
COLOR="black"><B>82%</B></FONT> </TD>
<TD WIDTH="25%"
ALIGN="center"> <FONT
COLOR="black"><B>60%</B></FONT> </TD>
</TR>
<TR
BGCOLOR="white">
<TD WIDTH="25%"> <FONT
COLOR="black"><B>SEM2</B></FONT> </TD>
<TD WIDTH="25%"
ALIGN="center"> <FONT
COLOR="black"><B>75%</B></FONT> </TD>
<TD WIDTH="25%"
ALIGN="center"> <FONT
COLOR="black"><B>78%</B></FONT> </TD>
<TD WIDTH="25%"
ALIGN="center"> <FONT
COLOR="black"><B>65%</B></FONT> </TD>
</TR>
</TABLE>
If you want to discern what these lines do,
save, and refresh your page.
WIDTH="100%" means a particular table should
cover the entire width of your computer screen, and a particular
column should cover the entire width of the table containing it.
<TD WIDTH="25%"> means the column is covering only 25% space
of the stipulated table.
This raps up the table business. Make as many
tables as you can as an exercise. The next section tells you
something about the Style sheets and Server Side
Includes.
CASCADING STYLE SHEETS
A few sections back, I had mentioned somewhere
that some of the older HTML tags have been deprecated. This means
the newer browsers refuse to recognize them. If you use these tags,
the new browsers can mutilate your design in retaliation.
These tags have been deprecated to accommodate
more devises that are vying to give net access to their users, for
instance, WAP devices, televisions, etc.
One of the deprecated tags is, <FONT>
</FONT>. We no longer use it. Another one I can remember is,
<CENTER> </CENTER>. Both of them generate protests by
advanced HTML editors.
So to render effects that were provided by such
tags in the past, we have to use Cascading Style Sheets (CSS). A
popular usage of Cascading Style Sheets is to give a consistent
design look to a web site. Once you've designed certain styles, you
can apply them on any part of your web site with just one tag. For
example, supposing you have developed hundreds of pages using a
particular CSS definition for a particular section, and all of a
sudden you want to change the look of that section, you just have to
redefine your CSS, and lo!, your entire web site gets
upgraded.
A typical CSS definition is:
<STYLE
type="text/css">
A {TEXT-DECORATION:
none}
A:hover {TEXT-DECORATION:
underline}
P {font: 10 pt Arial;
color: black;
line-height: 12 pt;
align: left}
</STYLE>
This definition appears in the <HEAD>
</HEAD> section of the page where it is being
applied.
For instance, in our First HTML page, this
style would appear like this:
<HTML>
<HEAD>
<TITLE>This is my first, hand-coded HTML
page</TITLE>
<STYLE type="text/css">
A {TEXT-DECORATION: none}
A:hover {TEXT-DECORATION: underline}
P {font: 10 pt Arial;
color: black;
line-height: 12 pt;
align: left}
</STYLE>
</HEAD>
<BODY>
You must be familiar with <A> </A>
and <P> </P> tags. When we were investigating <A>
</A>, we saw that the text that appears as a link in your
browser is blue, and underlined.
But, if now we type
<P>For more cool content, go to <A
HREF="http://www.bytesworth.com">Bytesworth.com</A>.</P>
The attribute A
{TEXT-DECORATION: none} makes sure that you don't see that
underline under "Bytesworth.com", and A:hover {TEXT-DECORATION: underline}
makes the underline appear when you hover the cursor over this
text.
If you want to define a paragraph-heading, do
it like this:
<STYLE
type="text/css">
H1 {14 pt Verdana;
color: maroon;
text-decoration: underline;
font-weight: bold}
</STYLE>
So now if you type:
<H1>Our monthly output</H1>
A CSS can be defined on the page itself, or as
an external file. It is preferred that you define a Cascading Style
Sheet as an external file if the definitions are lengthy and you are
going to apply them on more than 10 pages so that you just have to
mention the name of the CSS file in the <HEAD> </HEAD>
section of every page.
To define an external CSS file, open a new file
in your text editor, and type
P {
font-size : 10
pt;
font-family : Arial;
line-height : 12 pt;
}
A {
font-size : 10
pt;
font-family : Arial;
font-weight : bold;
color : Maroon;
text-decoration : none;
}
A:hover {
font-size :
10 pt;
font-family : Arial;
font-weight : bold;
color : Red;
text-decoration : underline;
}
Save the file as "mystyle.css". Remember to
give a css extension.
Then within <HEAD> </HEAD> of the
HTML page where you want the CSS to be applied, type
this:
<LINK REL =
STYLESHEET Type = "text/css" HREF = "mystyle.css">
Supply the complete path if the css file
resides in some other folder. Save the HTML page and Refresh
it.
This covers the basic concept behind Cascading
Style Sheets.
There is a dilemma though. What if you want to
have different CSS styles for the same tag for different sections?
We'll ponder over it in the next section. And we'll cover some more
formatting issues.
NAVIGATION BARS AND
BULLETED LISTS
Highlight: Next, we are going to learn
to make a navigation bar so that the Web site becomes "navigable",
and then we learn to present point-wise information in the form of
"Bulleted Lists".
A proper navigation is the backbone of your Web
site's success on the Net. If you want the visitors to be able to
access all the information you want them to be able to access, you
got to provide them with a consistent modus operandi for doing it.
And that modus operandi has to be present throughout the web
site.
A navigation bar can be on the top, at the
bottom, on the left, on the right, or in the middle, in whichever
way it suits the look of your entire design.
The ideal is, either on the top, or on the left
hand side.
What we generally do is, after inserting the
logo etc. at the top, we define a table of two columns.
<table
width="100%" border="0" cellspacing="3">
<tr>
<!-- Left
hand side navigation section -->
<!--
This section generally remains the same for the entire -->
<!-- Web site. -->
<td width="20%" align="left"
valign="top">
<!--#include file="leftnav.inc" -->
</td>
<!-- Below is the portion that has content
unique to the particular <!-- page. -->
<td width="80%" align="left"
valign="top>
</td>
</tr>
</table>
The above portion should be saved as a template
file, so that you make the desired changes in the template, keep the
common code intact, and save the modified file as your own
file.
Make ample use of the comment tag <!--
Comment
--> so that you know where you are putting what,
especially if you are working with multiple table and column
definitions.
"leftnav.inc" can be the included file that has
the following HTML code:
<a
href="index.shtml">Home Page</a>
<a href="profile.shtml">My
Profile</a>
<a
href="contact.shtml">Contact Me</a>
You can have as many links as the number of
pages you want to be seen.
You don't need to use the Server Side Includes
if your Web site consists of merely 6-7 pages because then you can
just keep on copying and pasting the navigation bar code
at:
<td width="20%"
align="left" valign="top"> <!--#include file="leftnav.inc"
--> </td>
in this way:
<td width="20%"
align="left" valign="top">
<a href="index.shtml">Home
Page</a>
<a
href="profile.shtml">My Profile</a>
<a href="contact.shtml">Contact
Me</a>
</td>
Bulleted Lists:There is a special tag used to
achieve a mesmeric feat. In fact, there are two tags, namely,
<ol> </ol> and <ul> </ul>.
<ul> is for a bulleted list, and
<ol> is for a numbered list.
You do this in the following manner:
<p>We
provide the following services:</p>
<ul type="disk">
<li>Woodwork</li>
<li>Oil Painting</li>
<li>Furnishing</li>
<li>Fitting</li>
</ul>
<li> </li> is for individual
bulleted components.
The type
attribute of <ul> tag decides what sort of bullet is going to
be visible. Generally, there is this disk, a circle, and a square.
You can define the
tag in your Cascading Style Sheet so that
whenever you display the bulleted list, it appears in the same
manner.
This is it for now. The next section is going
to teach you how to make a User Feedback form, which is very
essential to make your Web site interactive.
USER FEEDBACK HTML
FORM
Highlight: Finally we come to Forms.
After going through this celestial section you'll be able to make
your own HTML feedback forms so that the visitors can send you
feelers about what are their intentions vis-ΰ-vis you and your Web
site, and other sundry things that may or may not concern
you.
As usual we have a tag called, illuminatingly,
<form> </form>. Whatever lies within belongs to this tag
and is going to be a part of its definition as a whole.
The basic infrastructure of a user feedback
form manifests itself like this:
<form
name="myform" method="post" action="process_form.pl">
<input type="hidden" name="email_ad"
value="your email id goes here.">
<input type="hidden" name="subject"
value="put your subject here.">
<input
type="hidden" name="redirect_page" value="thankyou.html">
<p>Please enter your name: <input
type="Text" name="Vname" size="25">
<br>
<p>Please enter your email: <input
type="Text" name="Vemail" size="25">
<br>
<p>Please enter your comments:
<textarea cols="25" rows="5" name="Comms"></textarea>
<br>
<input
type="submit" name="S1" value="Submit">
<input type="reset" name="R1"
value="Reset">
</form>
Good! Now let us take the bull by its horns,
and ponder over the individual parts one-by-one in a scholarly
manner. An average <form> has the method, name, and action attributes. There might be more
tags, but in this nascent stage of Form learning, let's stick to
these three attributes. A method can have the value "post" or "get".
"Post" is used when we are just "submitting" the information, but,
"get" is used when we are retrieving information according to the
information "submitted". A good example of "get" is the search
engine box, where you enter the word to be searched, and then the
program displays the information retrieved.
The attribute name is not vital to the existence of
a form, but later on, in a SCRIPT, if you desiderate to access the
individual components of a form (for example, validating the user
input), then you need it.
Action is where all the action is.
This attribute holds the name of the file that is going to do
something to the fields entered by the user. It holds the functions,
and the "hidden" fields definitions in order to perform some task.
The above file, process_form.pl (a PERL file), we assume, emails you
the details entered by the user. This file mostly lurks in the
CGI-BIN folder of your server, and if you are hosting your Web site
on a commercial server, the host company provides this sort of
file.
Ok now, hidden fields. Generally what conspires
is, the PERL file needs an email address so that the entered
information can be dispatched to that address. Then it might sound
decent to give a subject to that future email, so that wherever it
goes, the recipient can make out what sort of email it is. It would
look extremely impolite if you do not appreciate all the pain taken
by the visitor - hence, it calls for a thank you page
redirection.
In this manner, there could be tens of "hidden"
field definitions.
<input
type="Text" name="Vname" size="25">
displays an empty field box of size 25
characters. And so on
"Submit" tells the browser to invoke the file
"process_form.pl" and "Reset" empties all the fields in case you
want to re-enter all the values. Later on, we'll explore other means
to manipulate the "submit" field so that we can make sure that the
person entering the information into the fields is not a complete
dud.
A radio button is a GUI component that lets the
user select one, and only one option from a given list of
options.
<p>Would you like to receive promotional
emails from me? Yes <input type="radio" name="yesno"
value="Yes">
No <input type="radio"
name="yesno" value="No">
Both the input definitions have the same name
because in a particular set of multiple radio buttons, only one
choice can be made. You can have as many radio buttons as you want
by giving them single name but varied values.
The following portion lets the user choose an
option from a drop down list:
<p>Your
profession is: <select size="1" name="profession">
<option
value="Engineer">Engineer</option>
<option
value="Doctor">Doctor</option>
<option
value="Swindler">Swindler</option>
<option
value="Lawyer">Lawyer</option>
</select>
Saying in the clichιd manner, last, but not the
least, is a check box which is displayed by the following
code:
<p>Acceptable <input type="checkbox"
name="checky">
Please remember that all this paraphernalia
comes within <form> </form>.
In the next section, we'll wrap up HTML and
dive into the depths of JAVASCRIPTS and VBSCRIPTS. We'll also learn
how to make the above partaken form cooler by incorporating SCRIPTS.
Till then, Ciao!
Before we move on to
Scripting, let's go through some tags and attributes of HTML that
enhance the look and functionality of our pages. We are going to
wrap up our HTML promenade after we are through with this
section.
Page Background: You can give your
HTML page a background, using an image, by the following attribute
of the <body> tag:
<body
background="background.gif">
where "background.gif" is the file you want to
make your background.
This background scrolls up and down when you
scroll your page. What if you want an image in the background that
should not scroll, but remain fixed? You can do it like
this:
<body
background="background.gif" bgproperties="fixed">
Individual cells of a table can too be given
separate backgrounds using the above attributes inside the
<td> tag.
Frames:
<br> This quote is used to
insert a break, or a line break. For instance:
<a
href="url1.html">URL 1</a>
<br>
<a
href="url2.html">URL 2</a>
makes sure that URL 1 and URL 2 appear on
separate lines.
Every self-respecting web site developer wants
his/her web site to be indexed by all those famous search engines
and indexes like Lycos, Yahoo!, Excite, AltaVista, etc. Although
this process takes ages to materialize, initialize, you can
concentrate on incorporating certain keywords into your pages so
that they get found.
Content of your page: Search engines
generally read the first 250 or so words of your page while
searching it. Try to include all the crucial words in this area. But
take care that they have to make sense. Don't spam your web page
with words. The more you narrow down, greater is the chance of being
indexed.
Title: Whatever you write within
<title> </title> sometimes helps the search
engines.
Meta tags: There are two crucial meta
tags, viz., Description and
Keywords. These two tags are
used with <head> </head> of your HTML page in the
following style:
<head>
<meta name="Description" content="A perfect
source to begin learning basic HTML">
<meta name="Keywords" content="tutorials,
articles, profile, profession">
<title> </title>
</head>
Alt Text of your image file: Remember
<img src="title.gif" alt="The logo of Golden Words"> sort of
composition? The search engines also look for the searched text in
the Alt attributes of your various graphics file. Always use them,
copiously, but not unnecessarily.< /FONT>
<h1>, <h2>, <h6>:... Some search engines
love words trapped within <h> </h> tag. <h> tags
are used for inserting section, paragraph headings, for
instance:
<h1>Main
Heading</h1>
<h2>Sub
Heading</h2>
<h3>Sub-sub
Heading</h3>
You can define these headings in your Cascading
Style Sheets according to your own preferences; otherwise, they have
their default settings. |
