Unit-2

Elements of HTML: HTML Tags, Working with Text, Working with Lists, Tables and
Frames, Working with Hyperlinks, Images and Multimedia, Working with Forms and
controls

2.1 HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But
some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to
right. HTML tags are used to create HTML documents and render their properties. Each HTML
tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code requirement.

o All HTML tags must enclosed within < > these brackets.

o Every tag in HTML perform different tasks.

o If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)

Syntax

<tag> content </tag>

2.2 Text tags

HTML contains several elements for defining text with a special meaning.
Example

This text is bold

This text is italic

HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example

<b>This text is bold</b>

The HTML <strong> element defines text with strong importance. The content inside is typically
displayed in bold.
Example

<strong>This text is important!</strong>

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is
typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a
thought, a ship name, etc.

<i>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is typically displayed in
italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Example

<em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:

Example

<small>This is some smaller text.</small>

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

Example

<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will
usually strike a line through deleted text:

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will
usually underline inserted text:

Example

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

HTML <sub> Element

 The HTML <sub> element defines subscript text. Subscript text appears half a character below
the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for
chemical formulas, like H2O:

Example

<p>This is _subscripted text.</p>

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character
above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used
for footnotes, like WWW[1]:

Example

<p>This is ^{superscripted} text.</p>

HTML Exercises

Test Yourself With Exercises

HTML Text Formatting Elements

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

2.3Working with Lists

Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes
provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of
instructions. With a list for nearly everything, it’s easy to understand why they are also popular
online.

When we want to use a list on a website, HTML provides three different types to choose from:
unordered, ordered, and description lists. Choosing which type of list to use—or whether to use a
list at all—comes down to the content and the most semantically appropriate option for
displaying that content.

In addition to the three different types of lists available within HTML, there are multiple ways to
style these lists with CSS. For example, we can choose what type of marker to use on a list. The
marker could be square, round, numeric, alphabetical, or perhaps nonexistent. Also, we can
decide if a list should be displayed vertically or horizontally. All of these choices play significant
roles in the styling of our web pages.

Unordered Lists

An unordered list is simply a list of related items whose order does not matter. Creating an
unordered list in HTML is accomplished using the unordered list block-level element, <ul>.
Each item within an unordered list is individually marked up using the list item element, <li>.

By default, most browsers add a vertical margin and left padding to the <ul> element and

precede each <li> element with a solid dot. This solid dot is called the list item marker, and it can
be changed using CSS.

E.g

<ul>

<li>Orange</li>

<li>Green</li>

<li>Blue</li>
 </ul>

Output :Unordered Lists Demo

 Orange
 Green
 Blue

Ordered Lists
The ordered list element, <ol>, works very much like the unordered list element; individual list
items are created in the same manner. The main difference between an ordered list and an
unordered list is that with an ordered list, the order in which items are presented is important.

Because the order matters, instead of using a dot as the default list item marker, an ordered list
uses numbers.

<ol>

<li>Orange</li>

<li>Green</li>

<li>Blue</li>

</ol>

Ordered lists also have unique attributes available to them including start and reversed.

Ordered Lists Demo

1. Blue

2. Green

3. Orange

Start Attribute
The start attribute defines the number from which an ordered list should start. By default,
ordered lists start at 1. However, there may be cases where a list should start at 30 or another
number. When we use the start attribute on the <ol> element, we can identify exactly which
number an ordered list should begin counting from.

The start attribute accepts only integer values, even though ordered lists may use different
numbering systems, such as roman numerals.

<ol start="30">

<li>Orange</li>

<li>Green</li>

<li>Blue</li>

</ol>

Start Attribute Demo

30. Blue

31. Green

32. Orange

Reversed Attribute

The reversed attribute, when used on the <ol> element, allows a list to appear in reverse order.

An ordered list of five items numbered 1 to 5 may be reversed and ordered from 5 to 1.

The reversed attribute is a Boolean attribute, and as such it doesn’t accept any value. It is either
true or false. False is the default value; the value becomes true when the attribute
name reversed appears on the <ol> element.

<ol reversed>

<li>Orange</li>
<li>Green</li>

<li>Blue</li>

</ol>

Reversed Attribute Demo

