Html tutorial

HTML Tutorial
Tutorial for Beginners and Web Developers
This HTML Tutorial documentation was prepared to support beginners. We
tried our best to make the content so simple for understanding. Feel free to
mail us for suggestions. Visit: http://iotearth.in for more.
2016
http://iotearth.in
Technology for You
2/11/2016

HTML Introduction
What is HTML?
HTML stands for hypertext markup language used to describe the structure of web pages
using markup. HTML is a scripting language used to develop static web pages. HTML code
is edited in any editors including note pad and even in IDEs. The edited code is executed in
any browser. Browsers eliminate the tags used and just present the content we intended to
without or with applied formatting. HTML elements are represented as tags which is a single
or a group of characters enclosed within angular brackets (<a> or <html>). All HTML tags
are predefined and do not support user-defined tags.
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The <!DOCTYPE html> defines as HTML document
The <html> tag is the root element for an HTML page
The <head> tag contains meta information of the document
The <title> tag is used to specify a title to a document
The <body> tag contains the content to display on web page
The <h1> tag defines a maximum heading size
The <p> tag defines content as paragraph
HTML Tags
HTML tags are element names are enclosed by using angle brackets:

<tagname>webpage content goes here...</tagname>
HTML tags normally come in pairs like <p> (start/opening tag) and </p> (end/closing tag
prefixed with slash) and unpairs like <br>.
Web Browsers
All web browsers HTML documents to dispaly their content in them. The browsers that
supports HTML are Netscape Navigator, Microsoft Internet Explorer, Google Chrome,
Mozilla Firefox etc..
HTML Document Structure
The below is the most common structure followed by an HTML page.
<html>
<head>
<title>Title of the page</title>
</head>
<body>

</body>
</html>
HTML Versions
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000

HTML5 2014
HTML Head
The HTML <head> Element
The <head> element is a container for metadata and is placed between the <html> tag and
the <body> tag. Metadata describes the data about the HTML document. Metadata is used to
internal purpose and not displayed. Metadata defines the document title <title>, character set
<meta>, styles <style>, links <link>, scripts <script>, and other meta information.
The HTML <title> Element
The <title> element is used to define the title of the document.
The <title> element:
defines a title displayed on the browser title bar
provides page title and is used to add it to favorites
displays page title in search engine results
A simple HTML document:
Example
<!DOCTYPE html>
<html>
<head>
<title>Webpage Title</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML <style> Element
The <style> element defines style information for a single HTML page:
Example

The HTML <script> Element
The <script> element defines client-side JavaScript.
Example
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello HTML and JavaScript!";
}
</script>
The HTML <base> Element
The <base> element define to specify the base URL and base target for all relative URLs in a
page:
Omitting <html>, <head> and <body>?
HTML5 supports omitting of the <html>, the <body>, and the <head> tags.
Example
<!DOCTYPE html>
<title>Page Title</title><h1>This is an important heading</h1>
<p>This is a paragraph ceontent.</p>
Note:
We strongly recomment to use the <html> and <body> tags in order to avoid crashing of
DOM or XML software and produce errors in older browsers like IE9.
HTML head Elements
Tag Description
<head> Defines information about the document
<title> Defines the title of a document

<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
HTML Heading Tags
HTML defined Headings with the <h1> to <h6> tags.
<h1> defines the most important heading. It displays content with highest font size among
other heading tags.
<h6> defines the least important heading, displays the content with the lowest font size
among other heading tags.
Example
<h1>This is heading 1</h1>
Note: By default all browsers automatically add some white space before and after a heading.
HTML Horizontal Rules
The <hr> tag is used to display a horizontal line which can be used as a content separator or a
thematic break in between HTML page content.
Example
<p>Sample text</p>
<hr>
<p>Sample text</p>
<hr>

The HTML <head> Element
The HTML <head> element and HTML headings are different.
The <head> element consists of metadata about the HTML document. Meta data includes
document title, character set, links, styles, scripts, and other meta information. Metadata is
not displayed.
The <head> element is the first section of the HTML code and is placed between the <html>
tag and the <body> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body>
.
.
.
</body>
</html>
HTML Paragraphs
The HTML <p> element is used to define a paragraph:
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
Note: By default all browsers automatically add some white space before and after a
paragraph.
HTML Line Breaks
The HTML <br> element is used to define a line break (a new line) between the document
content.

