HTML Quick Tutorial

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:

<html>

<body>

This is the body

</body>

</html>

Heading

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

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>

Lists

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:

<UL>

<LI>Apple

<LI>Banana

<LI>Grapes

</UL>

The Lists can be nested.

Example Script:

<OL>

<LI>First Item

<UL>

<LI>Fan

<LI>Bulbs

<LI>Heater

</UL>

<LI>Second Item

<UL>

<LI>Tomato

<LI>Potato

<LI>Onion

</UL>

</OL>

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

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

Example Script:

<DL>

<DT>Protocol

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

<DT>Network

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

</DL>

Anchors

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.

URL’s

Mail Address

<a href=”mailto:apple@banana.com”>Email Name</a>

Images

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

Tables

Table could be understood using the script

Example Script:

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

<tr>

<th>First Cell</th>

<th>Second Cell </th>

</tr>

<tr>

<td>First Data</td>

<td>Second Data</td>

</tr>

</table>

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

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

<HTML>

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

</FRAMESET>

</HTML>

Base and Target

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

File: main1.html

<HTML>

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

</FRAMESET>

</HTML>

File: File1.html

<HTML>

<HEAD>

</HEAD>

<BODY>

<p>Click on the Image name

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

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

</BODY>

</HTML>

Cascaded Style Sheets

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

Example Script:

<head>

body{color: red; background: yellow;}

</style>

</head>

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

Example Script:

<head>

</head>

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:

· http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html - HTML Primer

· http://www.paynefamilyreunion.com/tutorial/htmlframe.html - Frames, Base and Target

· http://www.w3.org/MarkUp/Guide/Style - Cascaded Style Sheets

· http://www.htmlhelp.com/reference/css/style-html.html - Cascaded Style Sheets

· http://www.two-dogs.com/CSM_Class_Pages/CIM_315/CIM_315_Handouts/dhtml_tut1.pdf - Dynamic HTML

HTML Quick Tutorial

Zahid Ghadialy May 2002

Heading

Paragraphs

Preformatted Text

Lists

Anchors

URL’s

Mail Address

Images

Tables

Test Table

Frames

File: main.html

Base and Target

File: main1.html

File: File1.html

Cascaded Style Sheets

File: style.css

Dynamic HTML

Zahid Ghadialy
May 2002