Scribd
Upload
1 views

HTML NOTES PRINT

HTML, or Hyper Text Markup Language, is the standard language for creating web pages, with its first version published in 1995 and the latest being HTML5 released in 2012. The document outlines the basic structure of an HTML document, including essential tags like <html>, <head>, <body>, and various formatting tags such as <h1>, <p>, and <img>. It also explains the use of attributes for HTML elements, including core attributes like id, title, and style, as well as how to create tables and format text.

Uploaded by

Ambiya Begum
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

HTML NOTES PRINT

HTML, or Hyper Text Markup Language, is the standard language for creating web pages, with its first version published in 1995 and the latest being HTML5 released in 2012. The document outlines the basic structure of an HTML document, including essential tags like <html>, <head>, <body>, and various formatting tags such as <h1>, <p>, and <img>. It also explains the use of attributes for HTML elements, including core attributes like id, title, and style, as well as how to create tables and format text.

Uploaded by

Ambiya Begum
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

Page 1

HTML stands for Hyper Text Markup Language, which is the most widely used
language on Web to develop web pages.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML
specification which was published in 1995. HTML 4.01 was a major version of HTML and it
was published in late 1999. Though HTML 4.01 version is widely used but currently we are
having HTML-5 version which is an extension to HTML 4.01, and this version was published
in 2012.

Basic HTML Document


In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here .... </p>
</body>
</html>

HTML Tags
HTML is a markup language and makes use of various tags to format the content. These tags
are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their
corresponding closing tags. For example, <html> has its closing tag</html> and <body> tag
has its closing tag </body> tag etc.

Above example of HTML document Description


uses the following tags: Tag
<!DOCTYPE...> This tag defines the document type and
HTML version.
<html> This tag encloses the complete HTML
document and mainly comprises of document
header which is represented by
<head>...</head> and document body which
is represented by <body>...</body> tags.
<head> This tag represents the document's header
which can keep other HTML tags like <title>,
<link> etc.
<title> The <title> tag is used inside the <head> tag
to mention the document title.
<body> This tag represents the document's body
which keeps other HTML tags like <h1>,
<div>, <p> etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.

Page 2
HTML Document Structure
A typical HTML document will have the following structure:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration tag is used by the web browser to understand the version of
the HTML used in the document. Current version of HTML is 5 and it makes use of the
following declaration:
<!DOCTYPE html>
There are many other declaration types which can be used in HTML document depending on
what version of HTML is being used. We will see more details on this while discussing
<!DOCTYPE...> tag along with other HTML tags.

Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that
heading.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>

Page 3
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p> tag as shown below in the
example:

Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

Line Break Tag


Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an empty element, where you do not need opening and closing tags, as
there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the line break, while if you miss the
forward slash character and just use <br> it is not valid in XHTML.

Example :
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>

Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.

Example :
<!DOCTYPE html>
<html>

Page 4
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a
line from the current position in the document to the right margin and breaks the line
accordingly.
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>

Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to
split the "12, Angry" and "Men" across two lines:
Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>

Page 5
HTML – ELEMENTS

Start Tag Content End Tag

<p> This is paragraph </p>


content.
<h1> This is heading content. </h1>

<div> This is division content. </div>

<br />

HTML Tag vs. Element


An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the same
paragraph but <p>This is paragraph</p> is a paragraph element.

Nested HTML Elements


It is very much allowed to keep one HTML element inside another HTML element:
Example
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
This will display

HTML – ATTRIBUTES
We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag
<p> and other tags. We used them so far in their simplest form, but most of the HTML tags
can also have attributes, which are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside
the element's opening tag. All attributes are made up of two parts: a name and a value:
The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.

The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left, center
and right.

Page 6
Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation.

Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not
all) are:
Id
Title
Class
Style

The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an
HTML page. There are two primary reasons that you might want to use an id attribute on an
element:
If an element carries an id attribute as a unique identifier, it is possible to identify just that
element and its content.

If you have two elements of the same name within a Web page (or style sheet), you can use
the id attribute to distinguish between elements that have the same name.

