Scribd
Upload
9 views76 pages

Unit2 Final Notes

The document provides an overview of HTML elements, tags, and attributes, explaining their structure and usage. It covers various HTML tags such as headings, paragraphs, line breaks, and formatting tags, including examples for each. Additionally, it discusses methods for setting colors in HTML documents and the importance of using attributes to define element characteristics.

Uploaded by

J. Antony Raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views76 pages

Unit2 Final Notes

The document provides an overview of HTML elements, tags, and attributes, explaining their structure and usage. It covers various HTML tags such as headings, paragraphs, line breaks, and formatting tags, including examples for each. Additionally, it discusses methods for setting colors in HTML documents and the importance of using attributes to define element characteristics.

Uploaded by

J. Antony Raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 76

HTML - Elements

An HTML element is defined by a starting tag. If the element contains


other content, it ends with a closing tag, where the element name is
preceded by a forward slash as shown below with few tags −

Start Tag Content End Tag

<p> This is paragraph content. </p>

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

So here <p>....</p> is an HTML element, <h1>...</h1> is another


HTML element. There are some HTML elements which don't need to be
closed, such as <img.../>, <hr /> and <br /> elements. These are
known as void elements.
HTML documents consists of a tree of these elements and they specify
how HTML documents should be built, and what kind of content should be
placed in what part of an HTML document.

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 the following result –

This is italic heading


This is underlined paragraph

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.
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>
This will display the following result –
HTML - Basic 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>
This will produce the following result –
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>
This will produce the following result –
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 ontime.<br />
Thanks<br />
Mahnaz</p>
</body>

</html>
This will produce the following result –
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>

<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>
This will produce following result –
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.
For example, you may want to give a line between two paragraphs as in
the given example below −

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>
This will produce the following result –

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

Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is
written in the HTML document. In these cases, you can use the
preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will
preserve the formatting of the source document.

Example
<!DOCTYPE html>
<html>

<head>
<title>Preserve Formatting Example</title>
</head>

<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>

</html>
This will produce the following result –

Try using the same code without keeping it inside <pre>...</pre> tags

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 −
An example of this technique appears in the movie "12 Angry Men."
In cases, where you do not want the client browser to break text, you
should use a nonbreaking space entity &nbsp; instead of a normal space.
For example, when coding the "12 Angry Men" in a paragraph, you should
use something similar to the following code −

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>
This will produce the following result –

HTML – Formatting Tags


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>
This will produce the following result –
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 an <i>italicized</i> typeface.</p>
</body>

</html>
This will produce the following result –
Underlined Text
Anything that appears within <u>...</u> element, is displayed with
underline as shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Underlined Text Example</title>
</head>

<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>

</html>
This will produce the following result –

Strike Text
Anything that appears within <strike>...</strike> element is displayed
with strikethrough, which is a thin line through the text as shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Strike Text Example</title>
</head>

<body>
<p>The following word uses a <strike>strikethrough</strike>
typeface.</p>
</body>

</html>
This will produce the following result –

Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font.
Most of the fonts are known as variable-width fonts because different
letters are of different widths (for example, the letter 'm' is wider than the
letter 'i'). In a monospaced font, however, each letter has the same width.

Example
<!DOCTYPE html>
<html>

<head>
<title>Monospaced Font Example</title>
</head>

<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>

</html>
This will produce the following result –
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the
font size used is the same size as the characters surrounding it but is
displayed half a character's height above the other characters.

Example
<!DOCTYPE html>
<html>

<head>
<title>Superscript Text Example</title>
</head>

<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>

</html>
This will produce the following result –

Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font
size used is the same as the characters surrounding it, but is displayed
half a character's height beneath the other characters.

Example
<!DOCTYPE html>
<html>

<head>
<title>Subscript Text Example</title>
</head>

<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
This will produce the following result –

Inserted Text
Anything that appears within <ins>...</ins> element is displayed as
inserted text.

Example
<!DOCTYPE html>
<html>

<head>
<title>Inserted Text Example</title>
</head>

<body>
<p>I want to drink <del>cola</del> <ins>pepsy</ins></p>
</body>

</html>
This will produce the following result –
I want to drink cola pepsy

Deleted Text
Anything that appears within <del>...</del> element, is displayed as
deleted text.

