HTML

Versions of HTML
HTML is an evolving language, and each new version is given a number. The first definitive version was
HTML 2.0 -- this had most of the elements we know and love, but was missing some of the Netscape/Microsoft
extensions, and did not support tables, or ALIGN attributes.
HTML 3 (late 1995) was an ambitious effort on the part of Dave Raggett to upgrade the features and utility of
HTML. However, it was never completed or implemented, although many features were integrated in the next
"official" version of HTML, known as HTML 3.2.
HTML 3.2 was the next official version, integrating support for TABLES, image, heading and other element
ALIGN attributes, and a few other finicky details. Essentially all browsers understand HTML 3.2. IT was,
however, missing some of the Netscape/Microsoft extensions, such as FRAMEs, EMBED and APPLET.
Support for these (after a fashion) came in HTML 4.0
HTML 4.01 is the current official standard. It includes support for most of the proprietary extensions, plus
support for extra features (Internationalized documents, support for Cascading Style Sheets, extra TABLE,
FORM, and JavaScript enhancements), that are not universally supported.

The <p> tag defines a paragraph.

The p element automatically creates some space before and after itself. The space is automatically applied by
the browser, or you can specify it in a style sheet.

Optional Attributes
Attribute Value Description
align left Deprecated. Use styles instead.
right Specifies the alignment of the text within a paragraph
center
justify

Standard Attributes
The <p> tag supports the following standard attributes:
Attribute Value Description
class classname Specifies a classname for an element
dir rtl Specifies the text direction for the content in an element
ltr
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element

1
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the largest heading and <h6> defines the smallest heading.

Optional Attributes
Attribute Value Description
align left Deprecated. Use styles instead.
center Specifies the alignment of a heading
right
justify

Standard Attributes
The <h1> to <h6> tags support the following standard attributes:
Attribute Value Description
dir rtl Specifies the text direction for the content in an element
ltr
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element

The <tt>, <i>, <b>, <big>, and <small> tags are all font-style tags. They are not deprecated, but it is possible
to achieve richer effect with CSS.
Tag Description
<i> Renders as italic text
<b> Renders as bold text
<big> Renders as bigger text
<small> Renders as smaller text

The <font> tag specifies the font face, font size, and font color of text.

<font face="verdana" color="green" size =”5”>This is some text!</font>

Optional Attributes
Attribute Value Description
color rgb(x,x,x) Deprecated. Use styles instead.
#xxxxxx Specifies the color of text
colorname

2
face font_family Deprecated. Use styles instead.
Specifies the font of text
size number Deprecated. Use styles instead.
Specifies the size of text.
1-7 and default is 3

Standard Attributes
The <font> tag supports the following standard attributes:
Attribute Value Description
class classname Specifies a classname for an element
dir rtl Specifies the text direction for the content in an element
ltr
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element

The <sub> tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text
can be used for chemical formulas, like H2O.
H₂O

The <sup> tag defines superscript text. Superscript text appears half a character above the baseline. Superscript
text can be used for footnotes, like WWW[1].
WWW^[1]

List
Some times we have to show information on the web page in some particular way or in some list way. This can
be done in HTML by HTML List. There can be 3 type of List like:
1) Ordered Lists 2) Un Ordered List 3) Definition List

1. Ordered List
An ordered list, as enclosed by <ol> and </ol>, defines a list in which order matters. Ordering is
typically rendered by a numbering scheme, using Arabic numbers, letters, or Roman numerals. Ordered lists are
suitable for creating simple outlines or step-by-step instructions, because the list items are numbered
automatically by the browser. List items in ordered and other lists are defined by using the list item element,
<LI>, which doesn’t require an end tag. List items are usually indented by the browser. Numbering starts from
1.
Optional Attributes
Attribute Value Description
start number Deprecated. Use styles instead.
Specifies the start point in a list

3
type 1 Deprecated. Use styles instead.
A Specifies which kind of bullet points will be used
a
I
i

<ol start=3 >

<li>Devi Ahilya University
<ol type="A">
<li>IIPS
<li type="a">IT-Center
<li type="i">School of Physics
<li value=3 type="i" >SCS-IT
</ol>
<li>Barkatullah University
<>
</ol>

