.What Is HTML?: Example Explained
Uploaded by
Amazing DALVI.What Is HTML?: Example Explained
Uploaded by
Amazing DALVI.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
This is a paragraph.
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>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body>
</html>
This text is normal.
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>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</html>
This text is normal.
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>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
This text is normal.
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 style="background-color:rgb(0,255,0)">
Background-color set by using rgb(0,255,0)
</h2>
<h2 style="background-color:rgb(0,0,255)">
Background-color set by using rgb(0,0,255)
</h2>
<h2 style="background-color:rgb(255,255,0)">
Background-color set by using rgb(255,255,0)
</h2>
<h2 style="background-color:rgb(255,0,255)">
Background-color set by using rgb(255,0,255)
</h2>
<h2 style="background-color:rgb(0,255,255)">
Background-color set by using rgb(0,255,255)
</h2>
</body>
</html>
Background-color set by using rgb(255,0,0)
Background-color set by using rgb(0,255,0)
Background-color set by using rgb(0,0,255)
Background-color set by using rgb(255,255,0)
Background-color set by using rgb(255,0,255)
Background-color set by using rgb(0,255,255)
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">
Background-color set by using rgb(0,0,0)
</h2>
<h2 style="background-color:rgb(90,90,90);color:white">
Background-color set by using rgb(90,90,90)
</h2>
<h2 style="background-color:rgb(128,128,128);color:white">
Background-color set by using rgb(128,128,128)
</h2>
<h2 style="background-color:rgb(200,200,200);color:white">
Background-color set by using rgb(200,200,200)
</h2>
<h2 style="background-color:rgb(255,255,255);">
Background-color set by using rgb(255,255,255)
</h2>
</body>
</html>
Background-color set by using rgb(0,0,0)
Background-color set by using rgb(90,90,90)
Background-color set by using
rgb(128,128,128)
Background-color set by using
rgb(200,200,200)
Background-color set by using
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">
Background-color set by using #808080
</h2>
<h2 style="background-color:#FFFFFF;">
Background-color set by using #FFFFFF
</h2>
</body>
</html>
Background-color set by using #000000
Background-color set by using #808080
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>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
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>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
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>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
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>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
This is a paragraph.
This is a paragraph.
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid powderblue;
padding: 30px;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
This is a paragraph.
This is a paragraph.
CSS Margin
The CSS margin property defines a margin (space) outside the border:
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
This is a paragraph.
This is a paragraph.
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>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>
</body>
</html>
This is a paragraph.
This is a paragraph.
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>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>
</body>
</html>
This is a paragraph.
This is a paragraph.
I am different.
This is a paragraph.
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>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
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>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
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>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
This is a heading
This is a paragraph.
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;
background-color: transparent;
text-decoration: none;
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</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>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
Jump to Chapter 4
Chapter 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
Chapter 4
This chapter explains ba bla bla
Chapter 5
This chapter explains ba bla bla
Chapter 6
This chapter explains ba bla bla
Chapter 7
This chapter explains ba bla bla
Chapter 8
This chapter explains ba bla bla
Chapter 9
This chapter explains ba bla bla
Chapter 10
This chapter explains ba bla bla
Chapter 11
This chapter explains ba bla bla
Chapter 12
This chapter explains ba bla bla
Chapter 13
This chapter explains ba bla bla
Chapter 14
This chapter explains ba bla bla
Chapter 15
This chapter explains ba bla bla
Chapter 16
This chapter explains ba bla bla
Chapter 17
This chapter explains ba bla bla
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"
style="width:128px;height:128px;">
</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"
style="width:104px;height:142px;">
</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;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a
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:
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a
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;
text-decoration: none;
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>
<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>
<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>
<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>
<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 - 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: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<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>
<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 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 {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the padding to 5px.</p>
</body>
</html>
Firstname Lastname Age
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 {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<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>
<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 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 {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
Firstname Lastname Age
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 {
border: 1px solid black;
border-collapse: collapse;
th, td {
padding: 5px;
text-align: left;
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<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 {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<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 {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<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 {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<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>
<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>
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80
Firstname Lastname Age
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 {
border: 1px solid black;
border-collapse: collapse;
}
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>
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80
Firstname Lastname Age
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>
<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".
The Name Attribute
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" 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>
<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>
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Personal information:
First name:
Mickey
Last name:
Mouse
Submit
HTML Form Elements
The <select> Element
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<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>
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the
garden.</textarea>
<br>
<input type="submit">
</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>
<form action="/action_page.php">
<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>
<input type="submit">
</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>
<form action="/action_page.php">
Username: <input type="text" name="user">
<br><br>
Encryption: <keygen name="security">
<br><br>
<input type="submit">
</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>
<input type="submit">
</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>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit">
</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>
<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 "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>
<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">
</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>
<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">
<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>
<form action="/action_page.php">
<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>
<input type="submit">
</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>
<form action="/action_page.php">
<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>
<input type="submit">
</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>
<form action="/action_page.php">
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</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>
Depending on browser support:<br>
A date picker can pop-up when you enter the input field.
</p>
<form action="/action_page.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>
<p><strong>Note:</strong> type="date" is not supported in Firefox, or Internet Explorer 11 and
earlier versions.</p>
</body>
</html>
Depending on browser support:
A date picker can pop-up when you enter the input field.
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.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<p>
Depending on browser support:<br>
A date picker can pop-up when you enter the input field.
</p>
<form action="/action_page.php">
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>
Depending on browser support:
A date picker can pop-up when you enter the input field.
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>
<form action="/action_page.php">
E-mail:
<input type="email" name="email">
<input type="submit">
</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.
Depending on browser support, a date picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<p>
Depending on browser support:<br>
A date picker can pop-up when you enter the input field.
</p>
<form action="/action_page.php">
Birthday (month and year):
<input type="month" name="bdaymonth">
<input type="submit">
</form>
<p><strong>Note:</strong> type="month" is not supported in Firefox, or Internet Explorer 11
and earlier versions.</p>
</body>
</html>
Depending on browser support:
A date picker can pop-up when you enter the input field.
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>
<form action="/action_page.php">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</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
Quantity (between 1 and 5):
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>
Depending on browser support:<br>
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">
<input type="submit">
</form>
<p>
<b>Note:</b>
type="range" is not supported in Internet Explorer 9 and earlier versions.
</p>
</body>
</html>
Depending on browser support:
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>
<form action="/action_page.php">
Search Google:
<input type="search" name="googlesearch">
<input type="submit">
</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>
<form action="/action_page.php">
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>
<form action="/action_page.php">
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>
<input type="submit">
</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>
<form action="/action_page.php">
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>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</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:
Quantity (between 1 and 5):
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>
<form action="/action_page.php">
Select images: <input type="file" name="img" multiple>
<input type="submit">
</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>
<form method="post" action="mailto:youremail@email.com">
<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>
<form method="post" action="mailto:youremail@email.com">
<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>
<form method="post" action="mailto:youremail@email.com">
<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="-1" selected>select..</option>
<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="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<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="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">
<img src="../jix/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
</body>
</html>
Side Touch Margin Bounce Image
<html>
<head>
</head>
<body>
<marquee behavior="alternate" direction="left">
<img src="../jix/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
</body>
</html>
Upside Image Scrolling
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="up">
<img src="../jix/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
</body>
</html>
Change the Image Scrolling Speed
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="5">
<img src="../jix/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="15">
<img src="../jix/img_nat.png" width="120" height="80" alt="Natural" />
</marquee>
</body>
</html>
Slide-In Images
<html>
<marquee behavior="slide" direction="left">
<img src="bats_013.gif" width="125" height="82" alt="Flying Bat">
<img src="bats_013.gif" width="125" height="82" alt="Flying Bat">
<img src="bats_013.gif" width="125" height="82" alt="Flying Bat">
</marquee>
</html>
You might also like
- Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseFrom EverandHypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseNo ratings yet
- !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTMLNo ratings yet!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML113 pages
- Javascript Introduction: Javascript Can Change HTML ContentNo ratings yetJavascript Introduction: Javascript Can Change HTML Content41 pages
- Java Web Development Course: Writing CSS Codes100% (1)Java Web Development Course: Writing CSS Codes50 pages
- HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present TextNo ratings yetHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text80 pages
- Cascading Style Sheets (CSS) Working With TagsNo ratings yetCascading Style Sheets (CSS) Working With Tags32 pages
- Exercises: Functional Programming: Now, Calling F (X, Y) Is Like Calling Foo (3, X, Y)No ratings yetExercises: Functional Programming: Now, Calling F (X, Y) Is Like Calling Foo (3, X, Y)2 pages
- Php/Mysql Tutorial: Introduction To DatabaseNo ratings yetPhp/Mysql Tutorial: Introduction To Database58 pages
- Write A PHP Program To Exchange The First and Last Characters in A Given String and Return The New StringNo ratings yetWrite A PHP Program To Exchange The First and Last Characters in A Given String and Return The New String34 pages
- HTML5 Elements: Web Technology Assignment - 1947234100% (2)HTML5 Elements: Web Technology Assignment - 194723458 pages
- PHP: Hypertext Preprocessing: Matt Murphy & Dublas PortilloNo ratings yetPHP: Hypertext Preprocessing: Matt Murphy & Dublas Portillo17 pages
- Unit - 2 PHP Basics: Learning ObjectivesNo ratings yetUnit - 2 PHP Basics: Learning Objectives45 pages
- Tutorial 1: Serialization: Django REST FrameworkNo ratings yetTutorial 1: Serialization: Django REST Framework10 pages
- "Sanjeevani": A Project Work-I Report Submitted in Partial Fulfillment of Requirement of The Degree ofNo ratings yet"Sanjeevani": A Project Work-I Report Submitted in Partial Fulfillment of Requirement of The Degree of20 pages
- A Project Report ON Campus Recruitment SystemNo ratings yetA Project Report ON Campus Recruitment System31 pages
- Application of Service Design Tools in Product Development ProcessNo ratings yetApplication of Service Design Tools in Product Development Process7 pages
- How To Create A PDF With Multilevel List in C#No ratings yetHow To Create A PDF With Multilevel List in C#8 pages
- Cambridge International General Certificate of Secondary EducationNo ratings yetCambridge International General Certificate of Secondary Education8 pages
- OneTen-Frontend Web Development FundamentalsNo ratings yetOneTen-Frontend Web Development Fundamentals5 pages
- Internet Explorer Default Registry SettingsNo ratings yetInternet Explorer Default Registry Settings5 pages
- Introduction To Web Design: Cascading Style SheetNo ratings yetIntroduction To Web Design: Cascading Style Sheet26 pages
- Road Accident Analysis Using Machine LearningNo ratings yetRoad Accident Analysis Using Machine Learning57 pages
- Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with EaseFrom EverandHypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
- !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
- Javascript Introduction: Javascript Can Change HTML ContentJavascript Introduction: Javascript Can Change HTML Content
- HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present TextHTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
- Exercises: Functional Programming: Now, Calling F (X, Y) Is Like Calling Foo (3, X, Y)Exercises: Functional Programming: Now, Calling F (X, Y) Is Like Calling Foo (3, X, Y)
- Write A PHP Program To Exchange The First and Last Characters in A Given String and Return The New StringWrite A PHP Program To Exchange The First and Last Characters in A Given String and Return The New String
- HTML5 Elements: Web Technology Assignment - 1947234HTML5 Elements: Web Technology Assignment - 1947234
- PHP: Hypertext Preprocessing: Matt Murphy & Dublas PortilloPHP: Hypertext Preprocessing: Matt Murphy & Dublas Portillo
- "Sanjeevani": A Project Work-I Report Submitted in Partial Fulfillment of Requirement of The Degree of"Sanjeevani": A Project Work-I Report Submitted in Partial Fulfillment of Requirement of The Degree of
- Application of Service Design Tools in Product Development ProcessApplication of Service Design Tools in Product Development Process
- Cambridge International General Certificate of Secondary EducationCambridge International General Certificate of Secondary Education