HTML

Contents

Unit-1: Basics of HTML 2

Unit -2: Working with HTML Text 10

Unit- 3: Using Graphics and Links 17

Unit -4:- Introduction to Tables and Forms 22

Unit -5:- Other Add-ons of HTML 33

Mahan Institute of Technologies, New Delhi Page 1

 1
UNIT
HTML

1.1 Introduction to HTML

HTML stands for Hyper Text Markup Language, the standard used by World Wide
Web (www) documents. The basic element of an HTML page is ASCII text. A
HTML file can be created using any simple text editor, like notepad or WordPad
and must have an htm or html file extension. The HTML elements are defined
using HTML tags represented by the angular brackets “<“ and “>” Any web
browser like Internet Explorer or Netscape Communicator is required to interpret
an HTML file.

A web page can be easily created using any simple text editor. All HTML files are
simple ASCII text files so any program having capabilities to save files in ASCII
format can be used to create HTML files. A web browser is used to view a HTML
file. In Internet explorer, the File | Open command is used to open a file on local
host or on Internet.

1.2 Difference between XHTML and HTML

HTML is rapidly being replaced by XHTML. The differences are very minor, but
the results of switching can be worth the effort. The primary benefit is that
XHTML is more widely accepted in non "computer" devices like cell phone,
palm devices and other scaled down browsers. This is commonly called
portability between devices. XHTML is also said to be extensible, which is the
fancy way of saying the new tags can be added without a new document type
declaration.

Mahan Institute of Technologies, New Delhi Page 2

HTML

The primary major difference between the two is the relative strictness of XHTML
compared to HTML. While someone coding in HTML could get away with some
lapses in structure and coding, that is no longer possible with XHTML. The need
to come up with XHTML emerged from the fact that HTML has become to
convoluted with browser specific tags that pages coded in html doesn‟t always
look the same in all browsers.

All XHTML documents must have only one root element and all elements must
be written in lowercase, closed, and properly nested. And although you can
actually do the same with HTML, it is actually not required and you can violate
any or all of those rules and your HTML document can still be opened without
any errors.

Another XHTML‟s only requirement is the declaration of the DOCTYPE that

determines what rules your document would follow; which it inherited from XML.
Not only is the strictness of XHTML prominent in the structure, even variables
have been limited to lower case letters and the values assigned to them must be
surrounded by quotation marks for it to be properly recognized.

Although in an as-is basis, XHTML provides little to no improvement over HTML,

the edge of XHTML shows when using it in conjunction with XML tools. The
strictness and overall streamlining of the HTML standards into XHTML was
intended to gain the clean and clutter free coding that is needed to further
enhance webpage creation. XHTML also allowed website builders to create
modularized code that they can use repeatedly in multiple projects.

Part of HTML‟s success was the fact that it was a very forgiving language to code
in. Whatever you put into the file, the browser tries to make sense of it and puts
up its best interpretation of the html file. But as browser technologies improve
and webpage designs become more complex, the simplistic approach of HTML
begins lose ground to XHTML‟s structured approach that doesn‟t leave any
guessing to the browser. Though it is hard to notice for those who only browse
the sites, there is already a gradual shift among webpage builders from HTML to
XHTML. Indicating that HTML would soon be yielding its position to XHTML in the
near future.

1.3 Elements and Tags

Document Tags
Document tags define different parts of every HTML page you create. An HTML
document has two distinct parts-a head and a body. To create the head portion
of your HTML document, the following text in entered in text editor:

<head>
<title> My Web Page </title>
</head>

Mahan Institute of Technologies, New Delhi Page 3

HTML

This information is displayed in the title bar of the browser window. The head
portion is the information between the tags <head> and </head> The body is
where you do most of the work like entering text, graphics, headlines etc. Body
section starts after </head> tag, and between two tags <body> and </body>.
In order that all web browsers recognize that your file as an html document,
enter <html> before the first <head> tag and </html> after the last </body>
tag. Now create your first html document by entering the following in a blank
text file:

<html>
<head>
<title> My first web page </title>
</head>

<body>
I am learning
</body>
</html>

Select File|Save As command from notepad and save this file as prog0.html.
Now open your web browser and select the File|Open menu option, browse for
the file prog0.html, select OK to load it to your web browser. You will have the
output similar to following figure. Tags are not case-sensitive and may be
written in uppercase or lowercase as per your wish.

Container and Empty Tags

The tags which have the form <> and </> are called container tags. The
<html>, <head>, <title> and <body> tags are all container tags .Some tags do
not require „</>‟, such tags are called empty tags. For example horizontal rule

Mahan Institute of Technologies, New Delhi Page 4

HTML

tag written as <hr>, draws a line across the width of the document. Enter the
following lines in prog1.html:

<html>
<head>
<title> My Web Page </title>
</head>
<body> Empty tags does not require closing
bracket

<hr><hr>
you are below two line.
</body>
</html>

Comment Tag

