.What Is HTML?: Example Explained

.What is HTML?
HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language

 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table",
and so on
 Browsers do not display the HTML tags, but use them to render the
content of the page
Example Explained
 The <!DOCTYPE html> declaration defines this document to be HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
HTML Styles
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>
</body>
</html>
I am normal
I am red
I am blue
I am big
HTML Background Color
The background-color property defines the background color for an HTML
element.
This example sets the background color for a page to powderblue:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
HTML Text Color

The color property defines the text color for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
</body>
</html>
This is a heading
HTML Fonts
The font-family property defines the font to be used for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph
HTML Text Size

The font-size property defines the text size for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph
HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML
element:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
Centered Heading
Centered paragraph.
HTML Text Formatting

<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
This text is bold
This text is italic
This is subscript and superscript
HTML Formatting Elements

In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic
text.
Formatting elements were designed to display special types of 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 <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.
Example
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
This text is normal.
This text is bold.
The HTML <strong> element defines strong text, with added semantic
"strong" importance.
Example
<!DOCTYPE html>
<html>
<body>
<p><strong>This text is strong.</strong></p>
</body>
</html>
This text is strong.
HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.
Example
<!DOCTYPE html>
<html>
<body>
<p><i>This text is italic.</i></p>
</body>
</html>
This text is italic.

The HTML <em> element defines emphasized text, with added semantic
importance. <em> means that the text is "important".
<!DOCTYPE html>
<html>
<body>
<p><em>This text is emphasized.</em></p>
</body>
</html>
This text is emphasized.
HTML <small> Element

The HTML <small> element defines smaller text:
Example
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
HTML Small Formatting
HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:
Example
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
HTML Marked Formatting
HTML <del> Element

The HTML <del> element defines deleted (removed) text.
Example
<!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed) text.</p>

<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
The del element represents deleted (removed) text.
My favorite color is blue red.
HTML <ins> Element

The HTML <ins> element defines inserted (added) text.
Example
<!DOCTYPE html>
<html>
<body>The ins element represent inserted (added) text.
My favorite color is red.
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
The ins element represent inserted (added) text.
My favorite color is red.

HTML <sub> Element
The HTML <sub> element defines subscripted text.
Example
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
This is subscripted text.
HTML <sup> Element

The HTML <sup> element defines superscripted
text.
Example
<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
This is superscripted text.
HTML Quotation and Citation Elements

<!DOCTYPE html>
<html>
<body>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
</body>
</html>
Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by 1.2 million
members in the United States and close to 5 million globally.
HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.
Example
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>
Browsers usually insert quotation marks around the q element.
WWF's goal is to: Build a future where people live in harmony with nature.
HTML <address> for Contact Information

The HTML <address> element defines contact information (author/owner) of a
document or an article.
The <address> element is usually displayed in italic. Most browsers will add a
line break before and after the element.
Example
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a document or
article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
<!DOCTYPE html>
<html>
<body>
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</body>
</html>
The HTML cite element defines the title of a work.
Browsers usually display cite elements in italic.
The Scream by Edvard Munch. Painted in 1893
HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines bi-directional override.
The <bdo> element is used to override the current text direction:
Example
<!DOCTYPE html>
<html>
<body>
<p>If your browser supports bi-directional override (bdo), the next line will be written from
right to left (rtl):</p>
<bdo dir="rtl">This line will be written from right to left</bdo>

</body>
</html>
If your browser supports bi-directional override (bdo), the next line will be written from right to
left (rtl):
This line will be written from right to left
HTML Colors
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:red">
Background-color set by using red
</h2>
<h2 style="background-color:orange">
Background-color set by using orange
</h2>
<h2 style="background-color:yellow">
Background-color set by using yellow
</h2>
<h2 style="background-color:blue;color:white">
Background-color set by using blue
</h2>
<h2 style="background-color:cyan">
Background-color set by using cyan
</h2>
</body>
</html>
Background-color set by using red

Background-color set by using orange
Background-color set by using yellow
Background-color set by using blue
Background-color set by using cyan
RGB Value
In HTML, a color can also be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.
For example, rgb(255,0,0) is displayed as red, because red is set to its highest
value (255) and the others are set to 0.
To display the color black, all color parameters must be set to 0, like this:
rgb(0,0,0).
To display the color white, all color parameters must be set to 255, like this:
rgb(255,255,255).
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:rgb(255,0,0)">
Background-color set by using rgb(255,0,0)
</h2>
</h2>
</h2>
</h2>
</h2>
</h2>
</body>
</html>
Shades of gray are often defined using equal values for all the 3 light sources:
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:rgb(0,0,0);color:white">
</h2>
</h2>
</h2>
</h2>
<h2 style="background-color:rgb(255,255,255);">
</h2>
</body>
</html>

Background-color set by using
rgb(128,128,128)
rgb(200,200,200)
rgb(255,255,255)
HEX Value
In HTML, a color can also be specified using a hexadecimal value in the form:
#RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values
between 00 and FF (same as decimal 0-255).
For example, #FF0000 is displayed as red, because red is set to its highest
value (FF) and the others are set to the lowest value (00).
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:#FF0000">
Background-color set by using #FF0000
</h2>
<h2 style="background-color:#00FF00">
Background-color set by using #00FF00
</h2>
<h2 style="background-color:#0000FF">
Background-color set by using #0000FF
</h2>
<h2 style="background-color:#FFFF00">
Background-color set by using #FFFF00
</h2>
<h2 style="background-color:#FF00FF">
Background-color set by using #FF00FF
</h2>
<h2 style="background-color:#00FFFF">
Background-color set by using #00FFFF
</h2>
</body>
</html>
Background-color set by using #FF0000

