Scribd
Upload
30 views

HTML&HTML 5

HTML is a markup language used to define the structure and layout of web pages. It uses tags to mark up text with special meanings. Some key points: - HTML stands for Hypertext Markup Language - It is used to create web pages and structure text, links, images, and other content - Common HTML tags include headings, paragraphs, links, lists, and more - The basic structure of an HTML document includes <html>, <head>, <body> tags

Uploaded by

Aptech Pitampura
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

HTML&HTML 5

HTML is a markup language used to define the structure and layout of web pages. It uses tags to mark up text with special meanings. Some key points: - HTML stands for Hypertext Markup Language - It is used to create web pages and structure text, links, images, and other content - Common HTML tags include headings, paragraphs, links, lists, and more - The basic structure of an HTML document includes <html>, <head>, <body> tags

Uploaded by

Aptech Pitampura
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 75

HTML

➢ HTML stands for Hyper Text Markup Language.


➢ HTML is used to create web pages.
➢ HTML is widely used language on the web.
➢ We can create static website by HTML only.

HTML Example with HTML Editor

<!DOCTYPE>
<html>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

What is HTML

HTML is an acronym which stands for Hyper Text Markup Language

Hyper Text: Hyper Text simply means "Text within Text". A text has a link
within it, is a hypertext. Every time when you click on a word which brings
you to a new webpage, you have clicked on a hypertext.

Markup language: A markup language is a programming language that is


used make text more interactive and dynamic. It can turn a text into
images, tables, links etc.

An HTML document is made of many HTML tags and each HTML tag contains
different content.

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>

<body>
<h1>This is a heading</h1>

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

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

</body>

</html>

<!DOCTYPE html>

<!doctype HTML>

The <!DOCTYPE> Declaration represents the document type, and helps the
browser to display a web page correctly.

It must only appear once, at the top of the page (before any HTML tags).
There are different document types. To display a web page correctly, the
browser must know both type and version.

The doctype declaration is not case sensitive. All cases are acceptable.

HTML Title
HTML title tag is used to provide a title name for your webpage.
The HTML title tag must be used inside the <head> tag.
The title of the page is displayed on the title bar of the browser.
Here you see that we are using two elements, the head tag and the title tag.
The whole title element is within the head tag.
The head element which appears before body element just contains the
information about the page but it doesn't display on the browser window.
So, to display a title name on the web page, title element is used.
If you look at the above example, you will see that "First web page" will be
displayed on the tab/ title bar of the browser. Content(text) between
<title>.............</title> is shown on the title bar.
Test it Now
Description of HTML example

• The <!DOCTYPE html> declaration defines this document to be


HTML5
• The text between <html> and </html> describes an HTML
document
• The text between <head> and </head> provides information about
the document
• The text between <title> and </title> provides a title for the
document
• The text between <body> and </body> describes the visible page
content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes a paragraph

Features of HTML

1) It is a very easy and simple language. It can be easily understood and


modified.

2) It is very easy to make effective presentation with HTML because it has


a lot of formatting tags.

3) It is a markup language so it provides a flexible way to design web


pages along with the text.

4) It facilitates programmers to add link on the web pages (by html anchor
tag) , so it enhances the interest of browsing of the user.

5) It is platform-independent because it can be displayed on any platform


like Windows, Linux and Macintosh etc.
Difference between HTML and HTML5
HTML Tags

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.

Syntax

<tag> content </tag>

Examples

Note: HTML Tags are always written in lowercase letters. The basic HTML
tags are given below:

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line
across the webpage.
HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>,
<acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>,
<ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags

<a>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and
legend
HTML Formatting

HTML Formatting is a process of formatting text for better look and feel.
There are many formatting tags in HTML. These tags are used to make
text bold, italicized, or underlined. There are almost 12 options available
that how text appears in HTML and XHTML.

Here, we are going to learn 12 HTML formatting tags.

1) Bold Text

If you write anything within <b>............</b> element, is shown in bold


letters.

See this example:

<p> <b>Write Your First Paragraph in bold text.</b></p>

2) Italic Text

If you write anything within <i>............</i> element, is shown in italic


letters.

See this example:

<p> <i>Write Your First Paragraph in italic text.</i></p>

3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content
within <mark>.........</mark>.

See this example:

<h2> I want to put a <mark> Mark</mark> on your face</h2>


4) Underlined Text

If you write anything within <u>.........</u> element, is shown in


underlined text.

See this example:

<p> <u>Write Your First Paragraph in underlined text.</u></p>

5) Strike Text

Anything written within <strike>.......................</strike> element is


displayed with strikethrough. It is a thin line which cross the statement.

See this example:

<p> <strike>Write Your First Paragraph with strikethrough</strike>.<


/p>

Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font

If you want that each letter has the same width then you should write the
content within <tt>.............</tt> element.

Note: We know that most of the fonts are known as variable-width fonts
because different letters have different width. (for example: 'w' is wider
than 'i'). Monospaced Font provides similar space among every letter.

See this example:

<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p


>
Output:

Hello Write Your First Paragraph in monospaced font.

7) Superscript Text

If you put the content within <sup>..............</sup> element, is shown


in superscript ; means it is displayed half a character's height above the
other characters.

See this example:

<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>


Output:

Hello Write Your First Paragraph in superscript.

8) Subscript Text

If you put the content within <sub>..............</sub> element, is shown


in subscript ; means it is displayed half a character's height below the
other characters.

See this example:

<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>

Output:

Hello Write Your First Paragraph in subscript.

9) Deleted Text

Anything that puts within <del>..........</del> is displayed as deleted


text.

See this example:

<p>Hello <del>Delete your first paragraph.</del></p>


Output:

Hello Deleted: Delete your first paragraph.

10) Inserted Text

Anything that puts within <ins>..........</ins> is displayed as inserted


text.

See this example:

<p> <del>Delete your first paragraph.</del><ins>Write another para


graph.</ins></p>

Output:

Write another paragraph. Deleted: Delete your first paragraph.

11) Larger Text

If you want to put your font size larger than the rest of the text then put
the content within <big>.........</big>. It increase one font size larger
than the previous one.

See this example:

<p>Hello <big>Write the paragraph in larger font.</big></p>

Output:

Hello Write the paragraph in larger font.

12) Smaller Text

If you want to put your font size smaller than the rest of the text then put
the content within <small>.........</small>tag. It reduces one font size
than the previous one.
See this example:

<p>Hello <small>Write the paragraph in smaller font.</small></p>


Output:

Hello Write the paragraph in smaller font.

HTML Heading

A HTML heading or HTML h tag can be defined as a title or a subtitle which


