Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
16 views

HTML Document1

Uploaded by

Chirag Gujral
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

HTML Document1

Uploaded by

Chirag Gujral
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 37

HTML Introduction

HTML is the standard markup language for creating Web pages.

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
 HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.

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>

Example Explained
 The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
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>
Note: Some HTML elements have no content (like the <br> element).
These elements are called empty elements. Empty elements do not
have an end tag!

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 Editors
Learn 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 in that using a simple text editor is a good way to learn HTML.

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

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:

Eg:
<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

</body>

</html>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

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

HTML Text Formatting


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

HTML Formatting Elements


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

<b>This text is bold</b>

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

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

HTML <i> and <em> Elements


The HTML <i> element defines a part of text in an alternate voice or mood.
The content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from
another language, a thought, a ship name, etc.

<i>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is
typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis,
using verbal stress.

<em>This text is emphasized</em>


HTML <small> Element
The HTML <small> element defines smaller text:

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

HTML <mark> Element


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

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

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

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

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

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


HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced image.

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

The <img> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">

The src Attribute


The required src attribute specifies the path (URL) to the image.

Note: When a web page loads; it is the browser, at that moment, that gets
the image from a web server and inserts it into the page. Therefore, make
sure that the image actually stays in the same spot in relation to the web
page, otherwise your visitors will get a broken link icon. The broken link icon
and the alt text are shown if the browser cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

The alt Attribute


The required 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).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:

Example
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">

HTML Anchor
The HTML anchor tag defines a hyperlink that links one page to another
page. It can create hyperlink to other web page as well as files, location,
or any URL. The "href" attribute is the most important attribute of the
HTML a tag. and which links to destination page or URL.

href attribute of HTML anchor tag


The href attribute is used to define the address of the file to be linked. In
other words, it points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Let's see an example of HTML anchor tag.

1. <a href="second.html">Click for Second Page</a>

HTML Lists
HTML Lists are used to specify lists of information. All lists may contain
one or more list elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

Note: We can create a list inside another list, which will be termed as nested List

HTML Ordered List or Numbered List


HTML Ordered List or Numbered List displays elements in numbered
format. The HTML ol tag is used for ordered list. We can use ordered list to
represent items either in numerical order format or alphabetical order
format, or any format where an order is emphasized. There can be
different types of numbered list:

o Numeric Number (1, 2, 3)


o Capital Roman Number (I II III)
o Small Romal Number (i ii iii)
o Capital Alphabet (A B C)
o Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol>


tag.

Type Description

Type This is the default type. In this type, the list items are numbered
"1" with numbers.

Type In this type, the list items are numbered with upper case roman
"I" numbers.

Type In this type, the list items are numbered with lower case roman
"i" numbers.

Type In this type, the list items are numbered with upper case letters.
"A"

Type In this type, the list items are numbered with lower case letters.
"a"
HTML Ordered List Example
Let's see the example of HTML ordered list that displays 4 topics in
numbered list. Here we are not defining type="1" because it is the default
type.

1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

start attribute
The start attribute is used with ol tag to specify from where to start the
list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with


"E".

<ol type="a" start="5"> : It will show lower case alphabets starting


with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting
with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting
with "v".

1. <ol type="i" start="5">


2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

reversed Attribute:
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5
version. If you use the reversed attribute with
tag then it will numbered the list in descending order (7, 6, 5, 4......1).

Example:
1. <ol reversed>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>

HTML Unordered List or Bulleted List


HTML Unordered List or Bulleted List displays elements in bulleted
format . We can use unordered list where we do not need to display items
in any particular order. The HTML ul tag is used for the unordered list.
There can be 4 types of bulleted list:

o disc
o circle
o square
o none

To represent different ordered lists, there are 4 types of attributes in <ul>


tag.

Type Description

Type "disc" This is the default style. In this style, the list items are
marked with bullets.

Type In this style, the list items are marked with circles.
"circle"

Type In this style, the list items are marked with squares.
"square"

Type In this style, the list items are not marked .


"none"
HTML Unordered List Example
1. <ul>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ul>

HTML Description List or Definition List