Example
<!DOCTYPE html>
<html>

<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>pepsy</ins></p>
</body>

</html>
This will produce the following result –
I want to drink cola pepsy

Larger Text
The content of the <big>...</big> element is displayed one font size
larger than the rest of the text surrounding it as shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Larger Text Example</title>
</head>

<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>

</html>
This will produce the following result –

Smaller Text
The content of the <small>...</small> element is displayed one font
size smaller than the rest of the text surrounding it as shown below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Smaller Text Example</title>
</head>

<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>

</html>
This will produce the following result –

Grouping Content
The <div> and <span> elements allow you to group together several
elements to create sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a
<div> element to indicate that all of the elements within that <div>
element relate to the footnotes. You might then attach a style to this
<div> element so that they appear using a special set of style rules.

Example
<!DOCTYPE html>
<html>

<head>
<title>Div Tag Example</title>
</head>

<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>

</html>
This will produce the following result –

The <span> element, on the other hand, can be used to group inline
elements only. So, if you have a part of a sentence or paragraph which
you want to group together, you could use the <span> element as
follows.

Example
<!DOCTYPE html>
<html>

<head>
<title>Span Tag Example</title>
</head>

<body>
<p>This is the example of <span style = "color:green">span
tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>

</html>
This will produce the following result –
These tags are commonly used with CSS to allow you to attach a style to a
section of a page.

HTML - Colors
Colors are very important to give a good look and feel to your website.
You can specify colors on page level using <body> tag or you can set
colors for individual tags using bgcolor attribute.
The <body> tag has following attributes which can be used to set
different colors −
 bgcolor − sets a color for the background of the page.
 text − sets a color for the body text.
 alink − sets a color for active links or selected links.
 link − sets a color for linked text.
 vlink − sets a color for visited links − that is, for linked text
that you have already clicked on.
HTML Color Coding Methods
There are following three different methods to set colors in your web page
−
 Color names − You can specify color names directly like
green, blue or red.
 Hex codes − A six-digit code representing the amount of red,
green, and blue that makes up the color.
 Color decimal or percentage values − This value is
specified using the rgb( ) property.
HTML Colors - Color Names
You can specify direct a color name to set text or background color. W3C
has listed 16 basic color names that will validate with an HTML validator
but there are over 200 different color names supported by major
browsers.
Note − Check a complete list of HTML Color Name.
W3C Standard 16 Colors
Here is the list of W3C Standard 16 Colors names and it is recommended
to use them.

Black Gray Silver White

Yellow Lime Aqua Fuchsia

Red Green Blue Purple

Maroon Olive Navy Teal

Example
Here are the examples to set background of an HTML tag by color name −
<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by Name</title>
</head>

<body text = "blue" bgcolor = "green">


<p>Use different color names for for body and table and see the
result.</p>

<table bgcolor = "black">


<tr>
<td>
<font color = "white">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>

</html>

HTML Colors - Hex Codes


A hexadecimal is a 6 digit representation of a color. The first two
digits(RR) represent a red value, the next two are a green value(GG), and
the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe
Photoshop, Paintshop Pro or MS Paint.
Each hexadecimal code will be preceded by a pound or hash sign #.
Following is a list of few colors using hexadecimal notation.
Color Color HEX

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

Example
Here are the examples to set background of an HTML tag by color code in
hexadecimal −
<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by Hex</title>
</head>

<body text = "#0000FF" bgcolor = "#00FF00">


<p>Use different color hexa for for body and table and see the
result.</p>

<table bgcolor = "#000000">


<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black
background.</font>
</td>
</tr>
</table>
</body>
</html>

HTML Colors - RGB Values


This color value is specified using the rgb( ) property. This property takes
three values, one each for red, green, and blue. The value can be an
integer between 0 and 255 or a percentage.
Note − All the browsers does not support rgb() property of color so it is
recommended not to use it.
Following is a list to show few colors using RGB values.

Color Color RGB

rgb(0,0,0)

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,0)

rgb(0,255,255)

rgb(255,0,255)

rgb(192,192,192)

rgb(255,255,255)

Example
Here are the examples to set background of an HTML tag by color code
using rgb() values −
<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by RGB code</title>
</head>

