Scribd
Upload
76 views56 pages

What Is HTML?: Example

The document provides an overview of HTML including: - HTML is the standard markup language used to create web pages and describes the structure of web pages using tags. - Common HTML elements include headings, paragraphs, lists, and links. Tags like <h1> define headings and <p> defines paragraphs. - HTML documents have a basic structure including <html>, <head>, and <body> tags where the <body> section contains the visible page content.

Uploaded by

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

What Is HTML?: Example

The document provides an overview of HTML including: - HTML is the standard markup language used to create web pages and describes the structure of web pages using tags. - Common HTML elements include headings, paragraphs, lists, and links. Tags like <h1> define headings and <p> defines paragraphs. - HTML documents have a basic structure including <html>, <head>, and <body> tags where the <body> section contains the visible page content.

Uploaded by

Bhavani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 56

HTML-UNIT-3

HTML Introduction

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

A Simple HTML Document


Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Try it Yourself »
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 Tags
HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

 HTML tags normally come in pairs like <p> and </p>


 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash
inserted before the tag name

Tip: The start tag is also called the opening tag, and the end tag the
closing tag.

Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read
HTML documents and display them.The browser does not display the
HTML tags, but uses them to determine how to display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:

<html>

<head>
<title>Page title</title>

</head>

<body>
<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>


</body>

</html>

Note: Only the content inside the <body> section (the white area
above) is displayed in a browser.

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML
tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>
HTML Versions
Since the early days of the web, there have been many versions of
HTML:

Version Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014

HTML Editors

Write HTML Using Notepad or TextEdit


Web pages can be created and modified by using professional HTML
editors.
However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).

We believe using a simple text editor is a good way to learn HTML.

Follow the four steps below to create your first web page with Notepad
or TextEdit.

Step 1: Open Notepad (PC)


Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your
screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)


Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files


correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Ignore rich text
commands in HTML files".

Then open a new document to place the code.

Step 2: Write Some HTML


Write or copy some HTML into Notepad.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>


</body>
</html>

HTML Text Formatting

Text Formatting
This text is bold

This text is italic

This is subscript and superscript

Try it Yourself »

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
<b>This text is bold</b>

Try it Yourself »

The HTML <strong> element defines strong text, with added semantic
"strong" importance.

Example
<strong>This text is strong</strong>

Try it Yourself »

HTML <i> and <em> Elements


The HTML <i> element defines italic text, without any extra
importance.

Example
<i>This text is italic</i>
Try it Yourself »

The HTML <em> element defines emphasized text, with added semantic
importance.

Example
<em>This text is emphasized</em>

Try it Yourself »

Note: Browsers display <strong> as <b>, and <em> as <i>. However,


there is a difference in the meaning of these tags:< b> and <i> defines
bold and italic text, but< strong> and <em> means that the text is
"important".

HTML <small> Element


The HTML <small> element defines smaller text:

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

Try it Yourself »

HTML <mark> Element


The HTML <mark> element defines marked or highlighted text:

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

Try it Yourself »

HTML <del> Element


The HTML <del> element defines deleted (removed) text.

Example
<p>My favorite color is <del>blue</del> red.</p>

Try it Yourself »

HTML <ins> Element


The HTML <ins> element defines inserted (added) text.

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

Try it Yourself »

HTML <sub> Element


The HTML <sub> element defines subscripted text.

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

Try it Yourself »

HTML <sup> Element


The HTML <sup> element defines superscripted
text.

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

Try it Yourself »

HTML Text Formatting Elements


Tag Description
<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML Lists

HTML List Example


An Unordered List:
 Item
 Item
 Item
 Item

An Ordered List:
1. First item
2. Second item
3. Third item
4. Fourth item

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:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Try it Yourself »

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

Example - Disc
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Try it Yourself »

Example - Circle
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Try it Yourself »

Example - Square
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Try it Yourself »

Example - None
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Try it Yourself »

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:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Try it Yourself »

Ordered HTML List - The Type Attribute


The type attribute of the <ol> tag, defines the type of the list item
marker:

Type Description

type="1" The list items will be 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


The list items will be numbered with uppercase roman
type="I"
numbers

The list items will be numbered with lowercase roman


type="i"
numbers

Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Try it Yourself »

Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Try it Yourself »

Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Try it Yourself »
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Try it Yourself »

Lowercase Roman Numbers:


<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

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:

Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Try it Yourself »

Nested HTML Lists


List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Try it Yourself »

