Salih's HTML Tutorial

Have you ever wondered how webpages are created? Well, I will show you through simple illustrations how easy are to create a webpage using the basic web language called HTML. I am not going to give you a big introduction about how HTML language has evolved and stuffs like that. We'll straightway get into the business...So GOOD LUCK...

Introduction

Hyper Text Markup Language or HTML as it is often called, is a programming language used for creating webpages. Unlike other programming languages, HTML is simple and easy to learn.

Preparation of HTML Documents

Unlike many programming languages, you won't need any special software to create an HTML document. The only thing you'll need to work with HTML is a text editor. You can choose from a wide range of editors, from simple text editors like 'Notepad' to sophisticated word processors like 'MS Word'. Once you have created a file, you can give an appropriate name to the file with .html extension. For example, your file name may look like this:

If you use word processor like Word, you must make sure that, the file is saved as "text only". On the other hand, if you use a text-only editor like Notepad, you will not face any problem while saving the documents. So, I recommend you to use Notepad, which comes with Microsoft Windows, to create and edit HTML files.

Once the file with extension ".html" is saved, you can view it on your computer screen using standard internet browsers like Microsoft Internet Explorer, Netscape Navigator, or Mozilla Firefox. To view an HTML file, double click on the file to open it in the default browser of your system. If you want to modify something, go back to the text editor and make your changes, save it and switch to the browser and click "reload" or "refresh" command to see how things look.

General Format of an HTML Documents

As seen above, HTML documents always begin with the tag <HTML> and end with </HTML>. The document contains two main parts, namely the HEAD and the BODY. The header information is given between <HEAD> and </HEAD> tags. Header should include the TITLE tags <TITLE> </TITLE>. Whatever text is written between the TITLE tags appears at the top of the browser window. Every page should have a TITLE like this. The entries enclosed between the BODY tags will appear in the browser window. Thus, the body is where you can put text, images, or links to other webpages.

Creation of Text

There are some special rules for handling the 'text'. The browser does not recognize blank lines and more than one empty spaces between letters. It simply ignores them. So you must tell the browser when to go to the next line. To demonstrate this, let us look at how some text that appears fine in your text-editor can be squeezed together when you see it using a browser.
You may have typed something like this:

<BODY>

Hello! I am Salih, a faculty in the Mechanical Engineering Department, NIT Trichy. My address is:

Dr. A. Salih,
Dept. of Mechanical Engineering,
National Institute of Technology,
Tiruchirappalli, India.

I teach Fluid Mechanics and allied subjects....

</BODY>

CLICK HERE to see the result.

The output you have just seen is not the one you want, right? Things didn't work out correctly because the browser ignores the blank lines and empty spaces (more than one) between letters. To get the expected result, you must put special tags that tell the browser where to break lines between two paragraphs. To simply end one line and jump to the next, use a line break tag <BR>. To make paragraphs, use <P> tags. So, let us fix the problem by including these tags in the above text as shown below:

<BODY>

<P>Hello! I am Salih, a faculty in the Mechanical Engineering Department, NIT Trichy. My address is:</P>
<P> Dr. A. Salih,<BR>
Dept. of Mechanical Engineering,<BR>
National Institute of Technology,<BR>
Tiruchirappalli, India.</P>
I teach Fluid Mechanics and allied subjects....<BR><BR>

</BODY>

CLICK HERE to see the result.

Things are alright now! Note that the <BR> tag represents a single action and does not come in pairs.

The <P> has an "align" attribute, which has got several options for aligning the text. This is demonstrated below:

<P align="left">The important thing to realize is that each web page is an HTML document file. Once you have created and tested your HTML document you can register with any of the free web hosting sites (a list is given at the end of this page) to get a domain name. After acquiring a domain name, you can upload your HTML file from your system to the internet...</P>

<P align="right">The important thing to realize is that each web page is an HTML document file. Once you have created and tested your HTML document you can register with any of the free web hosting sites (a list is given at the end of this page) to get a domain name...</P>

<P align="center">The important thing to realize is that each web page is an HTML document file. Once you have created and tested your HTML document you can register with any of the free web hosting sites (a list is given at the end of this page) to get a domain name...</P>

<P align="justify">The important thing to realize is that each web page is an HTML document file. Once you have created and tested your HTML document you can register with any of the free web hosting sites (a list is given at the end of this page) to get a domain name...</P>