We will discuss style sheet in separate tutorial. For now, let's use the id attribute to
distinguish between two paragraph elements as shown below.

Example:
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
The title Attribute
The title attribute gives a suggested title for the element. They syntax for the title attribute is
similar as explained for id attribute:

Page 7
The behavior of this attribute will depend upon the element that carries it, although it is
often displayed as a tooltip when cursor comes over the element or while the element is
loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the
element.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
Internationalization Attributes
There are three internationalization attributes, which are available for most (although not
all) XHTML elements.
 dir
 lang
 xml:lang

The dir Attribute


The dir attribute allows you to indicate to the browser about the direction in which the text
should flow. The dir attribute can take one of two values, as you can see in the table that
follows:
Value Meaning
ltr Left to right (the default value)
rtl Right to left (for languages such as
Hebrew or Arabic that are read right to
left)

Example
<!DOCTYPE html>
<html dir="rtl">

Page 8
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>

The lang Attribute


The lang attribute allows you to indicate the main language used in a document, but this
attribute was kept in HTML only for backwards compatibility with earlier versions of HTML.
This attribute has been replaced by the xml:lang attribute in new XHTML documents.

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>

The xml:lang Attribute


The xml:lang attribute is the XHTML replacement for the lang attribute. The value of
thexml:lang attribute should be an ISO-639 country code as mentioned in previous section.
Generic Attributes
Here's a table of some Options Function
other attributes that
are readily usable
with many of the
HTML tags. Attribute

align right, left, center Horizontally aligns tags


valign top, middle, bottom Vertically aligns tags within an
HTML element.
bgcolor numeric, hexidecimal, RGB values Places a background color
behind an element
background URL Places a background image
behind an element
id User Defined Names an element for use with
Cascading Style Sheets.
class User Defined Classifies an element for use
with Cascading Style Sheets.

width Numeric Value Specifies the width of tables,


images, or table cells.

Page 9
height Numeric Value Specifies the height of tables,
images, or table cells.

title User Defined "Pop-up" title of the elements.

HTML – FORMATTING
If you use a word processor, you must be familiar with the ability to make text bold,
italicized, or underlined; these are just three of the ten options available to indicate how text
can appear in HTML and XHTML.
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

Page 10
HTML – IMAGES
are very important to beautify as well as to depict many complex concepts in simple way on
your web page. This tutorial will take you through simple steps to use images in your web
pages.
Insert Image
You can insert any image in your web page by using <img> tag. Following is the simple
syntax to use this tag.
<img src="Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it
has no closing tag.
Example
To try following example, let's keep our HTML file test.htm and image file test.png in the
same directory:

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="test.png" alt="Test Image" />
</body>
</html>

You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify
correct image file name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if
the image cannot be displayed.
Set Image Width/Height
You can set image width and height based on your requirement using width and height
attributes. You can specify width and height of the image in terms of either pixels or
percentage of its actual size.

Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="test.png" alt="Test Image" width="150" height="100"/>
</body>
</html>

Page 11
Set Image Border
By default, image will have a border around it, you can specify border thickness in terms of
pixels using border attribute. A thickness of 0 means, no border around the picture.

Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="test.png" alt="Test Image" border="3"/>
</body>
</html>
Set Image Alignment
By default, image will align at the left side of the page, but you can use align attribute
to set it in the center or right.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="test.png" alt="Test Image" border="3" align="right"/>
</body>
</html>

HTML – TABLES
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create
table rows and <td> tag is used to create data cells.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>

Page 12
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

This will produce the following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which
is used to represent actual data cell. Normally you will put your top row as table heading as
shown below, otherwise you can use <th> element in any row.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Page 13
This will produce the following result:
Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes


There are two attributes called cellpadding and cellspacing which you will use to adjust the
white space in your table cells. The cellspacing attribute defines the width of the border,
while cellpadding represents the distance between cell borders and the content within a
cell.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Page 14
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more rows.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce the following result:

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Tables Backgrounds
You can set table background using one of the following two ways:
 bgcolor attribute - You can set background color for whole table or just for one cell.
 background attribute - You can set background image for whole table or just for