<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">


<p>Use different color code for for body and table and see the
result.</p>

<table bgcolor = "rgb(0,0,0)">


<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on
black background.</font>
</td>
</tr>
</table>
</body>

</html>

Browser Safe Colors


Here is the list of 216 colors which are supposed to be safest and
computer independent colors. These colors very from hexa code 000000
to FFFFFF and they will be supported by all the computers having 256
color palette.

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF

33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF


33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF

66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF

66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF

99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF

CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF

CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF

CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF


FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF

FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF

FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

<div> Tag
Example
A <div> section in a document that is styled with CSS:

<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>

Output:

Definition and Usage


The <div> tag defines a division or a section in an HTML
document.

The <div> tag is used as a container for HTML elements - which


is then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before


and after the <div> element.

<span> Tag
Example
A <span> element which is used to color a part of a text:

<p>My mother
has <span style="color:blue">blue</span> eyes.</p>

Program:
<!DOCTYPE html>
<html>
<body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-


weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>

</body>
</html>
Output:
Definition and Usage
The <span> tag is an inline container used to mark up a part of a
text, or a part of a document.

The <span> tag is easily styled by CSS or manipulated with


JavaScript using the class or id attribute.

The <span> tag is much like the <div> element, but <div> is a
block-level element and <span> is an inline element.

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. 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 –

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

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 <ul type =
"disc"> −
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "disc">
<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 <ul type =
"circle"> −
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>
 This will produce the following result −

o Beetroot
o Ginger
o Potato
o Radish

HTML Ordered Lists


If you are required to put your items in a numbered
list instead of bulleted, then HTML ordered list will be
used. This list is created by using <ol> tag. The
numbering starts at one and is incremented by one
for each successive ordered list element tagged with
<li>.
Example
<!DOCTYPE html>
<html>

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

<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>
This will produce the following result −

1. Beetroot
2. Ginger
3. Potato
4. Radish

The type Attribute


You can use type attribute for <ol> tag to specify the
type of numbering you like. By default, it is a number.
Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example
Following is an example where we used <ol type =
"1">
<!DOCTYPE html>
<html>

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

<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>
This will produce the following result −

1. Beetroot
2. Ginger
3. Potato
4. Radish

Example
Following is an example where we used <ol type = "I">
<!DOCTYPE html>
<html>

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

<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
This will produce the following result −
I. Beetroot
II. Ginger
III. Potato
IV. Radish

Example
Following is an example where we used <ol type = "i">
<!DOCTYPE html>
<html>

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

<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>
This will produce the following result −
i. Beetroot
ii. Ginger
iii. Potato
iv. 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>
This will produce the following result −
A. Beetroot
B. Ginger
C. Potato
D. 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>
This will produce the following result −
a. Beetroot
b. Ginger
c. Potato
d. 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 −
iv. Beetroot
v. Ginger
vi. Potato
vii. 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
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 IMAGES
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:

<!DOCTYPE html>
<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "bookimage.jpg" alt = "Test Image" />
</body>
</html>
This will produce the following result –

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 Location
Usually we keep all the images in a separate directory.
So let's keep HTML file test.htm in our home directory
and create a subdirectory images inside the home
directory where we will keep our image test.png.
Example
Assuming our image location is "C:\Amitha\
Documents", try the following example −
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src =” C:\Users\Documents\bookimage.jpg" alt = "Test
Image" />
</body>

</html>
This will produce the following result –

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 =” C:\Users\Amitha\Documents\bookimage.jpg " alt
= "Test Image" width = "150" height = "100"/>
</body>

</html>
This will produce the following result –

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 = “C:\Users\Amitha\Documents\bookimage.jpg " alt
= "Test Image" border = "3"/>
</body>

</html>
This will produce the following result –

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 = "/html/images/test.png" alt = "Test Image" border = "3" align
= "right"/>
</body>

</html>

This will produce the following result –

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. An inline frame is used to
embed another document within the current HTML document.
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 = "C:\Users\XYZ\Desktop\wp notes\pgm1.html" width = "555"


height = "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>

</html>
This will produce the following result –

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.
Note −
The frameborder, marginwidth, longdesc, scrolling, marginheight attribute
s deprecated in HTML5. Do not use these attributes.