CLICK HERE to see the result.

Styles of Text

There are number of style tags which alter the physical appearance of the text. The most commonly used style tags are given below:

<B>This text is Bold Face</B>
<I>This text is in Italics</I>
<EM>This text is Emphasized</EM>
<STRONG>This text is also Emphasized</STRONG>
<TT>This text is Fixed-width typewriter text</TT>
<B><I>This text is Bold and Italics</I><B>

CLICK HERE to see the result.

Note that the style tags always come in pairs.

Headings

The heading tags can be used for creating main headings and subheadings in an HTML document.
There are six levels of headings from <H1> to <H6>. These are shown below:

<H1>Level 1 Heading</H1>
<H2>Level 2 Heading</H2>
<H3>Level 3 Heading</H3>
<H4>Level 4 Heading</H4>
<H5>Level 5 Heading</H5>
<H6>Level 6 Heading</H6>

CLICK HERE to see the result.

Note that, there are enough spaces between each heading, so that a break tag <BR> is not required between a heading and the following text. To control the position of the heading tag, an align attribute may be given to it which has several options. For example, <H2 align="center"> will position the heading at the center of the page.

Fonts

You can use a variety of fonts for writing the text in your document. The font tag <FONT> is used for this purpose. A font tag may have many attributes like size, color, and face to describe the nature of the fonts. These are demonstrated below:

Font Face

<FONT face="Serif">This font face is Serif</FONT>
<FONT face="Arial">This font face is Arial</FONT>
<FONT face="Fantasy">This font face is Fantasy</FONT>
<FONT face="Garamond">This font face is Garamond</FONT>
<FONT face="Sans-Serif">This font face is Sans-Serif</FONT>
<FONT face="Verdana">This font face is Verdana</FONT>
<FONT face="Times New Roman">This font face is Times New Roman</FONT>
<FONT face="Courier">This font face is Courier</FONT>
<FONT face="Monospace">This font face is Monospace</FONT>
<FONT face="Rockwell">This font face is Rockwell</FONT>
<FONT face="Comic Sans Ms">This font face is Comic Sans Ms</FONT>
<FONT face="Lucida Calligraphy">This font face is Lucida Calligraphy</FONT>

CLICK HERE to see the result.

Font Size

<FONT size="-2">This is size -2 font</FONT>
<FONT size="-1">This is size -1 font</FONT>
<FONT size="1">This is size 1 font</FONT>
<FONT size="2">This is size 2 font</FONT>
<FONT size="3">This is size 3 font</FONT>
<FONT size="4">This is size 4 font</FONT>
<FONT size="5">This is size 5 font</FONT>
<FONT size="6">This is size 6 font</FONT>
<FONT size="+1">This is size +1 font</FONT>
<FONT size="+2">This is size +2 font</FONT>
<FONT size="+3">This is size +3 font</FONT>
<FONT size="+4">This is size +4 font</FONT>
<FONT>This is default font size of the browser</FONT>

CLICK HERE to see the result.

Font Color

<FONT color="white">This text is White in color</FONT>
<FONT color="red">This text is Red in color</FONT>
<FONT color="green">This text is Green in color</FONT>
<FONT color="blue">This text is Blue in color</FONT>
<FONT color="silver">This text is Silver in color</FONT>
<FONT color="black">This text is Black in color</FONT>

CLICK HERE to see the result.

It may be noted that the text will not be visible if the text color and background color are the same. This is the case with silver color shown above.

If you don't specify the color of the text, the default color is normally black.

You can also combine the font attributes in order to get the desired output. For example:

<FONT size="+1" color="darkviolet" face="Arial">This text is in dark-violet color with size +1 and face Arial.</FONT>

CLICK HERE to see the result.

Colors

Colors play an important role in the appearance of a webpage. The selection of appropriate color for the text improves aesthetic value of the webpage. The important thing to remember is that the background color should not hinder with the text color.

Standard font color can be selected by giving a color attribute to the font tag by writing the name of the color explicitly. This was shown in the previous example.

Colors can also be specified using a hexadecimal code as given below:

color="#7744cc"

