HTML

HTML
What is HTML?
HTML is a markup language for describing web
documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document
content
First developed by Tim Berners-Lee in 1990
HTML Example
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
The DOCTYPE declaration defines the document type to be HTML (It is not

HTML tag)
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
HTML Tags
HTML tags are keywords with in angle
brackets:
<tagname>webpage body</tagname>
HTML tags normally come in pairs like <p> and
</p>
The first tag in a pair is the start tag/opening
tag, the second tag is the end tag/closing tag
The end tag is written like the start tag, but with
a slash before the tag name
The browser does not display the HTML tags,
but uses them to determine how to display the
document
The <!DOCTYPE> declaration helps the browser
to display a web page correctly.
The doctype declaration is not case sensitive. All
Commonly Used
cases are acceptable.
<!DOCTYPE html> In HTML5, only <!
<!DOCTYPE HTML>
<!doctype html>
DOCTYPE html>
<!Doctype Html> declaration is available
How to write HTML
Following editors can be used.
1. Adobe Dreamweaver
2. Microsoft Expression Web
3. CoffeeCup HTML Editor
4. Edit++
5. Notepad etc.,
Steps to create webpage
I. Open Notepad
II. Write Some HTML
<!DOCTYPE HTML>
<html>
<title>index<title>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</html>
III. Save the document as .htm or .html

IV. Open .htm/.html using web browser.
HTML Basics with Examples
<!DOCTYPE HTML>
<html>
<title>My First HTML Page</title>
<body>
<p>This is some text...</p>
</body>
</html>
All HTML documents must start with a type declaration: <!

DOCTYPE html>
The HTML document itself begins with <html> and ends
with </html>
The visible part of the HTML document is
between <body> and </body>
HTML Headings
◦ HTML headings are defined with the <h1> to <h6> tags
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
HTML Paragraphs
◦ HTML paragraphs are defined with the <p> tag
<!DOCTYPE html> This is a paragraph.
<html> This is a paragraph.
<body> This is a paragraph.
This is a paragraph.
<p>This is a paragraph.</p> This is a paragraph.
<P>This is a paragraph.</p>
<P>This is a paragraph.</P>
<P>This is a paragraph.</>
<p>This is a paragraph.
</body>
</html>
HTML <pre> element (preformatted text)

◦ Fixed width font and for preserving both spaces and line
breaks
HTML Links
◦ HTML links are defined with the <a> tag
HTML Images
◦ HTML images are defined with the <img> tag
◦ The source file (src), alternative text (alt), and size
(width and height) are provided as attributes
<!DOCTYPE html>
<html>
<body>
<img src=“sample.jpg" alt=“sample.in" width="104” height="142">
</body>
</html>
The alt attribute
specifies an alternative text to be used,
when an HTML element cannot be displayed.
HTML Elements
HTML documents are made up by
HTML elements.
HTML elements are written with a start tag, with
an end tag,
Start tag withContent
Element the content in between
End tag
<h1> First Heading </h1>
<p> First Para </p>
<h2> Second Heading </h2>
<br>
Some HTML elements does not have end tag

HTML Elements
Elements (tags) are nested one inside another:
<html> <head></head> <body></body> </html>
Empty HTML Elements
◦ HTML elements with no content are called empty
elements.
◦ <br> is an empty element without a closing tag.
◦ HTML5 does not require empty elements to be closed.
But if you want stricter validation, or you need to
make your document readable by XML parsers, you
should close all HTML elements
HTML Attributes
Attributes provide additional information about
HTML elements/tags.
Attributes are always specified in the start tag
Attributes come in name/value pairs
like: name="value“
Example for <img> attributes

<img src="logo.jpg" alt="logo“ height=10px width=10px />
◦ src, alt, height and width are attributes of <img> element

◦ one centimeter = 37.795276 pixel
HTML Attributes
The title Attribute
When you move the mouse over the text in the

html page, the title will be displayed as a tooltip.
The href Attribute
◦ HTML links are defined with the <a> tag. The link
address is specified in the href attribute
HTML Tags
<!—Any text here-- Defines a comment

>

<p>This is a paragraph.</p>
<!DOCTYPE> Defines the document type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML Tags
<a> Defines a hyperlink
<a href="https://www.mlrinstitutions.ac.in/">This is MLRIT website Link</a>
<abbr> Defines an abbreviation or an acronym