Note: List items can contain new list, and other HTML elements, like
images and links, etc.

Chapter Summary
 Use the HTML <ul> element to define an unordered list
 Use the CSS list-style-type property to define the list item marker
 Use the HTML <ol> element to define an ordered list
 Use the HTML type attribute to define the numbering type
 Use the HTML <li> element to define a list item
 Use the HTML <dl> element to define a description list
 Use the HTML <dt> element to define the description term
 Use the HTML <dd> element to describe the term in a description
list
 Lists can be nested inside lists
 List items can contain other HTML elements
 Use the CSS property float:left or display:inline to display a list
horizontally
HTML Links

Links are found in nearly all web pages. Links allow users to click
their way from page to page.

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.

Note: A link does not have to be text. It can be an image or any other
HTML element.

HTML Links - Syntax


In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

Example
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Try it Yourself »

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.

Note: Without a forward slash on subfolder addresses, you might


generate two requests to the server. Many servers will automatically
add a forward slash to the address, and then create a new request.
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....).

Example
<a href="html_images.asp">HTML Images</a>

Try it Yourself »

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:

Example
< 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>

Try it Yourself »

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:

Example
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Try it Yourself »

Tip: If your webpage is locked in a frame, you can use target="_top" to


break out of the frame:

Example
<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

Try it Yourself »

HTML Links - Image as Link


It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>

Try it Yourself »

Note: border:0; is added to prevent IE9 (and earlier) from displaying a


border around the image (when the image is a link).

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.

Example
First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within
the same page:

<a href="#C4">Jump to Chapter 4</a>

Or, add a link to the bookmark ("Jump to Chapter 4"), from another
page:

Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>

Try it Yourself »
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:

Example
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

Try it Yourself »

This example links to a page located in the html folder on the current
web site:

Example
<a href="/html/default.asp">HTML tutorial</a>

Try it Yourself »

This example links to a page located in the same folder as the current
page:

Example
<a href="default.asp">HTML tutorial</a>

Try it Yourself »

You can read more about file paths in the chapter HTML File Paths.

Chapter Summary
 Use the <a> element to define a link
 Use the href attribute to define the link address
 Use the target attribute to define where to open the linked
document
 Use the <img> element (inside <a>) to use an image as a link
 Use the id attribute (id="value") to define bookmarks in a page
 Use the href attribute (href="#value") to link to the bookmark
HTML Images

JPG Images

GIF Images

PNG Images
Example
<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View"
style="width:304px;height:228px;">

</body>
</html>

Try it Yourself »

HTML Images Syntax


In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have
a closing tag.

The src attribute specifies the URL (web address) of the image:

<img src="url" alt="some_text" style="width:width;height:height;">

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:

Example
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Try it Yourself »
The alt attribute is required. A web page will not validate correctly
without it.

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):

Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Try it Yourself »

Alternatively, you can use the width and height attributes. Here, the
values are specified in pixels by default:

Example
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

Try it Yourself »

Note: Always specify the width and height of an image. If width and
height are not specified, the page will flicker while the image loads.

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:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">


<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>

Try it Yourself »

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:

Example
<img src="/images/html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">

Try it Yourself »

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:
Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com">

Try it Yourself »

You can read more about file paths in the chapter HTML File Paths.

Animated Images
The GIF standard allows animated images:

Example
<img src="programming.gif" alt="Computer Man"
style="width:48px;height:48px;">

Try it Yourself »

Note that the syntax of inserting animated images is no different from


non-animated images.

Using an Image as a Link


To use an image as a link, simply nest the <img> tag inside the <a>
tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>

Try it Yourself »

Note: border:0; is added to prevent IE9 (and earlier) from displaying a


border around the image (when the image is a link).

Image Floating
Use the CSS float property to let the image float to the right or to the
left of a text:

Example
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face"


style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Try it Yourself »

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:

Example
<img src="planets.gif" alt="Planets" usemap="#planetmap"
style="width:145px;height:126px;">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Try it Yourself »

Chapter Summary
 Use the HTML <img> element to define an image
 Use the HTML src attribute to define the URL of the image
 Use the HTML alt attribute to define an alternate text for an
image, if it cannot be displayed
 Use the HTML width and height attributes to define the size of the
image
 Use the CSS width and height properties to define the size of the
image (alternatively)
 Use the CSS float property to let the image float
 Use the HTML <map> element to define an image-map
 Use the HTML <area> element to define the clickable areas in the
