Scribd
Upload
7 views35 pages

119430

HTML, or HyperText Markup Language, is the most widely used language for developing web pages, created by Tim Berners-Lee in 1991. The document outlines the evolution of HTML from its first standard in 1995 to the current HTML5 version, highlighting its advantages, applications, elements, and formatting options. It also covers various HTML tags for structuring content, including headings, paragraphs, tables, and lists, along with examples and best practices for web development.

Uploaded by

Abishek Rajesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views35 pages

119430

HTML, or HyperText Markup Language, is the most widely used language for developing web pages, created by Tim Berners-Lee in 1991. The document outlines the evolution of HTML from its first standard in 1995 to the current HTML5 version, highlighting its advantages, applications, elements, and formatting options. It also covers various HTML tags for structuring content, including headings, paragraphs, tables, and lists, along with examples and best practices for web development.

Uploaded by

Abishek Rajesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML

HTML- HyperTextMarkupLanguage,

• mostwidely used language on Web to develop web pages.


• was createdby Berners-Leein late 1991
• HTML2.0"was the first standard HTML specification which was published in 1995.
• HTML4.01was a major version of HTML and it was published in late 1999.
• ThoughHTML 4.01 version is widely used but currently we are having HTML-5
version which is an extension to HTML 4.01, and this version was published in 2012.

key advantages of learning HTML:

CreateWebsite- You can create a website or customize an existing web template

Becomeawebdesigner- If you want to start acareeras a professional web designer, HTML and
CSS designing is a must skill.

Understandweb - If you want to optimize your website, to boost its speed and performance, it is
good to know HTML to yield best results.

Learnotherlanguages- Once you understands the basic of HTML then other related
technologies like javascript, php, or angular are become easier to understand.

Applications of HTML
Webpagesdevelopment- HTML is used to create pages which are rendered over the web.

InternetNavigation- HTML provides tags which are used to navigate from one page to
another and is heavily used in internet navigation.

ResponsiveUI- HTML pages now-a-days works well on all platform, mobile, tabs, desktop or
laptops owing to responsive design strategy.

OfflinesupportHTML pages once loaded can be made available offline on the machine
without any need of internet.

Gamedevelopment- HTML5 has native support for rich experience and is now useful in
gamingdevelopmentarena as well.

HTMLElements
An HTML file is made of elements.
These elements are responsible for creating web pages and define content in that webpage. An
element in HTML usually consist of a start tag <tag name>, close tag </tag name> and content
inserted between them.

some elements does not have content and end tag such elements are known
asVoidelementsoremptyelements. These elements are also called asunpairedtag.

Some Voidelementsare<br>(representsalinebreak),<hr>(representsahorizontalline),etc.

NestedHTMLElements:HTML can be nested, which means an element can contain another


element.

Block-levelandInlineHTMLelements
For the default display and styling purpose in HTML, all the elements are divided into two
categories: Block-level element, Inline element

Block-levelelement:
• These are the elements, which structure main part of web page, by dividing
a page into coherent blocks.
• A block-level element always start with new line and takes the full width of web page,
from left to right.
• These elements can contain block-level as well as inline elements.

Followingaretheblock-levelelementsinHTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>,
<figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>,
<noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.

Inlineelements:
• Inline elements are those elements, which differentiate the part of a given text and
provide it a particular function.
• These elements does not start with new line and take width as per requirement.
• The Inline elements are mostly used with other elements.

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>,
<img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>,
<small>,<span>,<strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

Example:
<!DOCTYPE html>
<html>
<head><title>Example</title>
</head>
<body>
<ahref="[Link] on link</a>
<spanstyle="background-color: lightblue">
this is inlineelement </span>
<p>This will take width of text only</p>
</body>
</html>

HTMLFormatting
• processof formatting text for better look and feel.
• HTML provides us ability to format text without using CSS.
• These tags are used to make text bold, italicized, or underlined. There are almost 14
options available that how text appears in HTML and XHTML.

InHTMLtheformattingtagsaredividedintotwocategories:

Physicaltag:These tags are used to provide the visual appearance to the text.
Logicaltag:These tags are used to add some logical or semantic value to the text.

