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:

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:

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,

instead of

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:

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:

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:

"/" (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

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

<TABLE WIDTH="100%" BORDER="1">


<TR BGCOLOR="black">


<TD WIDTH="100%" ALIGN="center"> <P><FONT COLOR="white"><B>My Marks</B></FONT></P> </TD>


</TR>


</TABLE>



<TABLE WIDTH="100%" BORDER="1">


<TR BGCOLOR="silver">

<TD WIDTH="25%"> </TD>



<TD WIDTH="25%" ALIGN="center"> <FONT COLOR="black"><B>English</B></FONT> </TD>




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

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.

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

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.

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!

You can define these headings in your Cascading Style Sheets according to your own preferences; otherwise, they have their default settings.

Find A JOB

HTML

BEGINNING HTML (Warming Up)

SOME TAGS / ATTRIBUTES THAT MAKE WEB PAGES LOOK COOLER

College / Education

Travel/Wallpapers

LGBT HelpDesk

Safe Sex Stuf