image-map
 Use the HTML <img>'s element usemap attribute to point to an
image-map

Note: Loading images takes time. Large images can slow down your
page. Use images carefully.

HTML Tables

HTML Table Example


Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

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>

Try it Yourself »

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other
tables, etc.

HTML Table - Adding a Border


If you do not specify a border for the table, it will be displayed without
borders.

A border is set using the CSS border property:

Example
table, th, td {
border: 1px solid black;
}

Try it Yourself »

Remember to define borders for both the table and the table cells.

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.

To set the padding, use the CSS padding property:

Example
th, td {
padding: 15px;
}

Try it Yourself »

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
th {
text-align: left;
}

Try it Yourself »
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:

Example
table {
border-spacing: 5px;
}

Try it Yourself »

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cells that Span Many


Columns
To make a cell span more than one column, use the colspan attribute:

Example
<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>

Try it Yourself »

HTML Table - Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:
Example
<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>

Try it Yourself »

HTML Table - Adding a Caption


To add a caption to a table, use the <caption> tag:

Example
<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>

Try it Yourself »
Note: The <caption> tag must be inserted immediately after the
<table> tag.

A Special Style for One Table


To define a special style for a special table, add an id attribute to the
table:

Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Now you can define a special style for this table:


table#t01 {
width: 100%;
background-color: #f1f1c1;
}

Try it Yourself »

And add more styles:


table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}

Try it Yourself »

Chapter Summary
 Use the HTML <table> element to define a table
 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table heading
 Use the HTML <caption> element to define a table caption
 Use the CSS border property to define a border
 Use the CSS border-collapse property to collapse cell borders
 Use the CSS padding property to add padding to cells
 Use the CSS text-align property to align cell text
 Use the CSS border-spacing property to set the spacing between
cells
 Use the colspan attribute to make a cell span many columns
 Use the rowspan attribute to make a cell span many rows
 Use the id attribute to uniquely define one table

HTML Forms

HTML Form Example


First name:

Last name:

Try it Yourself »

The <form> Element


The HTML <form> element defines a form that is used to collect user
input:

<form>
.
form elements
.
</form>

An HTML form contains form elements.

Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.

The <input> Element


The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on


the type attribute.

Here are some examples:

Type Description

<input type="text"> Defines a one-line text input field

<input Defines a radio button (for selecting one of


type="radio"> many choices)

<input Defines a submit button (for submitting the


type="submit"> form)
Text Input
<input type="text"> defines a one-line input field for text input:

Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

Try it Yourself »

This is how it will look like in a browser:

First name:

Last name:

Note: The form itself is not visible. Also note that the default width of a
text field is 20 characters.

Radio Button Input


<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices:

Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

Try it Yourself »

This is how the HTML code above will be displayed in a browser:


Male
Female
Other

The Submit Button


<input type="submit"> defines a button for submitting the 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:

Example
<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>

Try it Yourself »

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

The Action Attribute


The action attribute defines the action to be performed when the form
is submitted.

Normally, the form data is sent to a web page on the server when the
user clicks on the submit button.

In the example above, the form data is sent to a page on the server
called "/action_page.php". This page contains a server-side script that
handles the form data:

<form action="/action_page.php">

If the action attribute is omitted, the action is set to the current page.

The Method Attribute


The method attribute specifies the HTTP method (GET or POST) to be
used when submitting the form data:

<form action="/action_page.php" method="get">

or:

<form action="/action_page.php" method="post">

When to Use GET?


The default method when submitting form data is GET.

However, when GET is used, the submitted form data will be visible in
the page address field:

/action_page.php?firstname=Mickey&lastname=Mouse

Note: GET must NOT be used when sending sensitive information! GET
is best suited for short, non-sensitive, amounts of data, because it has
size limitations too.

When to Use POST?


Always use POST if the form data contains sensitive or personal
information. The POST method does not display the submitted form
data in the page address field.
POST has no size limitations, and can be used to send large amounts of
data.

The Name Attribute


Each input field must have a name attribute to be submitted.

If the name attribute is omitted, the data of that input field will not be
sent at all.

This example will only submit the "Last name" input field:

Example
<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>

Try it Yourself »

Grouping Form Data with <fieldset>


The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example
<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>

Try it Yourself »

This is how the HTML code above will be displayed in a browser:

Personal information:First name:

Last name:

from a form.

HTML – Frames
HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document. A collection of frames
in the browser window is known as a frameset. The window is divided into
frames in a similar way the tables are organized: into rows and columns.

Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use
frames in your webpages −

 Some smaller devices cannot cope with frames often because their screen