Element Description
name
<b> This is a physical tag, whichis used to bold the textwritten
between it.
<strong> This is a logical tag, whichtells the browser that the textis
important.

<i> This is a physical tag whichis used to make text italic.


<em> This is a logical tag whichis used to display content initalic.
<mark> This tag is used to highlighttext.
<u> This tag is used to underlinetext written between it.

<tt> This tag is used to appeara text in teletype. (not supportedin


HTML5)
<strike> This tag is used to drawa strikethrough on a section
oftext. (Not supported in HTML5)
<sup> It displays the content slightly abovethe normal line.
<sub> It displays the content slightly belowthe normal line.
<del> This tag is used to displaythe deleted content.
<ins> This tag displays the content whichis added
<big> This tag is used to increasethe font size by one conventionalunit.

<small> This tag is used to decreasethe font size by one unitfrom


base font size.

HTMLHeading

A HTML heading or HTMLhtag 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, from
highest level h1 (main heading) to the least level h6 (least important heading).

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.

HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage.
It is a notable point that a browser itself add an empty line before and after a paragraph.
An HTML <p> tag indicates starting of new paragraph
<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>

An HTML<hr>tagis used to apply a horizontal line between two statements or two paragraphs.
HTML Phrase tag
The HTML phrase tags are special purpose tags, which defines the structural
meaning of a block of text or semantics of text.

Followingis the list of phrase tags


Abbreviation tag : <abbr>
Acronym tag: <acronym> (not supported in HTML5)
Marked tag: <mark>
Strong tag: <strong>
Emphasized tag : <em>
Definition tag: <dfn>
Quoting tag: <blockquote>
Short quote tag : <q>
Code tag: <code>
Keyboard tag: <kbd>
Address tag: <address>

<p>An<abbrtitle = "Hypertext Markup language">HTML </abbr>


language is used to create web pages.</p>

The content written between<mark>and</mark>tagwill show as yellow mark on browser. This


tag is used to highlight a particular text.

The text written between<strong>and</strong>will be displayed as important text.

The text written between<em>and</em>tag will italicized the text.

When you use the<dfn>and</dfn>tags, it allow to specify the keyword of the content.

<p><dfn>HTML</dfn>is a markup language.</p>

The HTML<blockquote>elementshows that the enclosed content is quoted from another


source. The Source URL can be given using the cite attribute, and text representation of source
can display using<cite>.....</cite>element.

<blockquotecite="[Link]
The first step toward success is taken when you refuse to be a captive of t he environment in
which you first find yourself.?</p></blockquote>

<cite>-Mark Caine</cite>

An HTML<q>.......</q>element defines a short quotation. If you will put any content between
<q> ....... </q>, then it will enclose the text in double quotes.
The HTML<code></code>element is used to display the part of computer code. It will display
the content in monospaced font.

In HTML the keyboardtag,<kbd>,indicates that a section of content is a user input from


keyboard.

The content written between<address>and</address>tag, then it will be displayed in italic font.

HTML Anchor
The HTMLanchortagdefinesahyperlinkthatlinksonepagetoanotherpage. It can create hyperlink to
other web page as well as files, location, or any URL. The "href" attribute is the most important
attribute of the HTML a tag. and which links to destination page or URL.

The href attribute is used to define the address of the file to be linked.

The syntax of HTML anchor tag is given below.

<ahref="[Link]">Click for Second Page</a>

If we want to open that link to another page then we can usetargetattributeof <a> tag. With the
help of this link will be open in next page.

The targetattribute can only use with href attribute in anchor tag. If we will not use
target attribute then link will open in same page.

Clickon <ahref="[Link] target="_blank"> this-link</a>to go on home


page of JavaTpoint.

Link to an e-mail address:

<ahref="[Link]
(bye-mailonly)</a>

Appearance of HTML anchor tag


An unvisitedlinkis displayed underlined and blue. A
visitedlinkdisplayed underlined and purple.
An activelinkis underlined and red.

Hyperlinks and Sections


•Link to another location in the same document:

<ahref="#section1">GotoIntroduction</a>
<h2id="section1">Introduction</h2>