The <abbr title=“MARRY LAXMAN REDDY GROUP OF INSTITUTIONS“>MLRIT</abbr>is an
autonomous institute.
<address> Defines contact information for the author/owner

of a document
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML Headings
Headings are defined with the <h1> to <h6>
tags.
◦ <h1> defines the most important heading. <h6>
defines the least important
<h1>This is heading.
a
heading</h1>
<h2>This is a
heading</h2>
<h3>This is a
HTML Horizontal <p>This
Rules is a
heading</h3>
paragraph.</p>
<hr>
<p>This is a
paragraph.</p>
<hr>
<p>This is a
HTML Paragraphs
HTML documents are divided into paragraphs.
The HTML <p> element defines a paragraph.
HTML Line Breaks
<p>This is<br>a para<br>graph with line breaks</p>
The HTML <pre> Element

<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.

</pre>
HTML Styles
Setting the style of an HTML element, can be done with
the style attribute.
Every HTML element has default style (background color is
white and text color is black) style="property:v
<body style="background-color:lightgrey"> </body> alue;"
<h1 style="color:blue">This is a heading</h1>
<h1 style="text-align:center">Centered Heading</h1>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
<h1 style="font-size:300%">This is a heading</h1>
<h1 style="color:blue;text-align:center">This is a
header</h1>
HTML Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

HTML Quotation and Citation
Elements
The HTML <q> element defines a short quotation.
HTML <blockquote> for Long Quotations
HTML <abbr> for Abbreviations
HTML <address> for Contact Information
The HTML <cite> element defines the title of a
work.
The HTML <bdo> element defines bi-directional
override.
HTML Links
Links are found in nearly all web pages.

HTML links are called Hyperlinks
◦ A hyperlink is a text or an image you can click on,
and jump to another document.
HTML Links – Syntax
<a href="url">link text</a>
<a href="http://www.mlrinstitutions.in">Visit our MLRIT

Site</a>
<a href=“SampleImage.png">Image link</a>
HTML Links (2)
HTML Links - Colors
When you move the mouse over a link, two things will
normally happen:
◦ The mouse arrow will turn into a little hand
◦ The color of the link element will change
By default, a link will appear like this (in all browsers):
◦ An unvisited link is underlined and blue
◦ A visited link is underlined and purple
◦ An active link is underlined and red
HTML Links (3)
Example of Links
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
HTML Links - The target Attribute

◦ The target attribute specifies where to open the linked
document.
<a href="http://www.google.com/" target="_blank">Visit google Site!</a>
HTML Links (4)
Target Attribute and its values
Target Description
Value
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked
_parent Opens the linked document in the parent frame
HTML Links - Image as Link

◦ Images are used as links
<a href="default.asp">
<img src="smiley.gif" alt="HTML” style="width:42px;height:42px;" border=10>
</a>
HTML Links (5)
HTML Links - Create a Bookmark
◦ HTML bookmarks are used to allow readers to jump to
specific parts of a Web page.
◦ To make a bookmark, you must first create the
bookmark, and then add a link to it.
◦ When the link is clicked, the page will scroll to the
location with the bookmark.
<h2 id="tips">Useful Tips Section</h2> Bookmark is created with id attributre
<a href="#tips">Visit the Useful Tips Section</a>

HTML Images
In HTML images are defined with the <img> tag
The <img> tag is empty, it contains attributes only, and
does not have a closing tag.
The src attribute defines the url (web address or path) of
the image
<img src="url" alt="some_text“ style="width:128px;height:128px" >
The alt attribute specifies an alternate text for the

image, if it cannot be displayed.
HTML Image attributes
Attribut Value Description
e
align Top, bottom, middle, left, Specifies the alignment of an image according to
right surrounding elements
alt text Specifies an alternate text for an image
border pixels Specifies the width of the border around an image
height pixels Specifies the height of an image
hspace pixels Specifies the whitespace on left and right side of an
image
src URL Specifies the URL of an image
usemap #mapname Specifies an image as a client-side image-map
vspace pixels Specifies the whitespace on top and bottom of an
image
width pixels Specifies the width of an image
HTML Image Maps
 An image-map is an image with clickable areas.
 The image-map is created by using <map> tag.
 The name attribute of the <map> tag is associated with the
<img>'s usemap attribute and creates a relationship between
the image and the map.
 The <map> tag contains a number of <area> tags, that