Example
<p>This is<br>a paragraph<br>with two line breaks.</p>
The <br> tag is an unpaired empty tag, which never has an end tag.
The HTML <pre> Element
The HTML <pre> element is used to define text with preformatted.
The text inside a <pre> element is displayed with courier font style.
Example
<pre>
This text line 1 is preformatted.
</pre>
HTML Styles
This text is in red color
This text is in blue color
The HTML Style Attribute
HTML style elements can be represented by specifying their values. This can be done with
the style attribute.
The syntax of HTML style attribute is:
<tagname style="property:value;">
The property is a CSS property and also called as a selector property. The value is a CSS
value specified for a particular property. We can specify any number of styles to a particular
tag individually.
We can learn more about CSS later in HTML CSS tutorial.

HTML Background Color
The background-color property is used to define an HTML elements background color.
Example
<body style="background-color:blue;">
<h1>This is an important heading</h1>
<p>This is a paragraph content.</p>
</body>
HTML Text Color
The color property is used to define an HTML elements text color:
Example
<h1 style="color:red;">This is an important heading</h1>
<p style="color:green;">This is a paragraph content.</p>
HTML Fonts
The font-family property is used to define an HTML elements font to be displayed:
Example
<h1 style="font-family:arial;">This is a important heading</h1>
<p style="font-family:courier;">This is a paragraph content.</p>
HTML Text Size
The font-size property is used to define HTML elements text size:
Example
<h1 style="font-size:100%;">This is an important heading</h1>
<p style="font-size:60%;">This is a paragraph content.</p>
HTML Text Alignment

The text-align property is used to define the horizontal text alignment of an HTML element.
By default all the HTML document content is aligned left.
Example
<h1 style="text-align:center;">Centered Important Heading</h1>
<p style="text-align:right;">Paragraph aligned right.</p>
HTML Text Formatting
HTML supports some basic formatting that can be applied individually or as a group to its
elements.
HTML Formatting Elements
HTML uses the following elements for formatting output text.
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML Elements Example
Example
<b>This text is bold</b>
<strong>This text is strong</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<h2>HTML <small>Small</small> Formatting</h2>
<h2>HTML <mark>Marked</mark> Formatting</h2>
<p>My favorite color is <del>blue</del> red.</p>

<p>My favorite <ins>color</ins> is red.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
The HTML <b> element is used to define bold text.
The HTML <strong> element is used to define semantic strong text.
The HTML <i> element is used to define italic text.
The HTML <em> element is used to define semantic emphasized text.
The HTML <small> element is used to define smaller text.
The HTML <mark> element is used to define marked or highlighted text.
The HTML <del> element is used to define deleted (removed) text.
The HTML <ins> element is used to define inserted (added) text.
The HTML <sub> element is used to define subscripted text.
The HTML <sup> element is used to define superscripted
text.
HTML Quotation and Citation Elements
Tag Description
<abbr> Defines an abbreviation or acronym
<address>
Defines contact information for the author/owner of a
document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation

HTML Computer Code Elements
Tag Description
<code> Defines programming code
<kbd> Defines keyboard input
<samp> Defines computer output
<var> Defines a variable
<pre> Defines preformatted text
HTML Comments
Comment tags are used to insert comments in the HTML program code.
HTML Comment Tags
We can add comments to HTML program as:
<!—Specify your comments here -->
Follow the exact format to view its result.
Comments are also just as a supporting text for debugging HTML.
Conditional Comments
We can also specify conditional based comments in HTML:

This code comments defines some HTML tags to be executed in Internet Explorer only.
HTML Colors
In HTML, a color value can be specified by using a color name with its RGB value, or a
HEX value notation.

Color Names
In HTML, a color can be specified by using a color name:
Example
Color Name
Red
Orange
Yellow
Cyan
Blue
Example
Color RGB
rgb(255,0,0)
rgb(255,255,0)
rgb(0,255,0)
rgb(0,255,255)
rgb(0,0,255)
HEX Value
HEX values are base 16 numbers. In HTML, a color can also be specified using a
hexadecimal notation value as: #RRGGBB, where RR is for red, GG is for green and BB is
for blue and their hexadecimal values will be in between 00 and FF..
Example
Color HEX
#FF0000

