Page 1 of 47

HTML

HTML Introduction

HTML Elements

HTML Basic Tags

HTML Formatting

HTML Entities

HTML Links

HTML Frames

HTML Tables

HTML Lists

HTML Forms

HTML Images

HTML Background

HTML Colors

HTML Colorvalues

HTML Colornames

HTML Quick List

HTML Layout

HTML Fonts

HTML 4.0 Why

HTML Styles

HTML Head

HTML Meta

HTML URLs

HTML Scripts

HTML Attributes

HTML Events

HTML URL-encode

HTML Webserver

HTML Summary

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 2 of 47

HTML Introduction
What is an HTML file

HTML Elements
HTML documents are text files made up of HTML elements

HTML Basic Tags

Basic tags used in HTML

HTML Formatting
How to format text using HTML

HTML Entities
Characters which have a special meaning in HTML

HTML Links
How to create and use links in an HTML document

HTML Frames
How to display more than one Web page in the same browser window

HTML Tables
Tables in an HTML document

HTML Lists
HTML supports ordered, unordered and definition lists

HTML Forms
HTML forms are used to select different kinds of user input

HTML Images
Displaying images in a document with HTML

HTML Background
Give a good background to make a Web site look great

HTML Colors
How to use colors in HTML

HTML Color values

HTML colors are defined using a hexadecimal notation

HTML Color names

On this page you will find a table of color names that are supported by most browsers.

HTML Quick List

HTML quick list from Us

HTML Layout
What is a layout in HTML

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 3 of 47

HTML Fonts
The tag is used to add style, size, and color to the text on your site

HTML 4.0 Why

Why use HTML 4.0?
HTML Styles
How to use styles

HTML Head
The head element in HTML

HTML Meta
The meta element

HTML URLs
HTML Uniform Resource Locators

HTML Scripts
Add scripts to HTML pages to make them more dynamic and interactive

HTML Attributes
HTML 4.0 standard attributes

HTML Events
HTML 4.0 event attributes

HTML URL-encode
HTML URL-encoding reference

HTML Web Server

How to publish your work

HTML Summary
Summary

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 4 of 47

Introduction to HTML

What is an HTML File?

HTML stands for Hyper Text Markup Language An HTML file is a text file containing small
markup tags The markup tags tell the Web browser how to display the page An HTML file must
have an htm or HTML file extension An HTML file can be created using a simple text editor

File extension: .HTML, .htm

MIME type: text/HTML
Type code: TEXT
Uniform Type Identifier: [Link]
Developed by: W3C
Type of format: markup language
Extended to: XHTML
Standard(s): W3C HTML 4.01

What Is Markup Language

A markup language combines text and extra information about the text.
The extra information, for example about the text's structure or presentation, is expressed
using markup, which is intermingled with the primary text. The best-known markup language
in modern use is HTML (HyperText Markup Language), one of the foundations of the World
Wide Web. Historically, markup was (& is) used in the publishing industry in the
communication of printed work between authors, editors, and printers.

Creating an HTML document

Creating an HTML document is very easy. To begin coding HTML, need only two things: a
simple-text editor! Notepad is the most basic of simple-text editors and you will probably code
a good amount of HTML with it.

HTML is platform independent; you will need to save your HTML files in standard text format,
sometimes known as ASCII. The easy way to do this is use a program like [Link] in
Windows, pico in Linux, and the like.
If you'd prefer to use a word processor like Word or WordPerfect to write HTML code, you can
do so, but need to save your files as "Text" or "Text Only. " You will see this option in a drop
down box in your "Save As..." screen.

If you use a word processor and forget to save it as Text format, you will see only
garbled data when you try to view the page with a web browser.

The Most Common Mistake

The most common mistake for designers is the urge to put the d:\ in links and images. When
you are on the web, there is no d:\ to the rest of the world. When you start out, keep all your
HTML files and images in one folder, and don't use d:\ at all.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 5 of 47

Quick example:

<img> loads an image into a web page. If you have a file called [Link], use the code <img
src="[Link]"> to load it, not <img src="c:\My Documents\website\[Link]">

Frequently Asked Questions

» What is HTML?

HyperText Markup Language: HTML is a plain text file with commands <markup tags> to tell
Web browsers how to display the file. Tim Berners-Lee created HTML while at CERN, (the
European Laboratory for Particle Physics) in Geneva.

» My page looks good on one browser, but not on another.

There are slight differences between browsers, such as Netscape Navigator and Microsoft
Internet Explorer, in areas such as page margins. The only real answer is to use standard
HTML tags whenever possible, and view your pages in multiple browsers to see how they look.

» Does my computer have to run Windows? What about a Mac?

You can do all your training on a non-Windows computer like a Mac. However, some of the
examples in our advanced classes require a newer version of Windows.

» How do I know if my HTML is correct?

It's good to validate your HTML. Just because you can see the Web page ok on your browser
doesn't mean every browser will show it that way or even be able to access the Web page.
Browsers attempt to "work around" HTML errors, and the differences can be subtle or drastic.
That's why the folks at WC3 have worked up the specifications of what works for every
browser. Although some may display it a little different, at least you know they can access
your page. (The different browser programs have their own set of "whistles and bells" that just
won't do the same... especially Microsoft Internet Explorer and Netscape Navigator.)

» After I have edited an HTML file, I cannot view the result in my browser.
Why?

Make sure that you have saved the file with a proper name and extension like
"c:\[Link]". Also make sure that you use the same name when you open the file in your
browser.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 6 of 47

HTML Elements

What Is An HTML Element

An HTML element indicates structure in an HTML document and a way of arranging content
hierarchically. An HTML element is an SGML element that meets the requirements of one or
more of the HTML DTDs (Document Type Definitions). These elements have properties: both
attributes and content, as specified (both allowable and required) according to the appropriate
HTML DTD. Elements may represent paragraphs, headings, hypertext links, lists, embedded
media, and a variety of other structures.

Syntactically HTML elements are constructed with:

1) a start tag marking the beginning of an element;

