HTML Quick Tutorial

Zahid Ghadialy
May 2002


HTML Notes


The HTML tags are case insensitive.


Header and Body

Header is defined by <head> and </head>

The Title in the title bar is written inside the Header. The syntax is <title> </title>

The body begins with the syntax <body> </body>


Example Script:


<head><title>This is Test</title></head>


This is the body





HTML has six levels of headings. Level 1 is the biggest and level 6 is the smallest. The headings are written as <h1> </h1> to <h6> </h6>



Paragraphs are written as <p> </p>. You can define how the text should be defined as <p align=”justify”>


Preformatted Text

The preformatted text is output the way it is written. Pre-formatting is written as <pre> </pre>



There are 3 main types of lists. The Unnumbered list, Numbered (Ordered) list and Definition List.

The Unnumbered list is written in <UL> </UL>

The Ordered list is written as <OL> </OL>

Each item in the list has to be written as <LI> (List Item). Note there is no need for </LI>


Example Script:







The Lists can be nested.


Example Script:


<LI>First Item






<LI>Second Item








The Definition list is written as <DL> </DL>

For each item there is a Definition Term <DT> and Definition Description <DD>


Example Script:



<DD>Protocol is the means through which different devices on the network can talk to each other.


<DD>Connections of various computers and computing resources (like printers, etc) and devices that help connecting to the net (like routers, bridges, etc).




Anchors are used for linking another document from the current document. The anchors are written as <A HREF=”filename.html”> and </A>. The HREF stands for Hypertext reference.



<a href=””>Site name</a>


Mail Address

<a href=””>Email Name</a>



Images can be included using <img src=”filename.extension”>. The extension could be jpg, jpeg, gif, etc.



Table could be understood using the script


Example Script:

<table border=3>

<caption><h4>Test Table</h4></caption>


<th>First Cell</th>

<th>Second Cell </th>



<td>First Data</td>

<td>Second Data</td>




The output is as follows

Test Table

First Cell

Second Cell

First Data

Second Data


The <table> and </table> defines the table. Border = 0 would be no border. The size of border defines the thickness. <tr> is Table Row, <th> is Table Heading, <td> is Table Data. <Caption> is the Table caption.



Frames are always laid out in sets. The TAG is FRAMESET. The main file will have no body, just the Frameset. Also it will have address of the files to use in the frames. A basic example would be.


File: main.html


<HEAD><TITLE>Some title</TITLE></HEAD>


            <FRAME SRC=”File1.html”>

            <FRAME SRC=”File2.html”>




Base and Target

Base and Target are used generally along with the frames. See the example 


File: main1.html


<HEAD><TITLE>Some title</TITLE></HEAD>


            <FRAME SRC=”File1.html”>

            <FRAME NAME = “viewWindow”>




File: File1.html



<BASE TARGET=”viewWindow”>



<p>Click on the Image name

<a href=”image1.jpg”>Image 1</a><BR>

<a href=”image2.jpg”>Image 2</a><br>




Cascaded Style Sheets

Cascaded style sheets can be embedded in the HTML file like this


Example Script:


<style text=”text/css”>

             body{color: red; background: yellow;}




Instead of writing in the same file, css file could be written separately


Example Script:


<link type = “text/css” rel=”stylesheet” href=”style.css”>



File: style.css

body {margin-left: 10% ;margin-right: 10%;}

body {font-family: Verdana, sans-sarif;}


Dynamic HTML

DHTML consists of

·        HTML for creating the code

·        Cascading Style Sheets for defining the appearance

·        Javascript or VBScript to control the behaviour of page elements.



Further reference:

· - HTML Primer

· - Frames, Base and Target

· - Cascaded Style Sheets

· - Cascaded Style Sheets

· - Dynamic HTML





About Us Careers Contribute Advertise

Copyright ©2004-2018 3G4G.CO.UK. All rights reserved.
Contact zahidtg(at)yahoo(dot)com for further information