one cell.
 background attribute - You can set background image for whole table or just for
one cell.

Page 15
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce the following result:

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Here is an example of using background attribute. Here we will use an image available in
/images directory.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>

Page 16
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce the following result.

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Table Height and Width


You can set a table width and height using width and height attributes. You can specify
table width or height in terms of pixels or in terms of percentage of available screen area.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Page 17
This will produce the following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of
the table. This tag is deprecated in newer version of HTML/XHTML.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, column 2</td>
</tr>
</table>
</body>
</html>

This will produce the following result:

This is the caption

row 1, column 1 row 1, column 2

row 2, column 1 row 2, column 2

Page 18
Table Header, Body, and Footer
Tables can be divided into three portions: a header, a body, and a foot. The head and foot are
rather similar to headers and footers in a word-processed document that remain the same
for every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are:
 <thead> - to create a separate table header.
 <tbody> - to indicate the main body of the table.
 <tfoot> - to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups of data.
But it is notable that <thead> and <tfoot> tags should appear before <tbody>

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>

Page 19
This will produce the following result:

This is the head of the table

This is the foot of the table

Cell 1 Cell 2 Cell 3 Cell 4

Nested Tables
You can use one table inside another table. Not only tables you can use almost all the tags
inside table data tag <td>.

Example
Following is the example of using another table and other tags inside a table cell.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<table border="1" width="100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Page 20
This will produce the following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

HTML – LISTS
HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more list elements. Lists may contain:

 <ul> - An unordered list. This will list items using plain bullets.
 <ol> - An ordered list. This will use different schemes of numbers to list your items.
 <dl> - A definition list. This arranges your items in the same way as they are
arranged in a dictionary.

HTML Unordered Lists


An unordered list is a collection of related items that have no special order or sequence.
This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce the following result:

 Beetroot
 Ginger
 Potato
 Radish

Page 21
The type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a
disc. Following are the possible options:
<ul type="square">
<ul type="disc">
<ul type="circle">
Example
Following is an example where we used <ul type="square">

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce the following result:


 Beetroot
 Ginger
 Potato
 Radish

Example
Following is an example where we used <ol type="a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

Page 22
This will produce the following result:
Beetroot
Ginger
Potato
Radish

The start Attribute


You can use start attribute for <ol> tag to specify the starting point of numbering you need.
Following are the possible options:
<ol type="1" start="4"> - Numerals starts with 4.
<ol type="I" start="4"> - Numerals starts with IV.
<ol type="i" start="4"> - Numerals starts with iv.
<ol type="a" start="4"> - Letters starts with d.
<ol type="A" start="4"> - Letters starts with D.

Example

Following is an example where we used <ol type="i" start="4" >


<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce the following result:


 Beetroot
 Ginger
 Potato
 Radish

HTML Definition Lists


HTML and XHTML supports a list style which is called definition lists where entries are
listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a
glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

 <dl> - Defines the start of the list


 <dt> - A term
 <dd> - Term definition
 </dl> - Defines the end of the list

Page 23
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

This will produce the following result:

HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

HTML – TEXT LINKS


A webpage can contain various links that take you directly to other pages and even specific
parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and
images. Thus you can create hyperlinks using text or images available on a webpage.
Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between
the opening <a> tag and the closing </a> tag becomes part of the link and a user can click
that part to reach to the linked document. Following is the simple syntax to use <a> tag.
<a href="Document URL" ... attributes-list>Link Text</a>

Example
Let's try following example which links http://www.tutorialspoint.com at your page:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a>
</body>
</html>

Page 24
The target Attribute
We have used target attribute in our previous example. This attribute is used to specify the
location where linked document is opened. Following are the possible options:

Option Description

_blank Opens the linked document in a


new window or tab.

_self Opens the linked document in the


same frame.

_parent Opens the linked document in the


parent frame.