defines the clickable areas in the image-map
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height
:126px;">
<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>
HTML Image attributes
<p>This is some text. <img src="smiley.gif" alt="Smiley face" align="left|right|
middle|top|bottom"> This is some text.</p
<img src="smiley.gif" alt="Smiley face" border="5">
<img src="smiley.gif" alt="Smiley" height="42" width="42">
<img src="smiley.gif" alt="Smiley face" hspace="20">
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<img src="smiley.gif" alt="Smiley face" vspace="50">
<img src="smiley.gif" alt="Smiley" style="float:right;width:42px;height:42px;">
HTML Tables
Number First Name Last Name Points

1 Eve Jackson 94
2 John Doe 80
<table style="width:100%">
<tr>
Tables are defined with
<td>Eve</td> the <table> tag.
<td>Jackson</td>
<td>94</td> Tables are divided into table
</tr> rows with the <tr> tag.
<tr>
<td>John</td> Table rows are divided into table
<td>Doe</td> data with the <td> tag.
<td>80</td>
</tr> A table row can also be divided
</table>
into table headings with
the <th> tag.
HTML Table attributes
Attribute Value Description
align left, center, right Specifies the alignment of a table according to surrounding
text
bgcolor rgb(x,x,x), colorname Specifies the background color for a table
border 1, 0 Specifies whether the table cells should have borders or
not
cellpaddin pixels Specifies the space between the cell wall and the cell
g content
cellspacin pixels Specifies the space between cells
g
frame void, above, below Specifies which parts of the outside borders that should be
hsides, lhs, rhs, vsides, box, visible
border
rules None, groups, rows Specifies which parts of the inside borders that should be
cols, all visible
width Pixels ,% Specifies the width of a table
HTML Table attributes
<table align=“left|right|center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</table>
<table bgcolor="#00FF00">
<table border="1/0">
<table cellpadding="10">
<table cellspacing="10">
<table frame="box">
<table rules="rows">
<table width="400">
HTML Lists
 HTML can have Unordered lists, Ordered lists, or Description
lists
 An unordered list starts with the <ul> tag. Each list item starts with
<ul> Output
the <li> tag.
<li>Coffee</li> Coffee
<li>Tea</li> Tea
<li>Milk</li> Milk
</ul>
Style
<ul style="list-style-type:circle">
<ul style="list-style-type:disc">
<ul style="list-style-type:square">
<ul style="list-style-type:none">
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Type
<ol type=“1">
<ol type="A“>
<ol type="a“>
<ol type=“I“>
<ol type="i“>
HTML Ordered Lists attributes
Attribute Value Description
compact compact Specifies that the list should render smaller than normal
reversed (HTML reversed Specifies that the list order should be descending (9,8,7...)
5)
start number Specifies the start value of an ordered list
type 1, A, a, I, i Specifies the kind of marker to use in the list
<ol compact>
Reserved When present, it specifies that the list order should be descending (9,8,7...),
instead of ascending (1, 2, 3...).
<ol>
<ol reversed> <li value="100">Coffee</li>
<ol start=“100"> <li>Tea</li>
<li>Milk</li>
<li>Juice</li>
</ol>
HTML Description Lists
 The <dl> tag defines a description list.
 The <dt> tag defines the term (name), and the <dd> tag defines
the data (description).
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested HTML Lists
List can be nested (lists inside lists).
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
We can display list horizontally also using CSS

HTML Forms
HTML Forms are required to collect some data
from the site visitor.
For example
◦ Uploading personnel, educational and
professional details for job application
◦ During user registration you would like to collect
information such as name, email address, credit
card, etc.
HTML Forms(1)
A form will take input from the site visitor and then
will post it to a back-end application such as
CGI, Perl Script or PHP script etc.
The back-end application will perform required
processing on the passed data based on defined
business logic inside the application.
HTML Forms(1)
General syntax in HTML:
<form>
form elements
</form>
HTML forms contain form elements.

◦ Form elements are having different types of input
elements
 Checkboxes
 Radio buttons
 Submit buttons and more.
HTML Forms (1)
The <input> Element
◦ The <input> element is one of the most
important form elements.
Input’s Type Description
Attribute
text Defines normal text input
radio Defines radio button input (for selecting one of many
choices)
submit Defines a submit button (for submitting the form)
Password or number Defines password or number
HTML Forms (1)
<input> type: text