2 UnOrdered List
An unordered list, signified by <UL> and </UL>, is used for lists of items in which the ordering is not
specific. This might be useful in a list of features and benefits for a product. A browser typically adds a bullet of
some sort (a filled circle, a square, or an empty circle) for each item and indents the list.

Attribute Value Description DTD

compact compact Deprecated. Use styles instead. TF
Specifies that the list should render smaller than normal
type • Disc Deprecated. Use styles instead. default TF
square Specifies the style of the bullet points of the list items
circle

3 Definition Lists
A definition list is a list of terms paired with associated definition- in other words, a glossary. Definition
lists are enclosed within <DL> and </DL> tags. Each term being defined is indicated by a <DT> element,
which is derived from definition term. Each definition itself is defined by <DD>. Neither the <DT> nor the
<DD> element requires a close tag, but for long definition, it may be helpful.

A definition list starts with a <dl> tag (definition list).

Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>

4
 <dd>- white cold drink</dd>
</dl>

<pre> Tag
The <pre> tag defines preformatted text.
Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line
breaks. For example
<htmlt>
<head>
<title>Pre Tag Example</title>
</head>
<body>
Here We Show Pre Tag:
<pre>
#include&lt;stdio.h&gt;
void main()
{
printf(&quot;Hello from HTML.&quot;);
getch();
}
</pre>
The pre tag will show the above C program as it is as shown in pre tag. It preserve the whitespaces used
in program.
</body>
<html>

<strike> Tag
The <s> and <strike> tags defines strikethrough text.

Strikethrough Text

The <a> tag defines an anchor. An anchor can be used in two ways: By <a> tag we can create a link to
other page, or link to other page particular location, or link to particular location in the same page.

1. To create a link to another document, by using the href attribute

2. To create a bookmark inside a document or in other document, by using the name attribute

The <a> element is usually referred to as a link or a hyperlink.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.
By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue

• A visited link is underlined and purple

5
 • An active link is underlined and red

<html>
<head>
<title>Anchor Example</title>
</head>
<body>
<!--Now creating a location, which can be used to jump on directly.-->
<a name=”top”></a>
Goto <a href = “#bottom” Title=”Information”>Bottom</a>
Here some multiline text………………………………
…………………………..
<a target= “_blank” href = “Page2.html#middle”>Goto Next Page (Middle Location)</a>
……………………………………..
……………Some Text…………….
<!--Here we are creating other name “bottom” which was used at the top of file. -->
<a name = “bottom” href =”#top”> Goto Top</a>
</body>
</html>

Now you can change the links or anchors default text color from the <body> tag
<body link (Unvisited Link) = “blue” alink (Active Link)= “red” Vlink (Visited Link)=”green”>

Target Property Values

This attribute value shows that, where the link will open.
_blank =opens in New Window
_self =Open the linked document in the same frame as it was clicked (this is default)
framename/window_name = framename in which it will open

Image Tag: To insert in image into a Web Page, use the <IMG> element and set the SRC attribute of
the element equal to the URL(Uniform Resource Locator) of the image. The URL may be either an absolute
URL or a relative URL. Most likely, the image element will use a relative URL to an image found locally. The
SRC attribute must be included. Otherwise, browser that supports images may display a placeholder or broken
image icon and it will display a Text specified in ALT attribute of image.

<img src=”path of image with file extension” alt=”Alternate Text”>

for example: Relative path example.
<img src=”Images/IIPS.jpg” alt = “Image of IIPS Department”>
Absolute path Example.
<img src=”http://www.iips.edu.in/Images/IIPS.jpg” alt = “Image of IIPS
Department”>
Some other attributes of <IMG> tag are as follows.
* Align Property: Possible Values
Top –Text is align to top of image
Middle – Text is align to middle of image
Bottom – Text is align to bottom of image
6
 Left – Image is align to left side and text is flow around to Right side of image
Right- Image is align to right side and text is flow around to Left side of image

* Title Property
For Tooltip on image.
* Border Property:
Border =”3” it creates the border around the image with specified pixels.

* HSpace Property: Horizontal Space on both side of image (Left and Right)
HSpace = “50”