you want to display on the webpage. When you place the text within the
heading tags <h1>.........</h1>, it is displayed on the browser in the bold
format and size of the text depends on the number of heading.

There are six different HTML headings which are defined with the <h1> to
<h6> tags.

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for
most important heading and h6 is used for least important.

Attribute:- only one attribute use with this tag is align, whose values are
left, center, right and justify.

See this example:

<h1>Heading no. 1</h1>


<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
Output:

Heading no. 1
Heading no. 2
Heading no. 3

Heading no. 4

Heading no. 5

Heading no. 6

Heading elements (h1....h6) should be used for headings only. They


should not be used just to make text bold or big.

HTML Paragraph

HTML paragraph or HTML p tag is used to define a paragraph in a webpage.


Let's take a simple example to see how it work. It is a notable point that a
browser itself add an empty line before and after a paragraph.

See this example:

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


<p>This is second paragraph.</p>
<p>This is third paragraph.</p>

Output:

This is first paragraph.

This is second paragraph.

This is third paragraph.


Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, browser removes extra
spaces and extra line while displaying the page. The browser counts number
of spaces and lines as a single one.

<p>
I am
going to provide
you a tutorial on HTML
and hope that it will
be very beneficial for you.
</p>
<p>
Look, I put here a lot
of spaces but I know, Browser will ignore it.
</p>
<p>
You cannot determine the display of HTML</p>
<p>because resized windows may create different result.
</p>

Output:

I am going to provide you a tutorial on HTML and hope that it will be very
beneficial for you.

Look, I put here a lot of spaces but I know, Browser will ignore it.

You cannot determine the display of HTML

because resized windows may create different result.

Attribute:- only one attribute use with this tag is align, whose values are
left, center, right and justify.
HTML Anchor

The HTML anchor tag defines a hyperlink that links one page to another
page. The "href" attribute is the most important attribute of the HTML a tag.

The href attribute is used to define the address of the file to be linked. In
other words, it points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Example of HTML anchor tag.

<a href="second.html">Click for Second Page</a>

Appearance of HTML anchor tag

An unvisited link is displayed underlined and blue.

A visited link displayed underlined and purple.

An active link is underlined and red.

The target Attribute


This attribute is used to specify the location where linked document is
opened. Following are possible options:

Option Description

_blank Opens the linked document in a new window or tab.

_self Opens the linked document in the same frame.

_parent Opens the linked document in the parent frame.


_top Opens the linked document in the full body of the window.

Use of Base Path


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

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

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

Now given URL <a href="/html/index.htm" is being considered as <a


href="http://www.learnerspoint.com/html/index.htm".
Linking to a Page Section
You can create a link to a particular section of a given webpage by using
name attribute. This is a two step process.

First create a link to the place where you want to reach with-in a webpage
and name it using <a...> tag as follows:

<h1>HTML Text Links <a name="top"></a></h1>

Second step is to create a hyperlink to link the document and place where
you want to reach:

<a href="/html/html_text_links.htm#top">Go to the Top</a>

This will produce following link, where you can click on the link
generated Go to the Top to reach to the top of the HTML Text Link s.

Go to the Top

mailto link
Mailto link is a type of HTML link that activates the default mail client on the
computer for sending an e-mail.
The web browser requires a default e-mail client software installed on his computer
in order to activate the e-mail client.
If you have Microsoft Outlook, for example as your default mail client, pressing a
mailto link will open a new mail window.

The mailto link is written like regular link with extra parameters inside the href
attribute:
<a href="mailto:[email protected]">Link text</a>

Parameter Description

mailto:[email protected] e-mail recipient address

[email protected] carbon copy e-mail address

[email protected] blind carbon copy e-mail address

subject=subject text subject of e-mail


body=body text body of e-mail

? first parameter delimiter

& other parameters delimiter

Example: Mail to email address


<a href="mailto:[email protected]">Send mail</a>
The code will generate this link:
Send mail
Pressing the above link will open a new mail window.

Mail to email address with subject


<a
href="mailto:[email protected]?subject=The%20subject%20of%20the%20mail"
>Send mail with subject</a>
The %20 represents space character.
The code will generate this link:
Send mail with subject

Mail to email address with cc, bcc, subject and body


<a
href="mailto:[email protected][email protected]&bcc=name3@exam
ple.com
&amp;subject=The%20subject%20of%20the%20email
&amp;body=The%20body%20of%20the%20email">
Send mail with cc, bcc, subject and body</a>
The %20 represents space character.
The code will generate this link:
Send mail with cc, bcc, subject and body

How to add spaces in the mail's subject or body


You can add spaces by writing %20 in the text of the subject or body.
<a
href="mailto:[email protected]?subject=The%20subject&amp;body=This%20is%20
a%20message%20body">Send mail</a>

How to add line break in the mail's body


You can add newline by writing %0D%0A in the text of the body.
<a href="mailto:[email protected]?body=Line1-text%0D%0ALine2-text">Send mail</a>
HTML Image

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.

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

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

HTML Table

HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.

HTML tables are used to manage the layout of the page e.g. header section,
navigation bar, body content, footer section etc. But it is recommended to
use div tag over table to manage the layout of the page .

HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.


<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for

formatting.

<col> It is used with <colgroup> element to specify column properties

for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

Example of HTML table tag. It output is shown above.

<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></t
r>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>

Output:

First_Name Last_Name Marks

Sonoo Jaiswal 60

James William 80
Swati Sironi 82

Chetna Singh 72

In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15


values.

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML


2. By border property in CSS

1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it is
not recommended now.

<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></t
r>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>

Output:

First_Name Last_Name Marks


Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72

2) CSS Border property

It is now recommended to use border property of CSS to specify border in


table.

<style>
table, th, td {
border: 1px solid black;
}
</style>

You can collapse all the borders in one border by border-collapse property.

<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style>

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82
Chetna Singh 72

HTML Table with cell padding

You can specify padding for table header and table data by two ways:

1. By cellpadding attribute of table in HTML


2. By padding property in CSS

The cellpadding attribute of HTML table tag is obselete now. It is


recommended to use CSS. So let's see the code of CSS.

<style>
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>

Output:

Name Last Name Marks

Sonoo Jaiswal 60

James William 80

Swati Sironi 82

Chetna Singh 72
HTML Table with colspan

If you want to make a cell span more than one column, you can use the
colspan attribute.

CSS code:

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>

HTML code:

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>Ajeet Maurya</td>
<td>7503520801</td>
<td>9555879135</td>
</tr>
</table>

Output:
Name Mobile No.

Ajeet Maurya 7503520801 9555879135

HTML Table with rowspan

If you want to make a cell span more than one row, you can use the
rowspan attribute.