◦ <input type="text"> defines a one-line input field
for text input
◦ The default width of a text field is 20 characters
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
HTML Forms (2)
<input> type: Radio button
◦ Radio buttons let a user select ONE of a limited
number of choices under one category
<form>
<input type="radio" name=“Gender" value="male" checked>Male
<br>
<input type="radio" name=“Gender" value="female">Female
</form>
◦ If the name attribute is not mentioned, both the

buttons can be selected.
HTML Forms (3)
<input> type: Submit button
◦ Submit defines a button which sends the form to form-
handler
◦ The form-handler is typically a server page with a script
for processing input data.
◦ The form-handler is specified in the
form's action attribute. This attribute defines the
<form action="action_page.php">
action to be performed when form is submitted.
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
HTML forms
Following is the list of attributes for <input> tag
for creating text field
Attribute Description
type Indicates the type of input control and for text input control it will be set
to text.
(type=text, type=password, type=number)
value This can be used to provide an initial value inside the control.
size Allows to specify the width of the text-input control in terms of
characters.
maxlength Allows to specify the maximum number of characters a user can enter
into the text box.
HTML Forms (4)
 <form> : method attribute
◦ Common way to submit the form is by submit button
◦ The form submitted goes to web-server
<form action="action_page.php“ method=“GET|POST”>
◦ GET method is used for passive submission (eg: search engine

query)
◦ POST method is used if the form is updating any data or includes
sensitive information like password.
HTML Forms (4)
Group Forming
◦ For group forming, <fieldset> tag is used.
◦ The <fieldset> is used along with <legend> inside the
<form> tag.
Syntax : Group Forming using <fieldset> tag
<form>
<fieldset>
<legend>Personal information:</legend>
Form elements
</fieldset>
</form>
HTML Forms (5)
Example: Grouping Form Data with <fieldset>
◦ The <fieldset> element groups related data in a form.
◦ The <legend> element defines a caption for the
<fieldset> element.
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
HTML Form Elements
 <select> Element: It is used along with <option> tag for drop-
down list
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
 <option> Element (options to select)

<option value="fiat" selected>Fiat</option>
 <textarea> Element
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
HTML Form Elements (2)
<button> element defines a clickable button
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<datalist> Element (HTML 5 Element)

◦ The <datalist> element specifies a list of pre-defined options for
an <input> element.
◦ Users will see a drop-down list of pre-defined options as they
input data
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
</datalist>
</form>
<keygen> Element (HTML 5 Element)
◦ <keygen> element is used to provide a secure way to
authenticate users.
◦ The <keygen> element specifies a key-pair generator
field in a form.
◦ When the form is submitted, two keys are generated,
one private and one public.
◦ The private key is stored locally, and the public key is
sent to the server.
◦ The public key could be used to generate a client
certificate to authenticate the user in the future.
<keygen> Element (HTML 5 Element)
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form>
<output> element (HTML 5 Element)

<form
oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0
<input type="range" id="a" name="a" value="50"> 100 +
<input type="number" id="b" name="b" value="50"> =
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML Form Input Types
<input type="text" name="firstname">
<input type="password" name="firstname">
<input type=“submit" value=“Submit">
<input type="radio" name=“Gender" value="female">Female
<input type="checkbox" name="vehicle" value="Car“>car
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Some more input types are
◦ Color, date, time, range, email, month, number,
datetime, datetime-local, URL, week, tel(telephone) [All
are HTML 5 Elements]
HTML Form Input Restrictions
Disabled
◦ Specifies that an input field should be disabled
Max (HTML 5)
◦ Specifies the maximum value for an input field
Maxlength
◦ Specifies the maximum number of character for an input field
Min (HTML 5)
◦ Specifies the minimum value for an input field
Pattern (HTML 5)
◦ Specifies a regular expression to check the input value against
HTML Form Input Restrictions(2)
Readonly
◦ Specifies that an input field is read only (cannot be changed)
Required (HTML 5)
◦ Specifies that an input field is required (must be filled out)
Size
◦ Specifies the width (in characters) of an input field
Step (HTML 5)
◦ Specifies the legal number intervals for an input field
Value
◦ Specifies the default value for an input field
HTML Form Input Restrictions(3)
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
<form>
<input type="range" name="points" min="0" max="10">
</form>
HTML Form: Input Attributes
The value Attribute
◦ The value attribute specifies the initial value for an input field
<input type="text" name="firstname" value="John">
The readonly Attribute