The six digit number and letter combinations represent colors by giving their RGB (Red, Green, and Blue) value. The six digits are actually three two-digit numbers in sequence, representing the amount of Red, Green, or Blue as a hexadecimal value in the range 00-ff. For example, 000000 is black (no color at all), ff0000 is bright red, 0000ff is bright blue, 00ff00 is bright green (lime), and ffffff is white (fully saturated with all three colors). There are about 5.7 million color combinations that you can obtain using hexadecimal color code (5765760 to be exact!). Codes for some of the standard colors are given below:

Color	Code	Color	Code
Back	#000000	Olive	#809000
White	#ffffff	Yellow	#ffff00
Red	#ff0000	Maroon	#900000
Green	#009000	Navy	#000080
Blue	#0000ff	Teal	#008080
Silver	#c0c0c0	Purple	#900080
Lime	#00ff00	Fuchsia	#ff00ff
Gray	#808080	Aqua	#00ffff

Choose your color from the color table HERE

Creating Lists

Lists in a document can be created using HTML tags. There are three types of lists: unnumbered (bulleted), numbered (ordered), and definition. Bulleted and numbered lists begin with tags <UL> and <OL> respectively, and the <LI> tag to denotes the beginning of each new list item.
The two types of list are illustrated below.

Unnumbered or bulleted list:
<UL>
<LI>apple
<LI>orange
<LI>grapes
<LI>mango
</UL>

Numbered or ordered list:
<OL>
<LI>apple
<LI>orange
<LI>grapes
<LI>mango
</OL>

CLICK HERE to see the result.

The lists can be nested as well, as shown below:

<UL>
<LI>Fruits
  <ul>
  <li>apple
  <li>orange
  <li>mango
  </ul>
<LI>Vegetables
  <ul>
  <li>carrot
  <li>cabbage
  <li>tomato
  <li>pumpkin
  </ul>
<LI>Cereals
  <ul>
  <li>rice
  <li>wheat
  <li>corn
  </ul>
</UL>

CLICK HERE to see the result.

A definition list requires a separate tag for each term and the corresponding definition. They respectively are <DT> and <DD>.

<DL>
<DT>KERALA:
<DD>This is the southernmost state of India, affectionately called God's own country, because of its rich natural beauty. Kerala is one of the world's most feted travel hot spots.
<DT>CALICUT:
<DD>A beautiful coastal city in northern part of Kerala. This is the place where the Portuguese navigator Vasco Da Gama landed in fifteenth century.
</DL>

CLICK HERE to see the result.

To get a compact definition list, you can add the attribute "COMPACT" to <DD> tag.
i.e., <DD compact>

Creating Hyper-text Links

The best thing about a webpage is the ease with which you can go from one web site to other, one webpage to another in the same web site, or different sections of the same webpage. These tasks are accomplished through what is known as "hyper links" or simply links. There are two types of links: absolute and relative.

Absolute Links

Absolute links give the full address or URL (Uniform Resource Locator) of the webpage. An absolute link has the following structure:

<A href="http://www.salihnet.freeservers.com">Click here</A> to go to Salih's Home Page.

One of the best internet search engine is <A href="http://www.google.com">Google</A>. It uses modern search techniques...

CLICK HERE to see the result.

The basic tag for hyper text is the anchor tag <A>. The links shown above are absolute because the full URL is given. The browser would highlight the texts "Click here" and "Google" on the screen. The phrase to be highlighted must be written between the tags <A> and </A>. When the user clicks on the highlighted words, the browser jump to the site Salih's Home or Google, which ever be the case.

Relative Links

Relative links gives the location of another file in relation to the current one. Suppose you have two HTML files, called "kerala.html" and "calicut.html" stored in the same directory. If you want to create a link from "kerala" to "calicut", a full URL is not needed to be specified. Instead a shorter relative link is sufficient in the document "kerala" like the one given below:

<A href="calicut .html">Click here</A> to go to my home town Calicut using a relative link.

Suppose "calicut" is in a subdirectory called "districts", a relative link from "kerala.html" to "calicut.html" in the subdirectory "districts" would be:

<A href="districts/calicut .html">Click here</A> to go to my home town Calicut.

Relative links are nice because they are shorter and faster to download. It is also portable in the sense that you can switch servers by copying all the files into a directory on the new machine without any change in the address of the links.

Always use relative links to connect your own documents and absolute links to connect outside web sites.

Link to different parts of the same document