CSS code:

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
1. </style>

HTML code:

<table>
<tr><th>Name</th><td>Ajeet Maurya</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>

<tr><td>9555879135</td></tr>
</table>

Output:

Name Ajeet Maurya

Mobile No. 7503520801


9555879135

HTML table with caption

HTML caption is diplayed above the table. It must be used after table tag
only.

<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></t
r>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>

Example :Styling HTML table even and odd cells

CSS code:

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #eee;
}
table#alter tr:nth-child(odd) {
background-color: #fff;
}
table#alter th {
color: white;
background-color: gray;
}
</style>

Output:

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one
or more list elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)


2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers. It is
known as numbered list also. The ordered list starts with <ol> tag and the
list items start with <li> tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>

Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

Attributes

1) The type attribute for <ol> tag to specify the type of numbering you like. By
default it is a number.

2) The start attribute for <ol> tag to specify the starting point of numbering
you need.

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

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also
known as bulleted list also. The Unordered list starts with <ul> tag and list
items start with the <li> tag.

<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>

Output:

o Aries
o Bingo
o Leo
o Oracle

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

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and
XHTML. It is also known as definition list where entries are listed like a
dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list
of terms or other name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.


2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>

Output:

Aries

-One of the 12 horoscope sign.

Bingo

-One of my evening snacks

Leo

-It is also an one of the 12 horoscope sign.

Oracle

-It is a multinational technology corporation.

Marquee HTML

The Marquee HTML tag is a non-standard HTML element which is used to


scroll a image or text horizontally or vertically.

In simple words, you can say that it scrolls the image or text up, down, left
or right automatically.

<marquee>This is an example of html marquee </marquee>


<marquee> Tag Attributes
Following is the list of important attributes which can be used with
<marquee> tag.

Attribute Description

Width This specifies the width of the marquee. This can be a value like 10
or 20% etc.

height This specifies the height of the marquee. This can be a value like
10 or 20% etc.

direction This specifies the direction in which marquee should scroll. This can
be a value like up, down, left or right.

behavior This specifies the type of scrolling of the marquee. This can have a
value like scroll, slide and alternate.

scrolldelay This specifies how long to delay between each jump. This will have
a value like 10 etc.

scrollamount This specifies the speed of marquee text. This can have a value like
10 etc.

Loop This specifies how many times to loop. The default value is
INFINITE, which means that the marquee loops endlessly.

bgcolor This specifies background color in terms of color name or color hex
value.

hspace This specifies horizontal space around the marquee. This can be a
value like 10 or 20% etc.
vspace This specifies vertical space around the marquee. This can be a
value like 10 or 20% etc.

HTML Textarea

The HTML <textarea> tag is used to define a multi-line text input


control.It can hold unlimited number of characters and the texts are
displayed in a fixed-width font (usually courier).

The size of the HTML textarea is defined by <cols> and <rows> attribute, or
it can also be defined through CSS height and width properties.

<textarea rows="9" cols="70">


Hi learners
</textarea>

HTML Quotes

HTML quotes are used to put a short quotation on your website. To do so,
you need to use HTML q tag and HTML blockquote tag.

HTML q tag

HTML q tag is used to put small quotation. To do so, write your text within
<q>.............</q> tag.

<p> Great quote on love and life.</p>


<p> Dr. Seuss once said : <q>Reality is finally better than your dreams.</
q></p>

Output:

Great quote on love and life.

Dr. Seuss once said : Reality is finally better than your dreams.

HTML blockquote tag


HTML blockquote tag is used to define a large quoted section. If you have a
large quotation then put the entire text within
<blockquote>.............</blockquote> tag.

<p> Read this inspirational story.</p>


<blockquote> According to scientists, the bumblebee's body is too heavy a
nd its wing span too
small. Aerodynamically, the bumblebee cannot fly. But the bumblebee doesn
't know that and it
keeps flying. When you don't know your limitations, you go out and surprise
yourself. In hindsight, you
wonder if you had any limitations. The only limitations a person has are thos
e that are self-
imposed. Don't let education put limitations on you.</blockquote>

Output:

Read this inspirational story.

According to scientists, the bumblebee's body is too heavy and its wing span
too small. Aerodynamically, the bumblebee cannot fly. But the bumblebee
doesn't know that and it keeps flying. When you don't know your limitations,
you go out and surprise yourself. In hindsight, you wonder if you had any
limitations. The only limitations a person has are those that are self-
imposed. Don't let education put limitations on you.

HTML Tags which are used in Quotations and Citation

Tag Description

<abbr> It defines the abbreviation or an acronym.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in


1948.</p>

<address> It is used to define the contact information of the document writer. The
<address> element is usually displayed in italic
<address>

Visit us at:<br/>

Example.com<br/>

Idea221, main book<br>

html

</address>

<bdo> It defines the direction of the text.

<bdo dir="rtl">This text will be written from right to left</bdo>

<blockquote> It is used to define a section that is quoted from another source.

<q> It is used to put the small quotations.

<cite> It defines the title of source from where quotation or work is taken in
italic.

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML Style

HTML Style is used to change or add the style on existing HTML elements.
There is a default style for every HTML element e.g. background color is
white, text color is black etc.

The style attribute can by used with any HTML tag. To apply style on HTML
tag, you should have the basic knowledge of css properties e.g. color,
background-color, text-align, font-family, font-size etc.

The syntax of style attribute is given below:

style= "property:value"
HTML Style color

The color property is used to define the text color.

<h3 style="color:green">This is Green Color</h3>


<h3 style="color:red">This is Red Color</h3>

Output:

This is Green Color

This is Red Color

HTML Style background-color

The background-color property is used to define background color for the


HTML tag.

<h3 style="background-color:yellow;">This is yellow background</h3>


<h3 style="background-
color:red;color:white">This is red background</h3>

Output:

This is yellow background

This is red background

HTML Style font-family

The font-family property specifies the font family of the HTML tag.

<h3 style="font-
family:times new roman">This is times new roman font family</h3>
<p style="font-family:arial">This is arial font family</p>

Output:

This is times new roman font family

This is arial font family


HTML Style font-size

The font-size property is used to define the text size of the HTML tag.

<h3 style="font-size:200%">This is 200% h3 tag</h3>


<p style="font-size:200%">This is 200% p tag</p>

Output:

This is 200% h3 tag

This is 200% p tag

HTML Style text-align

The text-align property is used to define the horizontal text alignment for
the HTML element.

Let's see an example of styling html tag by css text-align property

<h3 style="text-align:right;background-
color:pink;">This text is located at right side</h3>
<p style="text-align:center;background-
color:pink;">This text is located at center side</p>