◦ The readonly attribute specifies that the input field is read only
(cannot be changed):
<input type="text" name="firstname" value="John" readonly>
The disabled Attribute

◦ The disabled attribute specifies that the input field is disabled.
<input type="text" name="firstname" value="John" disabled>
HTML Form: Input Attributes (2)
The size Attribute
◦ The size attribute specifies the size (in characters) for the input field
<input type="text" name="firstname" value="John" size="40">
 Input Attributes (The following are HTML5 Attributes)

◦ Autocomplete
◦ Autofocus
◦ Form
◦ Formaction
◦ Formmethod
◦ Formnovalidate
◦ Formtarget
◦ List
◦ Min & max
◦ Pattern
◦ Required
◦ step
HTML From Input Attributes (2)
 Autocomplete (HTML5 attribute)
<form action="action_page.php" autocomplete="on">
 The autofocus Attribute (HTML5 attribute)

Firstname:<input type="text" name="fname" autofocus>
 The formtarget Attribute (HTML5 attribute)

 The formtarget attribute specifies a name or a keyword that
indicates where to display the response that is received after
submitting the form.
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
HTML5 Tags
<article> Defines an article
<article>
<h1>Mmain discussion forum</h1>
<p>Google Chrome is a free, open-source web browser developed by Google,
released in 2008.</p>
</article>
Audio Element
<audio> Defines sound content
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
HTML5 Tags
<audio> attributes
controls Specifies that audio controls should be displayed (such as
a play/pause button etc)
<audio controls>
<source src="horse.mp3" type="audio/mpeg“>
</audio>
autoplay Specifies that the audio will start playing as soon as it is

ready
<audio controls autoplay>
</audio>
loop Specifies that the audio will start over again, every time it
is finished
<audio controls loop>
</audio>
HTML5 Tags
<audio> attributes
muted Specifies that the audio output should be muted
<audio controls muted>
Your browser does not support the audio element.
</audio>
preload Specifies if and how the author thinks the audio should
be loaded when the page loads
<audio controls preload="none">
</audio>
src Specifies the URL of the audio file

<audio src="horse.ogg" controls>
Your browser does not support the audio element.
</audio>
HTML Tags
<b> Defines bold text
<base> Specifies the base URL/target for all relative URLs in a

document
<basefont> Specifies a default color, size, and font for all text in a
(In CSS) document
<head><basefont color="red" size="5"> <basefont color="red"

<basefont color="red" size="5“> size="5">
</head> <basefont face="courier, serif">
<basefont size="7">
<bdi> Isolates a part of text that might be formatted in a
different direction from other text outside it
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>‫< إـيان‬/bdi>: 90 points</li>
</ul>
HTML Tags Contd..
<bdo> Overrides the current text direction

Bi-Directional
Override
<bdo dir="rtl">
This text will go right-to-left.
</bdo>
.tfel-ot-thgir og lliw txet sihT.
<bdo dir="ltr">
This text will go right-to-left.
</bdo>
This paragraph will go left-to-right.

HTML Tags
<big> Defines big text
<blockquote> Defines a section that is quoted from another source

<blockquote cite="http://www.google.in/index.html">
Text here…
</blockquote>
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickable button

<button type="button" onclick="alert('Hello world!')">Click Me!</button>
<button> attributes
autofocus Specifies that a button should automatically get
focus when the page loads
<button type="button" autofocus>Click Me!</button>
disabled Specifies that a button should be disabled

<button type="button" disabled>Click Me!</button>
form Specifies one or more forms the button belongs to

<form action="demo_form.asp" method="get" id="form1">
</form>
<button type="submit" form="form1" value="Submit">Submit</button>
<button> attributes
formaction Specifies where to send the form-data when a form is
submitted. Only for type="submit"
<form action="demo_form.asp" method="get">
<button type="submit">Submit</button><br>
<button type="submit" formaction="demo_admin.asp">Submit as admin</button>
</form>
formenctype Specifies how form-data should be encoded before sending

it to a server. Only for type="submit"
<button type="submit" formenctype="text/plain">Submit without character

encoding</button>
<button> attributes
frommethod Specifies how to send the form-data (which HTTP
method to use). Only for type="submit"
<button type="submit" formmethod="post" formaction="demo_post.asp">Submit using
POST</button>
formnovalidate Specifies that the form-data should not be validated on

