Page No:-1

UNIT-1 AN INTRODUCTION TO HTML

A brief History of HTML

HTML stands for Hyper-Text Markup Language. It is a coding language, which

uses markup methods, to create hyper-text. HTML is actually a simplified of a more general

markup language called SGML, which stands for Standard Generalized Markup Language

1. In 1989, Tim Berners-Lee, working at the European particle physics

institute known as CERN (Centre European pour la Recherché Nuclear), proposed a

system to allow scientists to share papers with other using electronic networking methods.

2. Tim Berners-Lee suggested that it be based on the already existing SGML. Here are a few

quotes from a 1990 CERN memo that Berners-Lee wrote:

 Hypertext is a way to link and access information of various kinds as

a web of nodes in which the user can browse at will.

 A program which provides access to the hypertext world we call a browser

3. In 1991, Berners-Lee and the CERN team released the first draft HTML 1.0, which was

finalized in 1993.

4. In 1995, HTML 2.0 was developed by the Internet Engineering Task Force’s HTML

Working Group with XML + HTML = XHTML. This group later was disbanded in favor of

the World Wide Web Consortium (http://www.w3.org), which continues to develop

HTML.

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-2

5. The World Wide Web Consortium (W3C), which had taken over HTML development,

attempted to create some standardization in HTML 3.0. Finally, in 1997 a consensus

version, HTML 3.2, was issued. This added features with HTML with CSS like tables, and

text flowing around images.

6. The W3C released the HTML 4.0 specification at the end of 1997, and followed with HTML

4.01 in 1999, which mostly corrected a few errors in the 4.0 specification.

7. XHTML 1.0 is the successor to HTML. The “X” stands for Extensible. This is a

reformulation of HTML 4.01 within XML (Extensible Markup Language)

******************************************************************************

Q). Definition, features, advantages and disadvantages of HTML:

HTML stands for Hyper-Text Markup Language. It allows us to create web pages. It

does not include any control structure and can produce only static content. A HTML page

consists of various tags that make a web page. The features, advantages and disadvantages

of HTML page are listed below.

Features of HTML:

1. It is a formatting language for text and images, sounds and videos.

2.It allows us to read the content nonlinearly by using hyperlinks to a file.

3.HTML is an application of SGML.

4.HTML uses markup tags to describe web pages.

5.It is not case sensitive i.e. code can be written in small case or uppercase letters.

6.All the HTML documents have “.html” or “.htm” extension.

7.HTML documents can be edited using editors such as notepad or front page.

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-3

The advantages of HTML:

1. It allows embedding scripts, to generate dynamic content.

2.It can incorporate images and sounds with the help of HTML tags.

3.It facilitates Moving and layered text.

4.It is freely available for use.

5.It is case insensitive.

6.HTML is very easy to learn and use.

The disadvantages of HTML:

1.HTML can produce only static content.

2. It does not facilitate headers, footers, footnotes.

3. Mathematical typesetting is difficult.

4. Browser Dependent.

5. No tabs and other automatic character spacing

******************************************************************************

Q). Some Basic definitions HTML

HTML stands for Hyper-Text Markup Language. It allows us to create web pages. It does

not include any control structure and can produce only static content. A HTML page consists of

various tags that make a web page.

Webpage

A webpage is a simple document displayable by a browser. Such document is written in the

HTML language. A webpage can embed a variety of different types of resources such as:

 style information — controlling a page's look-and-feel

 scripts — which add interactivity to the page

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-4

 Media — images, sounds, and videos.

website

A collection of WebPages which are grouped together and usually connected together in

various ways. Often called a "web site" or simply a "site."

Web server

A web server is a computer hosting one or more websites. "Hosting" means that all the

WebPages and their supporting files are available on that computer.

Web Browser

A web browser is a software application that people use in order to view web pages on the

internet. It can be used to upload or download files on FTP servers.

Ex:- Google chrome, Internet Explorer, Mozilla, safari, etc…

WWW

The World Wide Web (WWW) is an information space where documents and other web

resources are identified by URLs, interlinked by hypertext links, and can be accessed via the

Internet. The World Wide Web was invented by English scientist Tim Berners-Lee in 1989.

******************************************************************************

Q). HTML Basics

HTML is a language for describing web pages.

1. HTML stands for Hyper Text Markup Language

2. HTML is a markup language

3. A markup language is a set of markup tags

4. The tags describe document content

5. HTML documents contain HTML tags and plain text

6. HTML documents are also called web pages

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-5

Q). Structure of HTML document

First writes a html program in any text editors like Notepad, notepad++, netbeens,