#FFFF00
#00FF00
#00FFFF
#0000FF
HTML Styles - CSS
Styling HTML with CSS
CSS stands for Cascading Style Sheets. It describes hot HTML elements are to be displayed
on a media like screen, paper and other media. CSS supports CODE RESUABILITY where
CSS code written once can be used for multiple times.
CSS are of 3 types:
Inline – Styles are applied as an attribute to an HTML element
Internal – Styles are applied by using a <style> element in the <head> section
External – Styles are defined as an external CSS file
It is better to define styles in a separate file for code reusability.
Inline CSS
An inline CSS defines a unique style to a specific HTML element. An inline CSS defines the
style attribute of an HTML element.
Example
<h1 style="color:red;">This is a Red Important Heading</h1>
Internal CSS
An internal CSS defines a style for a single HTML page.
Example
<!DOCTYPE html>
<html>

<head>
<style>
body {background-color: red;}
h1 {color: green;}
p {color: blue;}
</style>
</head>
<body>
</body>
</html>
External CSS
An external style sheet defines the styles which can be applied to an entire website at a time
by choosing one file. <link> element is used in the <head> section of the HTML page to link
the content and their styles:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type=”text/css” media=”screen”>
</head>
<body>
<p>This is a paragraph ceontent.</p>
</body>
</html>
An external style sheet can be defined in a separate file and saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: red;
}
h1 {

color: green;
}
p {
color: blue;
}
CSS Fonts
The CSS color property defines the text color, font-family property defines the font, font-
size property defines the size of the text.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-family: arial;
font-size: 100%;
}
p {
color: blue;
font-family: verdana;
font-size: 60%;
}
</style>
</head>
<body>
</body>
</html>
CSS Border
This border property is used to define HTML elements border around it:
Example

p {
border: 1px solid red;
}
CSS Padding
The CSS padding property is used to define a padding or space between the text to the
border:
Example
p {
padding: 20px;
}
CSS Margin
The CSS margin property is used to define a margin or space outside the border of HTML
element:
Example
p {
margin: 30px;
}
The id Attribute
This attribute is to define a specific style for a specific element:
<p id="pid1">I am too specific</p>
defines a style for the element with the specific id and is to be unique within a page:
Example
#pid1 {
color: red;
}

The class Attribute
This attribute is to define a style for a specific type of elements:
<p class="pclass">I am too specific</p>
then define a style for the elements with the specific class:
Example
p.pclass {
color: red;
}
HTML Links
Links are used to navigate from one page to another page or from one portion of a page to
another portion of the same page.
HTML Links - Hyperlinks
HTML links are hyperlinks can jump to another document by just clicking on it. Hyperlink
can be a text or an image or any other HTML element. When we move the mouse over a link,
the mouse arrow pointer will turn into a little hand.
HTML Links - Syntax
In HTML, links are used to define with the <a> tag:
<a href="url">hypertext</a>
Example
<a href="http://iotearth.in/html tutorial part-5/">Visit our HTML tutorial</a>
Here href attribute specifies the destination address of the link. The address links can be
specified as either absolute (if source and destination are in different folders) or relative (if
source and destination are within the same folder).

The example above used an absolute URL (A full web address).
A relative link is specified without http://www.....
Example
<a href="html_images.bmp">HTML Images</a>
HTML Link Colors
By default, a link will be displayed with:
An unvisited link is underlined and blue color
A visited link is underlined and purple color
An active link is underlined and red color
You can change the default colors, by using styles:
Example
<style>
a:link {color:red; background-color:transparent; text-decoration:underline}
a:visited {color:green; background-color:transparent; text-decoration:underline}
a:hover {color:yellow; background-color:transparent; text-decoration:none}
a:active {color:blue; background-color:transparent; text-decoration:none}
</style>
HTML Links with a target Attribute
The target attribute is used to specify where the linked document to be opened. We can use
target attribute with the following values:
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
Example
<a href="http://iotearth.in/" target="_blank">Visit HTML Tutorial Series!</a>