submission. Only for type="submit”
<button type="submit" formnovalidate>Submit without validation</button>
formtarget Specifies where to display the response after submitting

the form. Only for type="submit"
<button type="submit" formtarget="_blank">Submit to a new window</button>

Value Description
_blank Loads the response in a new window/tab
_self Loads the response in the same frame (this is default)
_top Loads the response in the full body of the window
name Specifies a name for the button

<button name="subject" type="submit" value="HTML">HTML</button>
type Specifies the type of button

<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
value Specifies an initial value for the button

<button name="subject" type="submit" value="fav_HTML">HTML</button>
<button name="subject" type="submit" value="fav_CSS">CSS</button>
HTML Tags
<h1> Headings are defined with the <h1> to <h6> tags.
<h2>
<h3>
<h4>
<h5>
<h6>
<hr> Creates a horizontal line
<title> It defines the HTML document's title.
<p> Creates paragraph
<br> Defines the line break
<pre> Defines preformatted text

HTML Tags
HTML <caption> Tag
<table>
<caption>Caption Here</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr></table>
HTML <center> Tag
<center>This text will be center-aligned.</center>
<p align="center">This is some text.</p>

<center>This text will be center-aligned.</center>
HTML <cite> Tag
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
HTML Tags
HTML <code> Tag
<code>A piece of computer code</code>
HTML <div> Tag
◦ The <div> tag defines a division or a section in an HTML
document.
<div style="color:blue">
<h3>This is a heading</h3>
</div>
HTML <font> Tag (Included in <p>)

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
HTML Tags
HTML <footer> Tag
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
Generally footer element can contain

◦ copyright information
◦ contact information
◦ sitemap
◦ back to top links
◦ related documents
HTML iFrames
An iframe is used to display a web page within a web
page.
To create iframe in HTML, <iframe> tag is used
◦ Iframe Syntax
<iframe src="URL"></iframe>
◦ Use the height and width attributes to specify the size.

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
◦ Border
<iframe src="demo_iframe.htm" style="border:5px/none dotted red"></iframe>
◦ Here, src, width, height and border are some of the

attributes of <iframe> element
HTML iFrames Attributes
<iFrame> : Align Attribute
◦ Syntax
<iframe src="/default.asp" width="200" height="200" align="right">
</iframe>
◦ Attribute Values
Value Description
left Align the iframe to the left
right Align the iframe to the right
middle Align the iframe in the middle
top Align the iframe at the top
bottom Align the iframe at the bottom
HTML iFrames Attributes (2)
<iFrame> : frameborder Attribute
◦ Syntax
<iframe src="/default.asp" width="200" height="200" frameborder="0">
</iframe>
◦ Attribute Values
Value Description
1 Default. Border on
0 Border off
HTML iFrames Attributes (3)
Width and Height
<iframe src=“default.asp" width="200" height="200”></iframe>
Margin Width and Margin Height

<iframe src="demo_iframe.htm" marginheight="50“ marginwidth="50" ></iframe>
Scrolling
<iframe src=“default.asp" width="200" height="200" scrolling="yes">
</iframe>
HTML <head> Element
The <head> element is a container for metadata
(data about data).
HTML metadata is data about the HTML document.
Metadata is not displayed.
Metadata typically define document title, styles, links,
scripts, and other information.
Inthe HTML5 standard, the <html> tag, the <body> tag,
and the <head> tag can be omitted.
HTML <title> Element
The <title> element defines the title of the document.
The <title> element is required in all HTML/XHTML
documents.
The <title> element:
◦ defines a title in the browser tab
◦ provides a title for the page when it is added to
favorites <!DOCTYPE html>
◦ displays a title for
<html> the page in search engine results
<title>Page Title</title>
<body>
The content of the document......
</body>
</html>
HTML <Style> Element
The <style> element is used to define style
information for an HTML document.
Inside the <style> element you specify how HTML
elements should render in a browser:
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
HTML <link> Element
The <link> element defines the page relationship
to an external resource.
The <link> element is most often used to link to
style sheets
<link rel="stylesheet" href="mystyle.css">
HTML <script> Element
The <script> element is used to define client-side