If you want to put heading at center or left, use "text-align:center" or "text-


align:left" respectively.

Output:

This text is located at right side

This text is located at center side

HTML5 doesn't support <center> tag which is supported in older


version of HTML.
HTML bold tag

HTML bold tag is represented by <b> tag.

HTML <b> tag is used to display the written text in bold format. It is
strictly a presentational element. If you want to show your text in bold
letters and not have real semantic meaning, then put it within
<b>.......</b> tag.

Difference between HTML <b> and <strong> tag

The b tag is explicit whereas strong tag is semantic.The <strong> tag adds
extra semantic meaning to the HTML document.

It is recommended to use strong tag for bold format now.

HTML hr tag

HTML <hr> tag is used to specify a paragraph-level thematic break in HTML


document. It is used when you abruptly change your topic in your HTML
document. It draw a horizontal line between them. It is also called a
Horizontal Rule in HTML.

HTML br tag

HTML <br> tag or element is used to break line in a paragraph.

It is an empty tag, means it does not need a company of end tag.

Difference between HTML <br> and <br/>

You can use HTML br tag two ways: <br> or <br/>. It is recommended to
use closed br tag <br/> because it is supported in HTML and XHTML both.

In HTML br tag need not to be closed e.g. <br> whereas br tag must be
properly closed in XHTML e.g. <br/>.
HTML Div Tag

The HTML <div> tag is used to group the large section of HTML elements
together.

We know that every tag has a specific purpose e.g. p tag is used to specify
paragraph, <h1> to <h6> tag are used to specify headings but the <div>
tag is just like a container unit which is used to encapsulate other page
elements and divides the HTML documents into sections.

The div tag is generally used by web developers to group HTML elements
together and apply CSS styles to many elements at once. For example: If
you wrap a set of paragraph elements into a div element so you can take the
advantage of CSS styles and apply font style to all paragraphs at once
instead of coding the same style for each paragraph element.

<div style="border:1px solid pink;padding:20px;font-size:20px">


<p>Welcome to Learners
website, Here you get tutorials on latest technologies.</p>
<p>This is second paragraph</p>
</div>

Output:

Welcome to Learners.com, Here you get tutorials on latest technologies.

This is second paragraph.

Difference between HTML div tag and span tag

div tag span tag

HTML div is a block element. HTML span is an inline element

HTML div element is used to wrap HTML span element is used to wrap small
large sections of elements. portion of texts, image etc.
HTML pre tag

The HTML <pre> tag is used to specify pre formatted texts. Texts within
<pre>.......</pre> tag is displayed in a fixed-width font. Usually it is
displayed in Courier font. It maintains both space and line break.

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

HTML Label Tag

The <label> tag is used to specify a label for an <input> element. It adds a
label to a form control such as text, email, password, textarea etc.

Let's see the example of HTML label tag.

<label for="email">EMAIL-
ID:<br /> <input type="text" name="emailid" size="30"><br /><br />
<label for="phone">PHONE NO:<br /> <input type="text" name="phno"
size="30"
maxlength="10" pattern="[0-9]{10}"><br /><br />

HTML Input Tag

The HTML <input> tag is used to represent a form input control in HTML
document. This form input control facilitate user to input data and
communicate with a website or application. Let's take an example of an
HTML form with three input fields, two text fields and one button for
submission.

Let's see the example of HTML input tag.

<form action="#">
First name: <input type="text" name="FirstName" ><br>
Last name: <input type="text" name="LastName" ><br>
<input type="submit" value="Submit">
</form>

Output:

First name:
Last name:
Submit

Click the "Submit" button for sending the form-data to a page on the server.

Points to remember

1) Use the input element within the form element to declare input control
that allow user to enter data.

2) The input element is empty. It contains attributes only. There is no need


of an end tag in HTML.

3) If you want to define labels for input element, use the label element with
each input tag.
HTML5

HTML5 is a next version of HTML. Here, you will get some brand new features which
will make HTML much easier. These new introducing features make your website
layout clearer to both website designers and users.

Why use HTML5

• It is enriched with advance features which makes it easy and interactive for
designer/developer and users.
• It allows you to play a video and audio file.
• It allows you to draw on a canvas.
• It facilitate you to design better forms and build web applications that work
offline.
• It provides you advance features for that you would normally have to write
JavaScript to do.

The most important reason to use HTML 5 is, we believe it is not going anywhere. It
will be here to serve for a long time according to W3C recommendation.

Let's see a simple example of HTML5.

<!DOCTYPE>
<html>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

Supporting Browsers

Element Chrome IE Firefox Opera Safari


HTML5 Tags Yes Yes Yes Yes Yes

HTML Audio Tag

HTML audio tag is used to define sounds such as music and other audio clips.
Currently there are three supported file format for HTML 5 audio tag.

1. mp3
2. wav
3. ogg

HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar
technologies are used to play the multimedia items.

This table defines that which web browser supports which audio file format.

Browser mp3 wav ogg

Internet Explorer Yes no no

Google Chrome Yes yes yes

Mozilla Firefox yes* yes yes

Opera No yes yes

Apple Safari Yes yes no

Let's see the code to play mp3 file using HTML audio tag.
<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>

Output:

Let's see the example to play ogg file using HTML audio tag.

<audio controls>
<source src="koyal.ogg" type="audio/ogg">
Your browser does not support the html audio tag.
</audio>

Attributes of HTML Audio Tag

There is given a list of HTML audio tag.

Attribute Description

controls It defines the audio controls which is displayed with play/pause buttons.

autoplay It specifies that the audio will start playing as soon as it is ready.

loop It specifies that the audio file will start over again, every time when it is
completed.

muted It is used to mute the audio output.

preload It specifies the author view to upload audio file when the page loads.

Src It specifies the source URL of the audio file.

HTML Audio Tag Attribute Example

Here we are going to use controls, autoplay, loop and src attributes of HTML audio
tag.
<audio controls autoplay loop>
<source src="koyal.mp3" type="audio/mpeg"></audio>

MIME Types for HTML Audio format

The available MIME type HTML audio tag is given below.

Audio MIME Type


Format

mp3 audio/mpeg

ogg audio/ogg

wav audio/wav

HTML Video Tag

HTML 5 supports <video> tag also. The HTML video tag is used for streaming video
files such as a movie clip, song clip on the web page.

Currently, there are three video formats supported for HTML video tag:

1. mp4
2. webM
3. ogg

Let's see the table that defines which web browser supports video file format.

Browser mp4 webM ogg


Internet Explorer yes no no

Google Chrome yes yes yes

Mozilla Firefox yes yes yes