eclipse, etc…, after wrote a HTML document, it can be saved with the .html (or) .htm

extension, For running the html program click on the naming browser icon that can be run

and display output .

A HTML document is basically separated in two parts:

1. head (HTML head tag)

2. body (HTML body tag).

We also add a Document type declaration on top of the basic document structure and

HTML version. The structure of a HTML document is shown below.

Structure of HTML program:

<! DOCTYPE > version information

<HTML>

<HEAD>

...  Information about document title, headings, scripts, styles .

</HEAD>

<BODY>

.......... Actual content of web page .

</BODY>

</HTML>

The! DOCTYPE declaration:

Every well written HTML document begins with a basic declaration that defines what type of

document it is. This declaration is made using the ! DOCTYPE tag and is to be written at

The beginning of the document. It tells the processing agent and HTML version. Sample is

shown below.

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-6

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML> tag:

The html tag acts as a container for the whole document. Every character in the document

should be in between the opening html (< >), and closing with (</ >) end tags. The html

tag can also be used to define the language of the contained document through the "lang"

attribute. The content of the html tag is divided in two parts using the

1. head (HTML head tag)

2. body (HTML body tag).

1. <HEAD> tag:

This section is the document's head. All the information contained in the document's head

is loaded first. It includes tags like title, script, style, Meta and so on.

2. <BODY> tag:

This is the document's body: The body is the container for the web page. All the things

written here will be shown when the document is rendered. Most of the tags in HTML can

be inserted in the body section (inside the HTML body tag).

Example:

<HTML>

<HEAD>

<TITLE> My first Page </TITLE>

</HEAD>

<BODY>

<H1> Hello HTML </H1>

</BODY>

</HTML>

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-7

Output:

******************************************************************************

Q). Tags in HTML

HTML Tags: HTML uses markup tags to describe web pages. HTML markup tags are usually

called HTML tags. There are some tags available in html.

1. Heading tag,

2. Paragraph tag,

3. Horizontal line tag.

Properties of HTML Tags

The properties of tags are listed below.

1) HTML tags are keywords enclosed by angle brackets as in <tag-name>

2) HTML tags normally come in pairs like <tag-name> and </tag-name>, such tags are called

paired tags.

3) The first tag in a pair is the start tag, the second tag is the end tag

4) Start and end tags are also called opening tags and closing tags.

5) Some of the tags have only opening tag. These are called (unpaired) empty tags like

<BR>, <HR>.

6) Each tag may have attributes in them as in <font color=’red’>, here color is attribute and

red‟ is its value.

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science
 Page No:-8

7) No tag in HTML is mandatory. But, a well written HTML document has <HTML>, <HEAD>

and <BODY> tags.

8) Tags are not case sensitive i.e. they may be written in lower or upper case letters.

9) Some tags can also be nested within other tags; for example:

10)<H1> this is my <B> Computer </B> Notes </H1>

11) If a browser cannot interpret a tag, it will be simply ignored.

12)Tags are also called elements of a HTML document.

1. Heading Tags

Heading: There are six headings are available in html starts from <h1> to <h6>, tags are

used to define HTML headings. <h1> defines the most important heading and <h6> defines

the least important heading. The syntax of <h1> to <h6> tags is:

<h1 [align=” left” | “center” | “right” | “justify” ] . . . </p>

The “ align” attribute is optional. It defines the horizontal alignment of its content.

<h1> . . . </h1>

<h2> . . . </h2>

<h3> . . . </h3>

<h4> . . . </h4>

<h5>. . . </h5>

<h6>. . . </h6>

2. Horizontal Line Tag:

The HTML <hr> tag draws a horizontal line and that may be used as separator. This tag

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-9

has a set of attributes such as align, noshade, size and width and they are optional. The

<hr> tag does not require and end tag.

3. Paragraph Tag

Using paragraph, text will be displayed in a separate line. <P> is a tag which is used to create
a paragraph in a HTML page.

Syntax: <P align=”left”/”center”/”right”> Text </P>

The “ align” attribute is optional. It defines the horizontal alignment of its content. Possible
values are:
Left: Text is aligned to the left margin.
Right: Text is aligned to the right margin.
Center: Text is centered.
Justify: Text is justified to both margins.

Ex: A Basic Example:

<! -- This code demonstrates the -- --purpose of headers, paragraph, -- -- break and

horizontal tags -- >

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-10

<html>

<head>

<title> This is Sample Page</title>

</head>

<body>

<h1 align=”left”>This is heading 1</h1>

<h2 align=” left”>This is heading 2</h2>

<h3 align=” left”>This is heading 3</h3