JavaScripts.
The script below writes Hello JavaScript! into an
HTML
<script> element with id="demo"
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
HTML Entities
Reserved characters in HTML must be replaced
with character entities
◦ Some characters are reserved in HTML.
◦ If you use the less than (<) or greater than (>) signs in
your text, the browser might mix them with tags
◦ Syntax for character entity
&entity_name; OR
&#entity_number;
◦ To display a less than sign we must write: < or <

HTML Entities
HTML Character Entities
Result Description Entity Name Entity Number
non-breaking space
< less than < <
> greater than > >
& ampersand & &
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered ® ®
trademark
HTML Block and Inline Elements
Every HTML element has a default display value

depending on what type of element it is.
The default display value for most elements is block
or inline.
Block-level Elements:
◦ A block-level element always starts on a new line and
takes up the full width available
 <div>
 <h1> - <h6>
 <p>
 <form>
HTML Block and Inline Elements (2)
Inline Elements:
◦ An inline element does not start on a new line and only
takes up as much width as necessary.
 <span>
 <a>
 <img>
The <div> Element
◦ The <div> element is a block-level element that is
often used as a container for other HTML elements.
◦ The <div> element has no required attributes,
but style and class are common.
HTML Block and Inline Elements (3)
◦ Example of <div>
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
The <span> Element

◦ The <span> element is an inline element that is often
used as a container for some text.
HTML Block and Inline Elements
(4)
◦ Example of <span>
<h1>My <span style="color:red">Important</span> Heading</h1>
<div> is called HTML grouping tag