Link to a specific location in another document:

<ahref="[Link]#section3.1.1">GotoSection3.1.1</a>

<!–-[Link]-->...
<divid="section3.1.1">
<h3>[Link]</h3></div>

Links to the Same Document – Example


<h1>TableofContents</h1>
<p><ahref="#section1">Introduction</a><br/><ahref="#section2">Somebac
kground</A><br/><ahref="#section2.1">ProjectHistory</a><br/>...theres
tofthetableofcontents...

<!--Thedocumenttextfollowshere-->

<h2id="section1">Introduction</h2>...Section1followshere...
<h2id="section2">Somebackground</h2>...Section2followshere...
<h3id="section2.1">ProjectHistory</h3>...Section2.1followshere...

Images:<img>
Inserting an image with <img> tag:
<imgsrc="/img/[Link]">

Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border

Eg.<imgsrc="./[Link]" alt="PHP Logo" />


Use <img> tag as a link
put<img> tag inside the <a> tag
HTML Table
HTMLtabletagis used to display data in tabular form (row * column). There can be many
columns in a row.

We can create a table to display data in tabular form, using <table> element, with the
help of <tr> ,<td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table
data is defined by <td> tags.

•Start and end of a table


<table>...</table>
•Start and end of a row
<tr>...</tr>
•Start and end of a cell in a row <td>...</td>

Complete HTML Tables

• Table rows split into three semantic sections: header, body and footer
–<thead>denotes table header and contains <tr> and <th>elements instead
of<td>elements
–<tbody>denotes collection of table rows that contain the very data
–<tfoot>denotes table footer but comes BEFORE the<tbody>tag
–<colgroup>and <col>define columns (most often used to set column widths)
Complete HTML Table: Example

<table>
<colgroup>
<col style="width:100px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
HTML Table Tags

Tag Description
<table> It defines a table.
<tr> It defines a row ina table.
<th> It defines a header cellin a table.
<td> It defines a cell ina table.
<caption> It defines the table caption.
<colgroup> It specifies a group ofone or more columnsin a table
for formatting.
<col> It is used with <colgroup>element to specify
column properties for each column.
<tbody> It is used to groupthe body content ina table.
<thead> It is used to groupthe header content ina table.
<tfooter> It is used to groupthe footer content ina table.
Cell Spacing and Padding – Example [Link]
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

The cellpadding attribute of HTML table tag is obselete now. It is recommended to use
CSS.

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

<style>
table {
width:100%;
}
th, td {
border: 1px solid pink;
border-collapse: separate;
}
</style>

HTML table with caption


HTML caption is displayed above the table. It must be used after table tag only.
<table>
<caption>Student Records</caption>
Comments: <!-- --> Tag

•Comments can exist anywhere between the <html></html> tags

•Comments start with<!--and end with-->

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:

Ordered List or Numbered List (ol)


Unordered List or Bulleted List (ul)
Description List or Definition List (sdl)
Type attribute:

Thereare 5 types of attributes in <ol> tag.

Type Description
Type "1" This is the default type. Inthis type, the list itemsare
numbered with numbers.
Type "I" In this type, the list itemsare numbered with upper case roman
numbers.
Type "i" In this type, the list itemsare numbered with lower case roman
numbers.
Type "A" In this type, the list itemsare numbered with upper case letters.

Type "a" In this type, the list itemsare numbered with lower case letters.

2. start attribute
The start attribute is used with ol tag to specify from where to start the list items.
<ol type="i" start="5">
<li>HTML</li> Output:
<li>Java</li> v. HTML
<li>JavaScript</li> vi. Java
<li>SQL</li> vii. JavaScript
</ol> viii. SQL

3. reversed Attribute:
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use the reversed
attribute with tag then it will numbered the list in descending order (7, 6, 5, 4......1).
<ol reversed>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
there are 4 types of attributes in <ul> tag.

Type Description

Type "disc" This is the default style. In this style, the list items are marked with bullets.

Type "circle" In this style, the list items are marked with circles.

Type "square" In this style, the list items are marked with squares.

Type "none" In this style, the list items are not marked .

