[go: up one dir, main page]

0% found this document useful (0 votes)
5 views36 pages

Ch-2HTML

This document provides a comprehensive introduction to HTML, covering its basic structure, elements, and various tags for formatting text, images, and links. It explains how to create and save HTML documents, use formatting tags, and implement images and hyperlinks effectively. Additionally, it introduces HTML5 features and attributes for enhanced web development.

Uploaded by

yamini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views36 pages

Ch-2HTML

This document provides a comprehensive introduction to HTML, covering its basic structure, elements, and various tags for formatting text, images, and links. It explains how to create and save HTML documents, use formatting tags, and implement images and hyperlinks effectively. Additionally, it introduces HTML5 features and attributes for enhanced web development.

Uploaded by

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

Ch -2 (HTML basics)

HTML: Introduction, Basic Structure of HTML , Head Section and Elements of Head Section, Formatting Tags :Bold
, Italic, Underline, Strikethrough, Div,Pre Tag Anchor links and Named Anchors ImageTag, Paragraphs,
Comments, Tables : Attributes –(Border, Cellpadding, Cellspacing , height , width), TR, TH, TD, Rowspan, Colspan
Lists : Ordered List , Unordered List , Definition List, Forms, Form Elements, Input types, Input Attriutes, Text
Input Text Area, Dropdown, Radio buttons , Check boxes ,Submit and Reset Buttons Frames : Frameset , nested
Frames HTML 5 Introduction , HTML5 New Elements: Audio Tag, Video Tag, HTML5 Form Validations: Require
Attribute, Pattern Attribute , Autofocus Attribute, email, number type, date type , Range type

What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content.
• Web pages can be created and modified by using professional HTML editors.

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 2: Write Some HTML

Write or copy the following HTML code into Notepad:

Example

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

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Step 3: Save the HTML Page(file name.html)

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double clicks on the file, or right-click - and choose "Open with").

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

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 Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Example

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> None none

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

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

HTML Text Formatting


HTML contains several elements for defining text with a special meaning.

Example
This text is bold

This text is italic

This is subscript and superscript

Formatting elements were designed to display special types of text:

• <b> - Bold text


• <strong> - Important text
• <i> - Italic text
• <mark> - Marked text
• <small> - Smaller 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>

The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

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

HTML <small> Element

The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>

HTML <mark> Element

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

Example
<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through
deleted text:

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

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted
text:

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

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is
sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H 2O:
Example
<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is
sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1]:

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

IMAGES
Images are very important to beautify as well as to depict many complex concepts in simple way on your web page.
This tutorial will take you through simple steps to use images in your web pages.
You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image
file name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be
displayed.

Example

To try following example, let's keep our HTML file test.htm and image file test.png in the same directory −

<!DOCTYPE html>
<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" >
</body>

</html>

Set Image Width/Height


You can set image width and height based on your requirement using width and height attributes. You can
specify width and height of the image in terms of either pixels or percentage of its actual size.
Example
<!DOCTYPE html>
<html>

<head>
<title>Set Image Width and Height</title>
</head>

<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height =
"100">
</body>

</html>

Set Image Border


By default, image will have a border around it, you can specify border thickness in terms of pixels using border
attribute. A thickness of 0 means, no border around the picture.
Example
<!DOCTYPE html>
<html>

<head>
<title>Set Image Border</title>
</head>

<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3">
</body>

</html>

Set Image Alignment


By default, image will align at the left side of the page, but you can use align attribute to set it in the center or
right.
Example
<!DOCTYPE html>
<html>

<head>
<title>Set Image Alignment</title>
</head>

<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align =
"right">
</body>
</html>

Background Image on a Page

If you want the entire page to have a background image, you must specify the background image
on the <body> element:

Example
Add a background image for the entire page:

<style>
body

{
background-image: url('img_girl.jpg');
}
</style>

Background Repeat

If the background image is smaller than the element, the image will repeat itself, horizontally and
vertically, until it reaches the end of the element:

Example
<style>
body

{
background-image: url('example_img_girl.jpg');
}
</style>

To avoid the background image from repeating itself, set the background-repeat property to no-
repeat.

Example
<style>
body

