Professional Documents
Culture Documents
Versions of HTML: The Tag Defines A Paragraph
Versions of HTML: The Tag Defines A Paragraph
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.
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
Optional Attributes
Attribute Value Description
align left Deprecated. Use styles instead.
center Specifies the alignment of a heading
right
justify
Standard Attributes
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.
Optional Attributes
Attribute Value Description
2
color rgb(x,x,x) Deprecated. Use styles instead.
#xxxxxx Specifies the color of text
colorname
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 <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<sub>2</sub>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<sup>[1]</sup>
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.
3
Optional Attributes
Attribute Value Description
start number Deprecated. Use styles instead.
Specifies the start point in a list
type 1 Deprecated. Use styles instead.
A Specifies which kind of bullet points will be used
a
I
i
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.
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.
4
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<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<stdio.h>
void main()
{
printf("Hello from HTML.");
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.
5
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
<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”>
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.
6
<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
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.
7
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.
</map>
8
<a href=”shape.map”>
<img src="loading.gif" ismap>
</a>
9
Table
Tables were initially intended as a means of displaying tabular data in a web page. It contains row and column
of information.
<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 %
10
Cellspacing
cellpadding
11
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.
IFrame
The iframe (Inline Frame) creates a "window" in a web page that can display a second document within its
border.
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!
13