Scribd
Upload
17 views

Eswi HTML Unit 4_2 Notes

Uploaded by

spidey11453
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
17 views

Eswi HTML Unit 4_2 Notes

Uploaded by

spidey11453
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/ 49

HTML

HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.

 Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.

 As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.

Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.

Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document:

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here .... </p>
</body>
</html>
HTML

HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most
of the tags have their corresponding closing tags. For example, <html> has its closing
tag</html> and <body> tag has its closing tag </body> tag etc.

Above example of HTML document uses the following tags:

Tag Description

<!DOCTYPE...> This tag defines the document type and HTML version.

This tag encloses the complete HTML document and mainly comprises
<html> of document header which is represented by <head>...</head> and
document body which is represented by <body>...</body> tags.

This tag represents the document's header which can keep other HTML
<head>
tags like <title>, <link> etc.

The <title> tag is used inside the <head> tag to mention the
<title>
document title.

This tag represents the document's body which keeps other HTML tags
<body>
like <h1>, <div>, <p> etc.

<h1> This tag represents the heading.


HTML
p> This tag represents a paragraph.

HTML Document Structure


A typical HTML document will have the following structure:

Document declaration tag


<html>
<head>
Document header related tags
</head>

<body>
Document body related tags
</body>
</html>

We will study all the header and body tags in subsequent chapters, but for now let's see what
is document declaration tag.

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration tag is used by the web browser to understand the version of
the HTML used in the document. Current version of HTML is 5 and it makes use of the following
declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on
what version of HTML is being used. We will see more details on this while discussing
<!DOCTYPE...> tag along with other HTML tags.
HTML

Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also
has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that
heading.

Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<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>

This will produce the following result:


HTML

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p> tag as shown below in the
example:

Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

This will produce the following result:

Here is a first paragraph of text.


Here is a second paragraph of text.
Here is a third paragraph of text.
HTML

Line Break Tag


Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an empty element, where you do not need opening and closing tags, as
there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the line break, while if you miss the forward
slash character and just use <br> it is not valid in XHTML.

Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>

This will produce the following result:

Hello
You delivered your assignment on time.
Thanks
Mahnaz

Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.

Example
<!DOCTYPE html>
<html>
<head>
HTML

<title>Centring Content Example</title>


</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

This will produce the following result:

This text is not in the center.

This text is in the center.

Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates
a line from the current position in the document to the right margin and breaks the line
accordingly.

For example, you may want to give a line between two paragraphs as in the given example
below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
HTML

This will produce the following result:

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Again <hr /> tag is an example of the empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you
omit this space, older browsers will have trouble rendering the horizontal line, while if you
miss the forward slash character and just use <hr> it is not valid in XHTML

Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML
document. In these cases, you can use the preformatted tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.

Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
HTML

An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag, where the element name is preceded by a forward slash as shown below
with few tags:

Start Tag Content End Tag

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

<h1> This is heading content. </h1>

<div> This is division content. </div>

<br />

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There


are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and
<br /> elements. These are known as void elements.

HTML documents consists of a tree of these elements and they specify how HTML documents
should be built, and what kind of content should be placed in what part of an HTML document.

HTML Tag vs. Element


An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag.

For example, <p> is starting tag of a paragraph and </p> is closing tag of the same
paragraph but <p>This is paragraph</p> is a paragraph element.

Nested HTML Elements


It is very much allowed to keep one HTML element inside another HTML element:

Example
HTML
HTML

<head>

<title>Nested Elements Example</title>


</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>

This will display the following result:

This is italic heading

This is underlined paragraph


HTML

If you use a word processor, you must be familiar with the ability to make text bold, italicized,
or underlined; these are just three of the ten options available to indicate how text can appear
in HTML and XHTML.

Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

This will produce the following result:

The following word uses a bold typeface.

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
HTML

<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

This will produce the following result:

The following word uses an italicized typeface.

Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown
below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>

Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text as shown below:

Example
<!DOCTYPE html>
<html>
<head>
HTML

<title>Strike Text Example</title>


</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>

This will produce the following result:

The following word uses a strikethrough typeface.

Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for example,
the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the
same width.

Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>

This will produce the following result:

The following word uses a monospaced typeface.

Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the
same size as the characters surrounding it but is displayed half a character's height above
the other characters.
HTML

Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>

This will produce the following result:

The following word uses a superscript typeface.

Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the
same as the characters surrounding it, but is displayed half a character's height beneath the
other characters.

Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>

This will produce the following result:

The following word uses a subscript typeface.


HTML

Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.

Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

This will produce the following result:

Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.

Example
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

This will produce the following result:


HTML

Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of
the text surrounding it as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>

This will produce the following result:

The following word uses a big typeface.

Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the
rest of the text surrounding it as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
HTML

</html>

This will produce the following result:

The following word uses a small typeface.

Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to
indicate that all of the elements within that <div> element relate to the footnotes. You might
then attach a style to this <div> element so that they appear using a special set of style rules.

Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">


<h5>Content Articles</h5>
<p>Actual content goes here .... </p>
</div>
</body>
</html>

This will produce the following result:


HTML

HOME | CONTACT | ABOUT

CONTENT ARTICLES

Actual content goes here.....

The <span> element, on the other hand, can be used to group inline elements only. So, if
you have a part of a sentence or paragraph which you want to group together, you could use
the <span> element as follows

Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span
style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>

This will produce the following result:

This is the example of span tag and the div tag along with CSS

These tags are commonly used


HTML

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

Attribute Description

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

content Specifies the property's value.

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

http- Used for http response message headers. For example, http-equiv can be
equiv 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:

Hello HTML5!

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>
HTML LINKS AND NAVIGATION

<nav>: The Navigation Section element


The <nav> HTML element represents a section of a page whose purpose is
to provide navigation links, either within the current document or to other
documents. Common examples of navigation sections are menus, tables of
contents, and indexes.

<!DOCTYPE html>

<html>

<body>

<h1>The nav element</h1>

<p>The nav element defines a set of navigation links:</p>

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/python/">Python</a>

</nav>

</body>

</html>
Output:

Definition and Usage

The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major blocks of navigation links.

Browsers, such as screen readers for disabled users, can use this element to
determine whether to omit the initial rendering of this content.
Image – Image maps

In this article, we will know the HTML Image, how to add the image in HTML, along with
knowing its implementation & usage through the examples. In earlier times, the web pages
only contains textual contents, which made them appear quite boring and uninteresti ng.
Fortunately, it wasn’t long enough that the ability to embed images on web pages was
added for users. In this article, we will know how to add images to the web page that will
make the website attractive & various methods to insert the images.
There are 2 ways to insert the images into a webpage:
 By providing a full path or address (URL) to access an internet file.
 By providing the file path relative to the location of the current web page file.
We will first discuss inserting the image to the webpage & simultaneously, we will
understand both the above approaches.
Adding images on a webpage: The <img> tag is used to add or embed the images to a
webpage/website. The “img” tag is an empty tag, which means it can contain only a list of
attributes and it has no closing tag. The addition of the images improves the quality along
with enhancing the design structure, appearance of the webpage. Nowadays, a website
does not directly add images to a web page, as the images are linked to web pages by
using the <img> tag which holds space for the image.

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

Attribute: The <img> tag has following attributes:


 src: It is used to specify the path to the image.
 alt: It is used to specify an alternate text for the image. It is useful as it informs the user
about what the image means and also due to any network issue if the image cannot
be displayed then this alternate text will be displayed.

<!DOCTYPE html>
<html>
<body>

<h1>The img element</h1>

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


</body>
</html>

Output:

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.
<!DOCTYPE html>

<html>

<body>

<h2>Image Maps</h2>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page
and read more about the topic:</p>

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


height="379">

<map name="workmap">

<area shape="rect" coords="34,44,270,350" alt="Computer"