The type attribute is not supported in HTML5, instead of type you can use CSS property of list-style-type.
Following is the example to show the CSS property for ul tag.
<ul style="list-style-type: square;">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
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
<iframe src="URL"></iframe>
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 iframe:</p>
<iframe src="[Link] height="300" width="400"></iframe> </body>
</html>
Example: (Percentage)
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://
[Link]/" height="50%" width="70%"></iframe> </body>
</html>
using CSS to set the height and width of the iframe.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>Use the CSS height and width properties to specify the size of the iframe:</p>
<iframe src="[Link] style="height:300px;width:400px"></iframe>
</body>
</html>

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.
<!DOCTYPE html>
<html>
<body>
<h2>Remove the Iframe Border</h2>
<p>This iframe example doesn't have any border</p>
<iframe src="[Link] style="border:none;"></iframe>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="[Link]" name="iframe_a"></iframe>
<p><a href="[Link] target="iframe_a">[Link]</a></p>
<p>The name of iframe and link target must have same value else link will not open as a frame. </p>
</body>
</html>
Embed YouTube video using iframe
You can also add a YouTube video on your webpage using the <iframe> tag. The attached video will be
played at your webpage and you can also set height, width, autoplay, and many more properties for the
video.
Following are some steps to add YouTube video on your webpage:
• Goto YouTube video which you want to embed.
• Click on SHARE ➦ under the video.
• Click on Embed <> option.
• Copy HTML code.
• Paste the code in your HTML file
• Change height, width, and other properties (as per requirement).
Example:
<iframe width="550" height="315" src="[Link] frameborder="0
" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen style="padding:20px;"></iframe>
<iframe width="550" height="315" src="[Link] framebor
der="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" style="padding:20px;">></iframe>
Attributes of <iframe>
Attribute name Value Description

Allowfullscreen If true then that frame can be opened in full screen.


Height Pixels It defines the height of the embedded iframe, and the default height is
150 px.
Name text It gives the name to the iframe. The name attribute is important if you
want to create a link in one frame.
Frameborder 1 or 0 It defines whether iframe should have a border or not. (Not supported
in HTML5).
Width Pixels It defines the width of embedded frame, and default width is 300 px.
Src URL The src attribute is used to give the path name or file name which
content to be loaded into iframe.
Sandbox This attribute is used to apply extra restrictions for the content of the
frame
allow-forms It allows submission of the form if this keyword is not used then form
submission is blocked.
allow-popups It will enable popups, and if not applied then no popup will open.
allow-scripts It will enable the script to run.

allow-same- If this keyword is used then the embedded resource will be treated as
origin downloaded from the same source.
The srcdoc attribute is used to show the HTML (code)content in the
Srcdoc
inline iframe. It overrides the src attribute (if a browser supports).
It indicates that browser should provide a scroll bar for the iframe or
Scrolling
not. (Not supported in HTML5)
auto Scrollbar only shows if the content of iframe is larger than its
dimensions.
yes Always shows scroll bar for the iframe.
no Never shows scrollbar for the iframe.

HTML Form

An HTML form is a section of a document which contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing such as
name, email address, password, phone number, etc.

Why use HTML Form

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

HTML Form Syntax

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton, button

</form>

HTML Form Tags

Tag Description

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


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

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

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

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

<select> It defines a drop-down list.


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

<button> It defines a clickable button.


HTML 5 Form Tags

Tag Description

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

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

<output> It defines the result of a calculation.


The <input> element

[Link] Type & Description


text
1
A free-form text field, nominally free of line breaks.
password
2 A free-form text field for sensitive information, nominally free of line
breaks.
checkbox
3
A set of zero or more values from a predefined list.
radio
4
An enumerated value.
submit
5
A free form of button initiates form submission.
file
6
An arbitrary file with a MIME type and optionally a file name.
image
7 A coordinate, relative to a particular image's size, with the extra semantic
that it must be the last value selected and initiates form submission.