Comment tag helps to make comments in your document which can help you
when you edit the source code at a later date. Anything you type between <!...
and …> is ignored by the browser. Even the multiple lines are ignored. Note that
you need an exclamation point after the opening bracket, but not before the
closing bracket.
Comment tags are used for own benefit to mark a point in a particular document
or to explain a particular confusing part of your document

Entering Paragraph on Your Web Page

For entering paragraph into an HTML document, you have a container tag-the
<p> (paragraph) tag. It tells the browser that text in your document constitute
a paragraph. As such browser ignores more than one space and any number of
returns in a paragraph container. Only when you start another paragraph tag
<p>, the browser inserts a line between the texts. Please note that returns and

Mahan Institute of Technologies, New Delhi Page 5

HTML

spaces never affect the way in which text is displayed on the screen. Enter the
following two examples one by one in template2.txt:

<p> Projects are an important part of the curriculum.

Even though we have entered a new paragraph, we are still there becoz browser
need a tag to identify a new paragraph.
</p>
<p> Now this is new paragraph. A new paragraph is created only when you
close one tag and begin with the new tag</p>

<p>We are learning paragraph tag here which is responsible for giving
paragraphs to your document. Even though we have entered a new paragraph,
the browser will ignore this and consider it as single paragraph only.</p>
<p>This is next paragraph. A new paragraph is created only when you end one
tag and begin with new paragraph tag</p>

Mahan Institute of Technologies, New Delhi Page 6

HTML

You saw that both the examples appeared in the Web browser, in exactly the
same way.

Special <BR> tag

Enter the following lines a text editor and display it via your web browser.

<p>
Mahan Institute of Technologies
GN-10, Shivaji Enclave
Near Shivaji College/Raja Garden
New Delhi-110027
</p>

Though you have typed an address in a text file making all necessary formatting,
your address becomes illegible. How?

This happened because your Web browser ignored extra spaces and returns!
Now if you put paragraph container here, you will end up with an extra space
between each line, which again is not a correct way to write an address.

So what you require is a new tag and that tag is <BR> tag, an empty tag. This
tag puts a line return in your web document. Now using this tag, try the
following lines:

<p>
Mahan Institute of Technologies<BR>
GN-10, Shivaji Enclave <BR>
Near Shivaji College/Raja Garden <BR>
New Delhi-110027 <BR>
</p>

Mahan Institute of Technologies, New Delhi Page 7

HTML

Mahan Institute of Technologies, New Delhi Page 8

HTML

Exercise 1:
Create a web document similar to the following figure:

Exercise 2:
Create a web document similar to the following figure:

Mahan Institute of Technologies, New Delhi Page 9

 2
UNIT
HTML

In this section you will study how to organize text in an HTML document, how to
emphasize on certain text implicitly and explicitly as per your requirement.

2.1 Headings
You differentiate a portion of text from rest of the text is by use of the header
tags <h1>, a container tags having range from level 1 to 6. <h1> defines the
largest heading; <h6> defines the smallest heading. Header tag creates a new
line after its closing </h> tag. These tags allow you to create different level of
emphasized headings to organize your document. Enter the following program in
a text editor to see the result of these tags.

<html>
<head>
<title> my web page </title>
</head>
<body>
<h1> level 1 heading </h1>
<h2> level 2 heading </h2>
<h3> level 3 heading </h3>
<h4> level 4 heading </h4>
<h5> level 5 heading </h5>
<h6> level 6 heading </h6>
</body>
</html>

Mahan Institute of Technologies, New Delhi Page 10

HTML

2.2 Emphasizing Text

Following categories of tags are used for emphasizing text in a Web document.
1. Explicit tags, often called Physical tags, tell the browser how the
programmer wants text to appear physically.
2. Implicit tags, also called logical styles, give some freedom to browser
in displaying text. These tags are relative to one another, depending
upon the browser.
Some Physical and Logical tags are tabulated below:

Physical Tags Effects on text

<b>,</b> Bold
<i>,</i> Italic
<u>,</u> Underlined text.
<big>,</big> Larger font size
<small>,</small> Smaller font size
_, subscripted text
^, superscripted text
<strike>,</strike> Draws a horizontal line through the middle of the text.
Logical Tags
emphasized text . These are generally rendered as italic
<em>,</em>
text
<strong>,</strong> strong emphasis. These are generally rendered as bold text
teletype. These are generally rendered as Mono-spaced
<tt>,</tt>
text.

Below is an example through which you can differentiate between physical and
logical tags, if your browser shows any.

<html>
<head>
<title> Presentations and Seminars </title>
</head>
<body>
<p> At Mahan, there is a willingness to get the students involved intensively in
all activities <b> Seminars </b> on current topics are held from time to time
on the <strong> latest developments
</strong> in the industry. <br>
</p>
<p> Students are also required to make <i> presentations </i>
on <em> Projects and Topics </em> as part of their
curriculum <br>
</p>
</body>
</html>