<h4 align=” left”>This is heading 4</h4>

<h5 align=” left”>This is heading 5</h5>

<h6 align=” left”>This is heading 6</h6>

<p align=”left”>This is Basic Web Page Example. <br>

I am studying B. Sc III year(M.P.CS)<br>

This is the second time I am learning HTML</p>

<hr width=”50%”>

</body>

</html>

Output:

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-11

******************************************************************************

Q). Text Formatting Tags in HTML

The text on an html page can be altered in a number of ways. The following HTML tags are

used to format the appearance of the text on your web page.

1. Header -

There are 6 levels of headings available, from h1 for the largest and most important heading,

down to h6 for the smallest heading.

Syntax: <h?> .. </h?>

2. Bold -

The text in between the tags will be bold, it is used to make the text as bold, the same as in

a word processor.

Syntax: <b> .. </b>

3. Italic -

Also working the same way as a word processor, italics display the text at a slight angle.

Syntax: <i> .. </i>

4. Emphasis -

Used to emphasize text, which usually appears in italics, but can vary according to your

browser.

Syntax: <em> . </em>

5. Underline –

Again the same as underline in a word processor. Note that html links are already underlined

and don't need the extra tag.

Syntax: <u> .. </u>

6. Delete- this tag is works same as strike-out tag

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-12

7. Strike-out -

Puts a line right through the centre of the text, crossing it out. Often used to show that text is

old and no longer relevant.

Syntax: <strike> .. </strike>

8. Preformatted Text -

Any text between the pre tags, including spaces, carriage returns and punctuation, will appear

in the browser as it would in a text editor (normally browsers ignore multiple spaces)

Syntax: <pre> .. </pre>

9. Typewriter Text –

The text appears to have been typed by a typewriter, in a fixed-width font.

Syntax: <tt> .. </tt>

10. Small -

Instead of having to set a font size, you can use the small tag to render text slightly smaller

than the text around it.

Syntax: <small> .. </small>

11. Superscript tag-

The superscript tag is used to generate a uperset(power). This tag is used for example in

displaying format

Syntax: ^.

12. Subscript tag-

The superscript tag is used to generate a subset. This tag is used for example in displaying

format

Syntax: _..

13. <font>

Specifies the font face, font size, and font color of text.
Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science
 Page No:-13

<basefont size=”n”> . . . </basefont>

14. Centre -

A useful tag, as it says, it makes everything in between the tags centered (in the middle of the

page).

Syntax: <center> . </center>

Example: A HTML program that illustrates the text formatting tags.

<html>
<head>
<title> Text Formatting Tags</title>
</head>
<body>
<h1>Header Size 1</h1>
<h3>Header Size 3</h3>
<center>
<b>Bold Text</b> <br/>
<i>Italic Text</i> <br/>
<u>underlined text.</u><br/>
</center>

<p><font size="5">Welcome</font><br/>
H₂O
X ²
<em>Text in Emphasis</em><br/>
<strong>Text in Strong</strong><br/>
<pre>
This is preformatted text (using the PRE) tag as it appears in the editor
view.
</pre>

<tt>This text should appear in typewriter</tt><br/>

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science
 Page No:-14

<hr>
<small>The fine print </small>
</body>
</html>

Output

******************************************************************************

Q). Hyperlinks in HTML

In HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or

image that you can click on to jump to another document. When we move the cursor over a

link in a Web page, the arrow will turn into a little hand.

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

 An active link is underlined and red

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href="url"> Click me </a>

The href attribute specifies the destination of a link.

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-15

Ex:

<a href="http://www.google.co.in"> Visit google site </a>.

Which will display like this: Visit www.google.com Clicking on this hyperlink will send the

user to Google‟s homepage.

Hyper links are three types they are

1. Text hyperlinks.

An text hyper links are redirect to the web page when you click on the text. Example

<a href=”www.aknu.edu.in”> click here </a>

2. Image hyperlinks

An image hyperlinks are redirect to the web page when you click on the image. Example

<a href=”www.aknu.edu.in”> <img src=”one.jpg” width=”50” height=”50”> </a>

3. Mail hyperlinks

An mail hyper links are redirect to the mail when you click on the mail. Example

<a href=”[email protected]”> Contact ABC </a>

Note: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

HTML Links - the target Attribute

The target attribute specifies where to open the linked document. The following example will

open the linked document in a new browser window (or) a new tab:

Ex:

<a href="http://www.google.co.in/“ target="_blank"> Visit Google </a>

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-16

Ex: Linking to Other Pages

Step:1 Open the Notepad and type the following code and save it as “first.html ”.