Tip: If your webpage is within a frame, the use target="_top":
Example
<a href="http://iotearth.in/html/" target="_top">HTML5 tutorial!</a>
HTML Links - Image as Link
It is common to use images as links:
Example
<a href="default.jsp">
<img src="building.jpg" alt="HTML tutorial" style="width:40px;height:40px;border:1;">
</a>
HTML Links - Create a Bookmark
HTML bookmarks are used to jump to specific parts of a Web page. This is useful when the
webpage is very long. To use bookmark, first create a bookmark and add a link to it, then
clicking on it makes to scroll to the location with the bookmark.
Example
First, create a bookmark with the id attribute:
<h1 id="top"> Top Section</h2>
Then, add a link to the bookmark:
<a href="#top">Visit the Top Section</a>
Or, add a link to the bookmark, from another page:
Example
<a href="html_basics.html#top">Visit the Top Section</a>
HTML Images
Example

<!DOCTYPE html>
<html>
<body>
<h2>Beautiful Scene</h2>
<img src="pic_scene.jpg" alt="Nature View" style="width:200px;height:160px;">
</body>
</html>
HTML Images Syntax
In HTML, images are defined with the <img> tag. This tag is used as an unpaired tag means
without closing tag. The src attribute is used to specify the URL/address of the image:
<img src="url" alt="alternate_text" style="width:width;height:height;">
The alt Attribute
The alt attribute specified an alternate text for an image, It is useful when a browser cannot
find an image, it will display the alt attribute value:
Example
<img src="incorrectname.jpg" alt="HTML Icon" style="width:150px;height:150px;">
Image Size - Width and Height
By using style attribute also we can specify the width and height in pixels (px) of an image.
Example
<img src="html.jpg" alt="HTML Icon" style="width:150px;height:150px;">
Another option is to use the width and height attributes by specifying values in pixels.
Example
<img src="html.jpg" alt="HTML Icon" width="150" height="150">
Note: Always specify the width and height of an image for better visibility.

Width and Height, or Style?
HTML5 supports both the width, height, and style attributes. Make it a practice of using style
attribute.
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:80%;
}
</style>
</head>
<body>
<img src="htmllogo.jpg" alt="HTML Icon" style="width:150px;height:150px;">
<img src="htmllogo.jpg" alt="HTML Icon" width="150" height="150">
</body>
</html>
Images in another Folder
By default, the browser considers the relative path to identify image location in the same
folder as the web page. Recommended to include the folder name in the src attribute:
Example
<img src="/images/htmllogo.jpg" alt="HTML Icon" style="width:150px;height:150px;">
Images on another Server
It is possible to access images from any web address.
Example
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Animated Images
HTML also allows animated images with the GIF standard:
Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Using an Image as a Link
Instead of text, sometimes images are used as hyperlinks. To do so, simply nest the <img>
tag inside the <a> tag:
Example
<a href="home.php">
<img src="HTMLlogo.gif" alt="HTML tutorial" style="width:40px;height:40px;border:1;">
</a>
Image Floating
With the use of the CSS float property, we can let the images to float either from right to left
or from left to right:
Example
<p><img src="HTMLlogo.gif" alt="HTML Logo" style="float:right;width:40px;height:40px;">
The image will float to the right of the text.</p>
<p><img src="HTMLlogo.gif" alt="HTML Logo" style="float:left;width:40px;height:40px;">
The image will float to the left of the text.</p>
Image Maps from W3C Schools
By using the <map> tag we can define an image-map. An image-map is an image with
clickable areas. The <map> tag name attribute is associated with the <img> usemap attribute

and creates an association between the image and the map. The <map> tag is specified with a
number of <area> tags, which defines the clickable areas in the image-map:
Example
<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>
Note: Make sure of image sources used in the code availability
HTML Tables
Defining an HTML Table
To display the table of content on a webpage, HTML defined a tag <table> where the
content can be represented in rows and columns. The <table> tag is considered as a parent tag
(container tag) with <tr> and <td> tags. <tr> tag is used to define the rows and <td> tag
define the content (text, image, list, table….) of an individual cell. Number of <tr> tags used
reflects the number of table rows and number of <td> tags used reflects the number of cells in
each row. A table header is defined with the <th> tag. By default, table headings are bold and
centered.
Example
<table style="width:100%">
<tr>
<th> Firstname</th>
<th> Middlename</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Ronald</td>
<td>Stephen</td>
<td>Rose</td>
<td>25</td>
</tr>
<tr>
<td>St</td>