Mahan Institute of Technologies, New Delhi Page 11

HTML

2.3 Controlling Appearance of Text

The appearance of text in an HTML document can be controlled using <font>
and </font> tags along with face, color and size attribute. Face="face-name"
defines the font-name, like <font face="Times"> set the font to Times Roman.
You can also provide a list of acceptable choices, like for example, <font
face="Times", "Arial", "Helvetica">, where Times is listed as first choice, while
Arial and Helvetica as alternatives. Size attribute is used to specify character
height for the text, on a relative scale from 1 through 7 (normal font size being
3). The size can be stated in absolute terms like “size=5” or relatively like
“size=+2”.
The color attribute can also be specified using a hexadecimal color value like
color="#eeff00" or one of the standard color names like color="red".

2.4 Some Special Characters

Some characters have a special meaning in HTML, like the less than sign (<)
that defines the start of an HTML tag and also there are some special symbols
like © that may be required in your document. To display these characters, you
must insert character entities in your HTML source.

A character entity has three parts: an ampersand (&), an entity name or # and
an entity number, and finally a semicolon (;). To display a less than sign in an
HTML document we must write: &lt; or &#60. Some most common entities are
tabulated below:

Mahan Institute of Technologies, New Delhi Page 12

HTML

Entity Name Entity Number Result

&cent; &pound; &yen; &#162; &#163; &#165; ¢;£;¥
&sect; &#167; §
&copy; &reg; &#169; &#174; ©;®
&times; &divide; &#215; &#247; ×;÷
&nbsp; &#160; non-breaking space
&lt; &gt; &#60; &#62; <;>
&amp; #38; &

You may use name or a number as per your choice. Though a name is easier to
remember compared to a number, all browser do not support name. Note that
the entities are case sensitive.

2.5 Using Lists in web Documents

HTML supports ordered, unordered and definition lists.

A list of items in which items are marked with numbers is called an ordered list.

An ordered list is created with the <ol> and </ol> tags. Each list item starts
with the <li> tag and list heading is given by <lh> tag. The output of following
text in html template.html will generate the output shown in figure.

<html>
<head>
<title> My courses </title>
</head>
<body>
<ol>
<lh><B> INFORMATION TECHNOLOGY</B>
<br>
<li>DOEACC 'O' 'A' 'B' and 'C' Level
<li>MCITS <li>System Administrator
<li>KSOU
<li>Java and .Net technologies</ol>
</body>
</html>

Mahan Institute of Technologies, New Delhi Page 13

HTML

Inside a list item you can put paragraphs, line breaks, images, links, other lists,
etc. A list inside a list is called nested list. The “type” attribute of <ol> tag is
used to list items in numbers, Roman numerals or letters as per requirement.
The various attribute value along with description is tabulated below:
Attribute Description
Type=A List markers would be set to uppercase letters
Type=a List markers would be set to lowercase letters
Type=I List markers would be set to uppercase Roman Numerals
Type=i List markers would be set to lower Roman Numerals
Type=1 List markers would be set to numbers

<html>
<head>
<title> Nested Lists </Title>
</head>
<body>
<ol>
<lh><em>Mahan Institute of Technologies</em> <br>
<li>Information Technology
<ol type=1>
<li>ADIT<li>HDIT
<li>MCA
<li>M.Tech</ol>
<li> Retail Management
<ol type=1>
<li>Executive
<li>Supervisor
<li>Manager
<li>BBA</ol>
<li>Professional English
<ol type=1>

Mahan Institute of Technologies, New Delhi Page 14

HTML

<li>Spoken
<li>Writing
<li>Listening
</ol>
</ol>
</body>
</html>

The output of the following nested lists using attribute is shown in the figure
below:

Unordered lists: The list items are marked with bullets in an unordered list.
<ul> and </ul> tags are used to create unordered lists. Each list item starts
with the <li> tag. The type attribute of <li> tag when has “value=circle” creates
a circle and when has “value=disc” creates a filled circle (bullet). Inside a list
item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition lists: These lists are also known as glossary lists consists of 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 and each definition-list
definition starts with the <dd> tag. Inside a definition-list definition (the <dd>
tag) you can put paragraphs, line breaks, images, links, other lists, etc.

Mahan Institute of Technologies, New Delhi Page 15

HTML

Exercise 1:

Create a HTML document which should have the following characteristics: -

a. Use of paragraphs.
b. Use of 1 or more levels of section headers.
c. Use of highlighting (bold, italics, etc.)
d. Use of lists.

Exercise 2:

Create a HTML document corresponding to screen given below.

Mahan Institute of Technologies, New Delhi Page 16

 3
UNIT
HTML

3.1 HTML Images

You can display images in a HTML document. There are many image formats
available today; few being most popular are GIF, JPEG, PCX, PNG, WMF etc.
While inserting images in an HTML document, one should restrict to JPEG or GIF
formats only because these two formats are widely supported by a range of web
browsers.