Opera no yes yes

Apple Safari yes no no

Android also supports mp4 format.

Let's see the code to play mp4 file using HTML video tag.

<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>

Let's see the example to play ogg file using HTML video tag.

<video controls>
<source src="movie.ogg" type="video/ogg">
Your browser does not support the html video tag.
</video>

Attributes of HTML Video Tag

Let's see the list of HTML 5 video tag attributes.


Attribute Description

controls It defines the video controls which is displayed with play/pause buttons.

height It is used to set the height of the video player.

width It is used to set the width of the video player.

poster It specifies the image which is displayed on the screen when the video is not
played.

autoplay It specifies that the video will start playing as soon as it is ready.

loop It specifies that the video file will start over again, every time when it is
completed.

muted It is used to mute the video output.

preload It specifies the author view to upload video file when the page loads.

src It specifies the source URL of the video file.

Let's see the example of video tag in HTML where are using height, width, autoplay,
controls and loop attributes.

<video width="320" height="240" controls autoplay loop>


<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>

MIME Types for HTML Video format

The available MIME type HTML video tag is given below.


Video Format MIME Type

mp4 video/mp4

ogg video/ogg

webM video/webM

HTML Graphics
HTML Canvas Tag

The HTML canvas element provides HTML a bitmapped surface to work with. It is
used to draw graphics on the web page.

The HTML 5 <canvas> tag is used to draw graphics using scripting language like
JavaScript.

The <canvas> element is only a container for graphics, you must need a scripting
language to draw the graphics. The <canvas> element allows for dynamic and
scriptable rendering of 2D shapes and bitmap images.

It is a low level, procedural model that updates a bitmap and does not have a built-
in scene. There are several methods in canvas to draw paths, boxes, circles, text
and add images.

How to create a HTML canvas?

A canvas is a rectangle like area on an HTML page. It is specified with canvas


element. By default, the <canvas> element has no border and no content, it is like
a container.

<canvas id = "mycanvas" width ="200" height ="100"> </canvas>

Example

<canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">


Your browser does not support the HTML5 canvas tag.
</canvas>

Note: It is always necessary to specify the id attribute and the height &
width attribute to define the size of the canvas. You can have multiple
canvas elements on one HTML page.

HTML Canvas Tag with JavaScript

A canvas is a two dimensional grid. The <canvas> is initially blank, and to


display something, a script first needs to access the rendering context and
draw on it.

The canvas element has a DOM method called getContext, used to obtain
the rendering context and its drawing functions. This function takes one
parameter, the type of context 2d.

1) Drawing Rectangle on Canvas

Coordinates (0,0) defines the upper left corner of the canvas. The parameters
(0,0,200,100) is used for fillRect() method. This parameter will fill the rectangle
start with the upper-left corner (0,0) and draw a 200 * 100 rectangle.

<canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c


3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var cctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,200,100);
</script>

2) Drawing Line on Canvas

If you want to draw a straight line on the canvas, you can use the following two
methods.

moveTo(x,y): It is used to define the starting point of the line.


lineTo(x,y): It is used to define the ending point of the line.

If you draw a line which starting point is (0,0) and the end point is (200,100), use
the stroke method to draw the line.

<canvas id="myCanvasLine" width="200" height="100" style="border:1px solid #


d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasLine");
var cctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

There are following methods required to draw paths or an arc on the


canvas-

Sr.No. Method and Description

1 beginPath() - This method resets the current path.

2 moveTo(x, y) - This method creates a new subpath with the given


point.

3 closePath() - This method marks the current subpath as closed, and


starts a new subpath with a point the same as the start and end of the
newly closed subpath.

4 fill() - This method fills the subpaths with the current fill style.

5 stroke() - This method strokes the subpaths with the current stroke
style.

6 arc(x, y, radius, startAngle, endAngle, anticlockwise)


Adds points to the subpath such that the arc described by the
circumference of the circle described by the arguments, starting at the
given start angle and ending at the given end angle, going in the
given direction, is added to the path, connected to the previous point
by a straight line.
3) Drawing Circle on Canvas

If you want to draw a circle on the canvas, you can use the arc() method:

1. arc(x, y, r, start, stop)

To sketch circle on HTML canvas, use one of the ink() methods, like stroke() or
fill().

<canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid


#d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasCircle");
var cctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

4)Drawing Path on canvas


<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>

<script type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');

// Draw shapes
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle

ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth

ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye

ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye

ctx.stroke();
}
else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>

<body id="test" onload="drawShape();">


<canvas id="mycanvas"></canvas>
</body>
</html>

5) Drawing text on canvas

There are property and methods used for drawing text on the canvas.

font property: It is used to define the font property for the text.

fillText(text,x,y) method: It is used to draw filled text on the canvas. It looks


like bold font.

strokeText(text,x,y) method: It is also used to draw text on the canvas, but the
text is unfilled.

Let's see fillText() method example.

<canvas id="myCanvasText1" width="300" height="100" style="border:1px solid


#d3d3d3;">
Sorry! Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasText1");
var cctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello Learners",10,50);
</script>

Let's see strokeText() method example.

<canvas id="myCanvasText2" width="300" height="100" style="border:1px solid


#d3d3d3;">
Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.</canvas
>
<script>
var c = document.getElementById("myCanvasText2");
var cctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello Learners",10,50);
</script>

HTML SVG

The HTML SVG is an acronym which stands for Scalable Vector Graphics.

HTML SVG is a modularized language which is used to describe graphics in XML.


It describe two-dimensional vector and mixed vector/raster graphics in XML. It is
a W3C recommendation. SVG images and their behaviors are defined in XML text
files. So as XML files, you can create and edit an SVG image with text editor, but
generally drawing programs like inkspace are preferred to create it.

SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional
graphs in an X,Y coordinate system etc.

The <svg> element specifies the root of a SVG fragment. You can animate every
element and every attribute in SVG files.

1) Draw a circle

Let's see the example to draw circle by svg tag.

<svg width="100" height="100">


<circle cx="50" cy="50" r="40" stroke="yellow" stroke-
width="4" fill="red" />
</svg>

Here, we are using cx, cy and r attributes of circle tag. These attributes can't be
used with svg rect tag.

2) Draw Rectangle

Let's see the example to draw rectangle by svg tag.

<svg width="200" height="100">


<rect width="200" height="100" stroke="yellow" stroke-
width="4" fill="red" />
</svg>

Here, we are using width and height attributes of rect tag.

3) Draw SVG Line

<svg id="svgelem" height="200" >


<line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-
width:2"/>
</svg>

4) Draw SVG polygon

Let's see the example to draw polygon by svg tag.

<svg height="210" width="500">