<td>Anthony</td>
<td>Jain</td>
<td> 30</td>
</tr>
</table>
HTML Table - Adding a Border
By default, tables display without border. HTML defines a table to add a border by using
border attribute. A border is set to a table as
<table border=”2”>
.
.
</table>
This code displays a table border with 2px width.
A border is also set using the CSS border property:
Example
table, th, td {
border: 2px solid black;
}
We can also define borders for both the table and the table cells.
HTML Table - Collapsed Borders from W3C schools
If you want the borders to collapse into one border, add the CSS border-collapse property:
Example
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}

HTML Table - Adding Cell Padding
Cell padding attribute of a <table> tag specifies the space between the cell content and its
borders.
<table cellpadding=”10”>
.
.
</table>
The CSS padding property is also defined to set the padding:
Example
th, td {
padding: 10px;
}
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells. Border spacing is also called as cell
spacing.
<table cellspacing=”10”>
.
.
</table>
To set the border spacing for a table, also use the CSS border-spacing property:
Example
table {
border-spacing: 5px;
}
Note: Border spacing has no effect is identified if the table has collapsed borders.

HTML Table - Cells that Span Many Columns
To make a cell span (merge) more than one column, use the colspan attribute for a <td> tag:
<table>
<tr>
<td colspan=”2”>Text to merge</td>
</tr>
</table>
Example
<tr>
<th>Name</th>
<th colspan="2">Profile</th>
</tr>
<tr>
<td>Nagaraju</td>
<td>9441168122</td>
<td>+91-9441168122</td>
</tr>
</table>
HTML Table - Cells that Span Many Rows
To make a cell span (merge) more than one row, use the rowspan attribute for a <td> tag:
<table>
<tr>
<td rowspan=”2”>Text to merge</td>
</tr>
.
.
</table>

Example
<tr>
<th>Name:</th>
<td>Nagaraju</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9441168122</td>
</tr>
<tr>
<td>+91-9441168122</td>
</tr>
</table>
HTML Table - Adding a Caption
To add a caption (title) to a table, HTML defined <caption> tag:
Example
<caption>Go Green</caption>
<tr>
<th>Go</th>
<th>Green</th>
</tr>
<tr>
<td>Save</td>
<td>Tress</td>
</tr>
<tr>
<td>Save</td>
<td>Power consumption</td>
</tr>
</table>

HTML Lists
HTML defines a provision to represent the content as a sequence of items called list. HTML
allows defining list in 3 ways as Ordered List (arrangement of list items in a proper order)
and Unordered List (arrangement of list items without a order), Description List (to describe
each term in the list).
HTML List Example
An Unordered List:
Item
Item
Item
Item
An Ordered List:
1. Item1
2. Item2
3. Item3
4. Item4
Unordered HTML List
An unordered list is defined with a <ul> tag in which each list is defined with <li> tag. By
default, the list items will be represented with bullets (small black circles):
Example
<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>
Unordered HTML List - Choose List Item Marker
HTML defines type attribute to represent the marker type of the list items.
<ul type=”circle”>
The CSS list-style-type property is also used to define the style for representing the list
items:

Value Description
disc Sets the list item with a bullet (default)
circle Sets the list item with a circle
square Sets the list item with a square
none The list items will not be marked
Example - Disc
<ul style="list-style-type:disc">
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>
Example - Circle
<ul style="list-style-type:circle">
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>
Example - Square
<ul style="list-style-type:square">
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>
Example - None
<ul style="list-style-type:none">
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>

Ordered HTML List
To represent the list items in an order HTML defined the <ol> tag and each list item with the
<li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be set with numbers (default)
type="A" The list items will be set with uppercase letters
type="a" The list items will be set with lowercase letters
type="I" The list items will be set with uppercase roman numbers
type="i" The list items will be set with lowercase roman numbers
Numbers:
<ol type="1">
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Pen</li>