is not big enough to be divided up.

 Sometimes your page will be displayed differently on different computers


due to different screen resolution.

 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames. The rows
attribute of <frameset> tag defines horizontal frames and cols attribute
defines vertical frames. Each frame is indicated by <frame> tag and it defines
which HTML document shall open into the frame.

Note − The <frame> tag deprecated in HTML5. Do not use this


element.

Example
Following is the example to create three horizontal frames −

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset rows = "10%,80%,10%">


<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>

</frameset>

</html>
This will produce the following result −

Example
Let's put the above example as follows, here we replaced rows attribute by cols
and changed their width. This will create all the three frames vertically −

<!DOCTYPE html>
<html>

<head>
<title>HTML Frames</title>
</head>

<frameset cols = "25%,50%,25%">


<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>

This will produce the following result −

The <frameset> Tag Attributes


Following are important attributes of the <frameset> tag −

Sr.No Attribute & Description

1 cols
Specifies how many columns are contained in the frameset and the size of each column. You can
specify the width of each column in one of the four ways −

Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500, 100".

A percentage of the browser window. For example, to create three vertical frames, use cols = "10%,
80%, 10%".

Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *, 10%".
In this case wildcard takes remainder of the window.

As relative widths of the browser window. For example, to create three vertical frames, use cols =
"3*, 2*, 1*". This is an alternative to percentages. You can use relative widths of the browser
window. Here the window is divided into sixths: the first column takes up half of the window, the
second takes one third, and the third takes one sixth.

rows

This attribute works just like the cols attribute and takes the same values, but it is used to specify
2
the rows in the frameset. For example, to create two horizontal frames, use rows = "10%, 90%".
You can specify the height of each row in the same way as explained above for columns.

border

3 This attribute specifies the width of the border of each frame in pixels. For example, border = "5".
A value of zero means no border.

frameborder

This attribute specifies whether a three-dimensional border should be displayed between frames.
4
This attribute takes value either 1 (yes) or 0 (no). For example frameborder = "0" specifies no
border.

framespacing

This attribute specifies the amount of space between frames in a frameset. This can take any
5
integer value. For example framespacing = "10" means there should be 10 pixels spacing between
each frames.
The <frame> Tag Attributes
Following are the important attributes of <frame> tag −

Sr.No Attribute & Description

src

1 This attribute is used to give the file name that should be loaded in the frame. Its value can be any
URL. For example, src = "/html/top_frame.htm" will load an HTML file available in html
directory.

name

This attribute allows you to give a name to a frame. It is used to indicate which frame a document
2 should be loaded into. This is especially important when you want to create links in one frame that
load pages into an another frame, in which case the second frame needs a name to identify itself
as the target of the link.

frameborder

This attribute specifies whether or not the borders of that frame are shown; it overrides the value
3
given in the frameborder attribute on the <frameset> tag if one is given, and this can take values
either 1 (yes) or 0 (no).

marginwidth

4 This attribute allows you to specify the width of the space between the left and right of the frame's
borders and the frame's content. The value is given in pixels. For example marginwidth = "10".

marginheight

5 This attribute allows you to specify the height of the space between the top and bottom of the
frame's borders and its contents. The value is given in pixels. For example marginheight = "10".

6 noresize
By default, you can resize any frame by clicking and dragging on the borders of a frame. The
noresize attribute prevents a user from being able to resize the frame. For example noresize =
"noresize".

scrolling

7 This attribute controls the appearance of the scrollbars that appear on the frame. This takes values
either "yes", "no" or "auto". For example scrolling = "no" means it should not have scroll bars.

longdesc

This attribute allows you to provide a link to another page containing a long description of the
8 contents of the frame. For example longdesc = "framedescription.htm"

Browser Support for Frames


If a user is using any old browser or any browser, which does not support
frames then <noframes> element should be displayed to the user.

So you must place a <body> element inside the <noframes> element because
the <frameset> element is supposed to replace the <body> element, but if a
browser does not understand <frameset> element then it should understand
what is inside the <body> element which is contained in a <noframes>
element.

You can put some nice message for your user having old browsers. For
example, Sorry!! your browser does not support frames. as shown in the above
example.

Frame's name and target attributes


One of the most popular uses of frames is to place navigation bars in one frame
and then load main pages into a separate frame.

Let's see following example where a test.htm file has following code −

<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>

<frameset cols = "200, *">