<html>

<head>
<title>First Page</title>
</head>

<body>
<h3>Linking to another page</h3>
<p>Hai, this is Venkat<br>
To know about me please <a href="second.html">Click Here</a>
</body>
</html>

Step:2 Open the Notepad and type the following code and save it as “second.html ”.

<html>

<head>

<title>Second Page</title>

</head>

<body>

<h3>Linking to another page</h3> <br>

<pre>

Name: M. Venkat

Qualification: MCA, M-Tech

Designation: Lecturer in Computer Science

<i> <a href="Home.html">Click Here</a></i>

</pre>

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-17

</body>

</html>

Output:

******************************************************************************

Q). LISTS in HTML

HTML supports three types of lists. They are

1. Ordered Lists

2. Unordered Lists

3. Definition Lists

Tag Description Syntax

<ol> Defines an order list <ol [type=”1”|”a”| “A”]> </ol>
<ul> Defines an Unorder list <ul [type=”disc”|”square”| circle”]>
</ol> .</ul>
<li> Defines a list item <li> </li>

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-18

<dl> Defines a description list <dl [compact]> ..</dl>

<dt> Defines a term/ name in a <dt> </dt>
description list
<dd> Defines a description of a term/ <dd> </dd>
name in a description list

1. Ordered lists

Ordered lists, or numbered lists, are used to display a list of items, which need to be placed in

a specific order. An example would be displayed list computer subjects, which must be

completed in order list:

1. Language C

2. OOP’s with java

3. Data structure

4. Database management system

5. Software engineering

6. Web technologies

An ordered list can be numerical or alphabetical. The <ol> tag defines an ordered list.

The <li> tag is used to define list items.

<html>
<head>
<title>Ordered List in HTML</title>
</head>

<body>
<h3>An Ordered List</h3>
<ol>
<li> Language C</li>

<li> OOP’s with java</li>

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-19

<li> Data structure</li>

<li> Database management system</li>

<li> Software engineering</li>

<li> Web technologies</li>

</ol>
</body>
</html>
Output:

2. Unordered lists

Unordered lists, or bulleted lists, are used when a set of items can be placed in any order.

An example is a shopping list:

 bread

 coffee beans

 milk

 butter

Example:

<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h3>A Bulleted List</h3>

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-20

<ul type="disk">
<li>bread</li>

<li>coffee beans</li>
<li>milk</li>
<li>butter</li>
</ul>

<h3>A Circled List</h3>

<ul type="circle">
<li>bread</li>
<li>coffee beans</li>
<li>milk</li>
<li>butter</li>
</ul>

<h3>A Square List</h3>

<ul type="square">
<li>bread</li>
<li>coffee beans</li>
<li>milk</li>
<li>butter</li>
</ul>
</body>
</html>

Output:

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-21

3.Definition List

A definition list is not a list of single items. It is a list of items (terms), together with a

description of each item (term). 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(data)).

Ex:

<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>

</dl>
</body>
</html>
Output:

Q). Nested Lists:

A nested list is a list within another list. Usually the second list is indented another level and the

item markers will appear differently than the original list.

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-22

Ex:

<html>
<body>
<h4>A Nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul type=”disc”>
<li>Black tea</li>
<li>Green tea
<ul type=”square”>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>

</li>
<li>Milk</li>
</ul>
</body>
</html>

Output:

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-23

******************************************************************************

Q). Tables in HTML

Tables are an excellent way to organize and display information on a page. Tables are

defined using the <table> tag. A table is divided into rows with the <tr> tag, and each row is

divided into data cells using the <td> tag. The letters td stand for “table data,” which is the

content of a data cell. A data cell can contain text, images, lists, paragraphs, forms,

horizontal rules, tables, and so on.

Ex:

HTML Table Tags

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-24

Syntax to create table with different attributes:

<table Align=”left”/”center”/”right” border=”n” Cellspacing=”n” Cellpadding=”n”

height=”n” width=”n”>
<caption>table-name</caption>

<tr>
<th>column1 heding</th>
<th>column2 heding</th>
</tr>
<tr>
<td>column1 data</td>

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-25

<td>column2 data</td>
</tr>
And so on ..
</table>

HTML Table Program:

<html>
<head>
<title>sample table</title>
</head>
<body>
<table align=”left” border=”3” bgcolor=”green” height=”400” width=”300”>
<caption>III M.P.Cs</caption>
<tr>
<th>register no</th>
<th>student name</th>
<th>address</th>
</tr>
<tr>
<td>1100</td>
<td>kavya</td>
<td>BVRM</td>
</tr>
<tr>
<td>2200</td>
<td>harsha</td>
<td>UNDI</td>
</tr>
</table>
</body>
</html>
Output:

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-26