<li>Pencil</li>
<li>Eraser</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ol>
Uppercase Roman Numbers:
<ol type="I">
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ol>
HTML Description Lists
HTML also supports description list which is quite different from other two types of lists. A
description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd>
tag describes each term:
Example
<dl>
<dt>Pen</dt>
<dd>- used to write on a paper</dd>
<dt>Eraser</dt>
<dd>- used to erase the written text </dd>
</dl>

Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Pen</li>
<li>Pencil</li>
<ul>
<li>Reynolds Pen</li>
<li>HB Pencil</li>
</ul>
</li>
<li>Eraser</li>
</ul>
Note: List items can contain other HTML elements, like lists, images and links, etc.
Horizontal Lists from W3C Schools
HTML lists can be styled a list horizontally to create a menu with CSS.
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
HTML Block and Inline Elements
Every HTML element will have certain value as default to display depending upon the type
of element. For most elements default display value is block or inline.
Block-level Elements
A block-level element starts in a new line and displays with full available width.
Examples of block-level elements are:
<div>
<h1> - <h6>
<p>
<form>

Inline Elements
An inline element does not start in a new line and displays with necessary width only.
This is an inside inline <span> element a paragraph.
Examples of inline elements are:
<span>
<a>
<img>
The <div> Element
The <div> element is also used as a container tag for other HTML elements. The <div>
element has no additional attributes except style and class.
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>India</h2>
<p>India is the most beautiful country with rich traditions and human values</p>
</div>
The <span> Element
The <span> element is another container used for some text. The <span> element also has no
additional attributes except style and class.
Example
<h1>Most<span style="color:red">Important</span> Heading</h1>
HTML Grouping Tags
Tag Description
<div> Defines a section in a document (block-level)