Background-color set by using #00FF00
Background-color set by using #0000FF
Background-color set by using #FFFF00
Background-color set by using #FF00FF
Background-color set by using #00FFFF
Shades of gray are often defined using equal values for all the 3 light sources:
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:#000000;color:white">
Background-color set by using #000000
</h2>
<h2 style="background-color:#808080;color:white">
</h2>
<h2 style="background-color:#FFFFFF;">
Background-color set by using #FFFFFF
</h2>
</body>
</html>

Background-color set by using #FFFFFF
HTML Styles - CSS
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
This is a Blue Heading
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a
<style> element:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>
This is a heading
External CSS
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web
site, by changing one file!
To use an external style sheet, add a link to it in the <head> section of the
HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
This is a heading
An external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
p {
color: red;
font-family: courier;
font-size: 160%;
</style>
</head>
<body>
</body>
</html>
This is a heading
CSS Border
The CSS border property defines a border around an HTML element:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid powderblue;
</style>
</head>
<body>
</body>
</html>
This is a heading
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border:
<!DOCTYPE html>
<html>
<head>
<style>
p{
padding: 30px;
</style>
</head>
<body>
</body>
</html>
This is a heading
CSS Margin
The CSS margin property defines a margin (space) outside the border:
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin: 50px;
}
</style>
</head>
<body>
</body>
</html>
This is a heading
The id Attribute
To define a specific style for one special element, add an id attribute to the
element:
<p id="p01">I am different</p>
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
</style>
</head>
<body>
<p id="p01">I am different.</p>
</body>
</html>
I am different.
The class Attribute

To define a style for a special type of elements, add a class attribute to the
element:
<p class="error">I am different</p>
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
</style>
</head>
<body>
<p class="error">I am different.</p>
<p class="error">I am different too.</p>
</body>
</html>
I am different.
I am different too.
External References
External style sheets can be referenced with a full URL or with a path relative to
the current web page.
This example uses a full URL to link to a style sheet:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://www.w3schools.com/html/styles.css">
</head>
<body>
</body>
</html>
This is a heading
This example links to a style sheet located in the html folder on the
current web site:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/html/styles.css">
</head>
<body>
</body>
</html>
This is a heading
This example links to a style sheet located in the same folder as the current
page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
This is a heading
HTML Links
HTML Links - Hyperlinks

HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little
hand
<!DOCTYPE html>
<html>
<body>
<p><a href="https://www.w3schools.com/html/">Visit our HTML

tutorial</a></p>
</body>
</html>
Visit our HTML tutorial
The href attribute specifies the destination address

(https://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Local Links
The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without
http://www....).
<!DOCTYPE html>
<html>
<body>
<p><a href="html_images.asp">HTML Images</a> is a link to a page

on this website.</p>
<p><a href="http://www.w3.org/">W3C</a> is a link to a website on

the World Wide Web.</p>
</body>
</html>
HTML Images is a link to a page on this website.
W3C is a link to a website on the World Wide Web.
HTML Link Colors

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
You can change the default colors, by using styles:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
a:visited {
color: pink;
a:hover {
color: red;
text-decoration: underline;
a:active {
color: yellow;
text-decoration: underline;
}
</style>
</head>
<body>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
</html>
You can change the default colors of links
HTML Images
HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The target attribute can have one of 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:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.w3schools.com/html/" target="_blank">Visit our HTML
tutorial!</a>
<p>If you set the target attribute to "_blank", the link will open in a new
browser window or tab.</p>
</body>
</html>
Visit our HTML tutorial!
If you set the target attribute to "_blank", the link will open in a new browser window or tab.
Tip: If your webpage is locked in a frame, you can use target="_top" to

break out of the frame:
<!DOCTYPE html>
<html>
<body>
<p>Locked in a frame? <a href="https://www.w3schools.com/html/"

target="_top">Click here!</a></p>
</body>
</html>
Locked in a frame? Click here!
HTML Links - Image as Link

It is common to use images as links:
<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"

style="width:42px;height:42px;border:0">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from

displaying a border around the image.</p>
</body>
</html>
The image is a link. You can click on it.
We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the
image.
HTML Links - Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a Web
page.
Bookmarks can be useful if your webpage is very long.

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.
<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>
<h2>Chapter 5</h2>

<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>

<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
</body>
</html>
Jump to Chapter 4
Chapter 1
This chapter explains ba bla bla
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Chapter 13
Chapter 14
Chapter 15
Chapter 16
Chapter 17
External Paths
External pages can be referenced with a full URL or with a path relative to the
current web page.
This example uses a full URL to link to a web page:
<!DOCTYPE html>
<html>
<body>
<p><a href="https://www.w3schools.com/html/default.asp">HTML
tutorial</a></p>
</body>
</html>
HTML tutorial
This example links to a page located in the html folder on the current web site:
<!DOCTYPE html>
<html>
<body>
<p><a href="/html/default.asp">HTML tutorial</a></p>
</body>
</html>
HTML tutorial
This example links to a page located in the same folder as the current page:
<!DOCTYPE html>
<html>
<body>
<p><a href="default.asp">HTML tutorial</a></p>
</body>
</html>
HTML tutorial
HTML Images
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View"

style="width:304px;height:228px;">
</body>
</html>
Spectacular Mountain
The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some
reason cannot view it (because of slow connection, an error in the src attribute,
or if the user uses a screen reader).
If a browser cannot find an image, it will display the value of the alt attribute:
<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find an image, it will display the alternate text:</p>
<img src="wrongname.gif" alt="HTML5 Icon"

</body>
</html>
If a browser cannot find an image, it will display the alternate text:
HTML Screen Readers

A screen reader is a software program that reads the HTML code, converts the
text, and allows the user to "listen" to the content. Screen readers are useful for
people who are blind, visually impaired, or learning disabled.
Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.
The values are specified in pixels (use px after the value):
<!DOCTYPE html>
<html>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Alternatively, you can use the width and height attributes. Here, the values
are specified in pixels by default:
<!DOCTYPE html>
<html>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Width and Height, or Style?
Both the width, height, and style attributes are valid in HTML5.
However, we suggest using the style attribute. It prevents internal or external

styles sheets from changing the original size of images:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<p>It is better to use the style attribute to set the width and height of an image
(instead of using the width and height attributes), because it prevents
internal or external styles sheets to change the original size of an image:</p>
<p>Using the style attribute:</p>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<p>Using the width and height attributes:</p>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
It is better to use the style attribute to set the width and height of an image (instead of using the
Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the
web page.
However, it is common to store images in a sub-folder. You must then include

the folder name in the src attribute:
width and height attributes), because it prevents internal or external styles sheets to change the
original size of an image:
Using the style attribute:
Using the width and height attributes:
Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the
web page.
However, it is common to store images in a sub-folder. You must then include

the folder name in the src attribute:
<!DOCTYPE html>
<html>
<body>
<img src="c:/abc/images/html5.gif" alt="HTML5 Icon" style="width:200px;height:128px;">
</body>
</html>
Images on Another Server

Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
<!DOCTYPE html>
<html>
<body>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"

</body>
</html>
Animated Images
The tandard allows animated images:
<!DOCTYPE html>
<html>
<body>
<p>The GIF standard allows moving images.</p>
<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">
</body>
</html>
The GIF standard allows moving images.
Using an Image as a Link

To use an image as a link, simply nest the <img> tag inside the <a> tag:
<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>
The image is a link. You can click on it.
Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.
Image Floating
Use the CSS float property to let the image float to the right or to the left of a
text:
<!DOCTYPE html>
<html>
<body>
<p><strong>Float the image to the right:</strong></p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a
floating image.
</p>
<p><strong>Float the image to the left:</strong></p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
floating image.
</p>
<p>Please use the CSS float property. The align attribute is deprecated in HTML 4, and not
supported in HTML5.</p>
</body>
</html>
Float the image to the right:
A paragraph with a floating image. A paragraph with a floating image. A paragraph
with a floating image.
Float the image to the left:
floating image.
Please use the CSS float property. The align attribute is deprecated in HTML 4, and not
supported in HTML5.
Image Maps
Use the <map> tag to define an image-map. An image-map is an image with
clickable areas.
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:
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<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>
</body>
</html>
Click on the sun or on one of the planets to watch it closer:

HTML Lists
HTML List Example
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
An Unordered HTML List

 Coffee
 Tea
 Milk
An Ordered HTML List
1. Coffee
2. Tea
3. Milk
Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.
The list items will be marked with bullets (small black circles) by default:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
An unordered HTML list

 Coffee
 Tea
 Milk
 Unordered HTML List - Choose List Item
Marker
 The CSS list-style-type property is used to define the style of the list
item marker:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered List with Disc Bullets

 Coffee
 Tea
 Milk
Example - Circle
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered List with Circle Bullets

o Coffee
o Tea
o Milk
Example - Square
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered List with Square Bullets

 Coffee
 Tea
 Milk
Example - None
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered List without Bullets

Coffee
Tea
Milk
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
An ordered HTML list

1. Coffee
2. Tea
3. Milk
4.Ordered HTML List - The Type Attribute

5. The type attribute of the <ol> tag, defines the type of the list item
marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered List with Numbers

1. Coffee
2. Tea
3. Milk
Uppercase Letters:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered List with Letters

A. Coffee
B. Tea
C. Milk
Lowercase Letters:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Letters</h2>

<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered List with Lowercase Letters

a. Coffee
b. Tea
c. Milk
Uppercase Roman Numbers:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered List with Roman Numbers

I. Coffee
II. Tea
III. Milk
Lowercase Roman Numbers:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered List with Lowercase Roman Numbers

i. Coffee
ii. Tea
iii. Milk
HTML Description Lists

HTML also supports description 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:
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
A Description List
Coffee
- black hot drink
Milk
- white cold drink
Nested HTML Lists

List can be nested (lists inside lists):
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
A Nested List
 Coffee
 Tea
o Black tea
o Green tea
 Milk
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a menu:
<!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;
li a:hover {
background-color: blue;
</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>
 Home News Contact About
HTML Tables
Defining an HTML Table

An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the
<th> tag. By default, table headings are bold and centered. A table data/cell is
defined with the <td> tag.
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Firstname Lastname Age

Jill Smith 50
Eve Jackson 94
John Doe 80
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Jill Smith 50
Eve Jackson 94
John Doe 80
HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-
collapse property:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-collapse: collapse;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Jill Smith 50
Eve Jackson 94
John Doe 80
HTML Table - Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without
padding.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the padding to 5px.</p>
</body>
</html>
Jill Smith 50
Eve Jackson 94
John Doe 80
Try to change the padding to 5px.
HTML Table - Left-align Headings

By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:

Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Jill Smith 50
Eve Jackson 94
John Doe 80
HTML Table - Adding Border Spacing

Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>

Jill Smith 50
Eve Jackson 94
John Doe 80
Try to change the border-spacing to 5px.
HTML Table - Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
th, td {
padding: 5px;
text-align: left;
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Cell that spans two columns:

Name Telephone
Bill Gates 55577854 55577855
HTML Table - Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>

<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Cell that spans two rows:

Name: Bill Gates
55577854
Telephone:
55577855
HTML Table - Adding a Caption

To add a caption to a table, use the <caption> tag:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Monthly savings
Month Savings
January $100
February $50
A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

Jill Smith 50
Eve Jackson 94
John Doe 80

Jill Smith 50
Eve Jackson 94
John Doe 80
</body>
</html>
And add more styles:

<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Jill Smith 50
Eve Jackson 94
John Doe 80

Jill Smith 50
Eve Jackson 94
John Doe 80
HTML Forms
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
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>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>
First name:
Mickey
Last name:
Mouse
Submit
If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".
Text Input
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text input field is 20 characters.</p>
</body>
</html>
First name:

Last name:
Note that the form itself is not visible.
Also note that the default width of a text input field is 20 characters.
Radio Button Input
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
Male
Female
Other
The Submit Button

<!DOCTYPE html>
<html>
<body>
First name:<br>
<br>
Last name:<br>
<br><br>
</form>
</body>
</html>
First name:
Mickey

Last name:
Mouse

Submit
If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".
The Name Attribute

<!DOCTYPE html>
<html>
<body>
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<br><br>
</form>
<p>Notice that the value of the "First name" field will not be submitted, because the
input element does not have a name attribute.</p>
</body>
</html>
First name:
Mickey

Last name:
Mouse

Submit
If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".
Notice that the value of the "First name" field will not be submitted, because the input
element does not have a name attribute.
Grouping Form Data with <fieldset>

<!DOCTYPE html>
<html>
<body>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<br>
Last name:<br>
<br><br>
</fieldset>
</form>
</body>
</html>
Personal information:
First name:
Mickey

Last name:
Mouse

Submit
HTML Form Elements
The <select> Element
<!DOCTYPE html>
<html>
<body>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
Volvo

Submit
The <textarea> Element

<!DOCTYPE html>
<html>
<body>
<textarea name="message" rows="10" cols="30">The cat was playing in the
garden.</textarea>
<br>
</form>
</body>
</html>
gjghjghjgj
gj
ghjghjghjghjghj

Submit
The <button> Element

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
Click Me!
HTML5 <datalist> Element

<!DOCTYPE html>
<html>
<body>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>
</body>
</html>
Submit

Note: The datalist tag is not supported in Safari or IE9 (and earlier).
HTML5 <keygen> Element

The purpose of the <keygen> element is 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.
<!DOCTYPE html>
<html>
<body>
Username: <input type="text" name="user">
<br><br>
Encryption: <keygen name="security">
<br><br>
</form>
</body>
</html>
Username:
Encryption:
Submit
HTML5 <output> Element
The <output> element represents the result of a calculation (like one performed
by a script).
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php"
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>
</form>
<p><strong>Note:</strong> The output element is not supported in Edge 12 or Internet

Explorer and earlier versions.</p>
</body>
</html>
0 100 + =
Submit
Note: The output element is not supported in Edge 12 or Internet Explorer and earlier
versions.
HTML Input Types
Input Type Text
<input type="text"> defines a one-line text input field:
<!DOCTYPE html>
<html>
<body>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
</form>
<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
First name:

Last name:

Submit
Note that the form itself is not visible.
Also note that the default width of a text field is 20 characters.
Input Type Password

<input type="password"> defines a password field:
<!DOCTYPE html>
<html>
<body>
<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>
<p>The characters in a password field are masked (shown as asterisks or circles).</p>
</body>
</html>
User name:

User password:
The characters in a password field are masked (shown as asterisks or circles).
Input Type Submit

<input type="submit"> defines a button for submitting form data to
a 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:
<!DOCTYPE html>
<html>
<body>
First name:<br>
<br>
Last name:<br>
<br><br>
</form>
<p>If you click "Submit", the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>
First name:
Mickey

Last name:
Mouse

Submit
If you click "Submit", the form-data will be sent to a page called "/action_page.php".
If you omit the submit button's value attribute, the button will get a default
text:
<!DOCTYPE html>
<html>
<body>
First name:<br>
<br>
Last name:<br>
<br><br>
</form>
</body>
</html>
First name:
Mickey

Last name:
Mouse

Submit
Input Type Reset

<input type="reset"> defines a reset button that will reset all form values
to their default values:
<!DOCTYPE html>
<html>
<body>
First name:<br>
<br>
Last name:<br>
<br><br>
<input type="reset">
</form>
<p>If you change the input values and then click the "Reset" button, the form-data will be reset
to the default values.</p>
</body>
</html>
First name:
Mickey

Last name:
Mouse

Submit Reset

If you change the input values and then click the "Reset" button, the form-data will be
reset to the default values.
Input Type Radio

<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
<!DOCTYPE html>
<html>
<body>
<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<br><br>
</form>
</body>
</html>
Male
Female
Other
Submit
Input Type Checkbox

<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of

choices.
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" name="vehicle1" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car">I have a car
<br><br>
</form>
</body>
</html>
I have a bike
I have a car
Submit
Input Type Button

<input type="button"> defines a button:
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>
Input Type Color

The <input type="color"> is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<p>
Depending on browser support:<br>
A color picker can pop-up when you enter the input field.
</p>
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
</form>
<p><b>Note:</b> type="color" is not supported in Internet Explorer 11 and earlier versions or

Safari 9.1 and earlier versions.</p>
</body>
</html>
Depending on browser support:

A color picker can pop-up when you enter the input field.
Submit
Select your favorite color:
Note: type="color" is not supported in Internet Explorer 11 and earlier versions or

Safari 9.1 and earlier versions.
Input Type Date

The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<p>
A date picker can pop-up when you enter the input field.
</p>
Birthday:
<input type="date" name="bday">
</form>
<p><strong>Note:</strong> type="date" is not supported in Firefox, or Internet Explorer 11 and

earlier versions.</p>
</body>
</html>

Birthday:
Submit

Note: type="date" is not supported in Firefox, or Internet Explorer 11 and earlier

versions.
Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field,
with no time zone.
<!DOCTYPE html>
<html>
<body>
<p>
</p>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>
<p><strong>Note:</strong> type="datetime-local" is not supported in Firefox, or Internet

Explorer 12 and earlier versions.</p>
</body>
</html>

Birthday (date and time):

Send

Note: type="datetime-local" is not supported in Firefox, or Internet Explorer 12 and

earlier versions.
Input Type Email

The <input type="email"> is used for input fields that should contain an e-
mail address.
Depending on browser support, the e-mail address can be automatically

validated when submitted.
Some smartphones recognize the email type, and adds ".com" to the keyboard
to match email input.
<!DOCTYPE html>
<html>
<body>
E-mail:
<input type="email" name="email">
</form>
<p>
<b>Note:</b>type="email" is not supported in IE9 and earlier.</p>
</body>
</html>
E-mail:
Submit

Note:type="email" is not supported in IE9 and earlier.
Input Type Month

The <input type="month"> allows the user to select a month and year.
<!DOCTYPE html>
<html>
<body>
<p>
</p>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
<p><strong>Note:</strong> type="month" is not supported in Firefox, or Internet Explorer 11

and earlier versions.</p>
</body>
</html>

Submit
Birthday (month and year):
Note: type="month" is not supported in Firefox, or Internet Explorer 11 and earlier

versions.
Input Type Number

The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a
value from 1 to 5:
<!DOCTYPE html>
<html>
<body>
<p>Numeric restrictions will apply in the input field:</p>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
<p><b>Note:</b> type="number" is not supported in IE9 and earlier.</p>
</body>
</html>
Numeric restrictions will apply in the input field:
Submit
Note: type="number" is not supported in IE9 and earlier.
Input Type Range

The <input type="range"> defines a control for entering a number whose
exact value is not important (like a slider control). Default range is 0 to 100.
However, you can set restrictions on what numbers are accepted with the min,
max, and step attributes:
<!DOCTYPE html>
<html>
<body>
<p>
The input type "range" can be displayed as a slider control.
</p>
<form action="/action_page.php" method="get">

Points:
<input type="range" name="points" min="0" max="10">
</form>
<p>
<b>Note:</b>
type="range" is not supported in Internet Explorer 9 and earlier versions.
</p>
</body>
</html>

The input type "range" can be displayed as a slider control.
Submit
Points:
Note: type="range" is not supported in Internet Explorer 9 and earlier versions.

Input Type Search
The <input type="search"> is used for search fields (a search field behaves
like a regular text field).
<!DOCTYPE html>
<html>
<body>
Search Google:
<input type="search" name="googlesearch">
</form>
</body>
</html>
Submit
Search Google:
Input Type Tel

The <input type="tel"> is used for input fields that should contain a
telephone number.
The tel type is currently supported only in Safari 8.
The formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to
display the response that is received after submitting the form.
The formtarget attribute overrides the target attribute of the <form> element.
The formtarget attribute can be used with type="submit" and type="image".
<!DOCTYPE html>
<html>
<body>
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/tab">
</form>
<p><strong>Note:</strong> The formtarget attribute of the input tag is not supported in

Internet Explorer 9 and earlier versions.</p>a
</body>
</html>
First name:
Last name:
Submit as normal Submit to a new w indow /tab

Note: The formtarget attribute of the input tag is not supported in Internet Explorer 9
and earlier versions.
The height and width Attributes

The height and width attributes specify the height and width of an <input
type="image"> element.
<!DOCTYPE html>
<html>
<body>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that
activated the image button.</p>
</body>
</html>
First name:
Last name:
Note: The input type="image" sends the X and Y coordinates of the click that
activated the image button.
The list Attribute

The list attribute refers to a <datalist> element that contains pre-defined
options for an <input> element.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<p><b>Note:</b> The datalist tag is not supported in Internet Explorer 9 and earlier versions,
or in Safari.</p>
</body>
</html>
Submit

Note: The datalist tag is not supported in Internet Explorer 9 and earlier versions, or
in Safari.
The min and max Attributes

The min and max attributes specify the minimum and maximum values for an
<input> element.
The min and max attributes work with the following input types: number,
range, date, datetime-local, month, time and week.
<!DOCTYPE html>
<html>
<body>
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>
<input type="number" name="quantity" min="1" max="5"><br>
</form>
<p><strong>Note:</strong> The max and min attributes of the input tag is not
supported in Internet Explorer 9 and earlier versions, or in Firefox.</p>
<p><strong>Note:</strong> The max and min attributes will not work for dates and
time in Internet Explorer 10, since IE 10 does not support these input types.</p>
</body>
</html>
Enter a date before 1980-01-01:

Enter a date after 2000-01-01:
Submit
Note: The max and min attributes of the input tag is not supported in Internet
Explorer 9 and earlier versions, or in Firefox.
Note: The max and min attributes will not work for dates and time in Internet
Explorer 10, since IE 10 does not support these input types.
The multiple Attribute

The multiple attribute specifies that the user is allowed to enter more than one
value in the <input> element.
The multiple attribute works with the following input types: email, and file.
<!DOCTYPE html>
<html>
<body>
Select images: <input type="file" name="img" multiple>
</form>
<p>Try selecting more than one file when browsing for files.</p>
<p><strong>Note:</strong> The multiple attribute of the input tag is not supported in

Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Submit
Select images:
Try selecting more than one file when browsing for files.
Note: The multiple attribute of the input tag is not supported in Internet Explorer 9
and earlier versions.
HTML5 Introduction
What is New in HTML5?
The DOCTYPE declaration for HTML5 is very simple:
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>
HTML5 Browser Support

HTML5 is supported in all modern browsers.
In addition, all browsers, old and new, automatically handle unrecognized

elements as inline elements.
Because of this, you can "teach" older browsers to handle "unknown" HTML
elements.
Add New Elements to HTML

You can also add new elements to an HTML page with a browser trick.
This example adds a new element called <myHero> to an HTML page, and

defines a style for it:
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
A Heading
My Hero Element
HTML5 Semantic Elements
What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the
developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about

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

defines its content.
HTML5 <section> Element

The <section> element defines a section in a document.
According to W3C's HTML5 documentation: "A section is a thematic grouping of

content, typically with a heading."
A home page could normally be split into sections for introduction, content, and
contact information.
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization

working on issues regarding the conservation, research and restoration of the
environment, formerly named the World Wildlife Fund. WWF was founded in
1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of
WWF originated from a panda named Chi Chi that was transferred from the Beijing
Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>
WWF
The World Wide Fund for Nature (WWF) is an international organization working on issues
regarding the conservation, research and restoration of the environment, formerly named the
World Wildlife Fund. WWF was founded in 1961.
WWF's Panda symbol

The Panda has become the symbol of WWF. The well-known panda logo of WWF originated
from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the
same year of the establishment of WWF.
HTML5 <article> Element

The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to read it
independently from the rest of the web site.
Examples of where an <article> element can be used:
 Forum post
 Blog post
 Newspaper article
<!DOCTYPE html>
<html>
<body>
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,

and build a future in which humans live in harmony with nature.</p>
</article>
</body>
</html>
What Does WWF Do?

WWF's mission is to stop the degradation of our planet's natural environment, and
build a future in which humans live in harmony with nature.
HTML5 <header> Element

The <header> element specifies a header for a document or section.
The <header> element should be used as a container for introductory content.
You can have several <header> elements in one document.
The following example defines a header for an article:
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,

and build a future in which humans live in harmony with nature.</p>
</article>
</body>
</html>
What Does WWF Do?

WWF's mission:
WWF's mission is to stop the degradation of our planet's natural environment, and
build a future in which humans live in harmony with nature.
HTML5 <footer> Element

The <footer> element specifies a footer for a document or section.
A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information,

links to terms of use, contact information, etc.
You may have several <footer> elements in one document.
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
</body>
</html>
Posted by: Hege Refsnes
Contact information: someone@example.com.
HTML5 <nav> Element

The <nav> element defines a set of navigation links.
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
HTML | CSS | JavaScript | jQuery
HTML5 <aside> Element
The <aside> element defines some content aside from the content it is placed
in (like a sidebar).
The aside content should be related to the surrounding content.
<!DOCTYPE html>
<html>
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
</body>
</html>
My family and I visited The Epcot center this summer.
Epcot Center
The Epcot Center is a theme park in Disney World, Florida.
HTML5 <figure> and <figcaption>

Elements
The purpose of a figure caption is to add a visual explanation to an image.
In HTML5, an image and a caption can be grouped together in

a <figure>element:
<!DOCTYPE html>
<html>
<body>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden,
opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is
approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous
tourist attraction in Norway.</p>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>
</body>
</html>
The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite
the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately
25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist
attraction in Norway.
Fig.1 - The Pulpit Rock, Norway.
How to Create Frames
Creating Vertical Columns

To create a set of four vertical columns, we need to use the frameset element with the
cols attribute. The cols attribute is used to define the number and size of columns the
frameset will contain. In our case, we have four files to display, so we need four frames.
To create four frames we need to assign four comma-separated values to the cols
attribute. To make things simple we’re going to assign the value * to each of the frames,
this will cause them to be automatically sized to fill the available space. Here’s what our
HTML markup looks like. Read more: https://html.com/frames/#ixzz50S6FejSL
Creating Horizontal Rows
Rows of frames can be created by using the rows attribute rather than the cols attribute
as shown in the HTML below. Read more: https://html.com/frames/#ixzz50S6ZESw9
Mixing Columns and Rows
Columns and rows of frames can both appear on the same webpage by nesting one
frameset inside of another. To do this, we first create a frameset and then nest a child
frameset within the parent element. Here’s an example of how we could nest two rows
within a set of three columns. Read more: https://html.com/frames/#ixzz50S753jgP
The nested frameset takes the place of the first frame within the parent element. The
nested element can be placed in any position. For example, if we wanted the nested
element to appear in the center position we would just rearrange the elements like this.
Of course, we can also create additional nested frames if we want to.

One more way to create a combination of rows and columns is to define a grid of
columns and rows in a single frameset. For example, if you wanted a grid of four equally
sized frames, you could use the following code.
Styling Frame Source Documents
Just as with any webpage, the contents of each frame can be styled with CSS.
In order to style the contents of each frame, the styles must be added to the
source document itself either by linking to an external stylesheet within the
source document or by adding internal or inline styles to the source document.
Considering our four source documents, CSS styles have to be applied to each
document individually. Applying CSS styles to the webpage that contains the
frameset will not cause those styles to apply to each individual document. If we
want to style frame_1.html we need to add styles directly to the document itself
either by linking to an external style sheet or by typing them directly into the
document. Here’s an example of how we might do that:
Styling & Formatting the Frameset
There are a few things you can do to affect the presentation of a frameset
beyond styling the documents themselves. The size of each frame can be
specified and locked. The margin between frames can be changed. The border
around frames can be formatted. These changes aren’t made with CSS. Instead,
they are made by adding attributes and values to the frame elements
Sizing Frames
Frames can be sized either in pixels or percentages, or they can be set to

automatically adjust in size based on the available space. To specify the size of a
frame, insert the desired value in the cols or rows attribute. By default, unless the
attribute noresize is added to a frame, website visitors can use their mouse to
drag the border between two frames to resize the frames. If this is undesirable,
the attribute noresize can be applied to a frame element to prevent resizing. Let’s
put both of these ideas into practice. Let’s create the following layout: One full-
width row along the top of the webpage. Three columns below the top row. The
first and third columns sizes to create left and right sidebars. The middle column
sized to create a larger content area. We can create this layout with the following
Formatting Frame Margins & Borders

Now that we have our layout defined, we can increase or decrease the margin between
the frames and also remove the border between the frames if we wish to do so. Using
the layout we created in the previous step, let’s remove the borders between the three
columns, but leave the border between the upper and lower rows. Let’s also add some
margin around the contents of the first frame.
Targeting Frames with Links
One of the most common uses of frames is to build sticky navigation into a frame
that is always visible regardless of the position of the contents of the other frames.
When properly implemented, navigation links will cause new resources to load in one
frame while the other frames remain static. Anchors can be formatted to target specific
frames by assigning a name attribute to a targeted frame element, and using the target
attributed within the a element to load the href in the targeted frame. If all of that is a
little confusing, let’s take it step-by-step. The first step in making this happen is to
assign a name to the frame where we want links to open. Using the layout we created
just a minute ago, we would probably want to use the left-hand column for our
navigation and the center column as our targeted frame. In order to do this, we need to
assign a name to our target.
If we click the link Load frame_1.html the contents of that file are loaded in the
center column and we get this.
If we click the link Load frame_2.html we see the navigation contents both in the left
sidebar and the middle column.
Create form in HTML
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the outline of the form */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
form div + div {

margin-top: 1em;
}
label {
/* To make sure that all labels have the same size and are properly aligned */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 1em sans-serif;
/* To give the same size to all text fields */

width: 300px;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */

border: 1px solid #999;
}
input:focus, textarea:focus {
/* To give a little highlight on active elements */
border-color: #000;
}
textarea {
/* To properly align multiline text fields with their labels */
vertical-align: top;
/* To give enough room to type some text */

height: 5em;
}
.button {
/* To position the buttons to the same position of the text fields */
padding-left: 90px; /* same size as the label elements */
}
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
margin-left: .5em;
}
Example of Forms
<form method="post" action="mailto:youremail@email.com">
<p>What type of shoes you wear ?</p>
<label>Color:</label> <br />

<input type="radio" name="color" value="dark" /> Dark <br />
<input type="radio" name="color" value="light" /> Light <br />
<label>Size:</label> <br />

<input type="radio" name="size" value="small" /> Small <br />
<input type="radio" name="size" value="average" /> Average <br />
<input type="radio" name="size" value="big" /> Big <br />
<input type="submit" value="Email Myself" />

</form>
<p>What color shoes you prefer?</p>
<input type="checkbox" name="shoes" value="black" /> Simple Black <br/>
<input type="checkbox" name="shoes" value="white" /> Simple White <br/>
<input type="checkbox" name="shoes" value="gray" /> Shades of gray <br/>
<input type="checkbox" name="shoes" value="black&white" /> Black and
white<br/>
<input type="submit" value="Email Myself" />

</form>
<p>Musical preferences</p>
<select multiple name="music" size="4">

<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal/Rock</option>
<option value="hiphop" >Hip Hop</option>
<option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
<option value="country" >Country</option>
<option value="classical" >Classical</option>
<option value="alternative" >Alternative</option>
<option value="oldies" >Oldies</option>
<option value="techno" >Techno</option>
</select><br />
<input type="submit" value="Email Yourself" />

</form>
<p>Level of education?</p>
<select name="education">
<option>Choose</option>
<option>High school </option>
<option>Collage</option>
<option>Doctorate</option>
</select><br />
<input type="submit" value="Email Yourself" />

</form>
What type of shoes you wear ?
Color:
Dark
Light
Size:
Small
Average
Big
Email Myself
What color shoes you prefer?
Simple Black
Simple White
Shades of gray
Black and white
Email Myself
Musical preferences
Emo
Metal/Rock
Hip Hop
Ska

Email Yourself
Level of education?
Choose

Email Yourself
Layouts
<table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell"
height="250" width="400">
<tr height="50">
<td colspan="2" bgcolor="white">
<table title="Banner" id="banner" border="0">

<tr>
<td>Aici poti sa pui un baner, logo, etc</td>
</tr>
</table>
</td>
</tr>
<tr height="200">
<td bgcolor="white">
<table id="navigation" title="Navigation" border="0">

<tr>
<td>Link-uri!</td>
</tr>
<tr>
<td>Link-uri!</td>
</tr>
<tr>
<td>Link-uri!</td>
</tr>
</table>
</td>
<td bgcolor="white">
<table title="Content" id="content" border="0">
<tr>
<td>Continutul sitului va fi plasat aici</td>
</tr>
</table>
</td>
</tr>
</table>
Aici poti sa pui un baner, logo, etc
Link-uri!
Link-uri! Continutul sitului va fi plasat aici
Link-uri!
Student Registration Form

<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onSubmit="return(validate());">
<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>

</tr>
</table>
</form>
</body>
</html>
Student Registration Form

Name
Father
Name
Postal
Address
Personal
Address
Sex Male Female

City

Course

District

State
PinCode
EmailId
DOB
MobileNo
Reset Submit
Marquee tag
I will show you in this article some ways you can animate text with the marquee tag. The marquee
tag is an HTML element that makes text to move from left to right and top to down.
Example:-
<html>
<marquee>TEXT</marquee><br><br><br>
<marquee direction="right">TEXT</marquee><br><br><br>
<marquee behavior="alternate">TEXT</marquee><br><br><br>
<marquee direction="up">TEXT</marquee><br><br><br><br>
<marquee direction="down">TEXT</marquee><br><br><br><br>
<marquee direction="up" behavior="alternate"
style="height:100px">TEXT</marquee><br><br><br><br>
<marquee behavior="alternate" direction="up" width="80%"><marquee
direction="right">TEXT</marquee></marquee><br><br><br><br>
<marquee behavior="alternate" direction="up" width="80%">
<marquee direction="right" behavior="alternate">TEXT</marquee>
</marquee><br><br><br><br><br><br><br><br><br>
<font color="WHITE"><marquee direction="left"
style="background:RED">TEXT</marquee></font><br><br><br><br>
<marquee style="border:RED 3px SOLID">TEXT</marquee><br><br><br><br>
<marquee>Some text here <img src="http://www.etutoriale.ro/banners/88x31.gif" width="88"
height="31" alt="Tutorials " border="0"></marquee><br><br><br><br>
Some text before <marquee WIDTH="20%"><img src="http://www.etutoriale.ro/banners/88x31.gif"
width="88" height="31" alt="Tutorials " border="0"></marquee> Some text
after.<br><br><br><br><br><br><br><br>
</html>
HTML Marquee Image

HTML <marquee> tag is a container tag and use to create a scrolling image from left to right, right to left, top to
bottom, bottom to top. There is no limit and image display in marquee style.
Continuous scrolling image
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left">
<img src="../jix/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
</body>
</html>
Slide stop image

<html>
<head>
</head>
<body>
<marquee behavior="slide" direction="left">
</marquee>
</body>
</html>
Side Touch Margin Bounce Image

<html>
<head>
</head>
<body>
<marquee behavior="alternate" direction="left">
</marquee>
</body>
</html>
Upside Image Scrolling

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="up">
</marquee>
</body>
</html>
Change the Image Scrolling Speed

<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="5">
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="15">
</marquee>
</body>
</html>
Slide-In Images
<html>
<marquee behavior="slide" direction="left">

<img src="bats_013.gif" width="125" height="82" alt="Flying Bat">
</marquee>
</html>

.What Is HTML?: Example Explained

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

.What Is HTML?: Example Explained

Uploaded by

Copyright:

Available Formats

.What is HTML?

HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language

<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>

<p style="font-size:36px;">I am big</p>

This example sets the background color for a page to powderblue:

HTML Text Color

<h1 style="color:blue;">This is a heading</h1>

<h1 style="font-family:verdana;">This is a heading</h1>

HTML Text Size

<h1 style="font-size:300%;">This is a heading</h1>

HTML Text Alignment

<h1 style="text-align:center;">Centered Heading</h1>

HTML Text Formatting

<p><b>This text is bold</b></p>

This text is bold

This text is italic

This is subscript and superscript

HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text

HTML <b> and <strong> Elements

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

This text is normal.

This text is bold.

<p><strong>This text is strong.</strong></p>

This text is normal.

This text is strong.

HTML <i> and <em> Elements

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

This text is normal.

This text is italic.

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

This text is normal.

This text is emphasized.

HTML <small> Element

<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML Marked Formatting

HTML <del> Element

<p>The del element represents deleted (removed) text.</p>

The del element represents deleted (removed) text.

My favorite color is blue red.

HTML <ins> Element

<body>The ins element represent inserted (added) text.

My favorite color is red.

<p>The ins element represent inserted (added) text.</p>

<p>My favorite <ins>color</ins> is red.</p>

The ins element represent inserted (added) text.

My favorite color is red.

<p>This is <sub>subscripted</sub> text.</p>

This is subscripted text.

HTML <sup> Element

<p>This is <sup>superscripted</sup> text.</p>

This is superscripted text.

HTML Quotation and Citation Elements

<p>Here is a quote from WWF's website:</p>

For 50 years, WWF has been protecting the future of nature.