Home   |  Viewing problem solution  |  About me


 

HTML Guide

 
HTML or Hyper Text Markup Language is a language that is used to build web pages. No wonder this page is also prepared using the pure HTML code. So here is the description, with the help of which you will be able to build your first web page, if you are a novice web developer and would be able to brush up your skills if you are a nerd.
Basically HTML is based on tags (special symbols, that are used to represent a particular type of HTML element) There are two type of tags present in the HTML, first are container tags (which have both the opening and closing tags) and second one is empty tags (which have only the opening tag and doesn't own the closing tag). Any HTML page consists of two structural units, named Head and Body. Head is used to define the HTML document, title etc. whereas the Body contains the actual information that is to be displayed in the web browser window. Let us proceed to the HTML code now. First of all we will consider the basic structure of any HTML page (web page). The HTML code is like this,

<HTML>
-
-
<BODY>
-
-
</BODY>
</HTML>

<BODY> and </BODY> contains the text (contents) that is displyed in the browser window. Now we include another tag known as HEAD. The HTML code is like this,

<HTML>
<HEAD>
-
-
</HEAD>
<BODY>
-
-
</BODY>
</HTML>

<HEAD> and </HEAD> contains the title of the web page (displayed in the title bar of the web page). Also this block contains JavaScript or VBScript, if any, using <SCRIPT LANGUAGE="JavaScript/VBScript"> and </SCRIPT> tags. Title of the web page is set using <TITLE> and </TITLE> tags. The HTML code is like this,

<HTML>
<HEAD>
<TITLE> My Homepage </TITLE>
</HEAD>
<BODY>
-
-
</BODY>
</HTML>

In the <BODY> and </BODY> tags we write everything that is to be displayed in the web browser window. The HTML code for this is,

<HTML>
<HEAD>
<TITLE> My Homepage </TITLE>
</HEAD>
<BODY>
This is my first web page prepared using HTML.
</BODY>
</HTML>

As the output of the above code the text "This is my first web page prepared using HTML" appears in the browser window. The default font used is "Times New Roman" and font size is "12pts.", but we can change this according to our requirement. To do this we use the <FONT> and </FONT> tags. We can also chage the color of the text displayed in the web page using this tag. The HTML code for this is,

<HTML>
<HEAD>
<TITLE> My Homepage </TITLE>
</HEAD>
<BODY>
<FONT FACE="trebuchet ms" SIZE="2" COLOR="#FF0000">
This is my first web page prepared using HTML.
</FONT>
</BODY>
</HTML>

The above code displays the text "This is my first web page prepared using HTML", in the "Red" color with the font face "trebuchet ms" and size of "2". Here #FF0000 is the Hexadecimal code of the "Red" color. The text displayed above can also be underlined and bold, using the <U> & </U> and <B> & </B> tags respectively. Anything appearing between these tags are underlined and bold.

<HTML>
<HEAD>
<TITLE> My Homepage </TITLE>
</HEAD>
<BODY>
<FONT FACE="trebuchet ms" SIZE="2" COLOR="#FF0000">
This is my first web page prepared using HTML.
</FONT>
<U> This is underlined text. </U>
<B> This is bold text. </B>
</BODY>
</HTML>

Line break can be implemented using <BR> tag at the end of the line or where we want a line break. Also, we can include images in our HTML page, using the following tag,

<IMG SRC="file-name with path">
Like, <IMG SRC="https://khatri-krishna.tripod.com/banner1.gif">

Though we can specify the full path of the file, yet if we specify only the file-name, without path then the specified file is searched in the directory, in which the HTML page is residing. Thus it is a good practice to specify file-name without paths (partial referencing) so that when the page is shifted from one machine to other (especially in the case when we design the page locally and upload that to the ISP) the links need not to be modified. For locating the files locally (i.e. files residing on the local hard disk) we use "file://" protocol, like this,

<IMG SRC="file://C:\My Documents\banner1.gif">

Currently three types of images are supported by the Internet protocols. These are

  • Having extension .gif
  • Having extension .jpg/.jpeg
  • Having extension .png

    Extensions are the after-dot-string (file-name.extension) that work as the identifier of the contents of the file for the computing environment. Some animations (especially web banners and tickers), that appears to be movies can also be saved with the .gif extension. Tables can also be prepared using the HTML code. For this purpose we use <TABLE> and </TABLE> tags. In conjunction with this we use <TR> & </TR> and <TD> & </TD> tags for representing rows and cells. A tag <CAPTION> and </CAPTION> is also used in HTML tables to define the caption of the table. This <CAPTION> appears just after the <TABLE> tag. The HTML code for a sample table is,

    <HTML>
    <HEAD>
    <TITLE> My Homepage </TITLE>
    </HEAD>
    <BODY>
    <FONT FACE="trebuchet ms" SIZE="2" COLOR="#FF0000">
    This is my first web page prepared using HTML.
    </FONT>
    <TABLE BORDER BORDERSIZE="1">
    <CAPTION> HTML Table </CAPTION> <TR>
    <TD> Cell-1 </TD>
    <TD> Cell-2 </TD>
    </TR>
    <TR>
    <TD> Cell-3 </TD>
    <TD> Cell-4 </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>

    Here BORDER and BORDERSIZE words are used to define the border of the table. If we omit them, then the table will have no borders. Similarly we can also prepare ordered-bulleted-list and unordered-bulleted-list in HTML, using <OL> & </OL> and <UL> & </UL> tags. The HTML code for this is,

    <HTML>
    <HEAD>
    <TITLE> My Homepage </TITLE>
    </HEAD>
    <BODY>
    <FONT FACE="trebuchet ms" SIZE="2" COLOR="#FF0000">
    This is my first web page prepared using HTML.
    </FONT>
    <U> This is underlined text. </U>
    <B> This is bold text. </B>
    <OL>
    <LI> First ordered element.
    <LI> Second ordered element.
    </OL>
    <UL>
    <LI> First unordered element.
    <LI> Second unordered element.
    </UL>
    </BODY>
    </HTML>

    The most important and sophisticated feature of HTML is the creating links. The remote and local file-name with/without path consideration are similar to the <IMG SRC="file-name with path"> tag. We can create links in the HTML page, using following tag,

    <A HREF="file-name with path"> Linked Text </A>


    A Complete example

    HTML Code (indentation is optional)

    <HTML>
    <HEAD>
        <TITLE> My Homepage </TITLE>
    </HEAD>
    <BODY>
        <FONT FACE="trebuchet ms" SIZE="2" COLOR="#FF0000">
            This is my first web page prepared using HTML.
        </FONT>
        <TABLE BORDER BORDERSIZE="1">
            <CAPTION> HTML Table </CAPTION>
            <TR>
                <TD> Cell-1 </TD>
                <TD> Cell-2 </TD>
            </TR>
            <TR>
                <TD> Cell-3 </TD>
                <TD> Cell-4 </TD>
            </TR>
        </TABLE> <BR>
        <U> This is underlined text. </U>
        <B> This is bold text. </B>
        <OL>
            <LI> First ordered element.
            <LI> Second ordered element.
        </OL>
        <UL>
            <LI> First unordered element.
            <LI> Second unordered element.
        </UL>
        <A HREF="http://khatri-krishna.mail.everyone.net"> Linked Text </A>
    </BODY>
    </HTML>

    HTML Output (Web page)


    There are some prelims, that you must consider while preparing HTML pages. These are listed hereunder,

  • Always type the HTML code in an editor, in which the formatting is not allowed like MS Notepad (found under Start > Program > Accessories > Notepad. You may use a freeware application such as  Kotepad (that I wrote) for this purpose also.
     

  • Save the HTML code file with the extension as .htm or .html. This is a good practice to follow the MS DOS's 8.3 convention and save the file with .htm extension.
     

  • When you are not sure of the path of the file, specify the complete path (absolute).
     

  • HTML is case insensitive that means <TABLE>, <tABle>, <Table> and <table> are all similar.
     

  • Open the HTML page in the browser (Microsoft Internet Explorer, Netscape Communicator, HotJava etc.) using File > Open. (Here you should locate the .htm file, that you prepared recently.)
     

  • You should open the .htm code file in Notepad and in browser at the same time so that you can frequently shift between the two and test your work with key-combination of <Alt> + <Tab>.


  • All rights reserved. Copyright © 1999 - . Krishna Kumar Khatri.
    Best viewed with Microsoft IE 6 or later, under 800x600 resolution with True Color (24-bit).