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:

<html>

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

<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

<a href=”http://www.sitename.com”>Site name</a>

 

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:

<table border=3>

<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 COLS=”50%,*%” BORDER=”10” BORDERCOLOR=”BLUE”>

            <FRAME SRC=”File1.html”>

            <FRAME SRC=”File2.html”>

</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 COLS=”50%,*%” BORDER=”10” BORDERCOLOR=”BLUE”>

            <FRAME SRC=”File1.html”>

            <FRAME NAME = “viewWindow”>

</FRAMESET>

</HTML>

 

File: File1.html

<HTML>

<HEAD>

<BASE TARGET=”viewWindow”>

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

<style text=”text/css”>

             body{color: red; background: yellow;}

</style>

</head>

 

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

 

Example Script:

<head>

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

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

 

 





Back


HOME



About Us Careers Contribute Advertise






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