_top Opens the linked document in the


full body of the window.

targetframe Opens the linked document in a


named targetframe.

Example

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href="/html/index.htm" target="_blank">Opens in New</a> |
<a href="/html/index.htm" target="_self">Opens in Self</a> |
<a href="/html/index.htm" target="_parent">Opens in Parent</a> |
<a href="/html/index.htm" target="_top">Opens in Body</a>
</body>
</html>

Use of Base Path


When you link HTML documents related to the same website, it is not required to give a
complete URL for every link. You can get rid of it if you use <base> tag in your HTML
document header. This tag is used to give a base path for all the links. So your browser will
concatenate given relative path to this base path and will make a complete URL.

Page 25
Example
Following example makes use of <base> tag to specify base URL and later we can use
relative path to all the links instead of giving complete URL for every link.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>

Setting Link Colors


You can set colors of your links, active links and visited links using link, alink and vlink
attributes of <body> tag.

Example
Save the following in test.htm and open it in any web browser to see how link, alink and
vlink attributes work.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tutorialspoint.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="/html/index.htm" target="_blank" >HTML Tutorial</a>
</body>
</html>

Download Links
We can create text link to make your PDF, or DOC or ZIP files downloadable. This is very
simple; you just need to give complete URL of the downloadable file as follows:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<a href="http://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>

Page 26
HTML – IMAGE LINKS
We have seen how to create hypertext link using text and we also learnt how to use images
in our webpages. Now, we will learn how to use images to create hyperlinks.

Example
It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the
place of text as shown below:

<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tutorialspoint.com" target="_self">
<img src="/images/logo.png" alt="Tutorials Point" border="0"/>
</a>
</body>
</html>

Mouse-Sensitive Images
The HTML and XHTML standards provides a feature that lets you embed many different
links inside a single image. You can create different links on the single image based on
different coordinates available on the image. Once different links are attached to different
coordinates, we can click different parts of the image to open target documents. Such
mouse-sensitive images are known as image maps.

There are two ways to create image maps:


 Server-side image maps - This is enabled by the ismap attribute of the <img> tag
and requires access to a server and related image-map processing applications.

 Client-side image maps - This is created with the usemap attribute of the <img>
tag, along with corresponding <map> and <area> tags.

HTML – FRAMES
HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window
is known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns.
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in
your webpages:
 Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.

 Sometimes your page will be displayed differently on different computers due to


different screen resolution.

Page 27
 The browser's back button might not work as the user hopes.

 There are still few browsers that do not support frame technology.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by
<frame> tag and it defines which HTML document shall open into the frame.

Example
Following is the example to create three horizontal frames:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

The <frameset> Tag Attributes


Following are important attributes of the <frameset> tag:

Attribute Description

cols Specifies how many columns are contained in the frameset and
the size of each column. You can specify the width of each
column in one of the four ways:
Absolute values in pixels. For example, to create three vertical
frames, use cols="100, 500,100".
A percentage of the browser window. For example, to create
three vertical frames, use cols="10%, 80%,10%".
Using a wildcard symbol. For example, to create three vertical
frames, use cols="10%, *,10%". In this case wildcard takes
remainder of the window.
As relative widths of the browser window. For example, to
create three vertical frames, use cols="3*,2*,1*". This is an

Page 28
alternative to percentages. You can use relative widths of the
browser window. Here the window is divided into sixths: the
first column takes up half of the window, the second takes one
third, and the third takes one sixth.

rows This attribute works just like the cols attribute and takes the
same values, but it is used to specify the rows in the frameset.
For example, to create two horizontal frames, use rows="10%,
90%". You can specify the height of each row in the same way
as explained above for columns.
border This attribute specifies the width of the border of each frame in
pixels. For example, border="5". A value of zero means no
border.
frameborder This attribute specifies whether a three-dimensional border
should be displayed between frames. This attribute takes value
either 1 (yes) or 0 (no). For example frameborder="0" specifies
no border.
framespacing This attribute specifies the amount of space between frames in
a frameset. This can take any integer value. For example
framespacing="10" means there should be 10 pixels spacing
between each frames.