2) any number of attributes (and their associated values);
3) some amount of content (characters and other elements)'; and
4) an end tag.

Many HTML elements include attributes in their start tags. Attributes are defining desired
behavior or indicating additional element properties. The end tag is optional for many
elements. There are a few elements that are not part of any official DTDs, yet are supported
by some browsers and used by some web pages. Such elements may be ignored or displayed
improperly on browsers not supporting them.

HTML Tags

Informally, HTML elements are sometimes referred to as "tags", though many prefer the term
tag strictly in reference to the semantic structures delimiting the start and end of an element.

• HTML tags are used to mark-up HTML elements

• HTML tags are surrounded by the two characters < and >

• The surrounding characters are called angle brackets

• HTML tags normally come in pairs like <i> and </i>

• The first tag in a pair is the start tag(<i>), the second tag is the end tag(</i>)

• The element content is the text between the start and end tags

• HTML tags are not case sensitive, <b> means the same as <B>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 7 of 47

Why do We Use Lowercase Tags?

Start using lowercase tags, if you want to prepare yourself for the next generations of HTML.
The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4
recommendation, and XHTML - the next generation HTML - demands lowercase tags.

HTML Basic Tags

<HTML>
This tag is used to indicate that this is an HTML document. Most HTML documents should start
and end with this tag.

<head>
This tag is used to indicate the header section of the HTML document, which typically includes
the <title> and <meta> tags, and is not displayed in the main window of the browser.

<title>

This tag indicates the title of this HTML page. The title is what is displayed on the upper left
corner of the browser when you view a web page. The title tag is important when it comes to
search engine ranking. Many of the search engines pay special attention to the text in the
<title> tag. This is because (logically) that words in the <title> tag indicate what the page
content is.

<meta>
The <meta> tag information is not directly displayed when the page is rendered on the
browser. Rather, this is used for the author of the HTML page to record information related to
this page. Two common attributes are name and content. The <meta> tag used to hold
great importance in search engine optimization, with authors carefully drafting what's inside
the tag to gain better search engine ranking, but recently its importance has been decreasing
steadily.

<body>
The <body> tag includes the HTML body of the document. Everything inside the <body> tag
(other than those within the <script> tag) is displayed on the browser inside the main browser
window.
The <body> tag may contain several attributes. The most commonly used ones are listed
below:

• bgcolor: This is the background color of the entire HTML document, and may be
specified either by the color name directly or by the six-digit hex code.
• alink: The color of the links.
• vlink: The color of the visited links.
• topmargin: The margin from the top of the browser window.
• leftmargin: The margin from the left of the browser window.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 8 of 47

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading.

Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help you
when you edit the source code at a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing
bracket.

HTML Formatting

<font>
The <font> tag is used to change the format of the text on the web page. The most important
attributes are as follows:

face: The type of font. Common ones include "Time New Roman", "Verdana", and "Helvetica."
size: This indicates the size of the text. This can be absolute (0 .. 6), or relative ("+1", ... or
"-1",...)
color: This attribute indicates the color of the text. Either the color name or the six-character
color code may be used to specify color.
<font size=2 face="Helvetica" color=red>This illustrates the attributes of the font tag.</font>

Text Formatting Tags

<b>

The <b> tag will bold the text inside the tag.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 9 of 47

<i>

The <i> tag will italicize the text inside the tag.

<u>

The <u> tag will underline the text inside the tag.

<center>

The <center> tag causes all the text within the tag to be centered.

<p>

The <p> tag indicates a new paragraph. It is the same as <br><br>. This tag is most often
used by itself, without a corresponding closing tag.

<big>

Defines big text

<em>

Defines emphasized text

<small>

Defines small text

<strong>

Defines strong text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

<ins>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 10 of 47

Defines inserted text

<del>

Defines deleted text

"Computer Output" Tags

<code>

Defines computer code text

<kbd>

Defines keyboard text

<samp>

Defines sample computer code

<tt>

Defines teletype text

<var>

Defines a variable

<pre>

Defines preformatted text

HTML Character Entities

• Some characters like the < character, have a special meaning in HTML, and therefore
cannot be used in the text.

• An entity is a fancy term for a symbol. Several symbols such as copyright, trademark,
or foreign cash symbols exist outside of the ones you see on your keyboard. In order
to display them. In order to display these characters, you need to know 4 parts.

• In HTML we use less than and greater than characters to create tags, so to use them
on your web site you will need entities.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 11 of 47

A Character Entity has three parts:

• Each begins with an ampersand - &

• An entity name or a # and an entity number

• And finally a semicolon - ;

HTML Links

• A link is a connection from one Web resource to another

• A link has two ends (anchors) and a direction.

• The link starts at the "source" anchor and points to the "destination" anchor,
which may be any Web resource (e.g., an image, a video clip, a sound bite, a
program, an HTML document, an element within an HTML document, etc.).

The Anchor Tag and the Href Attribute

HTML uses the anchor (<a>) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a
movie, etc. The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the
document to link to, and the words between the open and close of the anchor tag will be
displayed as a hyperlink.

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. We can create links that can jump
directly into a specific section on a page, using named anchors instead of letting the user scroll
around to find what he/she is looking for. Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

To create a named anchor the name attribute is used. The name of the anchor can be any text
you care to use. The line below defines a named anchor:

<a name="main">Main Section</a>

You should notice that a named anchor is not displayed in a special way.
To link directly to the a section, add a # sign and the name of the anchor to the end of a URL,
like this:
<a href="[Link] Jump to the Main Section</a>