Sr.N Attribute & Description


o

1 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.

2 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.

3 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).

4 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".

5 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".

6 height
This attribute specifies the height of <iframe>.

7 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.

8 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"

9 width
This attribute specifies the width of <iframe>.

HTML iframes
HTML Iframe is used to display a nested webpage (a webpage within a
webpage). The HTML <iframe> tag defines an inline frame, hence it is
also called as an Inline frame.
An HTML iframe embeds another document within the current HTML
document in the rectangular region.

The webpage content and iframe contents can interact with each other
using JavaScript.

Iframe Syntax
An HTML iframe is defined with the <iframe> tag:

<iframe src="URL"></iframe>

Here, "src" attribute specifies the web address (URL) of the inline frame
page.

Set Width and Height of iframe


You can set the width and height of iframe by using "width" and "height"
attributes. By default, the attributes values are specified in pixels but you
can also set them in percent. i.e. 50%, 60% etc.

Example: (Pixels)

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the size of the ifram
e:</p>
<iframe src="https://www.javatpoint.com/" height="300" width
="400"></iframe>
</body>
</html>

OUTPUT:
Example: (Percentage)

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of t
he iframe:</p>
<iframe src="https://www.javatpoint.com/" height="50%" width
="70%"></iframe>
</body>
</html>

OUTPUT:

You can also use CSS to set the height and width of the iframe.
Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>Use the CSS height and width properties to specify the size of the i
frame:</p>
<iframe src="https://www.javatpoint.com/" style
="height:300px;width:400px"></iframe>
</body>
</html>

OUTPUT:

Remove the border of iframe


By default, an iframe contains a border around it. You can remove the
border by using <style> attribute and CSS border property.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Remove the Iframe Border</h2>
<p>This iframe example doesn't have any border</p>
<iframe src="https://www.javatpoint.com/" style="border:none;"></
iframe>
</body>
</html>

OUTPUT:

You can also change the size, color, style of the iframe's border.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Custom Iframe Border</h2>
<iframe src="https://www.javatpoint.com/" style="border:2px solid to
mato;"></iframe>
</body>
</html>

OUTPUT:
Iframe Target for a link
You can set a target frame for a link by using iframe. Your specified target
attribute of the link must refer to the name attribute of the iframe.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>


<iframe height="300px" width="100%" src="new.html" name="iframe
_a"></iframe>
<p><a href="https://www.javatpoint.com" target
="iframe_a">JavaTpoint.com</a></p>
<p>The name of iframe and link target must have same value else lin
k will not open as a frame. </p>

</body>
</html>

Output
HTML Semantic
Elements
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and
the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing


about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly


defines its content.

Semantic Elements in HTML


Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer"> to indicate navigation, header, and
footer.

In HTML there are some semantic elements that can be used to define
different parts of a web page:

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>

HTML <section> Element


The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic


grouping of content, typically with a heading."

Examples of where a <section> element can be used:

 Chapters
 Introduction
 News items
 Contact information

A web page could normally be split into sections for introduction, content,
and contact information.

Example
Two sections in a document:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international
organization working on issues regarding the conservation,
research and restoration of the environment, formerly named
the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known
panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the
same year of the establishment of WWF.</p>
</section>
Output:

HTML <article> Element


The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to


distribute it independently from the rest of the web site.

Examples of where the <article> element can be used:

 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles
Example
Three articles with independent, self-contained content:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google,
released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by
Mozilla. Firefox has been the second most popular web browser
since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft,
released in 2015. Microsoft Edge replaced Internet
Explorer.</p>
</article>
Output:
Example 2
Use CSS to style the <article> element:

<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}

.all-browsers > h1, .browser {


margin: 10px;
padding: 5px;
}

.browser {
background: white;
}

.browser > h2, p {


margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google,
released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web
browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft,
released in 2015. Microsoft Edge replaced Internet
Explorer.</p>
</article>
</article>

</body>
</html>
Output:

HTML <header> Element


The <header> element represents a container for introductory content or a
set of navigational links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)


 logo or icon
 authorship information

Note: You can have several <header> elements in one HTML document.
However, <header> cannot be placed within a <footer>, <address> or
another <header> element.