{
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Div Tag | HTML
The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web
page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>) and closing (</div>)
tag and it is mandatory to close the tag. The Div is the most usable tag in web development because it helps
us to separate out data in the web page and we can create a particular section for particular data or function
in the web pages.
• Div tag is Block level tag
• It is a generic container tag
• It is used to the group of various tags of HTML so that sections can be created and style can be applied to them.

<html>
<head>
<title>gfg</title>
<style type=text/css>

p{
background-color:gray;
margin: 10px;
}

div
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
</style>

</head>

<body>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>
<div > div tag </div>

</body>
</html>

LINKS
A webpage can contain various links that take you directly to other pages and even specific parts of a given
page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you
can create hyperlinks using text or images available on a webpage.
Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a>
tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked
document. Following is the simple syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>

Example
Let's try following example which links http://www.tutorialspoint.com at your page −
<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials
Point</a>
</body>

</html>

Click following link

Tutorials Point

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue


• A visited link is underlined and purple
• An active link is underlined and red

Example
Here, an unvisited link will be green with no underline. A visited link will be pink with no underline.
An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will
become red and underlined:

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

The target Attribute


We have used target attribute in our previous example. This attribute is used to specify the location where
linked document is opened. Following are the possible options −

Sr.No Option & Description

1
_blank
Opens the linked document in a new window or tab.

2
_self
Opens the linked document in the same frame.

3
_parent
Opens the linked document in the parent frame.

Example
Try following example to understand basic difference in few options given for target attribute.
<!DOCTYPE html>
<html>

<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>

<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
</body>
</html>

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

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

Internal linking
HTML internal link is linked within the same web page. This link can be an absolute path or relative path.

HTML internal link name is followed by the hash sign(#). You have to assign an id to refer section of your
page, which is referred to as an internal link to the same page.

When you click on an internal anchor link, you will scroll automatically to the referred section and display it on
your browser.

To understand internal link see the below examples.

▪ <a href="#lession1">Lession.1</a> link can be referred as <a id="lession1">Introduction of


Lession.1</a> automatically.

▪ <a href="#lession2">Lession.2</a> link can be referred as <div id="lession2">Introduction of


Lession.2</div> automatically.

Notes: You can not use name attribute instead of id attribute. Because name attribute not supported in
HTML5. Use the id attribute instead of.

Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#lession1">Lession.1</a><br />
<a href="#lession2">Lession.2</a><br />
<a href="#lession3">Lession.3</a><br />
<a href="#lession4">Lession.4</a><br />
<br />
<a id="lession1">Introduction of Lession.1</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a id="lession2">Introduction of Lession.2</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a id="lession3">Introduction of Lession.3</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a id="lession4">Introduction of Lession.4</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
</body>
</html>

HTML TABLES
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and
columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows
and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>

This will produce the following result −


Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not
need a border, then you can use border = "0".

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to
represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you
can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Header</title>
</head>

<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

This will produce the following result −

Cellpadding and Cellspacing Attributes


There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your
table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the
distance between cell borders and the content within a cell.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>

Colspan and Rowspan Attributes


You will use colspan attribute if you want to merge two or more columns into a single column. Similar way
you will use rowspan if you want to merge two or more rows.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Colspan/Rowspan</title>
</head>

<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

Tables Backgrounds
You can set table background using one of the following two ways −
• bgcolor attribute − You can set background color for whole table or just for one cell.
• background attribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these
attributes.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>

Here is an example of using background attribute. Here we will use an image available in /images directory.
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

Table Height and Width


You can set a table width and height using width and height attributes. You can specify table width or height
in terms of pixels or in terms of percentage of available screen area.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Width/Height</title>
</head>

<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>

</html>

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example
An unordered HTML list:

• Item
• Item
• Item
• Item

An ordered HTML 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.

Choose 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

The list items will be marked with bullets (small black circles) by default:

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

Example 2
<ul type=square>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example 3
<ul>
<li>Coffee</li>
<li type=circle>Tea</li>
<li type = square>Milk</li>
</ul>

Example 4
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
✓ Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

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

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

type="i" The list items will be numbered with lowercase roman numbers

The list items will be marked with numbers by default:

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

Start from mid counting

<ol start=500>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li type=”A” value=6>Milk</li>
</ol>

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

Uppercase Roman Numbers:


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

Lowercase Roman Numbers:


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

Example

<ol>
<li type=a value=10 >Coffee</li>
<li type=I value=20>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:
<!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>

Output

A Description List
Coffee

- black hot drink

Milk

- white cold drink

Html forms
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

Input Type Text


<input type="text"> defines a single-line text input field:

Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

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

First name:

Last name:
Input Type Password
<input type="password"> defines a password field:

Example
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">

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

Username:

Password:

The characters in a password

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:

Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

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

First name:
John

Last name:
Doe
Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values:

Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>

First name:
John

Last name:
Doe

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:

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

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


Male

Female

Other

Input Type Checkbox


<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example
<form>
<input type="checkbox">I have a bike<br>
<input type="checkbox">I have a car<br>
<input type="checkbox">I have a boat
</form>

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

I have a bike

I have a car

I have a boat

Input Type Button


<input type="button"> defines a button:

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

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.
Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

<!DOCTYPE html>

<html>

<body>

<h2>Show a Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

<form action="/action_page.php">

<label for="favcolor">Select your favorite color:</label>

<input type="color" id="favcolor" name="favcolor" value="#ff0000">

<input type="submit" value="Submit">

</form>

<p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).</p>