HTML Description list is also a list style which is supported by HTML and
XHTML. It is also known as definition list where entries are listed like a
dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary,
list of terms or other name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.


2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10.</dl>

HTML Table
HTML table tag is used to display data in tabular form (row * column).
There can be many columns in a row.
We can create a table to display data in tabular form, using <table>
element, with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header
section, navigation bar, body content, footer section etc. But it is
recommended to use div tag over table to manage the layout of the
page .

HTML Table Example


Let's see the example of HTML table tag. It output is shown above.

1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>

HTML Table with Border


There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML


2. By border property in CSS

1) HTML Border attribute


You can use border attribute of table tag in HTML to specify border. But it
is not recommended now.

1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
2) CSS Border property
It is now recommended to use border property of CSS to specify border in
table.

1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>

You can collapse all the borders in one border by border-collapse property. It will
collapse the border into one.

1. <style>
2. table, th, td {
3. border: 2px solid black;
4. border-collapse: collapse;
5. }
6. </style>

HTML Table with colspan


If you want to make a cell span more than one column, you can use the
colspan attribute.

it will divide one cell/row into multiple columns, and the number of columns
depend on the value of colspan attribute.
Eg:-
<th colspan="2">Mobile No.</th>

HTML Table with rowspan


If you want to make a cell span more than one row, you can use the
rowspan attribute.

It will divide a cell into multiple rows. The number of divided rows will
depend on rowspan values.
Let's see the example that span two rows.

Eg:-

1. <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>

HTML table with caption


HTML caption is diplayed above the table. It must be used after table tag
only.

1. <caption>Student Records</caption>

HTML Quotation and


Citation Elements
HTML <blockquote> for
Quotations
The HTML <blockquote> element defines a section that is quoted from another
source.

Browsers usually indent <blockquote> elements.

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

HTML <q> for Short Quotations


The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.


Example
<p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>

HTML <abbr> for Abbreviations


The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation


systems and search-engines.

Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

Example
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>

HTML <address> for Contact


Information
The HTML <address> tag defines the contact information for the author/owner
of a document or an article.

The contact information can be an email address, URL, physical address,


phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem,
a song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional


Override
BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example
<bdo dir="rtl">This text will be written from right to left</bdo>

Create a Bookmark in HTML


Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with
the bookmark.

Example
First, use the id attribute to create a bookmark:

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

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:
Example
<a href="#C4">Jump to Chapter 4</a>

you can also add a link to a bookmark on another page:

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

HTML Block and Inline


Elements
Every HTML element has a default display value, depending on what type
of element it is.

There are two display values: block and inline.

Block-level Elements
A block-level element always starts on a new line.

A block-level element always takes up the full width available (stretches out
to the left and right as far as it can).

A block level element has a top and a bottom margin, whereas an inline
element does not.

The <div> element is a block-level element.

Example
<div>Hello World</div>

Inline Elements
An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.


Example
<span>Hello World</span>

Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

Here is the HTML source code for the image map above:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="
computer.htm">

</map>

The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.

Create Image Map


Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image
by using the required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute .

The Areas
Then, add the clickable areas.
A clickable area is defined using an <area> element.

Shape
You must define the shape of the clickable area, and you can choose one of
these values:

 rect - defines a rectangular region


 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

You must also define some coordinates to be able to place the clickable area
onto the image.

HTML Iframes
An HTML iframe is used to display a web page within a web page.

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.

Syntax
<iframe src="url" title="description"></iframe>

Tip: It is a good practice to always include a title attribute for the <iframe>.
This is used by screen readers to read out what the content of the iframe is.

Iframe - Set Height and Width


Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Ifr
ame Example"></iframe>
Or you can add the style attribute and use the
CSS height and width properties:

Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" t
itle="Iframe Example"></iframe>

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>

With CSS, you can also change the size, style and color of the iframe's
border:

Example
<iframe src="demo_iframe.htm" style="border:2px solid
red;" 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
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
Example"></iframe>

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


s.com</a></p>
HTML Forms
An HTML form is used to collect user input. The user input is most often
sent to a server for processing.

Example
First name:
John

Last name:
Doe

Submit

The <form> Element


The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <label> Element


Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks
the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