* VSpace Property: Vertical Space on both side of image (Top and Bottom)
HSpace = “50”

*Height and width Property: Set the Height and width of image in browser window.

Image Map -: An image map is an image that contains many hot spots that may result in a different URL
being loading depending on where the user clicks.

1) Client Side Image Map:-

In Client Side image map we put the map coding in the <head> or <body> section of html file. So in
client side image map there is only one file for map information and html coding.
a) A sever doesn’t need to be visited to determine the destination, so links are resolved faster.
b) Destination URL can be shown as the user’s pointer moves over the image.
Disadvantage:
a) Web page maintenance is difficult, if the same map information is used by many web pages.

2) Server-side Image Map-:

In Server-Side image map we put the map coding in separate file, whose file extension is .map. and
make reference of this map file in html file. So in server side image map there are 2 separate file, one for
map information and other for html code, where <img> tag uses the map file information.
a) The user clicks somewhere within the image.
b) The browser sends a request to the web server, asking for the URL of the document associated
with the area clicked. The coordinates clicked are sent to a program on the server, called image
map, which decodes the information.
c) After consulting a file that shows which coordinates map to which URL the server sends back
the information requested.
d) After receiving the response, the browser requests the new URL.
Disadvantage:
a) Users really don’t have a sense, URL-wise, where a particular click will take them. All that users
see as they run a mouse over image is a set of coordinates showing the current x,y value
b) Server must be consulted to go to the next page. This will slow the process.

Client Side Image Map

7
<map name ="testMap">
<area shape="rect" coords="0,0,20,20" href=”http://www.yahoo.com” title=”for yahoo
site”>
<area shape="rect" coords="20,0,40,20" href=”http://www.google.com” title=”for google
site”>
<area shape="default" nohref>

</map>

<img src="loading.gif" usemap="#testMap">

Area Tag Attribute

Shape Values:
Rect –for rectangle left-x, top-y, right-x, bottom-y Coords=”0,0,100,50”
Circle- for circle center-x, center-y, radius coords=”0,0,10”
Poly- for polygon- x1,y1,x2,y2,x3,y3…..
Default- remaining area of image (coords not required.)

Href = URL (Path of the web page you want open)

Target = ”framename/_blank”
NoHREF = for no destination.

Server Side Image Map

This code is in shape.map file, which is stored in web server where,
the all other html and image files are stored.
<map name ="testMap">
<area shape="rect" coords="0,0,20,20" href=”http://www.yahoo.com” title=”for yahoo site”>
<area shape="rect" coords="20,0,40,20" href=”http://www.google.com” title=”for google site”>
<area shape="default" nohref>
</map>

<a href=”shape.map”>
<img src="loading.gif" ismap>
</a>

8
Table
Tables were initially intended as a means of displaying tabular data in a web page. It contains row and column
of information.

<table cellpadding=”50” cellspacing=”50” align="right" border="2"

width="70%">
<caption align="bottom"> Department List</caption>
<tr>
<th bgcolor="green">S.No.</th>
<th bgcolor="green">Department Name </th>
</tr>
<tr>
<td>1</td>
<td>IIPS </td>
</tr>
<tr>
<td>2</td>
<td>IMS </td>
</tr>
</table>

<td> Attribute
valign=top, middle, bottom (vertical alignment of text/image in a particular cell)
align =left, right, center, justify (horizontal alignment of text/image in a particular cell)
bgcolor= background color of Cell
width= width of column in pixel or %

Cell spacing and cell padding

It’s possible to change the amount of padding within a table’s cells, as well as the spacing between all the cells
in a table. This is done with the cellpadding and cellspacing attributes, respectively. In the rather extreme
example that follows, cellpadding is set to 20, cellspacing to 40, and border to 5, so that each can be
differentiated with ease (see the subsequent screenshot). As you can see, cellspacing not only affects the spacing
between the cells, but also the distance between the cells and the table’s edges.

<table cellpadding="20" cellspacing="40" border="5">

<tr><td>Cell one</td><td>Cell two</td></tr>
<tr><td>Cell three</td><td>Cell four</td></tr>
</table>

9
 Cellspacing

cellpadding

Spanning rows and cells