</body>

</html>

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.

Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

You can also use the min and max attributes to add restrictions to dates:
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

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.

Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

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 add ".com" to the keyboard to match email input.

Example
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>

Input Type File


The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

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.

Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>

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:

Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Input Type number

<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"
>
</form>
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:

Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

Time
<!DOCTYPE html>

<html>

<body>

<h1>Show a Time Input Control</h1>

<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>

<p>If the browser supports it, a time picker pops up when entering the input field.</p>

<form action="/action_page.php">

<label for="appt">Select a time:</label>

<input type="time">

<input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> type="time" is not supported in Safari or Internet Explorer 12 (or earlier).</p>

</body>

</html>

Input Type Tel


The <input type="tel"> is used for input fields that should contain a telephone number.

Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

HTML pattern Attribute


Element Attribute

<input> pattern

Input Example
An HTML form with an input field that can contain only three letters (no numbers or special
characters):

<!DOCTYPE html>

<html>

<body>

<h1>The input pattern attribute</h1>

<form action="/action_page.php">

<label for="country_code">Country code:</label>

<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>

<input type="submit">

</form>

<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Safari 10 (or earlier).</p>

</body>

</html>

Password Example
An <input> element with type="password" that must contain 6 or more characters:
<form action="/action_page.php">
Password: <input type="password" pattern="{6,}" title="Six or more characters">
<input type="submit">
</form>

Password Example
An <input> element with type="password" that must contain 8 or more characters that are of at
least one number, and one uppercase and lowercase letter:

<!DOCTYPE html>

<html>

<body>

<h1>The input pattern attribute</h1>

<p>A form with a password field that must contain 8 or more characters that are of at least
one number, and one uppercase and lowercase letter:</p>

<form action="/action_page.php">

<label for="pwd">Password:</label>

<input type="password" id="pwd" name="pwd" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"


title="Must contain at least one number and one uppercase and lowercase letter, and at
least 8 or more characters">

<input type="submit">

</form>

</body>

</html>

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

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>
HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

<!DOCTYPE html>

<html>

<body>

<h2>HTML Iframes</h2>

<p>You can use the height and width attributes to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

</body>

</html>

Iframe - Remove the Border


By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

Iframe - Target for a Link


An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example
<!DOCTYPE html>

<html>

<body>
<h2>Iframe - Target for a Link</h2>

<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>

</body>

</html>

Html- audio and video

The HTML <video> Element


To show a video in HTML, use the <video> element:

Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

HTML <video> Autoplay


To start a video automatically use the autoplay attribute:

Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The HTML <audio> Element


To play an audio file in HTML, use the <audio> element:

Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<Embed>

The <embed> tag defines a container for an external resource, such as a web page, a picture, a
media player,

To display a picture, it is better to use the <img> tag.

To display HTML, it is better to use the <iframe> tag.

To display video or audio, it is better to use the <video> and <audio> tags.

<!DOCTYPE html>
<html>

<head>
<title>HTML Embed Tag</title>
</head>

<body>
<embed src = "/html/yourfile.mid" width = "250" height = "100" />
</body>

</html>

You might also like