You can also add links to different parts of the same document. Suppose, in the document "calicut.html" you have a table of content in which "Kallai River" is an item. Clicking on "Kallai River" should take you to the section Kallai River. To do this, you need to set marks within the document. This is done using the <A name> and </A> tags. Once you have set marks in this manner, you may add links to them by using the # character. This is demonstrated below:

<A href="calicut .html#kallai">Kallai River:</A>

                .
                .
                .

<A name="kallai"></A> Kallai River

Constructing Tables

Tables play a vital role in laying out the webpage in a desired format. Its role is often subtle in the sense that you may not see conventional tables when the webpage is opened with a browser. This is exemplified by the fact that you would see just one table in the page now you are viewing. However, to create this page, I have used about 80 tables! Just have a look at the source code and you will realize it. But I must mention here that, you can obtain a greater control of document's format and presentation using CSS (Cascade Style Sheet), which is a part of DHTML (Dynamic HTML). Well, we will get on with the construction of some simple tables.

The basic structure of the table is given below:

<TABLE>
<TR>
<TD>
    item 1 in first row
</TD>
<TD>
    item 2 in first row
</TD>
<TD>
    item 3 in first row
</TD>
</TR>
<TR>
<TD>
    item 1 in second row
</TD>
<TD>
    item 2 in second row
</TD>
<TD>
    item 3 in second row
</TD>
</TR>
</TABLE>

CLICK HERE to see the result.

The table given above consists of 2 rows and 3 columns. The <TABLE> tag identifies the beginning of the table. The <TR> and </TR> tags mark the beginning and end of each new table row. Within each row, the <TD> and </TD> tags mark the beginning and end of each new column (table data).

Now we will examine some of the attributes and its options while declaring a table.

Using "BgColor" attribute, you can give a background color to the table. Color may be specified using hexadecimal code as explained earlier.
Tables can be aligned to the left, right, center, or justify using "align" attribute.
To put a border around the table elements, "border" attributes can be used. Thickness of the border may be adjusted by giving a number to the "border" attribute.
The spacing between individual cells may be controlled by the "CellSpacing" attribute.
Padding may be given between the outer border of the table and the contents inside, by "CellPadding" attribute.
Using the attribute "width" we may specify the width of the table measured in pixels or in terms of % width of the browser window.
A <TH> tag may be used for column headings.

These aspects are illustrated by an example given below:

<TABLE BgColor="#bbddff" align="center" border="1" CellSpacing="1" CellPadding="10" width="500">
<TH> Column 1 </TH> <TH align="center"> Column 2 </TH>
<TR>
<TD> item 1 in first row </TD>
<TD> item 2 in first row </TD>
<TD> item 3 in first row </TD>
</TR>
<TR>
<TD> item 1 in second row </TD>
<TD> item 2 in second row </TD>
<TD> item 3 in second row </TD>
</TR>
</TABLE>

CLICK HERE to see the result.

<TABLE> tag offers more flexibility by way of giving attributes to <TD> tag. Each cell of the table may have different colors and width. For example,

will produce a cell with background color blue having a width of 150 pixels and height of 30 pixels.

Note:

Nested tables can be created easily by putting inner table between any of the <TD>...</TD> tags of the outer table.
In the absence of borders, width of cells, and BgColor, a table will be invisible unless you fill some items in it.
Any HTML tags like <P>, <FONT>, <UL>, <A>, etc. may be put along with a table item.

Displaying Images

Images can be easily displayed in your document if they are in GIF, JPEG, or PNG format. If you have an image file called "flying_bird.gif" in the "myimages" directory which is different from the current directory, an <IMG> tag can be used for displaying this image as shown below:

CLICK HERE to see the result.

Images can be aligned to left, right, or center of the page with <P> tag with an align option as shown below:

CLICK HERE to see the result.

An "ALT" may be used for displaying a text when the curser is on the image. The height and width of the image may be controlled by the attributes "height" and "width" in the <IMG> tag.

Images can be put right in the middle of the text and can be aligned with the text as you like. This is demonstrated below:

This text is aligned with the top of the image <IMG src="myimages/compi.gif" align="top"> and this one is aligned with the bottom of the image <IMG src="myimages/compi.gif" align="bottom"> and this one aligned with the center of the image <IMG src="myimages/compi.gif" align="center">.

CLICK HERE to see the result.

Hyper-linking Images

An image may be used as a hyper-link. For this purpose <IMG> tag must be embedded in the <A> tag in the following way:

Clicking on the above image will take you to My home page.

CLICK HERE to see the result.

External Images

Many instances, you may want to have a larger image open as a separate document when user clicks on a smaller inline version of the image included in your document. This is called external image and is useful if you do not wish to slow down the loading of the main document with large inline images. This can be achieved as follows:

<A href="myimages/scene.jpg"> <IMG src="myimages/scene.jpg" width="72" height="54"> </A>
Click on the above image to see the larger version.

CLICK HERE to see the result.

Miscellaneous

Here we will see some more useful HTML tags and some special attributes.

The Body Tag

Within the <BODY> tag, which was described earlier, we can have several attributes to control the background color, color of texts and links etc. Example given below demonstrates this:

This produces Teal color background, White text, Blue hyper-links, Silver visited links, and Red active link.

</BODY>

CLICK HERE to see the result.

In the above HTML code, the text color is declared as White. Hence this will be the default color of the text. The default color can be overridden and changed to any other desired color by explicitly defining the color through <FONT> tags.
Instead of declaring the background color in the BODY tag, one can also specify a background image. This is demonstrated below:

CLICK HERE to see the result.

preformatted Text

For displaying preformatted text like computer codes, the tag <PRE> is used. Whatever blank lines or blank spaces within the tag pair <PRE></PRE> will be counted. Example given below demonstrates this.

<PRE>
        n = 7
        if( n <= 10) then
           do i = 1,n
              A(i) = 2*i
              write(*,*) A(i)
           enddo
        endif
</PRE>

CLICK HERE to see the result.

Mailto Function

Mailto function provides a convenient way to allow the users to communicate with you via email. A drawback of this function is that it is not supported by all browsers. Mailto function is called using an anchor, just like standard links to other documents, as shown below:

Please send your comments and suggestions to
<A href="mailto:salih@nitt.edu">salih@nitt.edu</A>.

Escape Characters

You may not be able to enter certain symbols or characters into your web page using a single key or character. Such special characters which are part of HTML standard can be displayed on the screen by using the so called escape characters. Some of the escape sequences are given below:

  < ------------- escape sequence for <
  > ------------ escape sequence for >
  & --------- escape sequence for &
  © -------- escape sequence for ©
    -------- escape sequence for blank space

A comprehensive list of special characters is given here

Target Attribute

If you want to have a new browser window to open up rather than changing the contents of the current window, you may put a Target attribute in the anchor tag <A>. This is demonstrated below:

Go to <A href="http://www.yahoo.com" target="ext">Yahoo!</A>
or
Go to <A href="http://www.rediff.com" target="_blank"> Rediff</A>

CLICK HERE to see the result.

You may try to find out the difference between the two options "ext" and "_blank".

Meta Tags

Meta tags are descriptions in your html pages that are seen by search engines, but not by your site's visitors. These are useful in getting listed with major internet directories and search engines. You can choose selected key words which are relevant to your webpage as meta tags. You can also give a short description of your webpage. For example, if your site is about wild animals, the description and key words may be given as follows:

Meta tags are included in <HEAD> ---- </HEAD> tags.

Tags not Included

Since this tutorial is introductory in nature and I deliberately wanted to make it as short as possible, I have not included some of the not so important and some of the important but more advanced HTML tags. These include <BOLOCKQUOTE>, <TAB>, <FRAME>, <FORM>, <STYLE>, <DIV>, <SPAN>, etc. You can find these and other tags in a more comprehensive HTML tutorial like WWW Consortium. But I assure you that, if you go through this tutorial, you will learn enough HTML, so that you could create beautiful and impressive web pages.

Free Web-Hosting Sites

A list of some of the popular free web-hosting sites is given below:

Please register your suggestions and comments in my Guest Book or mail me at salih@nitt.edu

hits since October 1, 2007.

Basic HTML Tutorial

Table of Contents

Introduction

Preparation of HTML Documents

General Format of an HTML Documents

Creation of Text

Styles of Text

Headings

Fonts

Colors

Creating Lists

Creating Hyper-text Links

Absolute Links

Relative Links

Link to different parts of the same document

Constructing Tables

Displaying Images

Hyper-linking Images

External Images

Miscellaneous

The Body Tag

preformatted Text

Mailto Function

Escape Characters

Target Attribute

Meta Tags

Tags not Included

Free Web-Hosting Sites