It’s sometimes necessary for data to span multiple rows or columns. This is achieved via the rowspan and
colspan attributes, respectively. In the following table, the first row has three cells. However, in the second row,
the first cell spans two rows and the second cell spans two columns. This means the second row lacks a third
cell, and the third row also only has two cells (whose contents align with the second and third cells of the top
row). Rowspan and Colspan : Table cells can span across more than one column or row. The attributes
COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a
cell should take up.

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

<tr>
<td>A cell</td>
<td>Another cell</td>
<td>Yet another cell!</td>
</tr>
<tr>
<td rowspan="2">A cell that spans two rows</td>
<td colspan="2">A cell that spans two columns</td>
</tr>
<tr>
<td>Another cell</td>
<td>The last cell</td>
</tr>
</table>

10
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. But in Frame, there is no <body> tag.
It will show only other html page inside it. If we want to create a page that has, its own some information to
display with other web page on it, then we have to use iFrame instead. Frame only provide a place where we
can display other web pages.

There is no need for <body>

<htmlt>
<head>
<title>Frame Example</title>
</head>
<frameset rows="20%,60%,20%" frameborder ="1" >
<frame src=”header.html”>
<frameset cols=”20%,80%”>
<frame src="menu.html">
<frame name="target" src=”default.html”>
</frameset>
<frame src=”footer.html”>
<noframes>
Your browser does not support frame.
</noframes>
</frameset>
<html>

Attributes of <frameset> tag are as follows:

Attribute Value Description

cols % Specifies the number and size of columns in a frameset. Value could be in %
* or the remaining area is in *. i.e. cols=”30%,*”
rows % Specifies the number and size of rows in a frameset
*
frameborder Number/pixel Specifies the frame border width in pixels.

Attributes of <frame> tag are as follows:

Attribute Value Description

src Path of the Web Specifies the path of the web page which you want to show in this particular
Page frame.
name Any String Value Specifies the name of the name of this frame.

IFrame
The iframe (Inline Frame) creates a "window" in a web page that can display a second document within its
border.

Here's the code for a very simple iframe:

11
<iframe src="path of file" width= “100%” height= “130px” name="FrameName">
Yours Browser doesn’t support iFrame.
</iframe>
The "src" is the name of the page you want displayed inside the iframe. The width and height can be set to
whatever size you need.
The name attribute is so you can target links to load into the iframe.
Lastly, where it says " Yours Browser doesn’t support iFrame " is where you place content for
browsers that do not support the iframe. They'll see whatever content you place there. Often, a webmaster just
links to the content he or she is trying to display in the iframe.
Syntax <iframe>...</iframe>
Attribute Specifications to Adjust Appearance and Behavior
• src="(URL of initial iframe content)"
• name="(name of frame, required for targeting)"
• width=(frame width, % or pixels)
• height=(frame height, % or pixels)
• frameborder=[ 1 | 0 ] [Yes/No](frame border, default is 1)
• scrolling=[ yes | no | auto ] (ability to scroll)

An example is shown here:

<iframe name="inlineframe" src="float.html" frameborder="0" scrolling="auto" width="500"

height="180" marginwidth="5" marginheight="5" ></iframe>

Another one
<table border="1" width="100%">
<tr>
<td width="33%"><a href="http://www.yahoo.com" target="window">Yahoo</a></td>
<td width="33%"><a href="http://www.google.com" target="window">Google</a></td>
<td width="34%"><a href="http://www.microsoft.com" target="window">Microsoft</a></td>
</tr>
</table>
<iframe name="window" width="1000" height="200" scrolling="auto"></iframe>

<Marquee> Tag
You can create a scrolling marquee (i.e. scrolling text or scrolling images or any content) by using the
<marquee> tag. You can make the text/images scroll from right to left, left to right, top to bottom, or bottom to
top - it's your choice!

<marquee direction=”left” behavior=”scroll” scrolldelay=”100” >IIPS</marquee>

DIRECTION = LEFT | RIGHT|UP

BEHAVIOR = SCROLL | SLIDE | ALTERNATE
ScrollDelay =”1000” in millisecond
ScrollAmount=”5” -> No of Pixels it moves the content in particular ScrollDelay.

12