3. Blue

2. Green

1. Orange

Value Attribute

The value attribute may be used on an individual <li> element within an ordered list to change its

value within the list. The number of any list item appearing below a list item with
a value attribute will be recalculated accordingly.

As an example, if the second list item has a value attribute value of 9, the number on that list
item marker will appear as if it is the ninth item. All subsequent list items will be numbered
upwards from 9.

<ol>

<li>Orange</li>

<li>value="9"Green</li>
<li>Blue</li>

</ol>

Value Attribute Demo

1. Blue

9. Green
10. Orange

Description Lists

Another type of list seen online (but not as often as unordered or ordered lists) is the description
list. Description lists are used to outline multiple terms and their descriptions, as in a glossary,
for example.

Creating a description list in HTML is accomplished using the description list block-level
element, <dl>. Instead of using a <li> element to mark up list items, the description list requires
two block-level elements: the description term element, <dt>, and the description element, <dd>.

A description list may contain numerous terms and descriptions, one after the other.
Additionally, a description list may have multiple terms per description, as well as multiple
descriptions per term. A single term may have multiple meanings and warrant multiple
descriptions. Conversely, a single description may be suitable for multiple terms.

When adding a description list, the <dt> element must come before the <dd> element. The
definition term and the description that directly follows it correspond to one another; thus, the
order of these elements is important.

By default, the <dl> element will include vertical margins, just like the <ul> and <ol> elements.

Additionally, the <dd> element includes a left margin by default.

<dl>
<dt>study</dt>
<dd>The devotion of time and attention to acquiring knowledge on an academic subject,
especially by means of books</dd>
<dt>design</dt>
<dd>A plan or drawing produced to show the look and function or workings of a building,
garment, or other object before it is built or made</dd>
<dd>Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or
material object</dd>
<dt>business</dt>
<dt>work</dt>
 <dd>A person's regular occupation, profession, or trade</dd>
</dl>

Description Lists Demo

Study
The devotion of time and attention to acquiring knowledge on an academic subject, especially by
means of books

Design

A plan or drawing produced to show the look and function or workings of a building, garment, or
other object before it is built or made

Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material
object

Business

Work

A person's regular occupation, profession, or trade

Nesting Lists

One feature that makes lists extremely powerful is their ability to be nested. Every list may be
placed within another list; they can be nested continually. But the potential to nest lists
indefinitely doesn’t provide free rein to do so. Lists should still be reserved specifically for
where they hold the most semantic value.

One trick with nesting lists is to know where to begin and end each list and list item. Speaking
specifically about unordered and ordered lists, as that is where most nesting will occur, the only
element that may reside directly within the <ul> and <ol> elements is the <li> element. To
repeat, the only element we can place as a direct child of the <ul> and <ol> elements is
the <li> element.
That said, once inside the <li> element, the standard set of elements may be added, including
any <ul> or <ol> elements.

To nest a list rather than closing a list item, begin a new list. Once the nested list is complete and
closed, close the wrapping list item and continue on with the original list.

<ol>

<li>Walk the dog</li>

<li>Fold laundry</li>

<li>

Go to the grocery and buy:

<ul>

<li>Milk</li>

<li>Bread</li>

<li>Cheese</li>

</ul>

</li>

<li>Mow the lawn</li>

<li>Make dinner</li>

</ol>

Nesting Lists Demo

Walk the dog

Fold laundry

Go to the grocery and buy:

Milk

Bread

Cheese

Mow the lawn

Make dinner

Because nesting lists can be a little tricky—and unwanted styles will appear if it’s done
incorrectly—let’s quickly review. The <ul> and <ol> elements may contain only <li> elements.
The <li> element may contain any normal element as desired; however, the <li> element has to
be a direct child of either a <ul> or <ol> element.

It’s also worth noting that as lists are nested inside of other lists, their list item markers will
change according to how deeply the list is nested. In the previous example, the unordered list
nested within the ordered list uses hollow circles instead of solid discs as the list item marker.
This change happens because the unordered list is nested one level into the ordered list.

2.4 Tables and Frames:

Frames and tables are extremely important in web design. It is impossible to create a navigation
bar on a website without using frames or tables in one form or another.