Radio Buttons
The <input type="radio"> defines a radio button.

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

Example
A form with radio buttons:

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="
JavaScript">
<label for="javascript">JavaScript</label>
</form>

The Name Attribute for <input>


Notice that each input field must have a name attribute to be submitted.

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

Example
This example will not submit the value of the "First name" input field:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
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 Displays a checkbox (for selecting zero or more of


type="checkbox"> many choices)

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

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

HTML Input Types


Here are the different input types you can use in HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

Tip: The default value of the type attribute is "text".

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">
</form>

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

Username:

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:

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

Submit

If you omit the submit button's value attribute, the button will get a default
text:

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">
</form>

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>

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

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
<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="
JavaScript">
<label for="javascript">JavaScript</label>
</form>

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

HTML

CSS

JavaScript

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" id="vehicle1" name="vehicle1" value="Bik
e">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car
">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boa
t">
<label for="vehicle3"> I have a boat</label>
</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!">

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

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>

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" nam
e="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 Hidden


The <input type="hidden"> defines a hidden input field (not visible to a user).

A hidden field let web developers include data that cannot be seen or
modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated
when the form is submitted.

Note: While the value is not displayed to the user in the page's content, it is
visible (and can be edited) using any browser's developer tools or "View
Source" functionality. Do not use hidden inputs as a form of security!
Example
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</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 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>

Input Type Search


The <input type="search"> is used for search fields (a search field behaves
like a regular text field).

Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>

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>

Input Type Time


The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>

Input Type Url


The <input type="url"> is used for input fields that should contain a URL
address.

Depending on browser support, the url field can be automatically validated


when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard
to match url input.

Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>

Input Type Week


The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>

HTML <select> Tag


Example
Create a drop-down list with four options:
<label for="cars">Choose a car:</label>

<select name="cars" id="cars">


<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Definition and Usage


The <select> element is used to create a drop-down list.

The <select> element is most often used in a form, to collect user input.

The name attribute is needed to reference the form data after the form is
submitted (if you omit the name attribute, no data from the drop-down list will
be submitted).

The id attribute is needed to associate the drop-down list with a label.

Marquee tag
The <marquee> tag is a container tag of HTML is implemented for creating scrollable
text or images within a web page from either left to right or vice versa, or top to
bottom or vice versa. But this tag has been deprecated in the new version of
HTML, i.e., HTML 5.
The different attributes of <marquee> tag are

Attribute Description

width provides the width or breadth of a marquee. For example width="10" or


width="20%"

height provides the height or length of a marquee. For example height="20" or


height="30%"

direction provides the direction or way in which your marquee will allow you to
scroll. The value of this attribute can be: left, right, up or down

scrolldelay provides a feature whose value will be used for delaying among each
jump.

scrollamount provides value for speeding the marquee feature


behavior provides the scrolling type in a marquee. That scrolling can be like
sliding, scrolling or alternate

loop provides how many times the marquee will loop

bgcolor provides a background color where the value will be either the name of
the color or the hexadecimal color-code.

vspace provides a vertical space and its value can be like: vspace="20" or
vspace="30%"

hspace provides a horizontal space and its value can be like: vspace="20" or
vspace="30%"

Video tag
This is a new feature introduced in HTML for embedding video and is used to
incorporate movie files and video streaming. It is done using the <video> tag, which
supports three video formats currently. These are:

 MP4
 Ogg and
 WebM

Out of these three formats, the most common format in which all the browsers (such
as Internet Explorer, Google Chrome, Firefox, Safari, Opera) supports is the mp4 file
format.

Video tag attribute


 src: This is used to set the URL or path from where the video file will get fetched.
 autoplay: This attribute specifies that as soon as your web page gets ready, the
video embedded in your page gets played at that moment.
 controls: This tells the browser what player-controls / buttons (such as play/pause,
etc.) to be displayed on the page with the video.
 width and height: This is used to assign the player's width and height in which the
video will be shown.
 muted: This tells whether the audio part of the specified video should be kept mute
or not.
Here's a code snippet as to how video can be incorporated:

Example

<video width="320" height="240" controls autoplay muted>


<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>

You might also like