<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>

</html>

Here, we have created two columns to fill with two frames. The first frame is
200 pixels wide and will contain the navigation menu bar implemented by
menu.htm file. The second column fills in remaining space and will contain the
main part of the page and it is implemented by main.htm file. For all the three
links available in menu bar, we have mentioned target frame as main_page, so
whenever you click any of the links in menu bar, available link will open in main
page.

Following is the content of menu.htm file

<!DOCTYPE html>
<html>

<body bgcolor = "#4a7d49">


<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />

<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>


<br />
<br />

<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>


</body>

</html>

Following is the content of main.htm file −

<!DOCTYPE html>
<html>

<body bgcolor = "#b5dcb3">


<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>

</html>

When we load test.htm file, it produces following result −

Now you can try to click links available in the left panel and see the result. The
targetattribute can also take one of the following values −

Sr.No Option & Description

_self
1
Loads the page into the current frame.

_blank
2
Loads a page into a new browser window. Opening a new window.

3 _parent
Loads the page into the parent window, which in the case of a single frameset is the main browser
window.

_top
4
Loads the page into the browser window, replacing any current frames.

targetframe
5
Loads the page into a named targetframe.

HTML - Meta Tags

HTML lets you specify metadata - additional important information about a


document in a variety of ways. The META elements can be used to include
name/value pairs describing properties of the HTML document, such as author,
expiry date, a list of keywords, document author etc.

The <meta> tag is used to provide such additional information. This tag is an
empty element and so does not have a closing tag but it carries information
within its attributes.

You can include one or more meta tags in your document based on what
information you want to keep in your document but in general, meta tags do
not impact physical appearance of the document so from appearance point of
view, it does not matter if you include them or not.
Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing <meta> tags inside the
header of the document which is represented by <head> and </head> tags. A
meta tag can have following attributes in addition to core attributes −

Sr.No Attribute & Description

Name

1
Name for the property. Can be anything. Examples include, keywords, description, author,
revised, generator etc.

content
2
Specifies the property's value.

scheme
3
Specifies a scheme to interpret the property's value (as declared in the content attribute).

http-equiv

4 Used for http response message headers. For example, http-equiv can be used to refresh the page
or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Specifying Keywords
You can use <meta> tag to specify important keywords related to the
document and later these keywords are used by the search engines while
indexing your webpage for searching purpose.

Example
Following is an example, where we are adding HTML, Meta Tags, Metadata as
important keywords about the document.

<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

This will produce the following result −

Document Description
You can use <meta> tag to give a short description about the document. This
again can be used by various search engines while indexing your webpage for
searching purpose.

Example
<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Document Revision Date


You can use <meta> tag to give information about when last time the
document was updated. This information can be used by various web browsers
while refreshing your webpage.

Example
<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Document Refreshing
A <meta> tag can be used to specify a duration after which your web page will
keep refreshing automatically.

Example
If you want your page keep refreshing after every 5 seconds then use the
following syntax.

<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Page Redirection
You can use <meta> tag to redirect your page to any other webpage. You can
also specify a duration if you want to redirect the page after a certain number
of seconds.

Example
Following is an example of redirecting current page to another page after 5
seconds. If you want to redirect page immediately then do not specify content
attribute.

<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com"
/>
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Setting Cookies
Cookies are data, stored in small text files on your computer and it is exchanged
between web browser and web server to keep track of various information
based on your web application need.

You can use <meta> tag to store cookies on client side and later this
information can be used by the Web Server to track a site visitor.

Example
Following is an example of redirecting current page to another page after 5
seconds. If you want to redirect page immediately then do not specify content
attribute.

<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "cookie" content = "userid = xyz;
expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />

</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>
If you do not include the expiration date and time, the cookie is considered a
session cookie and will be deleted when the user exits the browser.

Note − You can check PHP and Cookies tutorial for a complete detail on Cookies.

Setting Author Name


You can set an author name in a web page using meta tag. See an example
below −

Example
<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

Specify Character Set


You can use <meta> tag to specify character set used within the webpage.

Example
By default, Web servers and Web browsers use ISO-8859-1 (Latin1) encoding
to process Web pages. Following is an example to set UTF-8 encoding −

<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

To serve the static page with traditional Chinese characters, the webpage must
contain a <meta> tag to set Big5 encoding −

<!DOCTYPE html>
<html>

<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>

<body>
<p>Hello HTML5!</p>
</body>

</html>

You might also like