In HTML, images are defined with the <img> tag with its src attribute (src
stands for “source”). The value of the src attribute is the URL of the image you
want to display on your page. The <img> tag is empty, which means that it
contains attributes only and it has no closing tag.

The syntax of defining an image:

<img src= “url”>

The URL points to the location where the image is stored. An image named
"image1.jpg" located in the directory "ignou" in “D:” drive has the URL:
D://ignou/image1.jpg. The browser puts the image where the image tag occurs
in the document. For example, the following listing will put the image before the
text as shown in figure.

<html>
<head>
<title>Images in HTML </title>
</head>
<body> <p>
<img src="d://mahan/image1.jpg"> Images preceeds this text </p>
</body>
</html>

Mahan Institute of Technologies, New Delhi Page 17

HTML

When an inline image is inserted in an HTML document along with text, by

default the text is aligned with the bottom of the image as shown above. The
default alignment can be changed to one of the following.

Value Meaning

top Align the text with the top of the image

middle Align the text with the middle of the image

bottom Align the text with the bottom of the image

left Displays image on the left side and surrounding text

flows around the image

Right Displays image on the right side and surrounding text

flows around the image

<html>
<head>
<title>Images in HTML </Title>
</head>
<body><p>
<img src="d://mahan/image1.jpg" align=middle> Images precedes this
text but
in middle
</p>
<p>
<img src="d:// mahan /image1.jpg" align=top> Images precedes this text but
at the top

</p>
<p>
<img src="d://mahan/image1.jpg" align=bottom> Images precedes this text
but at bottom </p>

</body>
</html>

Mahan Institute of Technologies, New Delhi Page 18

HTML

The Alt Attribute

An alternative text is provided with an image for users of text-based browsers or

the ones who turn off the graphics to increase the download speed of the web
pages. The browser will then display the alternate text instead of the image. This
can be done by using the following syntax:

< img src="d://mahan/image1.jpg" alt="Internet Explorer">

The "alt" attribute is to improve the display and usefulness of your document
that tells the user what they are missing in absence of a graphics based browser.

3.2 HTML Links:

Links are used to connect various web resources to your current document. It is
done by anchor tags <a> and </a> and href attribute of this tag. An anchor can
point to any resource on the Web: an HTML page, an image, a sound file, a
movie, etc. These links are called hypertext links and would appear underlined
or in different colour to distinguish it from normal text.

There are two categories of links: Relative links and Absolute links.

Relative links: Theses refer documents in the current directory or within the
same page on which the link is used. For references to the current document,
you need to use two instances of the anchor tag

1. Hypertext link as <a href= “section1”> link to section 1</a>

2. Reference point for that link as <a name= “section 1”> Section1
starts here</a>

Mahan Institute of Technologies, New Delhi Page 19

HTML

<html>

<head>

<title> Relative Links </Title>

</head>

<body>

<h2> Courses in MAHAN <h2>

<p> Click any one to know more about us <a><br><br>

<a href="HDIT.HTML"> HIGHER DIPLOMA IN INFORMATION

TECHNOLOGIES </a> <br>

<a href="ADIT.HTML"> ADVANCE DIPLOMA IN INFORMATION

TECHNOLOGIES </a> <br>

<a href="IP.HTML"> INTEGRATED PROGRAM </a> <br>

<a href="MCS.HTML">MAHAN CERTIFIED SYSTEM SPECIALIST </a>

<br>

<a href="CCC.HTML"> COMPUTER CONCEPTS COURSE </a> <br>

</html>

When <base> tag is used in an HTML document, references are then always
relative to the url given in the tag. For example:

Mahan Institute of Technologies, New Delhi Page 20

HTML

<base href= http://www.mahanindia.com/cgi-bin>

<a href= “submit.pl”> refer to

http://www.mahan.com/cgi-bin/submit.pl

Irrespective of the actual location of the document.

Absolute links: These provide full address or the URL of the document,
described in the link text.

Mahan Institute of Technologies, New Delhi Page 21

 4
UNIT
HTML

4.1 Working with Tables

With HTML you can create tables also with the <table> tag. These are defined
row by row with the <tr> tag and each row is divided into data cells with the
help of <th> (table header) and <td> (table data) tags. The “border” attribute
of the table creates a table with border and it takes the value in pixels.
“border=0” creates a borderless table.

<html>
<head>
<title>TABLES </Title>
</head>
<body>
<table border=5>
<caption> BCA Project status report </caption>
<tr>
<th> Project</th> <th> Roll No </th> <th> Status </th>
<tr>
<td> Hospital Management System </td>
<td>BCA001</td><td> Submitted </td>
</tr>
<tr>
<td> Hotel Management System </td>
<td>BCA002 </td><td>Not submitted </td>
</tr>
</table> <br>
<table border=5>
<caption> MCA Project status report </caption>
<tr>
<th> Project</th> <th> Roll No </th> <th> Status </th>
<tr>
<td> A prototype of GIS </td>
<td>MCA001</td><td> Passed with A grade</td>
</tr>
<tr>
<td> www.eyatra.com </td>
<td>MCA002 </td><td>Not submitted </td>
</tr>
</table>
</body>
</html>