Attribute Description
src This attribute is used to give the file name that should be loaded in
the frame. Its value can be any URL. For example,
src="/html/top_frame.htm" will load an HTML file available in
html directory.
name This attribute allows you to give a name to a frame. It is used to
indicate which frame a document should be loaded into. This is
especially important when you want to create links in one frame
that load pages into an another frame, in which case the second
frame needs a name to identify itself as the target of the link.
frameborder This attribute specifies whether or not the borders of that frame
are shown; it overrides the value given in the frameborder
attribute on the <frameset> tag if one is given, and this can take
values either 1 (yes) or 0 (no).
marginwidth This attribute allows you to specify the width of the space between
the left and right of the frame's borders and the frame's content.
The value is given in pixels. For example marginwidth="10".
marginheight This attribute allows you to specify the height of the space
between the top and bottom of the frame's borders and its
contents. The value is given in pixels. For example
marginheight="10".
noresize By default, you can resize any frame by clicking and dragging on
the borders of a frame. The noresize attribute prevents a user from
being able to resize the frame. For example noresize="noresize".

Page 29
scrolling This attribute controls the appearance of the scrollbars that appear
on the frame. This takes values either "yes", "no" or "auto". For
example scrolling="no" means it should not have scroll bars.
longdesc This attribute allows you to provide a link to another page
containing a long description of the contents of the frame. For
example longdesc="framedescription.htm"

The <frame> Tag Attributes


Following are the important attributes of <frame> tag:

Frame's name and target attributes


One of the most popular uses of frames is to place navigation bars in one frame and then
load main pages into a separate frame.
Let's see following example where a test.htm file has following code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="200, *">
<frame src="/html/menu.htm" name="menu_page" />
<frame src="/html/main.htm" name="main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

Following is the content of menu.htm file

<!DOCTYPE html>
<html>
<body bgcolor="#4a7d49">
<a href="http://www.google.com" target="main_page">Google</a>
<br /><br />
<a href="http://www.microsoft.com" target="main_page">Microsoft</a>
<br /><br />
<a href="http://news.bbc.co.uk" target="main_page">BBC News</a>
</body>
</html>

Page 30
Following is the content of main.htm file:

<!DOCTYPE html>
<html>
<body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>

HTML – IFRAMES

You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow
related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe>
tag defines a rectangular region within the document in which the browser can display a
separate document, including scrollbars and borders.
The src attribute is used to specify the URL of the document that occupies the inline frame.

Example
Following is the example to show how to use the <iframe>:

<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555" height="200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>

Attribute Description
src This attribute is used to give the file name that should be loaded in
the frame. Its value can be any URL. For example,
src="/html/top_frame.htm" will load an HTML file available in html
directory.
name This attribute allows you to give a name to a frame. It is used to
indicate which frame a document should be loaded into. This is
especially important when you want to create links in one frame
that load pages into an another frame, in which case the second
frame needs a name to identify itself as the target of the link.
frameborder This attribute specifies whether or not the borders of that frame are
shown; it overrides the value given in the frameborder attribute on

Page 31
the <frameset> tag if one is given, and this can take values either 1
(yes) or 0 (no).
marginwidth This attribute allows you to specify the width of the space between
the left and right of the frame's borders and the frame's content.
The value is given in pixels. For example marginwidth="10".
marginheight This attribute allows you to specify the height of the space between
the top and bottom of the frame's borders and its contents. The
value is given in pixels. For example marginheight="10".
noresize By default, you can resize any frame by clicking and dragging on the
borders of a frame. The noresize attribute prevents a user from
being able to resize the frame. For example noresize="noresize".
scrolling This attribute controls the appearance of the scrollbars that appear
on the frame. This takes values either "yes", "no" or "auto". For
example scrolling="no" means it should not have scroll bars.
longdesc This attribute allows you to provide a link to another page
containing a long description of the contents of the frame. For
example longdesc="framedescription.htm"