<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:red;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />
</svg>

Here, we are using points attribute of polygon tag.

Why SVG is preferred over other image formats?

SVG images can be saved as the smallest size possible. Unlike bitmap image
formats like JPG or PNG, it does not contain a fixed set of dots. So it is also easy
to print with high quality at any resolution.

SVG images can be zoomed to a certain level without degradation of the picture
quality.

SVG images and their behaviors are defined in XML text files, so they can be
created and edited with any text editor.
HTML Drag and Drop(NTD)

HTML Drag and Drop (DnD) is a feature of HTML5. It is a powerful user interface
concept which is used to copy, reorder and delete items with the help of mouse.
You can hold the mouse button down over an element and drag it to another
location. If you want to drop the element there, just release the mouse button.

If you want to achieve the Drag and Drop functionality in traditional HTML4, you
must either have to use complex JavaScript programming or other JavaScript
frameworks like jQuery etc.

Events for Drag and Drop feature

Event Description

Drag It fires every time when the mouse is moved while the object is being dragged.

Dragstart It is a very initial stage. It fires when the user starts dragging object.

Dragenter It fires when the user moves his/her mouse cursur over the target element.

Dragover This event is fired when the mouse moves over an element.

Dragleave This event is fired when the mouse leaves an element.

Drop Drop It fires at the end of the drag operation.

Dragend It fires when user releases the mouse button to complete the drag operation.

HTML5 Drag and Drop Example

Let's see an example of HTML 5 drag and drop feature.

To understand this example, you must have the knowledge of JavaScript.

<script>
function allowDrop(ev) {ev.preventDefault();}
function drag(ev) {ev.dataTransfer.setData("text/html", ev.target.id);}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
}
</script>
<p>Drag the learners image into the rectangle:</p>
<div id="div1" style="width:350px;height:100px;padding:10px;border:1px solid #
aaaaaa;"
ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/htmlpages/images/learners.png" alt="learners image"
draggable="true" ondragstart="drag(event)"/>

In the above example, we have used ondrop and ondragover events on


div element, and ondragstart event on img tag.

Note: MouseEvent is not fired during drag operation.

Stages during Drag and Drop operations

1) Make an element draggable

If you want to make an element draggable, set the draggable attribute to "true" on
the element. For example:

1. <img draggable = "true">

2) What to drag:

Use ondragstart and setData () methods.

Specify what should happen when the element is dragged.

3) Where to Drop:

Use ondragover event.


4) Do the Drop:

Use ondrop event.

HTML Progress Tag

HTML <progress> tag is used to display the progress of a task. It provides an


easy way for web developers to create progress bar on the website. It is mostly
used to show the progress of a file uploading on the web page.

The HTML progress tag is new in HTML5 so you must use new browsers.

Attributes of HTML Progress Tag

HTML <progress> tag supports the global and event attributes as well as 2 specific
attributes.

Tag Description

value It defines that how much work the task has been completed.

max It defines that how much work the task requires in total.

The progress tag should be used to represent progress of a task only, not
for just a gauge (disk pace usage). For such purpose, <meter> element is
used.

HTML Progress Tag Example

Let's see the progress example with value and max attributes.

Downloading progress:
<progress value="43" max="100"></progress>

Styling Progress Bar

You can apply CSS code on progress tag.


progress{
width: 300px;
height: 30px;
}

HTML Progress Tag with JavaScript

The <progress> tag should be used in conjunction with JavaScript to display the
progress of a task.