Mahan Institute of Technologies, New Delhi Page 22

HTML

A data cell can contain text, images, lists, paragraphs, forms, horizontal rules,
tables, etc.

Tag Description

<table> Defines a table

<th> Defines a table header

<tr> Defines a table row

<td> Defines a table cell

<caption> Defines a table caption

<colgroup> Defines groups of table columns

<col> Defines the attribute values for one or more columns in a table

<thead> Defines a table head

<tbody> Defines a table body

<tfoot> Defines a table footer

Mahan Institute of Technologies, New Delhi Page 23

HTML

4.2 Introduction to Forms

HTML Forms are used to select different kinds of user input, it allow user to
interact by sending the requested information in the form of text, drop-down
menus, radio buttons, checkboxes, etc.

A form is defined within <form> and </form> tags with the help of <input>,
<select> and <textarea> tags.

<form>
<input>
<input>

</form>

<input> tag: The most used form tag is the <input> tag. This is an open tag
and is used to add graphical user interface such as text fields, password fields,
check boxes, radiobuttons, reset button and submit buttons. The different
attributes for the <input > tags are:

Different Elements of Forms

HTML presents us with various form object/elements that are placed INSIDE the
form tags.

 <INPUT TYPE="TEXT">
 <INPUT TYPE="PASSWORD">
 <INPUT TYPE="RADIO">
 <INPUT TYPE="CHECKBOX">
 <INPUT TYPE="BUTTON">
 <INPUT TYPE="RESET">
 <INPUT TYPE="SUBMIT">
 <INPUT TYPE="HIDDEN">
 <INPUT TYPE="IMAGE">
 <INPUT TYPE="FILE">
 <SELECT>...</SELECT>
 <TEXTAREA>...</TEXTAREA>
 <BUTTON>...<BUTTON>
 <OPTION>...</OPTION>

The first ten listed above are all variants of the <INPUT> element. However,
since their TYPE is different, the other attributes taken by them differ. We shall
explore these along with their attributes, one by one.

Mahan Institute of Technologies, New Delhi Page 24

HTML

The HTML form <INPUT TYPE="TEXT">

This form object is the most common. It defines a horizontal text field as:

The attributes associated with this tag are:

 NAME: Sets a name for this form element. You can give any name to your
text field as long as you don't duplicate it in the same form.
 SIZE: Determines the size. The value taken is a number.
 MAXLENGTH: Specifies the number of characters a user can submit thru this
element.
 VALUE: Specifies a default value that is displayed inside the text field when a
user first opens the page.

Type your first name in the box:

<INPUT TYPE="TEXT" SIZE="15" MAXLENGTH="20"
NAME="first_name" VALUE="Your first name">

is displayed as:
Your first name
Type your first name in the box:

The HTML form <INPUT TYPE="PASSWORD">

This object is very similar to the TEXT mentioned above and takes the same
attributes. Its inclusion also causes the display of a text field. However, anything
typed by the user inside this text field is replaced by *s or other characters that
mask what you type. Try this out yourself.

Type your password in the box:

<INPUT TYPE="PASSWORD" SIZE="15" MAXLENGTH="20"
NAME="yourpassword" VALUE="">

Type your password in the box:

Attributes:
 NAME: Sets a name for the password field by which it is referred using
scripting languages.
 MAXLENGTH: Sets the maximum number of characters a user can input.
 SIZE: Takes a number as value and specifies the size.
 VALUE: Specifies a default value.

Mahan Institute of Technologies, New Delhi Page 25

HTML

<INPUT TYPE="CHECKBOX">

Creates a checkbox. Its other attributes are:

 CHECKED: This attribute takes no value. Including it in the tag causes the
checkbox to be checked by default.
 NAME: Specifies a name for the element.
 VALUE: Assigns a value to the element.

<INPUT TYPE="CHECKBOX" NAME="your_answer"

VALUE="yes" CHECKED> Do you like this site?

Do you like this site?

<INPUT TYPE="RADIO">

Makes a radio button. The attributes taken are similar to those of a checkbox
(above).
 CHECKED: Puts the radio button to "ON" state. Takes no value.
 NAME: Assigns a name to the radio button.
 VALUE: Specifies a value that can be passed to the server.

<INPUT TYPE="RADIO" VALUE="yes" NAME="html"

CHECKED> Do you like HTML?

Do you like HTML?

Important: What is the difference between a radio button and a

checkbox?

These two elements are not the same though they share the same attributes.
Radio buttons are employed when a single reply is desired from a list of choices.
In such cases, radio buttons with the same name but different values are
grouped together. Since the buttons have the same name, the user is able to
select only one. The value of the selected button along with its name is sent to
the server. Checkboxes on the other hand, can be used in two ways. One to get
a 'yes'/'no' kind of response and the other to get a multiple selection.