An example of this is that this page is completely enclosed in a giant invisible table. It has a
column down the side to put the navigation in and a giant cell for all the page text. I could also
have got the same effect using frames.

There is one major difference between frames and tables.

Frames divide up your browser window into separate areas. In each of these a page is loaded.
Links in different pages can be made to change the pages in other frames and frames can stay the
same when another page changes. This means that you can have one page which has the
navigation bar for a whole site on it and it never changes.
Tables divide up a web page into separate cells (like in a spreadsheet). This means that you have
a lot more control over where text and pictures can be placed. By using the method I described
earlier (having a column for a navigation bar and a cell for the page text) you can create complex
page structures. A page looking the same could be created with frames and tables.

The best feature of using frames is, of course, the ability to update every page on your site using
one file. For example: if I used frames on Free Webmaster Help I could add another link to the
navigation bar on one page. When the frames loaded on the web you would see this change,
whatever page you are on.

Frames also make very consistent pages. As you are only changing the text for each page of the
site, the actual look of the page will not change much in the user's browser.

When used properly frames can make a very good design feature and, once each frame has
loaded, the loading times of a site are a lot less (as, usually, only one frame is ever changed
throughout the whole site).

Frames do have their bad points, though. One of the major ones is that, even though frames have
been around for a long time, they are still not fully supported. Some people who are still using
older browsers cannot view frames sites. Even worse, some search engines will not index pages
using frames! This could mean a great loss of traffic for your website

Another problem with frames is that if someone arrives at an internal page on your site the
frames will not appear. This could mean that someone might read a page and not actually know
they are on your site.

The final problem is that it is very difficult to bookmark an internal page in your site and if
someone bookmarks a page on your site (using most browsers) and return later, they will see
your first page, not the one they bookmarked.

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. The elements under <td>
are regular and left aligned by default

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>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>

This will produce the following result −

Here, the border is an attribute of <table> tag and it is used to put a border across all
the cells. If you do not need a border, then you can use border = "0".
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. Headings,
which are defined in <th> tag are centered and bold by default.

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>

This will produce the following result −

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 space between
table cells, 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>

This will produce the following result −

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 −

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.

You can also set border color also using bordercolor attribute.

Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do

not use these attributes.

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 −

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>
</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. Here background image did not apply to table's
header.

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>

This will produce the following result −

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, columnn 2</td>
</tr>

<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>

This will produce the following result −

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>

This will produce the following result −

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>

This will produce the following result −

Frames In HTML

This code creates a page with a left frame for contents.

<html>
<head>
<title>My Frames Page</title>
</head>
<frameset border="0" cols="150,*" frameborder="0">
<frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize>
<frame name="main" src="main.htm" scrolling="auto" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

Description of code:

<html>
<head>
<title>My Frames Page</title>
</head>

This is the standard start for an HTML document. The title will appear in the browser's title bar
for every page on the site as it is contained in frames.

<frameset border="0" cols="150,*" frameborder="0">

This declares a frames page. It sets the border as none and the frames borders as none. The part:

cols="150,*"

Says that the frames should be columns. One should be 150 pixels wide and the other should fill
up the rest of the screen. This is a very versatile tag. You can use percentages instead of the
values and any number of frames can be added by just adding another comma.

You can also change this to rows= to make the frames rows instead.

<frame name="contents" target="main" src="contents.htm" scrolling="auto" noresize>

This is the tag for the first frame. It tells you the frame should be referred to as contents, links in
it will open in the frame called main, the page to be loaded in the frame is contents.htm and that
scrollbars should be used if needed. It also tells the browser not to allow the user to resize the
frame. Other values which could have been used for scrolling could be yes and no. These would
set the browser to always display scollbars or never display them respectively.

<frame name="main" src="main.htm" scrolling="auto" noresize>

This is the tag for the second frame.

<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
This is the area where you can put the information to be displayed by browsers which don't
support frames. It is a normal HTML page between the <body></body> tags.

</frameset>
</html>

This text loses the frames and HTML tags.

The final thing you need to know to use the a tag to make hyperlinks refer to another frame. To
do this you add target="framename" to the hyperlink tag. For example to make a page load in the
main frame you would use:

<a href="page.htm" target="main">Click Here</a>

You can also use:

_self - Opens in same frame

_top and _parent - Opens over the top of the frames page, removing the frames
_blank - A new window (not necessarily for frames pages).

2.5 Working with Links

Links are found in nearly all web pages. Links allow users to click their way
from page to page.

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little
hand.
Note: A link does not have to be text. A link can be an image or any other
HTML element!

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is the href attribute, which

indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example

This example shows how to create a link to W3Schools.com:

<a href="https://www.Google.com/">Visit Google.com!</a>

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

Tip: Links can of course be styled with CSS, to get another look!

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window.
To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was

clicked
 _blank - Opens the document in a new window or tab
  _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

Example

Use target="_blank" to open the linked document in a new browser window

or tab:

<a href="https://www.Google.com/" target="_blank">Visit Google!</a>

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in
the href attribute.

A local link (a link to a page within the same website) is specified with
a relative URL (without the "https://www" part):

Example
<h2>Absolute URLs</h2>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's
email program (to let them send a new email):

Example
<a href="mailto:someone@example.com">Send email</a>

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a

click of a button:

Example
<button onclick="document.location='default.asp'">HTML
Tutorial</button>

Link Titles

The title attribute specifies extra information about an element. The

information is most often shown as a tooltip text when the mouse moves
over the element.

Example
<a href="https://www.google.com/html/" title="Go to google HTML
section">Visit our HTML Tutorial</a>

More on Absolute URLs and Relative URLs

Example

Use a full URL to link to a web page: 

<a href="https://www. google.com/html/default.asp">HTML tutorial</a>

Example

Link to a page located in the html folder on the current web site: 

<a href="/html/default.asp">HTML tutorial</a>

Example

Link to a page located in the same folder as the current page: 

<a href="default.asp">HTML tutorial</a>

Summary

 Use the <a> element to define a link

 Use the href attribute to define the link address
 Use the target attribute to define where to open the linked document
 Use the <img> element (inside <a>) to use an image as a link
 Use the mailto: scheme inside the href attribute to create a link that
opens the user's email program

HTML Link Tags

Tag Description

<a> Defines a hyperlink

2.6 working with Images and Multimedia

Images
HTML img tag is used to display image on the web page. HTML img tag is an empty
tag that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

<h2>HTML Image Example</h2>  
<img src="good_morning.jpg" alt="Good Morning Friends"/>  

Output:

Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given belowC++ vs Java

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.

The location of image may be on the same directory or another server.

 2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value
of the alt attribute describe the image in words. The alt attribute is considered good for
SEO prospective.

3) width

It is an optional attribute which is used to specify the width to display the image. It is
not recommended now. You should apply CSS in place of width attribute.

4) height

It h3 the height of the image. The HTML height attribute also supports iframe, image
and object elements. It is not recommended now. You should apply CSS in place of
height attribute.

Use of height and width attribute with img tag

You have learnt about how to insert an image in your web page, now if we want to give
some height and width to display image according to our requirement, then we can set
it with height and width attributes of image.

Example:

1. <img src="animal.jpg" height="180" width="300" alt="animal image">  

Output:
Note: Always try to insert the image with height and width, else it may flicker while
displaying on webpage.

Use of alt attribute

We can use alt attribute with   tag. It will display an alternative text in case if image
cannot be displayed on browser. Following is the example for alt attribute:
1. <img src="animal.png" height="180" width="300" alt="animal image">      

Output:

How to get image from another directory/folder?

To insert an image in your web, that image must be present in your same folder where
you have put the HTML file. But if in some case image is available in some other
directory then you can access the image like this:

1. <img src="E:/images/animal.png" height="180" width="300" alt="animal image">  

In above statement we have put image in local disk E------>images folder------

>animal.png.
 Note: If src URL will be incorrect or misspell then it will not display your image on web
page, so try to put correct URL.

Use <img> tag as a link

We can also link an image with other page or we can use an image as a link. To do this,
put <img> tag inside the <a> tag.

Example

1. <a href="https://www.javatpoint.com/what-is-robotics"><img src="robot.jpg" heigh
t="100" width="100"></a>  

Output:
Supporting Browsers