A hyperlink to the Main Section from within the file "[Link]" will look like this:
<a href="#main">Jump to the Main Section</a>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 12 of 47

The Target Attribute

With the target attribute, you can define where the linked document will be
opened.
The line below will open the document in a new browser window:

Below is the syntax of a named anchor:

<a href="[Link] target="_blank">Visit IUB</a>

HTML Frames
• With frames, you can display more than one Web page in the same browser
window.

• Frames allow for multiple ".HTML" documents to be displayed inside one

browser window at a time.

Frames - A Generic Frame Page

Most typically frames are used to have a menu in one frame, and content in another
frame. When someone clicks a link on the menu then that web page is opened on the
content page.
Here is an example of a basic "index" frameset with a menu on the left and content on the
right.

<HTML> <head> </head>

<frameset rows="20%,*">
<frame src="[Link]">
<frameset cols="30%,*">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
</HTML>

Using frames, You can display more than one HTML document in the same browser window.
Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:

• The web developer must keep track of more HTML documents

• It is difficult to print the entire page

The Frameset Tag

• The <frameset> tag defines how to divide the window into frames
• Each frameset defines a set of rows or columns
• The values of the rows/columns indicate the amount of screen area each row/column
will occupy

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 13 of 47

The Frame Tag

• The <frame> tag defines what HTML document to put into each frame

In the below example we have a frameset with two columns. The first column is set to 25% of
the width of the browser window. The second column is set to 75% of the width of the browser
window. The HTML document "frame_x.htm" is put into the first column, and the HTML
document "frame_y.htm" is put into the second column:

<frameset cols="25%,75%">
<frame src="frame_x.htm">
<frame src="frame_y.htm">
</frameset>

HTML Tables
The HTML table model allows authors to arrange data -- text, preformatted text,
images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.

Tables

• Tables are defined with the <table> tag.

• A table is divided into rows (with the <tr> tag), and
• each row is divided into data cells (with the <td> tag).
• The letters td stands for "table data," which is the content of a data cell.
• A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables,
etc.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2p</td>
</tr>
</table>

Headings in a Table
Headings in a table are defined with the <th> tag.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2p</td>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 14 of 47

</tr>
</table>

Tables and the Border Attribute

The table will be displayed without any borders if you do not specify a border attribute.
Sometimes this can be useful, but most of the time, you want to show the borders. To display
a table with borders, you will have to use the border attribute:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>

Spanning Multiple Rows and Cells

Use rowspan to span multiple rows & colspan to span multiple columns. To display a table
with borders, you will have to use the border attribute:

<table border="1">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td rowspan="2">row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
<tr>
<td colspan="3">row 3, cell 1</td>
</tr>
</table>

O/P:
column1
column2
column3
row 1, cell 1
row 1, cell 2
row 1, cell 3

row 2, cell 2
row 2, cell 3
row 3, cell 1

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 15 of 47

Cell Padding and Spacing

You will be able to adjust the white space on your tables with the cellpadding and cellspacing
attributes .
Padding represents the distance between cell borders and the content within, while spacing
defines the width of the border.
<table border="1">
<tr>
<td >row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

O/P: Table without Cell Padding and Spacing

row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2

<table border="1" cellspacing="10">

<tr>
<td >row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

O/P: Table with Cellspacing

row 1, cell 1
row 1, cell 2
row 2, cell 1
row 2, cell 2

<table border="1" cellpadding="10">

<tr>
<td >row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

O/P: Table with Cellpadding

row 1, cell 1
row 1, cell 2

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 16 of 47

row 2, cell 1
row 2, cell 2

HTML Lists
HTML offers authors several mechanisms for specifying lists of information

There are 3 different types of lists.

• <ul> - unordered list; bullets

• <ol> - ordered list; numbers
• <dl> - definition list; dictionary