We'll see this through examples.

Do you like Mozart's Symphony No.40?<BR>
<INPUT TYPE="RADIO" NAME="moz" VALUE="yes" CHECKED> Yes<BR>
<INPUT TYPE="RADIO" NAME="moz" VALUE="No"> No<BR>
<INPUT TYPE="RADIO" NAME="moz" VALUE="notsure"> Can't Say<BR>

Mahan Institute of Technologies, New Delhi Page 26

HTML

Do you like Mozart's Symphony No.40?

Yes
No
Can't Say

Try to select two radio buttons... you can't... that is because they have the same
name. Thus, the code above presents a list of choices and expects only one
selection.

Notice that the CHECKED attribute selects the first radio button when the page is
first loaded. Depending on the selection, the associated value is sent to the
server along with the radio button name. So, if the visitor selects Can't Say, the
associated value notsure is sent along with button name, moz.

An example for checkboxes can be...

Which ice-cream flavors do you like?<BR>

<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="chocolate" CHECKED>

Chocolate<BR>
<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="vanilla">
Vanilla<BR>
<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="strawberry">
Strawberry<BR>
<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="mint">
Mint<BR>

Which ice-cream flavors do you like?

Chocolate
Vanilla
Strawberry
Mint

Notice that in this case too, all checkboxes have the same name. However, you
can select multiple boxes (try it out...). This is helpful when we desire zero or
more values. Values of all checkboxes that are selected are sent to the server
along with checkbox name for further processing by a CGI script.
Another use of checkboxes is to get a 'yes'/'no' kind of response as in:

<INPUT TYPE="CHECKBOX" VALUE="yes" NAME="mlist">

Mahan Institute of Technologies, New Delhi Page 27

HTML

Would you like to subscribe to our mailing list?

Would you like to subscribe to our mailing list?

Although, radio buttons can be employed for the same purpose, I prefer to use
checkboxes since they display a better icon.

So, radio buttons or checkboxes are used depending on the type of question you
have. A generalization would be to employ radio buttons for questions where
only one reply is desired and checkboxes for questions where multiple replies are
possible.

HTML form <INPUT TYPE="BUTTON">

This creates a button which is quite useful for triggering JavaScript events.
 NAME: Specifies a name for the button.
 VALUE: Determines what is written on the button.

<INPUT TYPE="BUTTON" NAME="pbut" VALUE="Push Me">

The button above does nothing when clicked. However, you can attach
JavaScript event handlers to this button to set up some kind of action.

<INPUT TYPE="BUTTON" VALUE="Push me to get a greeting"

NAME="mybut" onclick="return disp();">

The HTML form RESET button

Creates a reset button, which when clicked, clears all form elements and sets
then to their default values. It has only one attribute VALUE that specifies the
text written on the button.

<INPUT TYPE="RESET" VALUE="Clear the form">

Clear the form

The HTML form SUBMIT button

Makes a button, which when clicked, submits the form. It has two attributes
 VALUE: Puts text on the button.
 NAME: Names the submit button. Its value is generally used by server side
scripts to determine if the form has been submitted.

<INPUT TYPE="SUBMIT" VALUE="Send Email" NAME="semail">

Send Email

Mahan Institute of Technologies, New Delhi Page 28

HTML

Clicking on a submit button sends the name-value pairs of all form elements to
the server. (Note: This submit button does not work. However, you can test one
on the right to join my mailing list!)

<INPUT TYPE="FILE">
Allows your users to send files to your server. It is accompanied with a Browse
button that helps the user locate the file on his computer.
Attributes taken are:

 ACCEPT: Its value is a MIME type/s that your server program is ready to
accept. A comma-separated list of mime types can be supplied.
 NAME: Specifies a name for the element.
 VALUE: Specifies the default text inside the text field.

<INPUT TYPE="FILE" NAME="uploadfile" VALUE="">

<INPUT TYPE="IMAGE">
This is a great tag allowing designers to make their own buttons. With its use
you can replace the dull default button with a colorful image.
There are four attributes associated with this tag
 SRC: a required attribute that points to the URL of the image file.
 NAME: Gives a name to the element.
 ALIGN: aligns the surrounding text with respect to the image.
 BORDER: sets the border around the image. If zero is assigned as its value,
no border is displayed.

<INPUT TYPE="IMAGE" SRC="but.gif" NAME="sub_but" BORDER="0">

<INPUT TYPE="HIDDEN">
This creates a form input field which is not displayed in the browser. It is ideal
for passing values set by the programmer or by certain actions of the user.
It has only two attributes.
 NAME: Defines a name for the element.
 VALUE: Sets a value for the element.

<INPUT TYPE="HIDDEN" NAME="birthday" VALUE="16-03-72">

<SELECT>... </SELECT> form element

This HTML form element lets you develop a drop down scrolling list or menu. The
list can allow for single as well as multiple selections.