href="computer.htm">

<area shape="rect" coords="290,172,333,250" alt="Phone"


href="phone.htm">

<area shape="circle" coords="337,300,44" alt="Cup of coffee"


href="coffee.htm">

</map>

</body>

</html>

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

HTML Ordered List or Numbered List


In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>

Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

HTML Unordered List or Bulleted List


In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list
also. The Unordered list starts with <ul> tag and list items start with the <li> tag.
1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>

Output:

o Aries
o Bingo
o Leo
o Oracle

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>

Output:

Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
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 −


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.

<!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>
Cell padding and Cell spacing 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.

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

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

<!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>
HTML Forms

What is HTML <form>?

<form> is a HTML element to collect input data with containing interactive controls. It
provides facilities to input text, number, values, email, password, and control fields such
as checkboxes, radio buttons, submit buttons, etc., or in other words, form is a container
that contains input elements like text, email, number, radio buttons, checkboxes, submit
buttons, etc. Forms are generally used when you want to collect data from the user. For
example, a user wants to buy a bag online, so he/she has to first enter their shipping
address in the address form and then add their payment details in the payment form to
place an order.
Forms are created by placing input fields within paragraphs, preformatted text, lists and
tables. This gives considerable flexibility in designing the layout of forms.

Syntax:

<form>
<!--form elements-->
</form>

Form elements

These are the following HTML <form> elements:


 <label>: It defines label for <form> elements.
 <input>: It is used to get input data from the form in various types such as text,
password, email, etc by changing its type.
 <button>: It defines a clickable button to control other elements or execute a
functionality.
 <select>: It is used to create a drop-down list.
 <textarea>: It is used to get input long text content.
Textbox in HTML Form

In an HTML form, we use the <input> tag by assigning type attribute value to text to
input single line input. To define type attribute see the below syntax.
Tip: The default value of the type attribute is “text”.
Syntax:

<input type="text" />

Or shorthand for “text” type:

<input />

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<form>

<p>
<label>Username : <input type="text" /></label>
</p>

<p>
<label>Password : <input type="password" /></label>
</p>

<p>
<button type="submit">Submit</button>
</p>

</form>
</body>
</html>
Radio Button in an HTML Form

To create a radio button, we use the <input> tag following by radio type to provide users
to choose a limited number of choices.
Syntax:
<input type="radio" name="radio_button_name" value="radio_button_value" />
Note: The radio button must have shared the same name to be treated as a group.
Note: The value attribute defines the unique value associated with each radio button.
The value is not shown to the user, but is the value that is sent to the server on “submit”
to identify which radio button that was selected.

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h2>Select your gender</h2>

<form>
<label>Male<input type="radio" name="gender" value="male" /></label>

<label>Female<input type="radio" name="gender" value="female" /></label>

</form>

</body>

</html>

Output:

Checkbox in an HTML Form

To create a checkbox in an HTML form, we use the <input> tag followed by the input
type checkbox. It is a square box to tick to activate this. It used to choose more options
at a time.
Syntax:
<input type="checkbox" name="select_box_name" value="select_box_value" />
Note: the “name” and “value” attributes are used to send the checkbox data to the
server.

<!DOCTYPE html>

<html>

<head>

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

<body>

<h2>Choose Language</h2>

<form>

<ul style="list-style-type:none;">

<li><input type="checkbox" name="language" value="hindi" />Hindi</li>

<li><input type="checkbox" name="language" value="english" />English</li>

<li><input type="checkbox" name="language" value="sanskrite" />Sanskrit</li>

</ul>

</form>

</body>

</html>

Combobox in an HTML Form

Combobox is used to create a drop-down menu in your form which contains multiple
options. So, to create an Combobox in an HTML form, we use the <select> tag with
<option> tag. It is also known as a drop-down menu.
Syntax:
<select name="select_box_name">
<option value="value1">option1</option>
<option value="value2">option2</option>
<option value="value3">option3</option>
</select>

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Select Your Nationality</h2>
<form>
<select name="language">
<option value="indian">Indian</option>
<option value="nepali">Nepali</option>
<option value="others">Others</option>
</select>
</form>
</body>
</html>
Submit button in an HTML Form