HTML <div> Tag
Example
<div style="color:#0000FF">
<h3>This is a heading</h3>
</div>
The <div> tag defines a division or a section in
an HTML document.
The <div> tag is used to group block-elements
to format them with CSS.
Attributes of <div>:
◦ Align (left|right|center|justify)
HTML Classes
Classing Block Elements
◦ The HTML class attribute makes it possible to define
equal styles for "equal" <div> elements
<style> <div class="cities">
div.cities { <h2>London</h2>
background-color:black; <p>…</p>
color:white; <p>…</p>
margin:20px; </div>
padding:20px; <div class="cities">
} <h2>Newyork</h2>
</style> <p>…</p>
<p>…</p>
</div>
HTML Layouts
Websites often display content in multiple
columns (like a magazine or newspaper).
HTML Layouts internally uses <div> element
HTML Multimedia
HTML Multimedia
Multimedia on the web, is sound, music, videos,
movies, and animations.
Examples: Pictures, music, sound, videos,
records, films, animations, and more.
Multimedia elements (like sounds or videos) are
stored in media files.
Multimedia files also have their own formats and
different extensions like: .swf, .wav, .mp3,
.mp4, .mpg, .wmv, and .avi.
HTML5 Video (HTML5 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="movie.ogg" type="video/ogg">
</video>
The controls attribute adds video controls, like play, pause,

and volume.
To start a video automatically use the autoplay attribute
(There will not be any control buttons)
<video width="320" height="240" autoplay>
HTML5 Video attributes
Width and Height
<video width="320" height="240" controls>
Loop
<video controls loop>
Muted
<video controls muted>
Poster
<video controls poster="/images/w3html5.gif">
preload
<video controls preload="none">
HTML5 Audio (HTML5 Element)
To play an audio file in HTML, use
the <audio> element:
<audio controls>
</audio>
Supported audio formats

◦ MP3-audio/mpeg
◦ Ogg-audio/ogg
◦ Wav-audio/wav
HTML Graphics
HTML5 Canvas (HTML5 Element)
The HTML <canvas> element is used to draw
graphics on a web page via scripting (usually Java
Scripting)
Canvas has several methods for drawing paths,
boxes, circles, text, and adding images.
A canvas is a rectangular area on an HTML page.
By default, a canvas has no border and no content.
The id attribute
Basic Canvas Example
<canvas id="myCanvas" width="200" height="100“></canvas> is referred to in
a script
HTML5 Canvas(1)
Drawing with JavaScript
The getElementById() method is supported in all major
browsers.
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
The getElementById() method returns the element that has the ID attribute with the
specified value.
1.Creating Canvas Element (getElementById)
2.Create a Drawing Object (getContext- has methods and
properties for drawing)
3.Draw on the Canvas
HTML5 Canvas(2)
Canvas Coordinates
◦ The HTML canvas is a two-dimensional grid.
◦ The upper-left corner of the canvas has the coordinates
(0,0)
HTML5 Canvas(3)
Draw a Line
Following methods are used to draw a line
◦ moveTo(x,y) - defines the starting point of the line
◦ lineTo(x,y) - defines the ending point of the line
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
HTML5 Canvas(4)
To Draw a Circle

Following methods are used:
◦ beginPath();
◦ arc(x,y,r,start,stop)
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
HTML5 Canvas(5)
Drawing Text on the Canvas
To draw text on a canvas, the most important
property and methods are:
◦ font - defines the font properties for the text
◦ fillText(text,x,y) - draws "filled" text on the canvas
◦ strokeText(text,x,y) - draws text on the canvas (no fill)
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText("Hello World",10,50);
HTML5 Canvas(6)
Canvas – Images
To draw an image on a canvas, use the following
method:
◦ drawImage(image,x,y)
window.onload = function() {
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
}
HTML5 SVG
SVG stands for Scalable Vector Graphics

SVG is used to define graphics for the Web
The HTML <svg> Element
◦ SVG has several methods for drawing paths, boxes,
circles, text, and graphic images.
HTML 5 Added 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>.
HTML5 offers new elements for better document structure:
◦ <article>
◦ <aside>
◦ <bdi>
◦ <details>
◦ <dialog>
◦ <figcaption>
◦ <figure>
◦ <footer>
◦ <header>
◦ <main>
◦ <mark>
◦ <nav>
New Form Elements

◦ <datalist>
◦ <keygen>
◦ <output>
HTML Global Attributes
 HTML contenteditable Attribute
<p contenteditable="true|false">This is an editable paragraph.</p>
 HTML data-* Attributes
◦ The data-* attributes is used to store custom data private to the page or
application.
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
HTML draggable Attribute
◦ The draggable attribute specifies whether an element is draggable
or not.
HTML hidden Attribute
<p hidden>This paragraph should be hidden.</p>
HTML translate Attribute
<p translate="no">Don't translate this!</p>
<p>This can be translated to any language.</p>
HTML lang Attribute
◦ The lang attribute specifies the language of the
element's content.
<p lang="fr">Ceci est un paragraphe.</p>
HTML spellcheck Attribute
◦ The spellcheck attribute specifies whether the element is to have
its spelling and grammar checked or not
◦ Textarea, editable area are only checked
<p contenteditable="true" spellcheck="true">This is a paragraph.</p>
Thank You

HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML

The DOCTYPE declaration defines the document type to be HTML (It is not

III. Save the document as .htm or .html

All HTML documents must start with a type declaration: <!

HTML <pre> element (preformatted text)

Some HTML elements does not have end tag

Example for <img> attributes

◦ src, alt, height and width are attributes of <img> element

The title Attribute

When you move the mouse over the text in the

<!—Any text here-- Defines a comment

<!DOCTYPE> Defines the document type

<abbr> Defines an abbreviation or an acronym

<address> Defines contact information for the author/owner

The HTML <pre> Element

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

Links are found in nearly all web pages.

<a href="http://www.mlrinstitutions.in">Visit our MLRIT

HTML Links - The target Attribute

HTML Links - Image as Link

<a href="#tips">Visit the Useful Tips Section</a>

The alt attribute specifies an alternate text for the

Number First Name Last Name Points

We can display list horizontally also using CSS

HTML forms contain form elements.

<input> type: text

◦ If the name attribute is not mentioned, both the

◦ GET method is used for passive submission (eg: search engine

 <option> Element (options to select)

<datalist> Element (HTML 5 Element)

<output> element (HTML 5 Element)

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

The readonly Attribute

The disabled Attribute

 Input Attributes (The following are HTML5 Attributes)

 The autofocus Attribute (HTML5 attribute)

 The formtarget Attribute (HTML5 attribute)

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

src Specifies the URL of the audio file

<base> Specifies the base URL/target for all relative URLs in a

<head><basefont color="red" size="5"> <basefont color="red"

<bdo> Overrides the current text direction

.tfel-ot-thgir og lliw txet sihT.

This paragraph will go left-to-right.

<blockquote> Defines a section that is quoted from another source

<body> Defines the document's body

<br> Defines a single line break

<button> Defines a clickable button

disabled Specifies that a button should be disabled

form Specifies one or more forms the button belongs to

formenctype Specifies how form-data should be encoded before sending

◦ To display a less than sign we must write: < or <