The <Iframe> Tag Attributes


Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc,
marginheight, marginwidth, name, scrolling, style, and title behave exactly like the
corresponding attributes for the <frame> tag.

HTML – FORMS
HTML Forms are required, when you want to collect some data from the site visitor. For
example, during user registration you would like to collect information such as name, email
address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will perform required
processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax:

<form action="Script URL" method="GET|POST">


form elements like input, textarea etc.
</form>

Form Attributes

Attribute Description

action Backend script ready to process your passed data.


method Method to be used to upload data. The most frequently used are GET

Page 32
and POST methods.
target Specify the target window or frame where the result of the script will
be displayed. It takes values like _blank, _self, _parent etc.
enctype You can use the enctype attribute to specify how the browser encodes
the data before it sends it to the server. Possible values are:
application/x-www-form-urlencoded - This is the standard method
most forms use in simple scenarios.
mutlipart/form-data - This is used when you want to upload binary
data in the form of files like image, word file etc.

Apart from common attributes, following is a list of the most frequently used form
attributes:

HTML Form Controls


There are different types of form controls that you can use to collect data using HTML form:
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

Text Input Controls


 There are three types of text input used on forms:
 Single-line text input controls - This control is used for items that require only one
line of user input, such as search boxes or names. They are created using HTML
<input> tag.

 Password input controls - This is also a single-line text input but it masks the
character as soon as a user enters it. They are also created using HTMl <input> tag.

 Multi-line text input controls - This is used when the user is required to give details
that may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.

Single-line text input controls


This control is used for items that require only one line of user input, such as search boxes
or names. They are created using HTML <input> tag.

Example
Here is a basic example of a single-line text input used to take first name and last name:

<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>

Page 33
</head>
<body>
<form >
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>

Attributes
Following is the list of attributes for <input> tag for creating text field.

Attribute Description

type Indicates the type of input control and for text input control it
will be set totext.

name Used to give a name to the control which is sent to the server
to be recognized and get the value.
value This can be used to provide an initial value inside the control.
size Allows to specify the width of the text-input control in terms
of characters.
maxlength Allows to specify the maximum number of characters a user
can enter into the text box.

Password Input controls


This is also a single-line text input but it masks the character as soon as a user enters it.
They are also created using HTML <input> tag but type attribute is set to password.

Example
Here is a basic example of a single-line password input used to take user password:

<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="password" />
</form>
</body>
</html>

Page 34
Attribute Description

type Indicates the type of input control and for password input
control it will be set to password.
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
value This can be used to provide an initial value inside the
control.

size Allows to specify the width of the text-input control in


terms of characters.

maxlength Allows to specify the maximum number of characters a


user can enter into the text box.

Multiple-Line Text Input Controls


This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
Example
Here is a basic example of a multi-line text input used to take item description:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description: <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>

Attributes
Following is the list of attributes for <textarea> tag.

Attribute Description

name Used to give a name to the control which is sent to the server to be
recognized and get the value.
rows Indicates the number of rows of text area box.

Page 35
cols Indicates the number of columns of text area box

Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox.

Example
Here is an example HTML code for a form with two checkboxes:

<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>

Radio Button Control


Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.

Example
Here is example HTML code for a form with two radio buttons:

<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
</body>
</html>

Attributes
Following is the list of attributes for radio button.

Page 36
Attribute Description

type Indicates the type of input control and for checkbox input
control it will be set to radio.

name Used to give a name to the control which is sent to the server
to be recognized and get the value.

value The value that will be used if the radio box is selected.
checked Set to checked if you want to select it by default.

Select Box Control


A select box, also called drop down box which provides option to list down various options
in the form of drop down list, from where a user can select one or more options.

Example
Here is example<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>

Attributes
Following is the list of important attributes of <select> tag:

Attribute Description

name Used to give a name to the control which is sent to the server to be
recognized and get the value.

size This can be used to present a scrolling list box.

multiple If set to "multiple" then allows a user to select multiple items from
the menu.