In the HTML form, submit button is used to submit the details of the form to the form
handler. A form handler is a file on the server with a script that is used to process input
data.
Syntax:
<button type="submit">submit</button>

TextArea in an HTML Form

In the HTML form, a text area is used to add comments or reviews, or addresses to the
form, in other words, the text area is a multi-line text input control. It contains an
unlimited number of characters, the text renders in a fixed-width font, and the size of the
text area is given by the <rows> and <cols> attributes. To create a text area in the form
use the <textarea> tag.
Syntax:
<textarea name="textarea_name">content</textarea>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome CSE</h2>
<form>
<textarea name="welcomeMessage" rows="3" cols="40">Hi all</textarea>
</form>
</body>
</html>
HTML Semantic Elements

Semantic elements = elements with a meaning.

What are Semantic Elements?


A semantic element clearly describes its meaning to both the browser and the
developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

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

Semantic Elements in HTML


Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer"> to indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different parts of
a web page:

 <article>
 <aside>
 <footer>
 <header>
 <main>
 <nav>
 <section>
HTML <section> Element
The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping of content,


typically with a heading."

Examples of where a <section> element can be used:

 Chapters
 Introduction
 News items
 Contact information

HTML <article> Element


The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.

Examples of where the <article> element can be used:

 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles

HTML <header> Element


The <header> element represents a container for introductory content or a set of
navigational links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)


 logo or icon
 authorship information

HTML <footer> Element


The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents

HTML <nav> Element


The <nav> element defines a set of navigation links.

HTML <aside> Element


The <aside> element defines some content aside from the content it is placed in (like a
sidebar).

The <aside> content should be indirectly related to the surrounding content.

For example – Refer Lab task


How to Embed Audio and Video in HTML?
To embed audio in HTML, we use the <audio> tag. Before HTML5, audio cannot be
added to web pages in the Internet Explorer era. To play audio, we used web
plugins like Flash. After the release of HTML5, it is possible. This tag supports
Chrome, Firefox, Safari, Opera, and Edge in three audio formats – MP3, WAV,
OGG. Only Safari browser doesn’t support OGG audio format.

Syntax:
<audio>
<source src="file_name" type="audio_file_type">
</audio>

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play audio</h2>
<audio src="./test.mp3" controls></audio>
</body>
</html>
How to embed video in HTML?

To embed video in HTML, we use the <video> tag. It contains one or more video
sources at a time using <source> tag. It supports MP4, WebM, and Ogg in all modern
browsers. Only Ogg video format doesn’t support in Safari browser.
Syntax
<video>
<source src="file_name" type="video_file_type">
</video>
Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play video</h2>
<video src="./test.mp4" controls></video>
</body>
</html>
What is HTML Web Storage?
With web storage, web applications can store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies, included in every server
request. Web storage is more secure, and large amounts of data can be stored locally,
without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never
transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can
store and access the same data.

HTML Web Storage Objects


HTML web storage provides two objects for storing data on the client:

 window.localStorage - stores data with no expiration date


 window.sessionStorage - stores data for one session (data is lost when the
browser tab is closed)

Before using web storage, check browser support for localStorage and sessionStorage:

if (typeof(Storage) !== "undefined") {


// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
The localStorage Object
The localStorage object stores the data with no expiration date. The data will not be
deleted when the browser is closed, and will be available the next day, week, or year.

Example
// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Try it Yourself »

The sessionStorage Object


The sessionStorage object is equal to the localStorage object, except that it stores the
data for only one session. The data is deleted when the user closes the specific browser
tab.

The following example counts the number of times a user has clicked a button, in the
current session:

Example
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

You might also like