<span> Defines a section in a document (inline)
HTML class Attribute
Using the class Attribute
The HTML class attribute makes it possible to define styles for elements with a specific and
same class name.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.places {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="places">
<h2>India</h2>
<p>India is the most ancient country with history of mankind, democracy and human traditions.
Festivals in India bring all religious people together. </p>
</div>
<div class="vehicle">
<h2>Benz</h2>
<p>Benz is a four wheeler car with a great horse power engine best suited to drive on highways and
interior wide roads.</p>
</div>
</body>
</html>
Using The class Attribute on Inline Elements

The HTML class attribute can also be used for inline elements:
Example
<!DOCTYPE html>
<html>
<head>
<style>
span.alert {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>Most <span class="alert">Important</span> Heading</h1>
<p>This is some most <span class="alert">important</span> text.</p>
</body>
</html>
HTML Forms
HTML Form Example
First name:
Nagaraju
Last name:
Mamillapally
The <form> Element
The HTML <form> element is used to define a form. Forms are basically used to collect user
input:
<form>
.
form elements
.
</form>

An HTML form contains of several form elements used to accept different types of input
elements like text fields, password fields checkboxes, radio buttons, submit button, reset
button and more.
The <input> Element
The <input> element is the most important form element collects different user inputs
depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button used for selection one among the choices
<input type="submit"> Defines a submit button used to submit form input
Text Input
<input type="text"> defines a one-line input field for text input with a default width of 20
visible characters:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Middle name:<br>
<input type="text" name="middlename">
Last name:<br>
<input type="text" name="lastname">
</form>
This is how it will look like in a browser:
First name:
Middle name:

Last name:
Radio Button Input
<input type="radio"> defines a radio button used to select one from a list of choices.
Example
<form>
<input type="radio" name="gender" value="female" checked>Female<br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="other"> Other
</form>
This is how the HTML code above will be displayed in a browser:
Female
Male
Other
The Submit Button
<input type="submit"> defines a button for submitting the form data to a form-handler
for processing input data. The form-handler is typically a server page with a script to process
the input data.
The form-handler is specified in the form's action attribute:
Example
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mamillapally"><br>
Last name:<br>
<input type="text" name="lastname" value="Nagaraju"><br><br>
<input type="submit" value="Submit">
</form>

First name:
Mamillapally
Last name:
Nagaraju
The Action Attribute
The action attribute is used to define the action to be performed after the form is submitted.
Normally, this can be done when the user clicks on the submit button.
This page contains a server-side script that handles the form data:
If the action attribute is not specified, the action is set to the current page.
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) while submitting the form
data:
<form action="action_page.php" method="get">
or:
<form action="action_page.php" method="post">
When to Use GET?
Get method is the default method while submitting form data. When GET method is used for
submission then the form data will be made visible in the page address field.
action_page.php?firstname=Mamillapally&lastname=Nagaraju
Note: GET method is not suitable when sending the sensitive information.
When to Use POST?

It’s better to use POST method always. This method does not display the submitted form data
in the page address field. POST is best suited to send large amount of data.
The Name Attribute
Each input field must have a name attribute for submission. If this attribute is omitted, the
data sending will not be possible at all.
This example will only submit the "Last name" input field:
Example
First name:<br>
<input type="text" value="Mamillapally"><br>
Last name:<br>
</form>
Grouping Form Data with <fieldset>
The <fieldset> element is used to define group related data in a form. The <legend> element
is used to define a caption for the <fieldset> element.
Example
<fieldset>
<legend>Personal information:</legend>
First name:<br>
Last name:<br>
</fieldset>
</form>
Personal information: First name:
Mamillapally

Last name:
Nagaraju
HTML Form Elements
The <input> Element
The <input> element is the most important form element collects different user inputs
depending on the type attribute.
The <select> Element
The <select> element defines a drop-down list:
Example
<select name="cars">
<option value="vista">Vista</option>
<option value="indica">Indica</option>
<option value="shift">Shift</option>
<option value="dezire">Dezire</option>
</select>
The <option> elements define options to select. By default, the first item in the drop-down
list is selected. To redefine it, add the selected attribute to the option:
Example
<option value="vista" selected>Vista</option>
The <textarea> Element
The <textarea> element is used to define a multi-line text area input field:
Example

<textarea name="message" rows="10" cols="30">
http://iotearth.in is here to provide Knowledge as a Service
</textarea>
The rows attribute specifies the number of visible lines in a text area and the cols attribute
specifies the visible width of a text area.
http://iotearth.in is here to provid
The <button> Element
The <button> element is used to define a clickable button:
Example
<button type="button" onclick="alert('Welcome to HTML')">Click Here!</button>
HTML Input Types
This section describes different input types for the <input> element.
Input Type Text
<input type="text"> defines a one-line text input field:
Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

First name:
Last name:
Input Type Password
<input type="password"> defines a password field:
Example
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="pwd">
</form>
User name:
User password:
The characters in a password field are displayed as asterisks or circles for security.
Input Type Submit
<input type="submit"> is used to define a submitting form data button to a form-handler.
The form-handler is specified using the form's action attribute:
Example
First name:<br>
Last name:<br>

</form>
First name:
Mamillapally
Last name:
Nagaraju
If you omit the submit button's value attribute, the button will get a default text:
Example
First name:<br>
Last name:<br>
<input type="submit">
</form>
Input Type Reset
<input type="reset"> is used to define a reset button to reset all entered form values to
their default values:
Example
First name:<br>
Last name:<br>
<input type="reset">
</form>
Input Type Radio

<input type="radio"> is used to define a radio button. This allows to select only one
option form a limited number of choices.
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Male
Female
Other
Input Type Checkbox
<input type="checkbox"> is used to define a checkbox. It allows to select ZERO or MORE
options from a set of limited number of choices.
Example
<form>
<input type="checkbox" name="vehicle1" value="Car"> I own a car <br>
<input type="checkbox" name="vehicle2" value="Bike"> I have a bike
</form>
I own a car
I have a bike
Input Type Button
<input type="button"> is used to define a button:
Example

<input type="button" onclick="alert('Welcome to HTML!')" value="Click Here!">
HTML Iframes
An iframe is HTML element used to display a web page within a web page.
Iframe Syntax
An HTML iframe is defined with the tag <iframe>:
<iframe src="URL"></iframe>
The src attribute specifies the URL of the inline frame page.
Iframe - Set Height and Width
Use the height and width attributes are used to specify the size of the iframe. The size is
specified in pixels by default, but can also be specified in percentage (%).
Example
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
Iframe - Remove the Border
By default, an iframe displays a border around it. Use CSS border property in a style attribute
to remove the border.
Example
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
HTML defines the change of size, color and style of the iframe's border using CSS.
Example
<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>
Iframe - Target for a Link
An iframe element by using target attribute can be used as the target frame for a link by
refering to the name attribute of the iframe:

Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://iotearth.in" target="iframe_a">IoTandEarth</a></p>
HTML iframe Tag
Tag Description
<iframe> Defines an inline frame
Note: Our authors followed the standards recommendations by W3C Schools to make the
documentation simple to learn. This document is prepared to support students, instructors
who are interested in web development and is not meant for
commercial purpose.

Html tutorial

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Html tutorial

Similar to Html tutorial (20)

Recently uploaded

Recently uploaded (20)

Html tutorial