Page 37
Following is the list of important attributes of <option> tag:
Attribute Description

value The value that will be used if an option in the select box box is selected.
selected Specifies that this option should be the initially selected value when the
page loads.
label An alternative way of labeling options

File Upload Box


If you want to allow a user to upload a file to your web site, you will need to use a file upload
box, also known as a file select box. This is also created using the <input> element but type
attribute is set to file.

Example
Here is example HTML code for a form with one file upload box:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>

Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable
button using <input> tag by setting its type attribute to button. The type attribute can take
the following values:
Type Description

submit This creates a button that automatically submits a form.

reset This creates a button that automatically resets form controls to


their initial values.
button This creates a button that is used to trigger a client-side script
when the user clicks that button.
image This creates a clickable button but we can use an image as
background of the button.

Page 38
Example
Here is example HTML code for a form with three types of buttons:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>
</body>
</html>

Hidden Form Controls


Hidden form controls are used to hide data inside the page which later on can be pushed to
the server. This control hides inside the code and does not appear on the actual page. For
example, following hidden form is being used to keep current page number. When a user
will click next page then the value of hidden control will be sent to the web server and there
it will decide which page will be displayed next based on the passed current page.

Example
Here is example HTML code to show the usage of hidden control:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>

Page 39
HTML – EMBED MULTIMEDIA

Sometimes you need to add music or video into your web page. The easiest way to add video
or sound to your web site is to include the special HTML tag called <embed>. This tag
causes the browser itself to include controls for the multimedia automatically provided
browser supports <embed> tag and given media type.
You can also include a <noembed> tag for the browsers which don't recognize the <embed>
tag. You could, for example, use <embed> to display a movie of your choice, and
<noembed> to display a single JPG image if browser does not support <embed> tag.

Example
Here is a simple example to play an embedded midi file:

<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src="/html/yourfile.mid" width="100%" height="60" >
<noembed><img src="yourimage.gif" alt="Alternative Media" ></noembed>
</embed>
</body>
</html>

Page 40
Exercise:
Choose the True or False.
1. It is possible for a domain name can be known to an ISP Internet server.
2. A single Computer having permanent IP can host multiple virtual domains on its dark
disk drive?
3. TCP/TP is not a connection independent protocol?
4. HTML Mallows only basic static text to be displayed on the page.
5. GIF constructors or Adobe Photoshop can be used. GIF & JPG picture formats.
6. SRC takes the name of an image file to be displayed as a parameter.
7. The table raw is defined with the <TD> & </TD> tag pair?
8. Cellspacing controls the distance between the data in a cell and boundaries of the
cell.
9. Align=’’top’’ will place the caption immediately above the table.
10. Anchor targets links to be beginning of the document.
11. The color of the links can be changed in the body <body>tag.
12. The filename has always has to be mention before the symbol (#) in the href
attribute of a link.

Answer the followings


1) What is Internet?
2) What is URL?
3) Write the basic HTML program using picture with font.
4) Define File Transfer Protocol (FTP).
5) Write the advantages of uses of internet?
6) What is Web Browser?
7) Write the advantages of uses of internet.
8) Write a program using unordered list <ul> tag (add at least five items).
9) Define header row<th> tag?
10)What is frameset tag in HTML?
11)Define Netscape in Java Script language?
12)Write the advantages of Ecommerce?

Answer the following questions

I. Write a simple HTML program using marquee scroll delay & marquee behaviour with
an image?
II. Use the <A href> tag to link the web pages with the text “This is my HTML program
“, set the page background=”sky-blue” & insert a picture on it.
III. Explain the different layers of internet?
IV. Difference between HTML & XML?
V. Define frame? What is frameset tag?
VI. Write a program to table border=”2” with cell spacing=50, cell padding=20, at least
three column & 4 rows in HTML.
VII. Define internet protocol & telnet?
VIII. Define table I HTML? Explain Header row <th> & Data row <tr>?
IX. Explain the advantages of JavaScript in HTML?
X. Why Ecommerce needed in electronic business?

Page 41

You might also like