Colspan and Rowspan Attributes in the table:

 These attributes of a table specifies number of rows (or) columns should spans.

 We can also apply require changes for the specify rows and columns with this rowspan and

colspan attributes.

 We need to use colspan attribute of the table as colspan=”n”.

 We need to use rowspan attribute of the table as rowspan=”n”.

HTML Program with colspan attribute:

<html>
<head>
<title>colspan example</title>
</head>
<body>
<table align=”left” border=”2” height=”400” width=”300”>
<caption>COLSPAN</caption>
<tr>
<th>Branch</th>
<th colspan=”3”>Group</th>
</tr>
<tr>
<td>computer science</td>
<td>electronics</td>
<td>physics</td>
<td>statistics</td>
</tr>
</table>
Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science
 Page No:-27

</body>
</html>

Output:

Table Borders:

The border attribute controls the appearance of the table’s borders or lines. The default border

is 0, so if we do not specify a border attribute, the table is displayed without any borders.

Sometimes this is useful, but most of the time, we want the borders to be visible.

Ex:3 The following code demonstrates the use of different table borders.

<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-28

</html>

Output:

Q). Advanced Table with {thead, tbody, tfoot, th} Tags

1) thead is used to enclose a group of rows in a table as a header.

2) tfoot is used to enclose a group of rows in a table as a footer, such as last row for

summary.

3) tbody is for main body of the table.

The {thead, tbody, tfoot} do not have any default rendering. (use CSS for that) When using

thead or tfoot, you can use th instead of td, which will make it bold. Example:

<html>
<head>
<title>Table wit thead, tfoot and tbody tags</title>
</head>
<body>
<table border="1">
<thead>

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-29

<tr>
<th>cats</th>
<th>dogs</th>
</tr>
</thead>
<tbody>
<tr>
<td>7</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Cats win!</th>
</tr>
</tfoot>
</table>
</body>
</html>

Q). bgcolor and color HTML (OR) HTML Colors:

HTML colors are defined using a hexadecimal notation (HEX) 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 (in HEX: 00). The highest value is 255 (in HEX: FF). HEX values are specified

as 3 pairs of two-digit numbers, starting with a # sign. The combination of Red, Green, and

Blue values from 0 to 255, gives more than 16 million different colors (256 x 256 x 256).

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-30

The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,

orange, purple, red, silver, teal, white, and yellow.

Sorted by Color Name:

141 color names are defined in the HTML and CSS color specification (17 standard colors

plus 124 more).

bgcolor attribute:

The “bgcolor” attribute specifies the background color of a document.

Ex:

<html>

<body bgcolor="red">

<h1>Hello world!</h1>

</body>

</html>

When we execute the above code, the background color of the web page changes to red.

color attribute:

The color attribute specifies the color of the text inside a <font> element.

Ex:

<font color="red">This is some text!</font>

******************************************************************************

Q). Images in HTML

In HTML, images are defined with the <img> tag. The img tag is empty, which means that it

contains attributes only and it has no closing tag.

To display an image on a page, we need to use the src attribute. src stands for “

source”. The value of the src attribute is the URL of the image we want to display on our

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-31

page. The syntax of defining an image:

<img src="url" />

The URL points to the location or address where the image is stored.

<img> Tag Syntaxes:

1. <imgsrc=”URL”|“name”height=”n”width=”n”[alt=”string ‟]
[align=”top”|”center”|”bottom”] usemap=”URL”]>

2. Displays an inline image i.e., an image appears in the body of the text.

3. <a href=”URL”>text message </a>

Uses an ordinary hypertext link and URL should point the image file.

1. <a href=”URL”> <img src=”filename”> </a>

Uses an image for hyper link.

2. <img src=”URL” usemap=”URL”>

To display the source image and to map the second URL.

Creates a clickable area on an image map. The attribute “alt= ”string ” indicates for the reader

of where the link goes.

Ex:
<html>
<body>
<p> An image: </p>
<p>
<img src="E:/B.Sc/ohm.jpg" width="100" height="100" />
</p>
</body>
</html>
Output:

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science

 Page No:-32

Background Images:

The following example demonstrates how to add a background image to an HTML page.

Ex:

<html>

<body background="E:/B.Sc /ShirdiSaiBaba.jpg">

<font color=”red”>

<h3>Look: A background image!</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p>

</font>

</body>

</html>

Output:

Prepared By: M. VENKAT (MCA, M-Tech) Lecturer in computer Science