Element  Chrome  IE  Firefox  Opera  Safari

<img> Yes Yes Yes Yes Yes

Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you

can hear or see, like images, music, sound, videos, records, films,
animations, and more.

Web pages often contain multimedia elements of different types and

formats.

Browser Support

The first web browsers had support for text only, limited to a single font in a
single color.

Later came browsers with support for colors, fonts, images, and multimedia!
Multimedia Formats

Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file
extension.

Multimedia files have formats and different extensions

like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats

There are many video formats out there.

The MP4, WebM, and Ogg formats are supported

by HTML.

The MP4 format is recommended by YouTube.

Format File Description

MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first p
.mpeg format on the web. Not supported anymore in HTML.
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly u
cameras and TV hardware. Plays well on Windows computers, but
browsers.

WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly

cameras and TV hardware. Plays well on Windows computers, but
browsers.

QuickTim .mov QuickTime. Developed by Apple. Commonly used in video cameras

e hardware. Plays well on Apple computers, but not in web browsers

RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with
.ram Does not play in web browsers.

Flash .swf Flash. Developed by Macromedia. Often requires an extra compone

.flv play in web browsers.

Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by

WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google. Supporte

MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Commonly u
 or MP4 cameras and TV hardware. Supported by all browsers and  recomm
YouTube.

Note: Only MP4, WebM, and Ogg video are supported by the HTML
standard.

Common Audio Formats

MP3 is the best format for compressed recorded music. The term MP3 has
become synonymous with digital music.

If your website is about recorded music, MP3 is the choice.

Format File Description

MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all elect
.midi devices like synthesizers and PC sound cards. MIDI files do not conta
digital notes that can be played by electronics. Plays well on all comp
hardware, but not in web browsers.

RealAudi .rm RealAudio. Developed by Real Media to allow streaming of audio with
 o .ram Does not play in web browsers.

WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on
computers, but not in web browsers.

AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default fo
Plays well on Apple computers, but not in web browsers.

WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macin
operating systems. Supported by HTML.

Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.

MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most
for music players. Combines good compression (small files) with hig
Supported by all browsers.

MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported by

Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.

The HTML <video> element is used to show a video on a web page.

Example

Courtesy of Big Buck Bunny:

The HTML <video> Element

To show a video in HTML, use the <video> element:

Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and

width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the

browser may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

Example

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Note: Chromium browsers do not allow autoplay in most cases. However,

muted autoplay is always allowed.

Add muted after autoplay to let your video start playing automatically (but

muted):

Example

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Browser Support
The numbers in the table specify the first browser version that fully supports
the <video> element.

Element

<video> 4.0 9.0 3.5 4.0

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The
browser support for the different formats is:

Browser MP4 WebM Ogg

Edge YES YES YES

Chrome YES YES YES

Firefox YES YES YES

 Safari YES YES NO

Opera YES YES YES

HTML Video - Media Types

File Format Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg

HTML Video - Methods, Properties, and Events

The HTML DOM defines methods, properties, and events for

the <video> element.
This allows you to load, play, and pause videos, as well as setting duration
and volume.

There are also DOM events that can notify you when a video begins to play,
is paused, etc.

Example: Using JavaScript

Play/Pause Big Small Normal

Video courtesy of Big Buck Bunny.

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML Video Tags

Tag Description

<video> Defines a video or movie

<source> Defines multiple media resources for media elements, such as <vid
<audio>
 <track> Defines text tracks in media players

HTML Audio

The HTML <audio> element is used to play an audio file on a web page.

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

Example

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio

HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the

browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.

HTML <audio> Autoplay

To start an audio file automatically, use the autoplay attribute:

Example

<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Note: Chromium browsers do not allow autoplay in most cases. However,

muted autoplay is always allowed.

Add muted after autoplay to let your audio file start playing automatically

(but muted):

Example

<audio controls autoplay muted>

  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Browser Support

The numbers in the table specify the first browser version that fully supports
the <audio> element.

Element

<audio> 4.0 9.0 3.5 4.0

HTML Audio Formats

There are three supported audio formats: MP3, WAV, and OGG. The browser
support for the different formats is: 

Browser MP3 WAV OGG