Example
A header for an <article>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's
natural environment,
and build a future in which humans live in harmony with
nature.</p>
</article>

Output:

HTML <footer> Element


The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents

You can have several <footer> elements in one document.

Example
A footer section in a document:

<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p
>
</footer>
Output:

HTML <nav> Element


The <nav> element defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major blocks of navigation links.

Browsers, such as screen readers for disabled users, can use this element
to determine whether to omit the initial rendering of this content.

Example
A set of navigation links:

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Output:

HTML <aside> Element


The <aside> element defines some content aside from the content it is
placed in (like a sidebar).

The <aside> content should be indirectly related to the surrounding


content.
Example
Display some content aside from the content it is placed in:

<p>My family and I visited The Epcot center this summer. The
weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring
exciting attractions, international pavilions, award-winning
fireworks and seasonal special events.</p>
</aside>

Output:

Example 2
Use CSS to style the <aside> element:

<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot center this summer. The
weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World
Resort featuring exciting attractions, international
pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The
weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center this summer. The
weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>

</body>
</html>
Output:
new.hmtl output code:

<!DOCTYPE html>
<html>
<head>
<style>

p{ font-size: 50px;
color: red;}
</style>
</head>
<body style="background-color: #c7f15e;">
<p>This is a link below the ifarme click on link to open new iframe.
</p>
</body>
</html>

HTML 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.w3schools.com/">Visit W3Schools.com!</a>


Ex:

<!DOCTYPE html>

<html>

<body>

<h1>HTML Links</h1>

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

</body>

</html>

Output:
By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

HTML 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.w3schools.com/" target="_blank">Visit


W3Schools!</a>
Ex:

<!DOCTYPE html>

<html>

<body>
<h2>The target Attribute</h2>

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

<p>If target="_blank", the link will open in a new browser window or tab.</p>

</body>

</html>

o/p:

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.w3.org/">W3C</a></p>
<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>
Ex:

<!DOCTYPE html>

<html>
<body>

<h2>Absolute URLs</h2>

<p><a href="https://www.w3.org/">W3C</a></p>

<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>

</body>

</html>

o/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>
Ex:
<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

<a href="default.asp"><img src="smiley.gif" alt="HTML


tutorial" style="width:42px;height:42px;"></a>

</body>
</html>
o/p:

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:[email protected]">Send email</a>
Ex:

<!DOCTYPE html>

<html>

<body>

<h2>Link to an Email Address</h2>


<p>To create a link that opens in the user's email program (to let them send a new email), use
mailto: inside the href attribute:</p>

<p><a href="mailto:[email protected]">Send email</a></p>

</body>

</html>

o/p:

HTML - URL Encoding


URL encoding is the practice of translating unprintable characters or
characters with special meaning within URLs to a representation that is
unambiguous and universally accepted by web browsers and servers.
These characters include −
 ASCII control characters − Unprintable characters typically
used for output control. Character ranges 00-1F hex (0-31
decimal) and 7F (127 decimal)..
 Non-ASCII control characters − These are characters
beyond the ASCII character set of 128 characters. This range is
part of the ISO-Latin character set and includes the entire "top
half" of the ISO-Latin set 80-FF hex (128-255 decimal).
 Reserved characters − These are special characters such as
the dollar sign, ampersand, plus, common, forward slash,
colon, semi-colon, equals sign, question mark, and "at"
symbol. All of these can have different meanings inside a URL
so need to be encoded.
 Unsafe characters − These are space, quotation marks, less
than symbol, greater than symbol, pound character, percent
character, Left Curly Brace, Right Curly Brace, Pipe, Backslash,
Caret, Tilde, Left Square Bracket, Right Square Bracket, Grave
Accent. These character present the possibility of being
misunderstood within URLs for various reasons. These
characters should also always be encodedThe encoding
notation replaces the desired character with three characters:
a percent sign and two hexadecimal digits that correspond to
the position of the character in the ASCII character set.
Example
One of the most common special characters is a white space. You can't
type a space in a URL directly. A space position in the character set is 20
hexadecimals. So you can use %20 in place of a space when passing your
request to the server.
http://www.example.com/new%20pricing.htm
This URL actually retrieves a document named "new pricing.htm" from the
www.example.com

You might also like