Mahan Institute of Technologies, New Delhi Page 29

HTML

The individual items of the list are placed with the help of another tag,
<OPTION> (described below).
The attributes taken are:
 NAME: defines a name for this element.
 SIZE: if the size is '1', the list is displayed as a dropdown menu else as a
scrolling list.
 MULTIPLE: allows for multiple selection.
Here is how you create a four-item drop down selection list.

Which system do you use?

<SELECT NAME="platform" SIZE="1">
<OPTION VALUE="win">Windows
<OPTION VALUE="mac">Macintosh
<OPTION VALUE="unix">Unix
<OPTION VALUE="oth">Other
</SELECT>

Window s
Which system do you use?

<OPTION> </OPTION>

The <OPTION> tag defines an item of the selection list described above. Its end
tag is not required. It takes two attributes:
 VALUE: Gives a value to the item that is sent to the server along with the
selection list name.
 SELECTED: Selects an item when the form is displayed.

Which system do you use?

<SELECT NAME="platform" SIZE="1">
<OPTION VALUE="win">Windows
<OPTION VALUE="mac">Macintosh
<OPTION VALUE="unix" SELECTED>Unix
<OPTION VALUE="oth">Other
</SELECT>

Unix
Which system do you use?

HTML form TEXTAREA elements

This creates a multi-line text box. Its attributes are:

Mahan Institute of Technologies, New Delhi Page 30

HTML

 NAME: Defines a name for this element.

 COLS: Specifies the number of character columns. Thus, a value of 20 means
that the text box is twenty character in width.
 ROWS: Determines the height of text box in terms of character rows.
 WRAP: Sets word wrapping inside the text box and can take off, virtual or
physical as value. 'Off' turns word wrapping off. Through 'virtual', word
wrapping is turned on but the line endings are not transmitted to the server.
'Physical' displays and sends the line endings to the server.

To define a value for the TEXTAREA, include the text between the start and end
tags.

<TEXTAREA NAME="query" COLS="20" ROWS="5">

Please type your query here.
</TEXTAREA>

Please type your que

<BUTTON>...</BUTTON>
This element is specific to Internet Explorer and ignored by Netscape.
It creates a button that is quite similar to ones made by <INPUT
TYPE="BUTTON">. It takes the following attributes:
 NAME: Sets a name for the button.
 TYPE: Can take either SUBMIT, RESET or BUTTON as value.
 VALUE: Defines the value that is sent to the server along with the button
name.

<BUTTON NAME="somebut" TYPE="BUTTON" VALUE="justabut">

Just for Kicks</BUTTON>

Mahan Institute of Technologies, New Delhi Page 31

HTML

Exercise: Design the following Web Form using desired Elements.

Mahan Institute of Technologies, New Delhi Page 32

 5
UNIT
HTML

5.1 Frames

With 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. Frames provide an effective way to organize the web
content by dividing the page into different parts.

In the example below “frames.htm” we have a frameset with two columns. The
first column is set to 300 pixel of the width of the browser window. The second
column is set to rest of the width of the browser window. The HTML document
"navigate.htm" is put into the first column, and the HTML document "main.htm"
is put into the second column.

Frames.htm

<html>
<head>
<title> Frames in HTML</Title>
</head>
<frameset cols="300,*" border=10>
<frame name= "Navigation" src="navigate.htm" NORESIZE

SCROLLING="AUTO">
<frame name= "Main" src="main.htm" NORESIZE

SCROLLING="AUTO">
</frameset>
<noframes> Your browser cannot process frames so acquire one and revisit
this site.
</noframes>
</html>

Navigate.htm
<html>
<head>
<title>Frames </Title>
</head>
<body>
<center>
<h3>
<a href="index.htm"> About us </a><br><br>
<a href="courses.htm"> Courses </a><br><br>
<a href="faculties.htm"> Faculties </a><br><br>
<a href="contact.htm"> Contact us </a><br><br>
</h3>

Mahan Institute of Technologies, New Delhi Page 33

HTML

</center>
</body>
</html>

Main.htm
<html>
<head>
<title>Frames </Title>
</head>
<body>
<center>
<h1 align="center"> Welcome to MAHAN Institute Of Technologies
</h1>
<p> Welcome to MAHAN Institute home page
</p>
</center>
</body>
</html>

Note: The frameset column size value can be set in pixels (cols="200,500") or
percentage where one of the columns can be set to use the remaining space
(cols="25%,*").

Mahan Institute of Technologies, New Delhi Page 34

HTML

5.2 Style Sheets

A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML
content from it's style. As always you use your (X)HTML file to arrange the
content, but all of the presentation (fonts, colors, background, borders, text
formatting, link effects & so on...) are accomplished within a CSS.

At this point you have some choices of how to use the CSS, either internally or
externally.

Internal Style sheet

First we will explore the internal method. This way you are simply placing the
CSS code within the <head></head> tags of each (X)HTML file you want to
style with the CSS. The format for this is shown in the example below.