Edge/IE YES YES* YES*

Chrome YES YES YES

 Firefox YES YES YES

Safari YES YES NO

Opera YES YES YES

*From Edge 79

HTML Audio - Media Types

File Format Media Type

MP3 audio/mpeg

OGG audio/ogg

WAV audio/wav

HTML Audio - Methods, Properties, and Events

The HTML DOM defines methods, properties, and events for
the <audio> element.

This allows you to load, play, and pause audios, as well as set duration and
volume.

There are also DOM events that can notify you when an audio begins to play,
is paused, etc.

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML Audio Tags

Tag Description

<audio> Defines sound content

<source> Defines multiple media resources for media elements, such as <video>

2.9 Forms and Controls

HTML Form

An HTML form is a section of a document which contains controls such as text fields,

password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for
processing such as name, email address, password, phone number, etc. .

Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent to
the given address.

7.3M

234

Java Tricky Program 16 - Autoboxing, Inheritance and Overriding

HTML Form Syntax

<form action="server url" method="get|post">  
  //input controls e.g. textfield, textarea, radiobutton, button  
</form>  

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

 <label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

Tag Description

<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML <form> element

The HTML <form> element provide a document section to take input from user. It
provides various interactive controls for submitting information to web server such as
text field, text area, password field, etc.
Note: The <form> element does not itself create a form but it is container to contain all
required form elements, such as <input>, <label>, etc.

Syntax:

<form>  
//Form elements  </form>  

HTML <input> element

The HTML <input> element is fundamental form element. It is used to create form
fields, to take input from user. We can apply different input filed to gather different
information form user. Following is the example to show the simple text input.

Example:

<body>  
  <form>  
     Enter your name  <br>  
    <input type="text" name="username">  
  </form>  
</body>  

Output:

HTML TextField Control

 The type="text" attribute of input tag creates textfield control also known as single line
textfield control. The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.

<form>  
    First Name: <input type="text" name="firstname"/> <br/>  
    Last Name:  <input type="text" name="lastname"/> <br/>  
</form>  

Output:

Note: If you will omit 'name' attribute then the text filed input will not be submitted to
server.

HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.

Example:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <title>Form in HTML</title>  
5. </head>  
6. <body>  
7.   <form>  
8.         Enter your address:<br>  
9.       <textarea rows="2" cols="20"></textarea>  
10.   </form>  
11. </body>  
12. </html>  

Output:

Label Tag in Form

It is considered better to have label in form. As it makes the code parser/browser/user

friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have
for attribute in label tag that must be same as id attribute of input tag.

NOTE: It is good to use <label> tag with form, although it is optional but if you will use it,
then it will provide a focus when you tap or click on label tag. It is more worthy with
touchscreens.
<form>  
     <label for="firstname">First Name: </label> <br/>  
              <input type="text" id="firstname" name="firstname"/> <br/>  
   <label for="lastname">Last Name: </label>  
              <input type="text" id="lastname" name="lastname"/> <br/>  
 </form>  

Output:

HTML Password Field Control

The password is not visible to the user in password field control.

1. <form>  
2.     <label for="password">Password: </label>  
3.               <input type="password" id="password" name="password"/> <br/>  
4. </form>  

Output:
HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email address. You
must use @ and . in this field.

<form>  
    <label for="email">Email: </label>  
              <input type="email" id="email" name="email"/> <br/>  
</form>  

It will display in browser like below:

Note: If we will not enter the correct email, it will display error like:

Radio Button Control

The radio button is used to select one option from multiple options. It is used for
selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a
time.

Using radio buttons for multiple options, you can only choose a single option at a time.

<form>  
    <label for="gender">Gender: </label>  
              <input type="radio" id="gender" name="gender" value="male"/>Male  
              <input type="radio" id="gender" name="gender" value="female"/>Female 
<br/>  
</form>  
Checkbox Control

The checkbox control is used to check multiple options from given checkboxes.

<form>  
Hobby:<br>  
              <input type="checkbox" id="cricket" name="cricket" value="cricket"/>  
                 <label for="cricket">Cricket</label> <br>  
              <input type="checkbox" id="football" name="football" value="football"/>  
                 <label for="football">Football</label> <br>  
              <input type="checkbox" id="hockey" name="hockey" value="hockey"/>  
                 <label for="hockey">Hockey</label>  