Unordered Lists
An unordered list is a list of items. With bullets the list items are marked (typically small black
circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>list item1</li>
<li>list item2</li>
</ul>

In three flavors the bullet comes :

squares <ul type="square">
discs <ul type="disc">
circles <ul type="circle">
<ul type="square">
<li>list item1</li>
<li>list item2</li>
</ul>

O/P:

list item1

list item2

<ul type="disc">
<li>list item1</li>
<li>list item2</li>
</ul>

O/P:

• list item1
• list item2

<ul type="circle">
<li>list item1</li>
<li>list item2</li>
</ul>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 17 of 47

O/P:

o list item1
o list item2

Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.

An unordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>list item1</li>
<li>list item2</li>
</ol>

O/P:

1. list item1
2. list item2

Using the start attribute start your ordered list on any number besides 1.
<ol start="4" >
<li>list item1</li>
<li>list item2</li>
</ol>

O/P:

4. list item1
5. list item2

There are 4 other types of ordered lists. You can replace generic numbers with Roman
numberas or letters, both capital and lower-case. Use the type attribute to change the
numbering.
<ol type="a">
<li>list item1</li>
<li>list item2</li>
</ol>

O/P:

a. list item1
b. list item2

<ol type="A">
<li>list item1</li>
<li>list item2</li>
</ol>

O/P:

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 18 of 47

A. list item1
B. list item2

<ol type="i">
<li>list item1</li>
<li>list item2</li>
</ol>

O/P:

i. list item1
ii. list item2

<ol type="I">
<li>list item1</li>
<li>list item2</li>
</ol>

O/P:

I. list item1
II. list item2

Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms.

A definition list starts with the <dl> tag.

Each definition-list term starts with the <dt> tag.
Each definition-list definition starts with the <dd> tag.
<dl>
<dt>Definition list term1</dt>
<dd>Definition list definition1</dd>
<dt>Definition list term1</dt>
<dd>Definition list definition1</dd>
</dl>

O/P:
Definition list term1
Definition list definition1
Definition list term2
Definition list definition1

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 19 of 47

HTML Forms and Input

A form is simply an area that can contain form fields.
Form fields are objects that allow the visitor to enter information - for
example text boxes, drop-down menus or radio buttons.

Forms

An HTML form is a section of a document containing normal content, markup, special elements
called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users
generally "complete" a form by modifying its controls (entering text, selecting menu items,
etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail
server, etc.)

A form is defined with the <form> tag.

<form name="input" action="HTML_form_action.asp" method="get">
<input type="text" name="user">
<input type="submit" value="Submit" >
</form>

Form's Action Attribute

This attribute specifies a form processing agent. User agent behavior for a value other than an
HTTP URI is undefined.

When the user clicks on the "Submit" button, the content of the form is sent to another file.
The form's action attribute defines the name of the file to send the content to. Usually the file
defined in the action attribute does something with the received input.

Form's Method Attribute

Method attribute specifies which HTTP method will be used to submit the form data set.
Possible (case-insensitive) values are "get" (the default) and "post".

One can specify two different submission methods for a form in HTML. The difference between
METHOD="GET" (the default) and METHOD="POST" is primarily defined in terms of form data
encoding. The official recommendations say that "GET" should be used if and only if the form
processing is idempotent, which typically means a pure query form. Generally it is advisable to
do so. There are, however, problems related to long URLs and non-ASCII character repertoires
which can make it necessary to use "POST" even for idempotent processing.

get: With the HTTP "get" method, the form data set is appended to the URI specified by the
action attribute (with a question-mark ("?") as separator) and this new URI is sent to the
processing agent.

post: With the HTTP "post" method, the form data set is included in the body of the form and
sent to the processing agent.

enctype

This attribute specifies the content type used to submit the form to the server (when the value
of method is "post"). The default value for this attribute is "application/x-www-form-url

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 20 of 47

encoded". The value "multipart/form-data" should be used in combination with the INPUT
element, type="file".

Input

The most used form tag is the <input> tag. The type of input is specified with the type
attribute.

Text Fields
Text fields are used when you want the user to type something (letters, numbers, etc.) in a
form. In most browsers, by default the width of the text field is 20 characters.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>

O/P:

First name:

Last name:

Password Fields
Password fields are a special type of <input /> tag. All that we need to do is change the type
attribute from text to password.
<form>
<input type="password">
<input type="password" size="5" maxlength="5">
<input type="password" size="15" maxlength="15" >
<input type="password" size="25" maxlength="25" >
</form>

O/P:

Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 21 of 47

O/P:

Male

Female

Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited
number of choices.
<form>
<input type="checkbox" name="bike"> Bike
<br>
<input type="checkbox" name="car"> Car
</form>

O/P:

Bike

Car

Textarea

A text-area is a multi-line text input control. A user can write text in the text-area. In a text-
area you can write an unlimited number of characters.

Rows and columns need to be specified as attributes to the <textarea> tag. Rows are
roughly 12pixels high, the same as in word programs and the value of the columns reflects
how many characters wide the text area will be.

Another attribute to be aware of is the wrap. Wrap has 3 values.

wrap=
"off"
"virtual"
"physical"

Virtual means that the viewer will see the words wrapping as they type their comments, but
when the page is submitted to you, the web host, the document sent will not have wrapping
words.

Physical means that the text will appear both to you, the web host, and the viewer including
any page breaks and additional spaces that may be inputed. The words come as they are.

Off turns off word wrapping within the text area. One ongoing line.

<form>
<textarea rows="5" cols="20" wrap="physical" name="comments">
Enter Comments Here
</textarea>
</form>

O/P:

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 22 of 47

Drop Down Lists

With the <select> and <option> tags drop down menus are created.
<select> is the list itself and each <option> is an available choice for the user.

<form>
<select name="ourSites">
<option>[Link]</option>
<option>[Link]</option>
<option>[Link]</option>
<option>[Link]</option>
<option>[Link]</option>
<option>[Link]</option>
<option>[Link]</option>
</select>
</form>

O/P:

Selection List

Selection list is basically just another type of way to get input from the user.
The size attribute selects how many options will be shown at once before needing to scroll,
and the selected option tells the browser which choice to select by default.

<form>
<select multiple name="ourSites" size="4">
<option>[Link]</option>
<option>[Link]</option>
<option>[Link]</option>
<option>[Link]</option>
<option>[Link]</option>
<option>[Link]</option>
<option>[Link]</option>
</select>
</form>

O/P:

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 23 of 47

vyomw [Link]
testsw [Link]
[Link]
[Link]

Submit Button

The submit button will send all input form data to the destination declared in the form action
command. If you do not give your submit button a value the button will display Submit Query
by default. Placing any other text in the value will display within the button.

<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
<br>
<input type="submit" value="Submit Here">
</form>

O/P:

First name:

Last name:

Submit Here

HTML Images

Placing An Image On Your Page

Here's the format for placing an image:
<IMG SRC="[Link]" ALT="some text" >

Here's What's Happening

IMG
IMG stands for "image."

It announces to the browser that an image will go here on the page. Yes, the image will pop
up right where you write in the image tag.

SRC

SRC stands for "source." This again is an attribute, a command inside a command. The value
of the src attribute is the URL of the image you want to display on your page. It's telling the
browser where to go to find the image. Again, it's best for you to place the images you want
to use in the same directory as the page. This way you can call for the image by name alone.
If you start to place your images all over the place, you'll have to start adding directories and
sub-directories to the SRC attribute. And at this point, that is way too confusing. Just place

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 24 of 47

the image in the same place as the HTML document that will call for it and then call for the
image by name alone. You can get fancy later. Right now, let's just get it to work.

[Link]

[Link] is the name of the image. Notice it's following the same type of format as your
HTML documents. There is a name (image) then a dot and then there is a suffix (gif).

ALT

ALT stands for "alternate text". This tells the browser that if it can't find the image, then just
display this text. It also tells anyone who can't view your image what the image is about. For
example a disabled user using a screen reader, or dare I mention it, Search Engines.

"some text"
"some text" is where you put the text describing your image.

Image Formats
There are four basic formats you will find on the World Wide Web
.gif

gif This is pronounced "jif" or "gif" (hard "G") depending on whom you speak to. I have
always said "jif", like the peanut butter. This is an acronym for Graphics Interchange Format.
The format was invented by CompuServe and it's very popular. The reason is that it's a simple
format. It's a series of colored picture elements, or dots, known as pixels, that line up to make
a picture. Your television's picture is created much the same way. Browsers can handle this
format quite easily.

.png

.png .png Pronounced as 'ping', this stands for Portable Network Graphic. This is ultimately
the replacement for .gif, with partial transparency options, but browser support is sometimes
disappointing, so try experimenting but don't expect miracles in older browsers! Even some of
the newer ones don't like partial transparency.

.jpeg or .jpg

.jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the
PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint
Photographic Experts Group, the organization that invented the format. The format is unique
in that it uses compression after it's been created. That's fancy computer talk that means that
when the computer is not using a .jpeg image it folds it up and puts it away. For example, if
the picture is 10K bytes when displayed, it may be only 4K bytes when stored. Nice trick, huh?
It saves on hard drive space, but also tends to require a bit of memory on your part to unfold
the image. Someone always writes to me to tell me that .gif images also use compression.
Yes, they do, but only when they are first created into that format. After that, no compression.
JPEG, on the other hand, uses compression throughout its life to fold up smaller than it really
is.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 25 of 47

.bmp

.bmp (pronounced "bimp") This is a "bitmap." You will probably never place a bitmap as an
image, although now Internet Explorer browsers allow it. A bitmap is an image that a
computer produces and places for you. A counter is an example.
Even though Internet Explorer will allow you to place an image as a BMP, I wouldn't. No other
browsers will be able to display it. Go with .gif or JPEG.

HTML Backgrounds

Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can
be a color or an image.

Bgcolor
This attribute specifies a background-color for an HTML page. The value of this attribute can
be a hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

The lines above all set the background-color to black.

Background
The background attribute specifies a background-image for an HTML page. The value of this
attribute is the URL of the image you want to use. If the image is smaller than the browser
window, the image will repeat itself until it fills the entire browser window.
<body background="[Link]">
<body background="[Link]

The URL can be relative (as in the first line above) or absolute (as in the second line above).

HTML Colors

Color Values

Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue
color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The
highest value is 255 (hex #FF).

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 26 of 47

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 27 of 47

RGB Values

RGB stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255
(fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies.

We do not recommend that you use RGB for safe web design because non-IE browsers do not
support HTML RGB. However, if you plan on learning CSS then you should glance over this
topic.

bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue
bgcolor="rgb(0,0,0)" Black

Hexadecimal

Hexadecimals are far more reliable and widely compatible among web browsers and are the
standard for colors on the internet.

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red
value, the next two are a green value(GG), and the last are the blue value(BB).

Hex numbers use 16 digits:

0123456789ABCDEF

Zero, "0", is the smallest representations of a color. It's almost the total absence of color. F is
15 times the intensity of the color of 0. Combinations of these digits create different shades of
a particular color. Double Zero, "00," is equal to zero hue. FF is equal to a pure color.

This color representation is done three times, once for red, once for green, and once for blue,
in that order. Put the three, two-digit, codes together and you get a 6-digit hex code. The hex
code is just a representation of the red, green, and blue intensity, in that order. The computer
creates the three intensities, mashes them together, and you get a single shade of color.

Color Names

Colors can be defined using color names also.

The 16 Basic Colors:

Black Gray Silver White

Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 28 of 47

HTML Color Values

Color Values

HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and
Blue color values (RGB). The lowest value that can be given to one of the light sources is 0
(hex #00). The highest value is 255 (hex #FF).

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 29 of 47

HTML Color Names

HTML Color Names

The table below provides a list of color names.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 30 of 47

HTML 4.01 Quick List

HTML Basic Document <HTML>

<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</HTML>

Heading Elements <h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Text Elements <p>This is a paragraph</p>

<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles <em>This text is emphasized</em>

<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles <b>This text is bold</b>

<i>This text is italic</i>

Links, Anchors, and Image Elements <a href="[Link] is a

Link</a>
<a href="[Link] src="URL" alt="Alternate Text"></a>
<a href="[Link] e-mail</a>

A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

Unordered list <ul>

<li>First item</li>
<li>Next item</li>
</ul>

Ordered list<ol>
<li>First item</li>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 31 of 47

<li>Next item</li>
</ol>

Definition list <dl>

<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Frames

<frameset cols="25%,75%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>

Forms

<form action="[Link] method="post/get">

<input type="text" name="lastname" value="Nixon" size="30"

maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 32 of 47

<textarea name="Comment" rows="60" cols="20"></textarea>

</form>

Entities &lt; is the same as <

&gt; is the same as >
&#169; is the same as ©

Other Elements

<!-- This is a comment -->

<blockquote>
Text quoted from some source.
</blockquote>

<address>
Address 1<br>
Address 2<br>
City<br>
</address>

HTML Layout

HTML Layout - Using Tables

One very common practice with HTML, is to use HTML tables to format the layout of an HTML
page. An HTML <table> is used to divide a part of this Web page into two columns. The trick
is to use a table without borders, and maybe a little extra cell-padding. No matter how much
text you add to the page, it will stay inside its column borders.

<table width="10%" cellpadding="10">

<tr>
<td>
Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1
Content1 Content1 Content1
</td>
<td>
Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2
Content2 Content2 Content2
</td>
</tr>
</table>

O/P:
Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1
Content1 Content1
Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2
Content2 Content2

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 33 of 47

Same Layout - Color Added

<table width="10%" cellpadding="10">
<tr>
<td>
Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1
Content1 Content1 Content1
</td>
<td bgcolor="yellow">
Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2
Content2 Content2 Content2
</td>
</tr>
</table>

O/P:
Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1 Content1
Content1 Content1
Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2 Content2
Content2 Content2

HTML Fonts
The <font> tag is used to add style, size, and color to the text on your site. Use the
size, color, and face attributes to customize your fonts. Use a <basefont> tag to set
all of your text to the same size, face, and color.

The <font> tag in HTML is deprecated. It is supposed to be removed in a future

version of HTML.

Even if a lot of people are using it, you should try to avoid it, and use styles instead.

The HTML <font> Tag

This tag is used to add style, size, and color to the text on your site. Use the color, size, and
face attributes to customize your fonts. Use a <basefont> tag to set all of your text to the
same size, face, and color.
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="4" face="Times" color="Red">
This is another paragraph.
</font>
</p>

O/P:

This is a paragraph.

This is another paragraph.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 34 of 47

Font Attributes

Attribute Example Purpose

size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color

Why use HTML 4.0 ?

HTML 3.2 Was Very Wrong !

The original HTML was never designed to contain tags for formatting a document. HTML tags
were intended to define the content of the document like:

<p>This is a paragraph</p>

<h1>This is a heading</h1>

When color attributes and tags like <font> were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large web sites where fonts and color
information had to be added to every single Web page, became a long, expensive and difficult
process.

Great About HTML 4.0 ?

All formatting can be removed from the HTML document and stored in a separate style
sheet in HTML 4.0 .

Because it separates the presentation from the document structure in HTML 4.0, we have what
we always needed: Total control of presentation layout without messing up the document
content.

What Should You do About it ?

Do not use presentation attributes inside your HTML tags if you can avoid it. Start using
styles!

Do not use deprecated tags.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 35 of 47

Prepare Yourself for XHTML

XHTML is the "new" HTML. Start writing valid HTML 4.01. Also start writing your tags in lower
case. Always close your tag elements. Never end a paragraph without </p>.

The official HTML 4.01 recommends the use of lower case tags.

HTML Styles

All formatting can be moved out of the HTML document and into a separate
style sheet with HTML 4.0.

How to Use Styles

When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:

External Style Sheet

When the style is applied to many pages an external style sheet is ideal. Using an external
style sheet, you can change the look of an entire Web site by changing one file. Each page
must link to the style sheet using the <link> tag. The <link> tag goes inside the head
section.
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>

Internal Style Sheet

When a single document has a unique style an internal style sheet should be used. You define
internal styles in the head section with the <style> tag.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

Inline Styles
When a unique style is to be applied to a single occurrence of an element an inline style
should be used.

To use inline styles, use the style attribute in the relevant tag. The style attribute can contain
any CSS property. The example shows how to change the color and the left margin of a
paragraph:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 36 of 47

Style Tags

Tag Description
<style> Defines a style definition
<link> Defines a resource reference
<div> Defines a section in a document
<span> Defines a section in a document
<font> Deprecated. Use styles instead
<basefont> Deprecated. Use styles instead
<center> Deprecated. Use styles instead

HTML Head
Within <HTML>, the document has two sections to it: <HEAD> and <BODY
...>.

<HEAD> is like the cover page of the document.

Just as the cover page of a book contains information about the book (such
as the title), the <HEAD> section contains information about the document.

This information is communicated through the <TITLE> tag (which is

required) and the <LINK ...> and <META ...> tags.

The title information inside a head element is not displayed in the browser
window.

Information Inside the Head Element

The head element contains general information, also called meta-information, about a
document. Meta means "information about".

The elements inside the head element should not be displayed by a browser.

According to the HTML standard, only a few tags are legal inside the head section.
These are: <base>, <link>, <meta>, <title>, <style>, and <script>.
<head>
<title>My page title</title>
</head>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 37 of 47

Head Tags

Tag Description
<head> Defines information about the document
<title> Defines the document title
<base> Defines a base URL for all the links on a page
<link> Defines a resource reference
<meta> Defines meta information

Tag Description
<!DOCTYPE> Defines the document type. This tag goes before the <HTML> start
tag.

HTML Meta
The purpose of the meta element is to provide meta-information about the
document.

Meta tags are used to supply information for search engines that will not be
seen by the web surfer unless they were to view your web site's HTML.

In the past, meta tags were a primary way for the site to be recognized by
web spiders, but the internet community abused the meta tags to artificially
increase their ranking in the search engine databases.

Keywords for Search Engines

To index your pages some search engines on the WWW will use the name and content
attributes of the meta tag.

This meta element defines a description of your page:

<meta name="description" content="Web contents on HTML, CSS, XML, and XHTML">

This meta element defines keywords for your page:

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

The intention of the name and content attributes is to describe the content of a page.
However, some search engines have stopped using them entirely, since too many webmasters
have used meta tags for spamming, like repeating keywords to give pages a higher ranking.

Unknown Meta Attributes

Sometimes you will see meta attributes that are unknown to you like this:
<meta name="security" content="low" >

Then you just have to accept that this is something unique to the site or to the author of the
site, and that it has probably no relevance to you.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 38 of 47

HTML Uniform Resource Locators

The web got its spidery name from the plentiful connections between web
sites.

These connections are made using anchor tags to create links.

Text, Images, and Forms may be used to create these links.

HTML Links
In an HTML document when you click on a link, an underlying <a> tag points to a place (an
address) on the Web with an href attribute value like this: <a href="[Link]">Last
Page</a>.

Hypertext Reference (href)

The href -Hypertext Reference- attribute defines reference that the link refers to. Basically this
is where the user will be taken if they wish to click this link.

Hypertext references can be Internal, Local, or Global.

• Internal - Links to anchors on the current page

• Local - Links to other pages within your domain
• Global - Links to other domains outside of your site

Internal - href="#anchorname"
Local - href="../pics/[Link]"
Global - href="[Link]

Uniform Resource Locators

Something called a Uniform Resource Locator (URL) is used to address a document (or other
data) on the World Wide Web. A full Web address like this:

[Link] follows these syntax rules:

scheme://[Link]:port/path/filename

The scheme is defining the type of Internet service. The most common type is http.
The domain is defining the Internet domain name like [Link].
The host is defining the domain host. If omitted, the default host for http is www.
The :port is defining the port number at the host. The port number is normally omitted. The
default port number for http is 80.

The path is defining a path (a sub directory) at the server. If the path is omitted, the
resource (the document) must be located at the root directory of the Web site.
The filename is defining the name of a document. The default filename might be [Link],
or [Link] or something else depending on the settings of the Web server.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 39 of 47

URL Schemes
Some examples of the most common schemes can be found below:

Schemes Access
file a file on your local PC
ftp a file on an FTP server
http a file on a World Wide Web Server
gopher a file on a Gopher server
news a Usenet newsgroup
telnet a Telnet connection
WAIS a file on a WAIS server

Accessing a Newsgroup
The following HTML code:
<a href="news:[Link]">HTML Newsgroup</a>
creates a link to a newsgroup like this HTML Newsgroup. HTML Newsgroup

Link to your Mail system

The following HTML code:
<a href="[Link]
creates a link to your own mail system like this:
someone@[Link]

HTML Scripts

HTML Scripts
There are two popular scripts that are commonly used in HTML to make web pages come
alive. HTML javascript and HTML vbscript With HTML scripts you can create dynamic web
pages, make image rollovers for really cool menu effects, or even validate your HTML form's
data before you let the user submit.

Insert a Script into HTML Page

A script in HTML is defined with the <script> tag. To specify the scripting language you will
have to use the type attribute.

<HTML>
<head>
</head>
<body>
<script type="text/javascript">
[Link]("Hello World!")
</script>

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 40 of 47

</body>
</HTML>

The script above will produce this output:

Hello World!

How to Handle Older Browsers

A browser that does not recognize the <script> tag at all, will display the <script> tag's
content as text on the page. To prevent the browser from doing this, you should hide the
script in comment tags. An old browser (that does not recognize the <script> tag) will ignore
the comment and it will not write the tag's content on the page, while a new browser will
understand that the script should be executed, even if it is surrounded by comment tags.

Example
JavaScript:
<script type="text/javascript">
<!--
[Link]("Hello World!")
//-->
</script>

VBScript:
<script type="text/vbscript">
<!--
[Link]("Hello World!")
'-->
</script>

The <noscript> Tag

In addition to hiding the script inside a comment, you can also add a <noscript> tag.

The <noscript> tag is used to define an alternate text if a script is NOT executed. This tag is
used for browsers that recognize the <script> tag, but do not support the script inside, so
these browsers will display the text inside the <noscript> tag instead. However, if a browser
supports the script inside the <script> tag it will ignore the <noscript> tag.

JavaScript:
<script type="text/javascript">
<!--
[Link]("Hello World!")
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>

VBScript:
<script type="text/vbscript">
<!--
[Link]("Hello World!")
'-->

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 41 of 47

</script>
<noscript>Your browser does not support VBScript!</noscript>

Script Tags

Tag Description
<script> Defines a script
<noscript> Defines an alternate text if the script is not executed
<object> Defines an embedded object
<param> Defines run-time settings (parameters) for an object
<applet> Deprecated. Use <object> instead

HTML 4.0 Standard Attributes

To amplify tags attributes are used. What we mean by amplify is that when
a web browser interprets a tag, it will also search for set attributes and then
display the element (tags+attributes) in its entirety.

At some point you may want to give your body element a background color
or perhaps change the width or of a table. All of these things and more can
be achieved using Attributes.

The attributes listed here are the core and language attributes that are standard for all tags
(with a few exceptions):

Core Attributes
Not valid in base, HTML, head, meta, param, script, style, and title elements.

Attribute Value Description

class class_rule or style_rule The class of the element
id id_name A unique id for the element
style style_definition An inline style definition
title tooltip_text A text to display in a tool tip

Language Attributes
Not valid in base, br, hr, frame, frameset, iframe, param, and script elements.

Attribute Value Description

dir ltr | rtl Sets the text direction

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 42 of 47

lang language_code Sets the language code

Keyboard Attributes

Attribute Value Description

accesskey character Sets a keyboard shortcut to access an
element
tabindex number Sets the tab order of an element

HTML 4.0 Event Attributes

New to HTML 4.0 is the ability to let HTML events trigger actions in the
browser, like starting a JavaScript when a user clicks on an HTML element.

Below is a list of attributes that can be inserted into HTML tags to define
event actions.

Window Events
Only valid in body and frameset elements.

Attribute Value Description

onload script Script to be run when a document loads
onunload script Script to be run when a document unloads

Form Element Events

Only valid in form elements.

Attribute Value Description

onchange script Script to be run when the element changes
onsubmit script Script to be run when the form is submitted
onreset script Script to be run when the form is reset
onselect script Script to be run when the element is selected
onblur script Script to be run when the element loses focus
onfocus script Script to be run when the element gets focus

Keyboard Events
Not valid in base, bdo, br, frame, frameset, head, HTML, iframe, meta, param, script, style,
and title elements.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 43 of 47

Attribute Value Description

onkeydown script What to do when key is pressed
onkeypress script What to do when key is pressed and released
onkeyup script What to do when key is released

Mouse Events
Not valid in base, bdo, br, frame, frameset, head, HTML, iframe, meta, param, script, style,
title elements.

Attribute Value Description

onclick script What to do on a mouse click
ondblclick script What to do on a mouse double-click
onmousedown script What to do when mouse button is pressed
onmousemove script What to do when mouse pointer moves
onmouseout script What to do when mouse pointer moves out of an
element
onmouseover script What to do when mouse pointer moves over an
element
onmouseup script What to do when mouse button is released

HTML URL-encoding Reference

To display non-standard letters and characters in browsers and plug-ins
hexadecimal values can be used.

URL-encoding from %00 to %8f

ASCII URL- ASCII URL- ASCII URL-

Value encode Value encode Value encode
æ %00 0 %30 ` %60
%01 1 %31 a %61
%02 2 %32 b %62
%03 3 %33 c %63
%04 4 %34 d %64
%05 5 %35 e %65
%06 6 %36 f %66
%07 7 %37 g %67
backspace %08 8 %38 h %68
tab %09 9 %39 i %69
linefeed %0a : %3a j %6a

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 44 of 47

%0b ; %3b k %6b

%0c < %3c l %6c
c return %0d = %3d m %6d
%0e > %3e n %6e
%0f ? %3f o %6f
%10 @ %40 p %70
%11 A %41 q %71
%12 B %42 r %72
%13 C %43 s %73
%14 D %44 t %74
%15 E %45 u %75
%16 F %46 v %76
%17 G %47 w %77
%18 H %48 x %78
%19 I %49 y %79
%1a J %4a z %7a
%1b K %4b { %7b
%1c L %4c | %7c
%1d M %4d } %7d
%1e N %4e ~ %7e
%1f O %4f %7f
space %20 P %50 € %80
! %21 Q %51 %81
" %22 R %52 ‚ %82
# %23 S %53 ƒ %83
$ %24 T %54 „ %84
% %25 U %55 … %85
& %26 V %56 † %86
' %27 W %57 ‡ %87
( %28 X %58 ˆ %88
) %29 Y %59 ‰ %89
* %2a Z %5a Š %8a
+ %2b [ %5b ‹ %8b
, %2c \ %5c Π%8c
- %2d ] %5d %8d
. %2e ^ %5e Ž %8e
/ %2f _ %5f %8f

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 45 of 47

URL-encoding from %90 to %ff

ASCII URL- ASCII URL- ASCII URL-

Value encode Value encode Value encode
%90 À %c0 ð %f0
‘ %91 Á %c1 ñ %f1
’ %92 Â %c2 ò %f2
“ %93 Ã %c3 ó %f3
” %94 Ä %c4 ô %f4
• %95 Å %c5 õ %f5
– %96 Æ %c6 ö %f6
— %97 Ç %c7 ÷ %f7
˜ %98 È %c8 ø %f8
™ %99 É %c9 ù %f9
š %9a Ê %ca ú %fa
› %9b Ë %cb û %fb
œ %9c Ì %cc ü %fc
%9d Í %cd ý %fd
ž %9e Î %ce þ %fe
Ÿ %9f Ï %cf ÿ %ff
%a0 Ð %d0
¡ %a1 Ñ %d1
¢ %a2 Ò %d2
£ %a3 Ó %d3
%a4 Ô %d4
¥ %a5 Õ %d5
| %a6 Ö %d6
§ %a7 %d7
¨ %a8 Ø %d8
© %a9 Ù %d9
ª %aa Ú %da
« %ab Û %db
¬ %ac Ü %dc
¯ %ad Ý %dd
® %ae Þ %de
¯ %af ß %df
° %b0 à %e0
± %b1 á %e1
² %b2 â %e2
³ %b3 ã %e3

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 46 of 47

´ %b4 ä %e4
µ %b5 å %e5
¶ %b6 æ %e6
· %b7 ç %e7
¸ %b8 è %e8
¹ %b9 é %e9
º %ba ê %ea
» %bb ë %eb
¼ %bc ì %ec
½ %bd í %ed
¾ %be î %ee
¿ %bf ï %ef

Web Server

Your First Step: A Personal Web Server

• You must publish your pages, if you want other people to view them.
• You have to copy your files to a web server, to publish your work.
• Your own PC can act as a web server if it is connected to a network.
• You can use the PWS (Personal Web Server), if you are running Windows 98.
• PWS is hiding in the PWS folder in your Windows CD.

Personal Web Server (PWS)

PWS turns any Windows computer into a Web server. PWS is easy to install and ideal for
developing and testing Web applications. PWS has been optimized for workstation use, but has
all the requirements of a full Web server. It also runs Active Server Pages (ASP) just like its
larger brother IIS.

How to Install a Personal Web Server (PWS):

• To see if you have installed PWS browse your Windows installation.

• If not, install PWS from the PWS directory on your Windows CD.
• Follow the instructions and get your Personal Web Server up and running.

Note: Microsoft Windows XP Home Edition does not come with the option to turn your
computer into a PWS!

CSIT – 01502 Web Programming (07) by: Haroon Akhtar

 Page 47 of 47

Internet Information Server (IIS)

Windows 2000's built-in Web server IIS, makes it easy to build large applications for the Web.
Both PWS and IIS include ASP, a server-side scripting standard that can be used to create
dynamic and interactive Web applications. IIS is also available for Windows NT.

Note: Microsoft Windows XP Home Edition does not come with the option to turn your
computer into a PWS!

HTML Summary

HTML Summary

HTML is the universal markup language for the Web. HTML lets you format text, add graphics,
create links, input forms, frames and tables, etc., and save it all in a text file that any browser
can read and display.

CSIT – 01502 Web Programming (07) by: Haroon Akhtar