<script>
var gvalue=1;
function abc(){
var progressExample = document.getElementById ('progress-javascript-
example');
setInterval (function ()
{
if(gvalue<100){
gvalue++;
progressExample.value =gvalue;
}
abc();
}, 1000);
}
</script>
<progress id="progress-javascript-
example" min="1" max="100"></progress>
<br/><br/>
<button onclick="abc()">click me</button>

HTML Data Tag

The HTML <data> tag is used to provide a machine readable version of its own
contents. It displays the data in a special format. It is useful in the case where your
data needs to be in a certain format because it may be processed by a script, but
this might not be the format that you'd like your users to see.

Let’s take a scenario to understand it well:


Suppose you have to represent some numbers to your users with letter (i.e. one,
two, three and so on) but you have script that sorts the numbers in ascending or
descending orders. So your script needs numbers in a format like 1, 2, 3... etc.

The <data> tag is here to solve your problem.

For the users: Write within the <data>....>/data> tag.

For the script: Use value attribute.

<data value="1">One </data>

HTML data tag attribute

There is only one required attribute. The data tag supports global and event
attributes also.

Attribute Description

value It is required attribute. It is used to provide the machine-readable version of


tag's content.

HTML data tag example

<ul>
<li><data value="101">Java Tutorial</data></li>
<li><data value="111">SQL tutorial</data></li>
<li><data value="121">HTML tutorial</data></li>
</ul>

Output:

o Java Tutorial
o SQL tutorial
o HTML tutorial
HTML Datalist Tag

The HTML <datalist> tag is used to provide an auto complete feature on form
element. It provides a list of predefined options to the users to select data.

The datalist tag is introduced in HTML5.

The <datalist> tag should be used with an <input< element that contains a "list"
attribute. The value of "list" attribute is linked with the datalist id.

The HTML datalist tag supports global and event attributes also.

HTML datalist tag example

Let's see the simple example of HTML5 datalist tag. If you press A, it will show a list
of cricketers starting with A letter.

<label>
Enter your favorite cricket player: Press any character<br />
<input type="text" id="favCktPlayer" list="CktPlayers">
<datalist id="CktPlayers">
<option value="Sachin Tendulkar">
<option value="Brian Lara">
<option value="Jacques Kallis">
<option value="Ricky Ponting">
<option value="Rahul Dravid">
<option value="Shane Warne">
<option value="Rohit Sharma">
<option value="Donald Bradman">
<option value="Saurav Ganguly ">
<option value="AB diVilliers">
<option value="Mahendra Singh Dhoni">
<option value="Adam Gilchrist">
</datalist>
</label>
HTML5 - Geolocation
HTML5 Geolocation API lets you share your location with your favorite web
sites. A Javascript can capture your latitude and longitude and can be sent
to backend web server and do fancy location-aware things like finding local
businesses or showing your location on a map.

Today most of the browsers and mobile devices support Geolocation API.
The geolocation APIs work with a new property of the global navigator
object ie. Geolocation object which can be created as follows:

var geolocation = navigator.geolocation;

The geolocation object is a service object that allows widgets to retrieve


information about the geographic location of the device.

Geolocation Methods
The geolocation object provides the following methods −

Method Description

getCurrentPosition() This method retrieves the current geographic location


of the user.

watchPosition() This method retrieves periodic updates about the


current geographic location of the device.

clearWatch() This method cancels an ongoing watchPosition call.

Following is a sample code to use any of the above method −

function getLocation() {
var geolocation = navigator.geolocation;
geolocation.getCurrentPosition(showLocation, errorHandler);
}

Here showLocation and errorHandler are callback methods which would be


used to get actual position
HTML5 Semantic Elements

Semantics is the study of the meanings of words and phrases in a language.

Semantic elements = elements with a meaning.

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.

HTML5 semantic elements are supported in all modern browsers.

HTML5 offers new semantic elements to define different parts of a web page:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>
HTML Header Tag

HTML <header> tag is used as a container of introductory content or navigation


links. Generally a <header> element contains one or more heading elements, logo
or icons or author's information.

You can use several <header> elements in one document, but a <header> element
cannot be placed within a <footer>, <address> or another <header> element.

HTML Header Tag Example

<header>
<h2>ABCOnline.com</h2>
<p> World's no.1 shopping website</p>
</header>

Let's see another example of header tag with CSS code.

CSS Code:

header{
border: 1px solid pink;
background-color:pink;
padding:10px;
border-radius:5px;
}

HTML Code:

<header>
<h2>ABCOnline</h2>
<p> World's no.1 shopping website</p>
</header>

HTML Footer Tag

HTML <footer> tag is used to define a footer for a document or a section. It is


generally used in the last of the section (bottom of the page).

The footer tag is included in HTML5.

HTML <footer> tag contains information about its containing elements for example:

o author information
o contact information
o copyright information
o sitemap
o back to top links
o related documents etc.

Note: You can have one or many footer elements in one document.

If you want to put information like address, e-mail etc. about the author on your
web page, all the relevant elements should be included into the footer element.

HTML Footer Tag Example

<footer>
<p>Posted by: Abc hybd</p>
<p>
<address> Learners, plot no. 6, near MX Mall,Nehru Nagar, Pune
</address>
</p>
<p>Contact information:
<a href="mailto:[email protected]">Email Me</a>.
</p>
</footer>
HTML figure tag

HTML <figure> tag is used to mark up a photo in the document on a web page.

As we know image tag is already available in HTML to display the pictures on web
pages. But HTML 5 <figure> tag is used to handle the group of diagrams, photos,
code listing etc. with some embedded content. You can also add a caption for the
photo with the help of <figcaption> tag.

HTML figure is new a new tag introduced in HTML5.

HTML figure tag example

<p>The Taj Mahal is widely recognized as "the jewel of Muslim art in India and
one of the universally admired masterpieces of the world's heritage". It is regarded
by many as the finest example of Mughal architecture, a style that combines eleme
nts from Islamic, Persian, Ottoman, Turkish and Indian architectural styles.</p>
<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
</figure>

Output:

The Taj Mahal is widely recognized as "the jewel of Muslim art in India and one of
the universally admired masterpieces of the world's heritage". It is regarded by
many as the finest example of Mughal architecture, a style that combines elements
from Islamic, Persian, Ottoman, Turkish and Indian architectural styles.
Note: The content you put within <figure>.......</figure> tag is related to
the main flow, but its position is independent of the main flow and does
not affect the flow the document when removed.

Note: HTML figure tag also supports the global and event attribute in
HTML.

HTML figcaption tag

The <figcaption> element is used to provide a caption to an image.

It is an optional tag and can appear before or after the content within the <figure>
tag.

Only one <figcaption> element can be nested within a <figure> tag although the
<figure> element itself may contain multiple other elements like <img> or
<code>.

The <figcaption> element is used with <figure> element and it can be placed as
the first or last child of the <figure> element.

HTML figure tag example

<figure>
<img src="htmlpages/images/tajmahal.jpg" alt="Taj Mahal"/>
<figcaption>Fig.1.1 -
A front view of the great Taj Mahal in Agra.</figcaption>
</figure>

Output:

Fig.1.1 - A front view of the great Taj Mahal in Agra.


Note: HTML figcaption tag also supports the global and event attribute in
HTML.

HTML Article Tag

The HTML <article> tag defines an independent self-contained content in a


document, page, application or a site.

The article tag content makes sense on its own. It is independent and complete
from other content shown on the page. This tag is generally used on Forum post,
Blog post, News story, comment etc.

HTML article tag example

<article>
<h2>Narendra Modi</h2>
<i>Prime Minister Of India </i>
<p>Narendra DamodarDas Modi is the 15th and current Prime Minister of India,
Modi, a leader of the Bharatiya Janata Party (BJP), previously served as the Chief
Minister of Gujarat state from 2001 to 2014. He is currently the Member of Parliam
ent (MP) from Varanasi. </p>
</article>

Output:

Narendra Modi

(Prime Minister Of India)

Narendra DamodarDas Modi is the 15th and current Prime Minister of India, Modi, a
leader of the Bharatiya Janata Party (BJP), previously served as the Chief Minister
of Gujarat state from 2001 to 2014. He is currently the Member of Parliament (MP)
from Varanasi.

HTML article tag also supports global and event attributes in HTML.
HTML Dialog Tag

HTML <dialog> tag to create a new popup dialog on a web page. This tag
represents a dialog box or other interactive component like window.

The <dialog> element uses a boolean attribute called open that activate element
and facilitate user to interact with it.

HTML dialog tag example

<div>
<dialog id="myFirstDialog" style="width:50%;background-
color:#F4FFEF;border:1px dotted black;">
<p><q>I am so clever that sometimes I don't understand a single word of
what I am saying.
</q> - <cite>Oscar Wilde</cite></p>
<button id="hide" onclick="hided()">Close</button>
</dialog>
<button id="show" onclick="showd()">Show Dialog</button>
</div>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
var dialog=document.getElementById("myFirstDialog");
function showd() {
dialog.show();
}
function hided(){
dialog.close();
}
</script>
HTML Details Tag

HTML <details> tag is used to specify the additional details on the web page that
the user can view or hide on demand.
According to W3C HTML specification, it is used as a disclosure widget from which
user can retrieve additional information or control.

It is used together with a relevant tag known as <summary>. Technically, there is


no need of summary tag, but if you ignore this then the browser will use some
default text.

The <details> tag wraps all the content which you want to show or hide and the
<summary> tag contains the summary and the title of the section.

HTML details tag attribute

HTML details tag also supports global and event attributes in HTML.

The details tag provides one specific attribute open.

Attribute Description

open It specifies that the details will be displayed (open) to the user.

HTML details tag example

<details>
<summary>Copyright 2011-2014.</summary>
<p> - by Learners. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the learners</p>

</details>
<p><b>Note:</b> The details tag is currently only supported in Opera, Chrome,
and in Safari 6.</p>

Output:

Copyright 2011-2014.

Note: The details tag is currently only supported in Opera, Chrome, and in Safari 6.
HTML Summary Tag

The HTML <summary> tag is used with <details> tag. It is used as a summary,
caption or legend for the content of a <details> element.

It is used within the <details> tag. It must have a closing tag.

The <summary> tag is new and introduced in HTML 5.

HTML summary tag example

<details>
<summary>Learner Summary</summary>
<p> Learning is a quite good habit.</p>
<p>You can learn various technologies such as HTML, CSS, JavaScript, Java, Andr
oid.</p>
</details>

Let's see another example of HTML summary tag.

<details>
<summary>MacBook Pro Specification</summary>
<ul>
<li><strong>13.3-inch LED-
backlit glossy widescreen display</strong> with edge-to-
edge, uninterrupted glass (1280 x 800-pixel resolution).</li>
<li><strong>2.4 GHz Intel Core i5 dual-
core processor</strong> with 3 MB shared L3 cache for excellent multitasking.</
li>
<li><strong>Intel HD Graphics 3000</strong> with 384 MB of DDR3 SDRA
M shared with main memory.</li>
<li><strong>500 GB Serial ATA hard drive</strong> (5400 RPM)</li>
<li><strong>4 GB installed RAM</strong> (1333 MHz DDR3; supports up t
o 8 GB)</li>
</ul>
</details>
HTML Section Tag

The HTML <section> tag is used to define sections in a document. When you put
your content on a web page, it may contains many chapters, headers, footers, or
other sections on a web page that is why HTML <section> tag is used.

HTML <section> is a new tag introduced in HTML5.

HTML section tag example

CSS code:

section{
border:1px solid pink;
padding:15px;
margin:10px;
}

HTML code:

<h2> Indian Leader</h2>


<section>
<h3> Jawaharlal Nehru </h3>
<p> Jawaharlal Nehru was the first Prime Minister of India and a central figure in
Indian politics for much of the 20th century. He emerged as the paramount leader o
f the Indian
independence movement under the tutelage of Mahatma Gandhi. -
Source Wikipedia </p>
</section>
<section>
<h3>Subhas Chandra Bose </h3>
<p>Subhas Chandra Bose was an Indian nationalist whose attempt during World W
ar II to rid India of
British rule with the help of Nazi Germany and Japan left a troubled legacy.
The honorific Netaji (Hindustani language: "Respected Leader"), first applied to Bos
e in Germany,
by the Indian soldiers of the Indische Legion and by the German and Indian official
s
in the Special Bureau for India in Berlin, in early 1942, is now used widely through
out India. -source Wikipedia</p>
</section>

Output:

Indian Leader

Jawaharlal Nehru

Jawaharlal Nehru was the first Prime Minister of India and a central figure in Indian
politics for much of the 20th century. He emerged as the paramount leader of the
Indian independence movement under the tutelage of Mahatma Gandhi. -Source
Wikipedia

Subhas Chandra Bose

Subhas Chandra Bose was an Indian nationalist whose attempt during World War II
to rid India of British rule with the help of Nazi Germany and Japan left a troubled
legacy. The honorific Netaji (Hindustani language: "Respected Leader"), first
applied to Bose in Germany, by the Indian soldiers of the Indische Legion and by
the German and Indian officials in the Special Bureau for India in Berlin, in early
1942, is now used widely throughout India. -source Wikipedia

The <section> tag supports global and event attributes in HTML 5.


Image Mapping in HTML

an image map is one image with multiple "clickable" areas. i.e., An Image maps allow
you to make certain areas of an image into links. There are two types of image maps;
server side and client side.

Server side image maps

For a server side image map, put an image inside a link, and set the ISMAP attribute on
the IMG (just the name, it does not need a value). When the link is clicked, the browser
will request the given link, and add ?x,y on the end of it. If the user is not using a mouse
(or equivalent), then the coordinates will be 0,0.

<a href="foo.html"><img src="bar.gif" alt="" ismap></a>

Client side image maps

With a client side image map, you can specify a list of areas that will be used as the
links. This gives the user the chance to see immediately if where they are about to click
is somewhere useful, as opposed to the server-side image map where they must wait
for the reply from the server to tell them.

The basic idea behind an image map is that you combine two different components:

o A map of defined linked areas


o An image

There are four types of linked areas on Map; rectangles, circles, polygons and default.

HTML Elements Used to Create Image Maps


There are three HTML elements used to create image maps:

o img: specifies the location of the image to be included in the map.


o map: is used to create the map of clickable areas.
o area: is used within the map element to define the clickable areas.

Image

First of all, you need a suitable graphic. You need to be a bit careful when choosing the
right image. An image that cannot be divided in different sections is not your best
choice, but an image that has clear cut-offs or lines would be better. Of course, this
down not apply to navigational menus or similar, just to everyday pictures like animals,
objects or people.

-Co-ordinates
When you've chosen or created your desired image, you then insert it into an image
editor (i.e Ms Paint) so that you can find its co-ordinates. Try to either write down
different co-ordinates of take them one by one and then insert them into your document.
You'll need different co-ordinates depending on what sort of “area” or "hot spot" you'd
like to use.

Hot Spot
Now that you've got your image and co-ordinates, HTML comes to finalise your job.
There are three different shapes (commonly termed "hot spots" or “areas”) that can be
used in image maps. They are as follows:
-RECT
-CIRCLE
-POLYGON
-Rect
Rect is obviously short for rectangle. For this one, you'll need two different co-ordinates.
Top right and bottom left.

shape="rect" coords="10,20,75,40"

-Circle
This expects three coordinates. The horizontal position of the centre, the vertical
position of the centre and the radius of the circle.
shape="circle" coords="50,80,20"

-Polygon
This expects as many pairs of coordinates as you need to make your polygon.
These can make any polygon shapes you need, and can have sloping lines. All
coordinates are specified as horizontal position then vertical position, with all of
them in a long comma separated list. The last pair of coordinates can optionally
match the first.

shape="poly"
coords="217,305,218,306,218,306,228,316,243,316,243,325,229,325,229,322,217,310
"

There are a few things you need to remember:


• The map name must match what is in usemap.
• Usemap has a hashmark (#) – usemap="#on-off", but name doesn't –
name="on-off".
• There can be multiple image maps on a page, but each must have a unique
name.
• The area element doesn't have a closing tag.
• If the area tag has an href="" attribute it should also have an alt="" attribute.

<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets"


usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>

You might also like