</form>  

Note: These are similar to radio button except it can choose multiple options at a time
and radio button can select one button at a time, and its display.

Output:
Submit button control

HTML <input type="submit"> are used to add a submit button on web page. When

user clicks on submit button, then form get submit to the server.

Syntax:

<input type="submit" value="submit">  

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

<form>  
    <label for="name">Enter name</label><br>  
    <input type="text" id="name" name="name"><br>  
    <label for="pass">Enter Password</label><br>  
    <input type="Password" id="pass" name="pass"><br>  
    <input type="submit" value="submit">  
</form>  
Output:

HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped
elements.

Example:

 <form>  
     <fieldset>  
      <legend>User Information:</legend>  
    <label for="name">Enter name</label><br>  
<input type="text" id="name" name="name"><br>  
<label for="pass">Enter Password</label><br>  
<input type="Password" id="pass" name="pass"><br>  
<input type="submit" value="submit">  
</fieldset>  
lt;/form>  
Output:

HTML Form Example

Following is the example for a simple form of registration.

<!DOCTYPE html>  
 <html>  
 <head>  
  <title>Form in HTML</title>  
</head>  
 <body>  
     <h2>Registration form</h2>  
    <form>  
     <fieldset>  
        <legend>User personal information</legend>  
        <label>Enter your full name</label><br>  
        <input type="text" name="name"><br>  
         <label>Enter your email</label><br>  
         <input type="email" name="email"><br>  
         <label>Enter your password</label><br>  
         <input type="password" name="pass"><br>  
         <label>confirm your password</label><br>  
         <input type="password" name="pass"><br>  
         <br><label>Enter your gender</label><br>  
         <input type="radio" id="gender" name="gender" value="male"/>Male  <br>  
         <input type="radio" id="gender" name="gender" value="female"/>Female 
<br/>    
         <input type="radio" id="gender" name="gender" value="others"/>others <br/>  
 
          <br>Enter your Address:<br>  
         <textarea></textarea><br>  
     <input type="submit" value="sign-up">  
     </fieldset>  
  </form>  
 </body>  
</html>  
Output:

HTML Form Example

 Let's see a simple example of creating HTML form.

1. <form action="#">  
2. <table>  
3. <tr>  
4.     <td class="tdLabel"><label for="register_name" class="label">Enter name:</
label></td>  
5.     <td><input type="text" name="name" value="" id="register_name" style="width:16
0px"/></td>  
6. </tr>  
7. <tr>  
8.     <td class="tdLabel"><label for="register_password" class="label">Enter password:<
/label></td>  
9.     <td><input type="password" name="password" id="register_password" style="widt
h:160px"/></td>  
10. </tr>  
11. <tr>  
12.     <td class="tdLabel"><label for="register_email" class="label">Enter Email:</
label></td>  
13.     <td  
14. ><input type="email" name="email" value="" id="register_email" style="width:160px"/
></td>  
15. </tr>  
16. <tr>  
17.     <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</
label></td>  
18.     <td>  
19. <input type="radio" name="gender" id="register_gendermale" value="male"/>  
20. <label for="register_gendermale">male</label>  
21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>  
22. <label for="register_genderfemale">female</label>  
23.     </td>  
24. </tr>  
25. <tr>  
26.     <td class="tdLabel"><label for="register_country" class="label">Select Country:</
label></td>  
27.     <td><select name="country" id="register_country" style="width:160px">  
28.     <option value="india">india</option>  
29.     <option value="pakistan">pakistan</option>  
30.     <option value="africa">africa</option>  
31.     <option value="china">china</option>  
32.     <option value="other">other</option>  
33. </select>  
34. </td>  
35. </tr>  
36. <tr>  
37.     <td colspan="2"><div align="right"><input type="submit" id="register_0" value="r
egister"/>  
38. </div></td>  
39. </tr>  
40. </table>  
41. </form>  
Test it Now

Supporting Browsers

Element  Chrome  IE  Firefox  Opera  Safari

<form> Yes Yes Yes Yes Yes