<head>
<title><title>
<style type="text/css">
CSS Content Goes Here
</style>
</head>
<body>

With this method each (X)HTML file contains the CSS code needed to style the
page. Meaning that any changes you want to make to one page, will have to be
made to all. This method can be good if you need to style only one page, or if
you want different pages to have varying styles.

External Stylesheet

Next we will explore the external method. An external CSS file can be created
with any text or HTML editor such as "Notepad" or "Dreamweaver". A CSS file
contains no (X)HTML, only CSS. You simply save it with the .css file extension.
You can link to the file externally by placing one of the following links in the head
section of every (X)HTML file you want to style with the CSS file.

<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" />

Or you can also use the @import method as shown below

<style type="text/css">@import url(Path To stylesheet.css)</style>

Either of these methods are achieved by placing one or the other in the head
section as shown in example below.

<head>
<title><title>
<link rel="stylesheet" type="text/css"href="style.css" />
</head>

Mahan Institute of Technologies, New Delhi Page 35

HTML

<body>

or

<head>
<title><title>
<style type="text/css"> @import url(Path To stylesheet.css) </style>
</head>
<body>

By using an external style sheet, all of your (X)HTML files link to one CSS file in
order to style the pages. This means, that if you need to alter the design of all
your pages, you only need to edit one .css file to make global changes to your
entire website.

Here are a few reasons this is better.

 Easier Maintenance
 Reduced File Size
 Reduced Bandwidth
 Improved Flexibility

5.3 Web 2.0

The term „Web 2.0‟ was coined to define an emerging pattern of new uses of the
Web and approaches to the Web development, rather than a formal upgrade of
Web technologies as the 2.0 version number may appear to signify. The key
Web 2.0 concepts include:

It’s an attitude, not a technology: An acknowledgement that Web 2.0 is not

primarily about a set of standards or applications, but a new mindset to how the
Web can be used.

A network effect: This describes applications which are more effective as the
numbers of users increase. This effect is well-known in computer networks, with
the Internet providing an example of how network traffic can be more resilient
as the numbers of devices on the Internet grows.

The long tail: As the numbers of users of the Web grows, this can provide
business opportunities for niche markets which previously it may not have been
cost-effective to reach.

Small pieces, loosely coupled: As the technical infrastructure of the Web

stabilizes, it becomes possible to integrate small applications. This enables
services to be developed more rapidly and can avoid the difficulties of
developing and maintaining more complex and cumbersome systems.

Mahan Institute of Technologies, New Delhi Page 36

HTML

Openness: The development of more liberal licenses (such copyright licenses

such Creative Commons; open sources licenses for software) can allow
integration of data and reuse of software without encountering legal barriers.
Trust your users: Rather than having to develop complex access regimes, a
more liberal approach can be taken who can make it easier for users to make
use of services.

Network as a platform: The Web can now be used to provide access to Web
applications, and not just informational resources. This allows users to make use
of applications without having to go through the cumbersome exercise of
installing software on their local PC.

Always beta: With Web applications being managed on a small number of

central servers, rather on large numbers of desktop computers, it becomes
possible for the applications to be enhanced in an incremental fashion, with no
requirements for the user of the application to upgrade their system.

Web 2.0 Application Areas

The key application areas which embody the Web 2.0 concepts include:

Blogs: A Web site which is commonly used to provide diaries, with entries
provided in chronological order. Blogs can be used for a variety of purposes,
ranging from reflective learning by students and researchers through to
dissemination channels for organisations.

Wikis: A wiki refers to a collaborative Web-based authoring environment. The

term wiki comes from an Hawaiian word meaning „quick‟ and the origins of the
name reflect the aims of the original design of wikis to provide a very simple
authoring environment which allows Web content to be created with the need to
learn the HTML language or to install and master HTML authoring tools.

Syndicated content: RSS and Atom formats have been developed to enable
content to be automatically embedded elsewhere. RSS was initially developed to
support reuse of blog content produced. RSS‟s success led to the format being
used in other areas (initially for the syndication of news feeds and then for other
alerting purposes and general syndication of content). The Atom format was
developed as an alternative to RSS.

Mashups: A mashup is a service which contains data and services combined

from multiple sources. A common example of a mashup is a Google Maps
mashup which integrated location data was a map provided by the Google Maps
service.

Podcasts: A podcast initially referred to syndicated audio content, which can be

transferred automatically to portable MP3 players, such as iPods. However the
term is sometimes misused to describe a simple audio file.

Social sharing services: Applications which provide sharing of various types of

resources such as bookmarks, photographs, etc. Popular examples of social
sharing services include del.icio.us and Flickr.

Mahan Institute of Technologies, New Delhi Page 37

HTML

Social networks: Communal spaces which can be used for group discussions
and sharing of resources.

Folksonomies and tagging: A bottom-up approach to providing labels for

resources, to allow them to be retrieved

Mahan Institute of Technologies, New Delhi Page 38