hidden
8
An arbitrary string that is not normally displayed to the user.
select
9
An enumerated value, much like the radio type.
textarea
10
A free-form text field, nominally with no line break restrictions.
button
11
A free form of button which can initiates any event related to button.
Attribute Value Description
accept file_extension Specifies a filter for what file types the user can
audio/* pick from the file input dialog box (only for
video/* type="file")
image/*
media_type

align left Not supported in HTML5.


right Specifies the alignment of an image input (only for
top type="image")
middle
bottom
alt text Specifies an alternate text for images (only for
type="image")
autocomplete on Specifies whether an <input> element should have
off autocomplete enabled
autofocus autofocus Specifies that an <input> element should
automatically get focus when the page loads
checked checked Specifies that an <input> element should be pre-
selected when the page loads (for type="checkbox"
or type="radio")
dirname [Link] Specifies that the text direction will be submitted
disabled disabled Specifies that an <input> element should be
disabled
form form_id Specifies the form the <input> element belongs to
formaction URL Specifies the URL of the file that will process the
input control when the form is submitted (for
type="submit" and type="image")
value text Specifies the value of an <input> element

width pixels Specifies the width of an <input> element (only for


type="image")
formenctype application/x- Specifies how the form-data should be encoded
www-form- when submitting it to the server (for type="submit"
urlencoded and type="image")
multipart/form-
data
text/plain
formmethod get Defines the HTTP method for sending data to the
post action URL (for type="submit" and type="image")
formnovalidate formnovalidate Defines that form elements should not be validated
when submitted
formtarget _blank Specifies where to display the response that is
_self received after submitting the form (for
_parent type="submit" and type="image")
_top
framename
height pixels Specifies the height of an <input> element (only for
type="image")
list datalist_id Refers to a <datalist> element that contains pre-
defined options for an <input> element
max number Specifies the maximum value for an <input>
date element
maxlength number Specifies the maximum number of characters
allowed in an <input> element
min number Specifies a minimum value for an <input> element
date
multiple Multiple Specifies that a user can enter more than one value
in an <input> element
name text Specifies the name of an <input> element
pattern regexp Specifies a regular expression that an <input>
element's value is checked against
placeholder text Specifies a short hint that describes the expected
value of an <input> element
readonly readonly Specifies that an input field is read-only
required required Specifies that an input field must be filled out
before submitting the form
size number Specifies the width, in characters, of an <input>
element
src URL Specifies the URL of the image to use as a submit
button (only for type="image")
step number Specifies the interval between legal numbers in
any an input field
HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in
this field.
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
Radio Button Control
The radio button is used to select one option from multiple options. It is used for selection of gender, quiz
questions etc. If you use one name for all the radio buttons, only one radio button can be selected at a
time. Using radio buttons for multiple options, you can only choose a single option at a time.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>
Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>

Submit button control


HTML <input type="submit"> are used to add a submit button on web page. When user clicks on submit
button, then form get submit to the server.
Syntax:
<input type="submit" value="submit">

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


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

HTML <fieldset> element:


The <fieldset> element in HTML is used to group the related information of a form. This element is used
with <legend> element which provide caption for the grouped elements.
Example:
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>

Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>

Reset button – brings the form to its initial state


<input type="reset" name="resetBtn" value="Reset the form" />
Image button – acts like submit but image is displayed and click coordinates are sent
<input type="image" src="[Link]" name="submitBtn" alt="Submit" />
Ordinary button – used for Javascript, no default action
<input type="button" value="click me" />
Password input – a text field which masks the entered text with * signs
<input type="password" name="pass" />
Multiple select field – displays the list of items in multiple lines, instead of one
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
File input – a field used for uploading files
<input type="file" name="photo" />
When used, it requires the form element to have a specific attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>

Form labels are used to associate an explanatory text to a form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />
Clicking on a label focuses its associated field (checkboxes are toggled, radio buttons are checked)
Labels are both a usability and accessibility feature and are required in order to pass accessibility
validation.
Single-line text input fields:
<input type="text" name="FirstName" value="This is a text field" />
Multi-line textarea fields:
<textarea name="Comments">This is a multi-line text field</textarea>
Hidden fields contain data not shown to the user:
<input type="hidden" name="Account" value="This is a hidden text field" />

The tabindex HTML attribute controls the order in which form fields and hyperlinks are focused when
repeatedly pressing the TAB key
• tabindex="0" (zero) - "natural" order
• If X > Y, then elements with tabindex="X" are iterated before elements with tabindex="Y"
Elements with negative tabindex are skipped, however, this is not defined in the standard
<input type="text" tabindex="10" />

HTML5 input elements introduced several new values for the type attribute. These are listed below.

[Link]. Type & Description


datetime A date and time (year, month, day, hour, minute, second, fractions of a second)
1 encoded according to ISO 8601 with the time zone set to UTC.
datetime-local A date and time (year, month, day, hour, minute, second, fractions of a second)
2 encoded according to ISO 8601, with no time zone information.

3 date A date (year, month, day) encoded according to ISO 8601.

4 month A date consisting of a year and a month encoded according to ISO 8601.

5 week A date consisting of a year and a week number encoded according to ISO 8601.

6 time A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.

7 number It accepts only numerical value. The step attribute specifies the precision, defaulting to 1.

8 range The range type is used for input fields that should contain a value from a range of numbers.

email It accepts only email value. This type is used for input fields that should contain an e-mail
9 address. If you try to submit a simple text, it forces to enter only email address in
email@[Link] format.
url It accepts only URL value. This type is used for input fields that should contain a URL address. If
you try to submit a simple text, it forces to enter only URL address either in
10
[Link] format or in [Link] format.

The <output> element

HTML5 introduced a new element <output> which is used to represent the result of different types of
output, such as output written by a script.

You can use the for attribute to specify a relationship between the output element and other elements in
the document that affected the calculation (for example, as inputs or parameters).

The value of the for attribute is a space-separated list of IDs of other elements.

What is New in HTML5?


The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>
The character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">

HTML5 Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Note The default character encoding in HTML5 is UTF-8.

New HTML5 Elements


The most interesting new elements are:
New semantic elements like <header>, <footer>, <article>, and <section>.
New form control attributes like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.

New HTML5 API's (Application Programming Interfaces)


The most interesting new API's are:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE

New Semantic/Structural Elements


HTML5 offers new elements for better document structure:
Tag Description
<article> Defines an article in the document
<aside> Defines content aside from the page content

<bdi> Defines a part of text that might be formatted in a different direction from other text

<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.

<footer> Defines a footer for the document or a section


<header> Defines a header for the document or a section
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>Title</title>
<link href="css/[Link]" rel="stylesheet" />
<link href="css/[Link]" rel="stylesheet" />
</head>
<body>
<header>
<hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup>
</header>
<nav>
<ul><li><a href="#">Menu Option 1</a></li>
<li><a href="#">Menu Option 2</a></li>
<li><a href="#">Menu Option 3</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the first article. This is <mark>highlighted</mark>.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section> This is the second article. These articles could be blog posts, etc.
</section>
</article>
</section>
<aside>
<section>
<h1>Links</h1>
<ul><li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</section>
<figure>
<img width="85" height="85"
src="[Link]
alt="Jennifer Marsman" />
<figcaption>Jennifer Marsman</figcaption>
</figure>
</aside>
<footer>Footer - Copyright 2011</footer>
</body>
</html>
HTML <meter> Tag
to measure data within a given range (a gauge):
<meter value="2" min="0" max="10">2 out of 10</meter><br>

<meter value="0.6">60%</meter>
The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a
gauge.
The <meter> tag should not be used to indicate progress (as in a progress bar).
Attribute Value Description

form form_id Specifies one or more forms the <meter> element belongs to

high number Specifies the range that is considered to be a high value

low number Specifies the range that is considered to be a low value

max number Specifies the maximum value of the range

min number Specifies the minimum value of the range

optimum number Specifies what value is the optimal value for the gauge

value number Required. Specifies the current value of the gauge

HTML <progress> Tag


The <progress> tag represents the progress of a task.
Attribute Value Description

max number Specifies how much work the task requires in total

value number Specifies how much of the task has been completed

HTML5 Graphics elements


Tag Description
<canvas> Defines graphic drawing using JavaScript
<svg> Defines graphic drawing using SVG

<canvas>gives you an easy and powerful way to draw graphics using JavaScript.
It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.
Here is a simple <canvas> element which has only two specific attributes width and height plus all the core HTML5
attributes like id, name and class, etc.
<canvas id = "mycanvas" width = "100"
height = "100"></canvas>
The Rendering Context
The <canvas> is initially blank, and to display something, a script first needs to access the rendering context and
draw on it.
var canvas = [Link]("mycanvas");
if ([Link])
{
varctx = [Link]('2d');
// drawing code here }
else
{ // canvas-unsupported code here }
Drawing Rectangles
[Link]. Method and Description

fillRect(x,y,width,height)
1
This method draws a filled rectangle.

strokeRect(x,y,width,height)
2
This method draws a rectangular outline.

clearRect(x,y,width,height)
3
This method clears the specified area and makes it fully transparent
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
functiondrawShape() {
// Get the canvas element using the DOM
var canvas = [Link]('mycanvas');
// Make sure we don't execute when canvas isn't supported
if ([Link]) {
// use getContext to use the canvas for drawing
varctx = [Link]('2d');
// Draw shapes
[Link](25,25,100,100);
[Link](45,45,60,60);
[Link](50,50,50,50);
} 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>
[Link]. Examples & Description
1 Drawing RectanglesLearn how to draw rectangle using HTML5 <canvas> element

2 Drawing PathsLearn how to make shapes using paths in HTML5 <canvas> element

3 Drawing LinesLearn how to draw lines using HTML5 <canvas> element

4 Drawing BezierLearn how to draw Bezier curve using HTML5 <canvas> element

5 Drawing QuadraticLearn how to draw quadratic curve using HTML5 <canvas> element

6 Using ImagesLearn how to use images with HTML5 <canvas> element

7 Create GradientsLearn how to create gradients using HTML5 <canvas> element

8 Styles and ColorsLearn how to apply styles and colors using HTML5 <canvas> element

9 Text and FontsLearn how to draw amazing text using different fonts and their size.

10 Pattern and ShadowLearn how to draw different patterns and drop shadows.

11 Canvas StatesLearn how to save and restore canvas states while doing complex drawings on a canvas.

Canvas Translation This method is used to move the canvas and its origin to a different point in the grid.
12

13 Canvas Rotation This method is used to rotate the canvas around the current origin.

14 Canvas Scaling This method is used to increase or decrease the units in a canvas grid.

15 Canvas Transform These methods allow modifications directly to the transformation matrix.

Canvas Composition This method is used to mask off certain areas or clear sections from the canvas.
16

17 Canvas Animation Learn how to create basic animation using HTML5 canvas and JavaScript.

SVG Element:
• SVG stands for Scalable Vector Graphics.
• SVG defines vector-based graphics in XML format.
• SVG defines the graphics in XML format
• Every element and every attribute in SVG files can be animated
• SVG is a W3C recommendation
• SVG integrates with other W3C standards such as the DOM and XSL

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


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

• An SVG image begins with an <svg> element


• The width and height attributes of the <svg> element define the width and height of the SVG image
• The <circle> element is used to draw a circle
• The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the
circle's center is set to (0, 0)
• The r attribute defines the radius of the circle
• The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the
circle to a 4px green "border"
• The fill attribute refers to the color inside the circle. We set the fill color to yellow
• The closing </svg> tag closes the SVG image
SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:
• SVG images can be created and edited with any text editor
• SVG images can be searched, indexed, scripted, and compressed
• SVG images are scalable
• SVG images can be printed with high quality at any resolution
• SVG images are zoomable
• SVG graphics do NOT lose any quality if they are zoomed or resized
• SVG is an open standard
• SVG files are pure XML
The main competitor to SVG is Flash.
The biggest advantage SVG has over Flash is the compliance with other standards (e.g. XSL and the DOM). Flash
relies on proprietary technology that is not open source.
SVG Shapes
SVG has some predefined shape elements that can be used by developers:
• Rectangle <rect>
• Circle <circle>
• Ellipse <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

SVG Text
<svg height="30" width="200">
<text x="0" y="15" fill="red">I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
Rotate the text:
<svg height="60" width="200">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>
transform=“rotate(90)”
transform=“rotate(-90)”
Transformation Functions
SVG provides four transformation functions:
translate()
rotate()
scale()
skew()
matrix()
Text as a Link
<svg height="30" width="200" xmlns:xlink="[Link]
<a xlink:href="[Link] target="_blank">
<text x="0" y="15" fill="red">I love SVG!</text>

</a>
Sorry, your browser does not support inline SVG.
</svg>
SVG Gradients
A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied
to the same element.
There are two main types of gradients in SVG:
Linear, Radial
SVG Linear Gradient - <linearGradient>
The <linearGradient> element must be nested within a <defs> tag.
The <defs> tag is short for definitions and contains definition of special elements (such as gradients).
Linear gradients can be defined as horizontal, vertical or angular gradients:
Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
Angular gradients are created when x1 and x2 differ and y1 and y2 differ
Eg. Define an ellipse with a horizontal linear gradient from yellow to red:
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
The id attribute of the <linearGradient> tag defines a unique name for the gradient
The x1, x2, y1,y2 attributes of the <linearGradient> tag define the start and end position of the gradient
The color range for a gradient can be composed of two or more colors. Each color is specified with a <stop> tag.
The offset attribute is used to define where the gradient color begin and end
The fill attribute links the ellipse element to the gradient
SVG Blur Effects
<defs> and <filter>
All internet SVG filters are defined within a <defs> element.
The <defs> element is short for definitions and contains
definition of special elements (such as filters).
The <filter> element is used to define an SVG filter.
The <filter> element has a required id attribute which identifies
the filter. The graphic then points to the filter to use.
The <feGaussianBlur> element is used to create blur effects:
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
The in="SourceGraphic" part defines that the effect is created for the entire element
The stdDeviation attribute defines the amount of the blur

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


<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>

Canvas SVG

Canvas draws 2D graphics, on the fly (with a SVG is a language for describing 2D graphics in XML.
JavaScript).

Resolution dependent Resolution independent


No support for event handlers Support for event handlers
Poor text rendering capabilities Best suited for applications with large rendering areas
You can save the resulting image as .png or .jpg (Google Maps)
Well suited for graphic-intensive games Slow rendering if complex (anything that uses the DOM a
lot will be slow)
Not suited for game applications
New Media Elements
Tag Description
<audio> Defines sound or music content
<embed> Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content
HTML <audio> Tag
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Format MIME-type

MP3 audio/mpeg

OGG audio/ogg

WAV audio/wav

Attribute Value Description

autoplay autoplay Specifies that the audio will start playing as soon as it is ready

controls controls Specifies that audio controls should be displayed (such as a play/pause button etc)

loop loop Specifies that the audio will start over again, every time it is finished

muted muted Specifies that the audio output should be muted

preload auto Specifies if and how the author thinks the audio should be loaded when the page loads
metadata
none

src URL Specifies the URL of the audio file

HTML <embed> Tag


for embedding external application which is generally multimedia content like audio or video into an HTML
document.
It is used as a container for embedding plug-ins such as flash animations.
<embed src="[Link]"
type="application/x-shockwave-flash">
Attribute Value Description

height pixels Specifies the height of the embedded content


src URL Specifies the address of the external file to embed

type media_type Specifies the media type of the embedded content

width pixels Specifies the width of the embedded content

The <track> element is used as a child of an <audio> or <video> element and adds a time-based data source to the
parent media element.
For example, the <track> element can be used to add timed subtitles to a video and closed captions to audio
content.
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
Attribute Value Description

default Default Specifies that the track is to be enabled if the user's preferences do not indicate
that another track would be more appropriate

kind captions Specifies the kind of text track


chapters
descriptions
metadata
subtitles

label text Specifies the title of the text track

src URL Required. Specifies the URL of the track file

srclang language_code Specifies the language of the track text data (required if kind="subtitles")

The HTML <video> Element


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

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


<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg"
Your browser does not support the video tag.
</video>

The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes.
The <source> element allows you to specify alternative video files which the browser may choose from.
The browser will use the first recognized format. The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.
To start a video automatically use the autoplay attribute
References:
[Link]
[Link]
[Link]

You might also like