Scribd
Upload
34 views

HTML Web Technology

Uploaded by

ayush2003kanpur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

HTML Web Technology

Uploaded by

ayush2003kanpur
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

PSIT-Pranveer Singh Institute of Technology

Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

HTML: HYPERTEXT MARKUP LANGUAGE


1. INTRODUCTION

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the
meaning and structure of web content. Other technologies besides HTML are generally used to describe
a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

"Hypertext" refers to links that connect web pages to one another, either within a single website or
between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and
linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML
markup includes special "elements" such as
<head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>,
<aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <vi
deo>, <ul>, <ol>, <li> and many others.

2. THE HISTORY OF HTML

HTML was invented by Tim Berners-Lee, a physicist at the CERN research institute in
Switzerland. He came up with the idea of an Internet-based hypertext system. Hypertext means a
text that contains references (links) to other texts that viewers can access immediately. He
published the first version of HTML in 1991, consisting of 18 HTML tags. Since then, each new
version of the HTML language came with new tags and attributes (tag modifiers) to the markup.
According to Mozilla Developer Network’s HTML Element Reference, currently, there are 140
HTML tags, although some of them are already obsolete (not supported by modern browsers). Due
to a quick rise in popularity, HTML is now considered an official web standard. The HTML
specifications are maintained and developed by the World Wide Web Consortium (W3C). You
can check out the latest state of the language anytime on W3C’s website. The biggest upgrade of
the language was the introduction of HTML5 in 2014. It added several new semantic tags to the
markup, that reveal the meaning of their own content, such as <article>, <header>, and <footer>.

3. HTML EVOLUTION. WHAT DIFFERS BETWEEN HTML AND HTML5?

Since the first days, HTML has gone through an incredible evolution. W3C constantly publish
new versions and updates, while historical milestones get dedicated names as well. HTML4 (these
days commonly referred to as “HTML”) was published in 1999, while the latest major version
came out in 2014. Named HTML5, the update has introduced many new features to the language.
One of the most anticipated features of HTML5 is native support for audio and video embedding.
Instead of using Flash player, we can simply embed videos and audio files to our web pages using
the new <audio></audio> and <video></video> tags. It also includes in-built support for scalable
vector graphics (SVG) and MathML for mathematical and scientific formulas. HTML5 introduced
a few semantic improvements as well. The new semantic tags inform br owsers about the meaning
of content, which benefits both readers and search engines.
The most popular semantic tags are:

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<article></article>, <section></section>, <aside></aside>, <header></header>,


and <footer></footer>.

4. PROS AND CONS OF HTML

Like most things, HTML comes with a handful of strengths and limitations.
Pros:
• A widely used language with a lot of resources and a huge community behind.
• Runs natively in every web browser.
• Comes with a flat learning curve.
• Open-source and completely free.
• Clean and consistent markup.
• The official web standards are maintained by the World Wide Web Consortium (W3C).
• Easily integrable with backend languages such as PHP and Node.js.

Cons:
• Mostly used for static web pages. For dynamic functionality, you may need to use
JavaScript or a backend language such as PHP.
• It does not allow the user to implement logic. As a result, all web pages need to be created
separately, even if they use the same elements, e.g. headers and footers.
• Some browsers adopt new features slowly.
• Browser behavior is sometimes hard to predict (e.g. older browsers don’t always render
newer tags).

5. HOW ARE HTML, CSS, AND JAVASCRIPT RELATED?

While HTML is a powerful language, it isn’t enough to build a professional and fully responsive
website. We can only use it to add text elements and create the structure of the content. However,
HTML works extremely well with two other frontend languages: CSS (Cascading Style Sheets),
and JavaScript. Together, they can achieve rich user experience and implement advanced
functions.

• CSS is responsible for stylings such as background, colors, layouts, spacing, and
animations.

• JavaScript lets you add dynamic functionality such as sliders, pop-ups, and photo galleries.

6. SO…WHAT IS HTML?

HTML is the main markup language of the web. It runs natively in every browser and is maintained
by the World Wide Web Consortium. You can use it to create the content structure of websites

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

and web applications. It’s the lowest level of frontend technologies, that serves as the basis for
styling you can add with CSS and functionality you can implement using JavaScript.

7. HOW DOES HTML WORK?

HTML documents are files that end with a .html or .htm extension. You can view then using any
web browser (such as Google Chrome, Safari, or Mozilla Firefox). The browser reads the HTML
file and renders its content so that internet users can view it. Usually, the average website includes
several different HTML pages. For instance: home pages, about pages, contact pages would all
have separate HTML documents. Each HTML page consists of a set of tags (also
called elements), which you can refer to as the building blocks of web pages. They create a
hierarchy that structures the content into sections, paragraphs, headings, and other content bl ocks.
Most HTML elements have an opening and a closing that use the <tag></tag> syntax.
Below, you can see a code example of how HTML elements can be structured:

<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="Image">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>

• The outmost element is a simple division (<div></div>) you can use to mark up bigger
content sections.
• It contains a heading (<h1></h1>), a subheading (<h2></h2>), two paragraphs
(<p></p>), and an image (<img>).
• The second paragraph includes a link (<a></a>) with a href attribute that contains the
destination URL.
• The image tag also has two attributes: src for the image path and alt for the image
description.

8. HTML BASICS

HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content.
For example, content could be structured within a set of paragraphs, a list of bulleted points, or using
images and data tables.

HTML is a markup language that defines the structure of your content. HTML consists of a series
of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain
way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else,

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

can italicize words, can make the font bigger or smaller, and so on. For example, take the following line
of content:

My cat is very grumpy

If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph
tags:

<p>My cat is very grumpy</p>

HTML tags have two main types: block-level and inline tags.

1. Block-level elements take up the full available space and always start a new line in the
document. Headings and paragraphs are a great example of block tags.

2. Inline elements only take up as much space as they need and don’t start a new line on the
page. They usually serve to format the inner contents of block-level elements. Links and
emphasized strings are good examples of inline tags.

8.1. BLOCK-LEVEL TAGS

The three block level tags every HTML document needs to contain are <html>, <head>,
and <body>.

1. The <html></html> tag is the highest level element that encloses every HTML page.

2. The <head></head> tag holds meta information such as the page’s title and charset.

3. Finally, the <body></body> tag encloses all the content that appears on the page.
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

• Headings have 6 levels in HTML. They range from <h1></h1> to <h6></h6>, where h1
is the highest-level heading and h6 is the lowest one. Paragraphs are enclosed by <p></p>,
while blockquotes use the <blockquote> </blockquote> tag.

• Divisions are bigger content sections that typically contain several paragraphs, images,
sometimes blockquotes, and other smaller elements. We can mark them up using
the <div></div> tag. A div element can contain another div tag inside it as well.

• You may also use <ol></ol> tags for ordered lists and <ul></ul> for unordered ones.
Individual list items must be enclosed by the <li></li> tag. For example, this is how a
basic unordered list looks like in HTML:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

8.2. INLINE TAGS

Many inline tags are used to format text. For example, a <strong></strong> tag would render an
element in bold, whereas <em></em> tags would show it in italics.
Hyperlinks are also inline elements that require <a></a> tags and href attributes to indicate the
link’s destination:
<a href="https://example.com/">Click me!</a>

Images are inline elements too. You can add one using <img> without any closing tag. But you
will also need to use the src attribute to specify the image path, for example:
<img src="/images/example.jpg" alt="Example image">

8.3. EMPTY ELEMENTS

Some elements have no content and are called empty elements. Take the <img> element that we already
have in our HTML page:

<img src="images/firefox-icon.png" alt="My test image">

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

9. ANATOMY OF AN HTML ELEMENT

The main parts of our element are as follows:

1. The opening tag: This consists of the name of the element (in this case, p), wrapped in opening
and closing angle brackets. This states where the element begins or starts to take effect — in
this case where the paragraph begins.
2. The closing tag: This is the same as the opening tag, except that it includes a forward
slash before the element name. This states where the element ends — in this case where the
paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead
to strange results.
3. The content: This is the content of the element, which in this case, is just text.
4. The element: The opening tag, the closing tag, and the content together comprise the element.
Elements can also have attributes that look like the following:

Attributes contain extra information about the element that you don't want to appear in the actual content.
Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to
give the element a non-unique identifier that can be used to target it (and any other elements with the
same class value) with style information and other things.

An attribute should always have the following:


1. A space between it and the element name (or the previous attribute, if the element already has
one or more attributes).
2. The attribute name followed by an equal sign.
3. The attribute value wrapped by opening and closing quotation marks.

Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters " ' ` = < > )
can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more
consistent and understandable.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

10. NESTED ELEMENTS

You can put elements inside other elements too — this is called nesting. If we wanted to state that our
cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is
to be strongly emphasized:

<p>My cat is <strong>very</strong> grumpy.</p>

You do however need to make sure that your elements are properly nested. In the example above, we
opened the <p> element first, then the <strong> element; therefore, we have to close
the <strong> element first, then the <p> element. The following is incorrect:

<p>My cat is <strong>very grumpy.</p></strong>

The elements have to open and close correctly so that they are clearly inside or outside one another. If
they overlap as shown above, then your web browser will try to make the best guess at what you were
trying to say, which can lead to unexpected results. So don't do it!

This contains two attributes, but there is no closing </img> tag and no inner content. This is because an
image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in
the place it appears.

11. ANATOMY OF AN HTML DOCUMENT

That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll
look at how individual elements are combined to form an entire HTML page. Let's revisit the code we
put into our index.html example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
Here, we have the following:

a) <!DOCTYPE html> — doctype. It is a required preamble. In the mists of time, when HTML
was young (around 1991/92), doctypes were meant to act as links to a set of rules that the
HTML page had to follow to be considered good HTML, which could mean automatic error

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

checking and other useful things. However these days, they don't do much and are basically
just needed to make sure your document behaves correctly. That's all you need to know for
now.
b) <html></html> — the <html> element. This element wraps all the content on the entire
page and is sometimes known as the root element.
c) <head></head> — the <head> element. This element acts as a container for all the stuff
you want to include on the HTML page that isn't the content you are showing to your page's
viewers. This includes things like keywords and a page description that you want to appear
in search results, CSS to style our content, character set declarations, and more.
d) <meta charset="utf-8"> — This element sets the character set your document should use to
UTF-8 which includes most characters from the vast majority of written languages.
Essentially, it can now handle any textual content you might put on it. There is no reason
not to set this and it can help avoid some problems later on.
e) <title></title> — the <title> element. This sets the title of your page, which is the title that
appears in the browser tab the page is loaded in. It is also used to describe the page when
you bookmark/favorite it.
f) <body></body> — the <body> element. This contains all the content that you want to show
to web users when they visit your page, whether that's text, images, videos, games, playable
audio tracks, or whatever else.

12. IMAGES

Let's turn our attention to the <img> element again:

<img src="images/firefox-icon.png" alt="My test image">

As we said before, it embeds an image into our page in the position it appears. It does this via
the src (source) attribute, which contains the path to our image file.

We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users
who cannot see the image, possibly because of the following reasons:

1. They are visually impaired. Users with significant visual impairments often use tools called
screen readers to read out the alt text to them.
2. Something has gone wrong causing the image not to display. For example, try deliberately
changing the path inside your src attribute to make it incorrect. If you save and reload the page,
you should see something like this in place of the image:

The keywords for alt text are "descriptive text". The alt text you write should provide the reader with
enough information to have a good idea of what the image conveys. In this example, our current text of
"My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox
logo: a flaming fox surrounding the Earth."

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

12. HEADINGS

Heading elements allow you to specify that certain parts of your content are headings — or subheadings.
In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too.
HTML contains 6 heading levels, <h1>–<h6>, although you'll commonly only use 3 to 4 at most:

<h1>My main title</h1>

<h2>My top level heading</h2>

<h3>My subheading</h3>

<h4>My sub-subheading</h4>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

13. PARAGRAPHS

HTML paragraph HTML <p> tag is used to define a paragraph in a webpage. It is a Paired Tag, i.e., it
comes with an opening <p> and a closing </p> tag.

A <p> tag is very important tag, as all the content written on a website needs to get formatted in the
form of paragraphs. Browsers automatically add blank lines above and below a paragraph to separate it
from other content or other paragraphs on the page.

HTML Paragraphs are block level elements, i.e., a new paragraph will always start from a new line.
Also, Paragraph tags gets automatically closed if another block-element gets parsed before the </p> tag.

Look at the example below, to know how to use <p> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This is Third Paragraph </p>
</body>
</html>

Output
This is First Paragraph

This is Second Paragraph

This is Third Paragraph

SPACE INSIDE PARAGRAPH


If you put a lot of spaces inside the HTML <p> tag, browser removes extra spaces and extra line while
displaying the page. The browser counts number of spaces and lines as a single one. You can add spaces
and new lines on a paragraph by using <pre> tag but don't practice it immaturely. The spaces will look
poor on the website. In the example below, as you can see in the results, all the space is ignored by the
browser.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<body>
<p> This is First Paragraph. </p>
<p> This is Second Paragraph. </p>
<p> This is Third Paragraph.</p>
</body>
</html>

Output
This is First Paragraph.

This is Second Paragraph.

This is Third Paragraph.

HTML <pre> Element


<pre> element defines preformatted text. The text inside a <pre> tag is displayed in a fixed-width font,
and it preserves both spaces and line breaks.

The <pre> tag is also a paired tag. It can be used when you want to display a certain amount of text with
preformatted spaces and line breaks. For example, to display a block of code of a programming language
or to display a poem with proper line breaks.

In the example below, you can see that the text is displayed as it is, in the browser, as it was written
inside the <pre> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Pre Tag </title>
</head>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
</pre>
</body>
</html>

Output
This is a Paragraph Tag.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

This is a Paragraph Tag.

This is a Paragraph Tag.

This is a Paragraph Tag.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

14. HTML ANCHOR TAG


HTML Anchor tag defines a hyperlink that links one page to another. The Anchor tag is defined
by <a> tag. The href (Hypertext REFerence) attribute is used to give the reference (Path) of the page or
document to be linked.

The <a> tag is a paired tag with </a> tag as a closing tag. Whatever is written between these two tags
will feature as a hyperlink on the webpage.

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

Example: <a href="https://www.google.com">Google</a>

In the example above, the text "Google" will work as a hyperlink and will take the user to our html
tutorial page. We have given the address(Path) of that page as a reference in thehref attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag </title>
</head>
<body>
<a href="https://www.google.com"> Welcome to Google </a>
</body>
</html>

14.1. HTML TARGET ATTRIBUTE


HTML target attribute is used to specify the place in the browser where the linked document should be
opened. For example, whether the user wants to open the link in a new tab, new window, or in the same
tag. The target attribute has different values for all these different locations.

The target attribute can have one of the following values:

Value Description

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

_self Opens the linked document in the same window/tab. This is the default value.

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

_framename Opens the linked document in a named frame.


Note: HTML Frames are depreciated in HTML 5 and it is recommended not to use them.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag Example </title>
</head>
<body>
<p><a href="https://www.google.com" target="_blank">Welcome to Google</a></p>
<p><a href="https://www. google.com" target="_top"> Welcome to Google </a></p>
<p><a href="https://www. google.com" target="_parent"> Welcome to Google </a></p>
<p><a href="https://www. google.com" target="_top"> Welcome to Google </a></p>
</body>
</html>

14.2. HTML IMAGE LINK


Images in HTML can also work as a Hyperlink. It means you can add an image with a link attached to
it. When the user clicks on the image, he gets redirected to the attached link. It is different from the
conventional linking of text with a url.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Link </title>
</head>
<body>
<p>The image is a link. You can click on it.</p>
<a href="https://www.google.com">
<img src="PUBG.png" alt="HTML Image" style="width:300px;height:200px;">
</a>
</body>
</html>

14.3. HTML BASE PATH LINK


When you link HTML documents related to the same website, it is not required to give a complete URL
for every link if you use Base Path link. This Base path is defined within <base> tag in your HTML
document header.

You can create a base path of your Base Domain. Whenever you give reference to any link, you can
skip the base domain and can directly write latter part. Browser will automatically concatenate the link
with the base path you have given and will make a complete URL.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Base Path Link Example</title>
<base href="https://www.Coderepublics.com" target="_blank">
</head>
<body>
<p> Click following link </p>
<a href="https://www.xyz.com/HTML/html-tutorial.php"> Learn HTML </a>
</body>

14.4. HTML LINK COLOR


You can set colors of your links, active links and visited links using link, alink and vlink attributes
of <body> tag. However, these colors can also be given by the help of CSS classes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Change Link Color </title>
</head>
<body alink="green" vlink="red">
<p> Click following link </p>
<a href="https://google.com/"> Welcome to Google </a>
</body>

14.5. HTML IMAGE ATTRIBUTES


<img> tag is used to display image on the web page. It is an empty tag that contains attributes only,
closing tags are not used in HTML image element.

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Tag </title>
</head>
<body>
<img src="HTML-Image.png" width="400px" height="200px">

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

</body>
</html>

14.6. THE 'src' ATTRIBUTE


It is a necessary attribute that describes the source or path of the image. It instructs the browser where
to look for the image on the server. The "src" attribute specifies the URL (web address) of the image.
The location of image may be on the same directory or another server.

If a browser cannot find an image, it will display the value of the alt attribute:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>

14.8. THE 'alt' ATTRIBUTE


The "alt" attribute defines an alternate text for the image, if it can't be displayed. The value of
the alt attribute describes the image in words. It is considered good for SEO prospective.

The "alt" attribute provides an alternate text for an image, if the user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader).

If a browser cannot find an image, it will display the value of the alt attribute:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>

14.9. IMAGE SIZE ATTRIBUTE - 'Height' and 'Width'


With the help of this attribute, we can customize the size of the Image To change the size of HTML
Image we can use "height" and "width" attributes. We can also use Style to change the size of HTML
Image.

<!DOCTYPE html>
<html lang="en">
<head>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<meta charset="UTF-8">
<title> HTML Image Size Attribute </title>
<body>
<img src="HTML5-Image.png" alt="HTML5 Image" width=600px height=250px>
</body>
</html>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

15. HTML TABLE


We all are familiar with the concept of table, we are not talking about the numeric tables here, the
HTML table we are going to learn is the one with rows and column. It’s similar like the structure of a
matrix with proper rows and columns. This type of structure with rows and columns is very helpful in
representing data in an easy and simple manner. The tabular form of data creates a good expression
wherever it is used due to its representation of necessary data in a simple and accurate manner.

15.1. USE OF HTML TABLE?


An HTML table is defined with the <table> tag. A table is used to display data in tabular form (rows *
column). It is a paired tag. Just use these tags with their attributes to create tables. You can also
use CSS stylesheet to beautify these structures. A table structure is represented in ‘rows*columns’ form,
i.e. a ‘4*5’ table represents a table with 4 rows and 5 columns.

Tables are also used in websites to present any data to the user. It looks really neat and also everyone
prefers tabular form of data nowadays. The HTML tables allows to arrange data like text, images, etc.
into rows and columns.

<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<meta charset="UTF-8">
<title> HTML Table </title>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr> <td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table> </body>
</html>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

15.2. TABLE ROW


A table row can be defined with the <tr> tag It is also a paired tag with </tr> as a closing tag. Whatever
written between these tags will be displayed in a single row of the table. To create a new row
another <tr> tag is written after closing the previous one.

15.3. TABLE HEADING


A table header in HTML tables is a special case of a table row. It starts with <th> tag and ends
with </th> tag. There only difference between a row and a heading is that text written inside <th> tags
is displayed in bold fonts and is by default centered aligned by the browser. Because of its properties
this tag is used only for writing Heading of the table. You can also make a <tr> tags content bold and
centered by using CSS It will work exactly like <th> tag.

15.4. TABLE CELLS


A table cell in an HTML table is defined by <td> tag. It is also a paired tag with </td> as a closing tag.
Each pair of these tags represents a cell in a row. It is used inside &glt;tr> tags only. Without <tr> tags
it is of no value. After declaring the rows the <td> tags are used to enter data in the table. Whatever is
written inside the <td> and </td> tags will be displayed by the browser in the tables as it is.

15.5. TABLE ATTRIBUTES


The <table> Tag in HTML table has many attributes which can be used to further define the structure
of the table than just a standard one. These attributes can make a table look a bit more attractive. Let’s
see one by one the different attributes of the table tag and then we will use them in an example and will
see the changes in the table.

15.5.1. The 'border' Attribute


A border attribute is used to specify visible borders in a table. It means that by default the borders in
the table are hidden and if you don’t specify borders then your table will only display data but there
would be no border between them. The border attribute has two values 0 and 1. 0 means no border and
1 means visible borders. You can also increase the values to 2, 3, 4, etc. it will increase the width of the
border.

There are two ways to specify border for HTML tables.

• By border attribute of table in HTML.


• By border property in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Attribute </title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th> Name </th>
<th> Salary </th>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<th> Age </th>


</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>

The width attribute is used to sizing the table.

15.5.2. Table CSS Border


You can use CSS Style to make table more interactive.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Style </title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<td> 22 </td>
</tr>
</table>
</body>
</html>

15.5.3. THE 'CELLPADDING' AND 'CELLSPACING' ATTRIBUTE


These "cellpadding" and "Cellspacing" attributes are used to adjust the white spaces in your table cells.

CELLPADDING ATTRIBUTE
The Cellpadding attribute is used to specify the space between the content of the cell and its borders. It
provides padding to the content of the cell. As its value increases the space between the cell’s content
and its border is also increases. The value of this attribute is taken in pixels by the browser. The
cellpadding is applied to all the four sides of the content. The value can also be defined in percentages.

CELLSPACING ATTRIBUTE
The Cellspacing attribute is used to specify the space between the cells of the table. Its value can be in
pixels or in percentages. It works similar to the Cellpadding attribute but only between cells. It is applied
to all the sides of the cells.

Note: These two attributes defined above are no longer a part of HTML 5. So it is better to use CSS to
color the tables.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Cellpadding Attribute </title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5" style="width:100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Peter</td>
<td>5000</td>
</tr>
<tr>
<td>John</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

15.5.4. THE 'COLSPAN' AND 'ROWSPAN' ATTRIBUTE


These two attributes are used with the <td> tag. As the name suggests ‘colspan’ is related to columns
and ‘rowspan’ is related to rows. These two attributes are used to merge two or more columns and rows.
The colspan attribute’s value suggest the amount of column space it will occupy. For example, ‘<td
colspan= 2>’ will create a cell taking space of two cells horizontally i.e., it will occupy the space of a
cell of the next column. Similarly, the ‘rowspan’ will create a cell which will occupy the space of two
or more (as specified) cells vertically, i.e. cells of the next rows. Look at the example below to
understand the concept clearly.

The 'Rowspan'
The rowspan attribute is used to merge two or more rows together to form a single row. A single row
occupies space of the number of merged rows.

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9998887776</td>
</tr>
<tr>
<td>9998887776</td>
</tr>
</table>
</body>
</html>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

The 'Colspan'
The colspan attribute is used to merge two or more columns into a single column. single column
occupies space of the number of merged columns.

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Colspan Attribute </title>
</head>
<body>
<table border="1" width="80%">
<tr>
<th> Person_Name </th>
<th colspan="2"> Mobile </th>
</tr>
<tr>
<td> Bill Gates </td>
<td> 9998887776 </td>
<td> 9998887775 </td>
</tr>
</table>
</body>
</html>

15.6. HTML Caption


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

• A caption can be aligned around the table by using align attribute with values -
left/right/top/bottom.
• The default alignment is top.

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Caption Attribute </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>

15.7. HEIGHT AND WIDTH ATTRIBUTES


The Height and Width attributes of an HTML table are used to specify the height and width of the table.
Their value can be specified in terms of pixels or percentages.

15.8. BGCOLOR ATTRIBUTE


This attribute in HTML table is used to provide a background color to the table. You can easily write
any color name directly or you can also set a color by providing HEX code. This attribute can also be
used with <td> tag to define the color of that particular cell in the table.

15.9. BACKGROUND ATTRIBUTE


This attribute in HTML table is used to add a background image in the table. The image in the table
will work as a background behind the data in the table. It is also can be used with <td> tag.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

16. HTML LISTS

16.1. ORDERED LIST


This list is created by using <ol> tag. Any series can be used to order the elements, like series of digits,
alphabets, roman numerals, etc. All these series get increased by one with every new element entered
in the list.

Ex.-For a numbered order list, the numbering starts at one and is incremented by one for each
successive ordered list element tagged with <li>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

type ATTRIBUTE
The type attribute is used to change the series type.

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

LIST OF NUMBERS
Numbers as type - <ol type="1">. Here the numbers will be used to order the elements. Each new
element will get incremented value from the previous one in the list.

<!DOCTYPE html>
<html lang="en">

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Uppercase
Uppercase alphabets as type - <ol type="A">. Here, Uppercase alphabets will be used to order the
elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase </title>
</head>
<body>
<ol type="A">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Lowercase
Lowercase alphabets as type - <ol type="a">. Same as above, but the alphabets will be lowercased.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Lowercase </title>
</head>
<body>
<ol type="a">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

</ol>
</body>
</html>

Uppercase Roman Numbers


Uppercase roman numbers as type <ol type="I">.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase Roman </title>
</head>
<body>
<ol type="I">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Lowercase Roman Numbers


Lowercase roman numbers as type <ol type="i">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Lowercase Roman </title>
</head>
<body>
<ol type="i">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

The "Start" Attribute


The start attribute is used to control the counting in the list. By default, the counting starts from '1' or
from 'a', but we can change counting to start from a specified number or alphabet. Look at the example
below to see the syntax of using this attribute.

<!DOCTYPE html>
<html lang="en">

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<head>
<meta charset="UTF-8">
<title> Ordered List Start Attribute </title>
</head>
<body>
<ol start="50">
<li>Samsung</li>
<li>OnePlus</li>
<li>Nokia</li>
</ol>
<ol type="I" start="50">
<li>Oppo</li>
<li>Vivo</li>
<li>Xiaomi</li>
</ol>
</body>
</html>

16.2. UNORDERED LIST


HTML unordered list is a collection of related items that are listed with no special order or sequence.
This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet. Each item
starts with <li> tag.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List </title>
</head>
<body>
<h2> Unordered List </h2>
<ul>
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

Unorder List Type Attribute


The type attribute is used to change the series type.

Value Description

type="disc" Sets the list item marker to a bullet (default).

type="circle" Sets the list item marker to a circle.

type="square" Sets the list item marker to a square.

type="none" The list items will not be marked.

The disc Attribute


The 'Disc' as type - <ul type="disc">. These list items will be marked with small black circles like
bullets. This is the default type in unorder lists.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Disc Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="disc">
<li> Harley-Davidson </li>
<li> Ducati</li >
<li> BMW </li>
</ul>
</body>
</html>

The circle Attribute


The 'Circle' as type - <ul type="circle">. It will display round hollow circles like bullets before list
items.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Circle Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="circle">

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<li> Harley-Davidson </li>


<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

The square Attribute


The 'square' as type - <ul type="square">. It will display filled squares before the list items.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Square Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="square">
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

The none Attribute


The 'none' as type - <ul type="none">. This attribute will list the list items but will not put any bullets
before them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List None Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="none">
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>

16.3. DESCRIPTION LIST

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

HTML support another list style which is called definition lists where entries are listed like in a
dictionary. The definition list is the ideal way to present a list of terms, or other name/value list.

The definition list created using <dl> tag. The Description <dt> — defines the item in the list,
and <dd> describes the items in the list.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Definition List</title>
</head>
<body>
<h1>HTML Definition List</h1>
<dl>
<dt>PUBG</dt>
<dd>PlayerUnknown's Battlegrounds (PUBG) developed by PUBG Corporation.</dd>
<dt>God Of War</dt>
<dd>God of War developed by Santa Monica Studio.</dd>
</dl>
</body>
</html>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

17. HTML FORMS


An HTML form is a section of a document which contains different fields like text fields, password
fields, checkboxes, radio buttons, submit button, menus etc. HTML Forms can be used where we want
to collect some data from the site visitor. For example, in case of user registration you would like to
collect information such as name, email address, Phone number, etc.
A form will take input and then store it to a back-end application such as CGI, ASP Script or PHP script
etc. The back-end application will perform required processing on the passed data like storing it in
database. There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.

17.1. HTML FORM STRUCTURE


The HTML <form> tag defines a form that is used to collect user input. All the form elements should
be written inside <form> and </form> tags.

Syntax:
<form>
....
Form Elements..
....
</form>

17.2. HTML FORMS ELEMENTS

Attributes Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<select> It defines a multi-line input control.

<option> It defines an option in a drop-down list.

<textarea> It defines a drop-down list.

<button> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<optgroup> It defines a group of related options in a drop-down list.

<label> It defines a label for a field.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

17.3. HTML FORMS ELEMENT

The 'Input' Element


The most important form element is the <input> element. The <input> element can be displayed in
several ways, depending on the type attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Attribute </title>
</head>
<body>
<h2>Text Input</h2>
<form>
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
Note: The default width of a text input field is 20 characters.

The 'Select' Element


The <select> element defines a drop-down list. It mostly used when you have to show numbers of items.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Select Attribute </title>
</head>
<body>
<form action="action-page.php">
<select name="Cars">
<option value="Audi"> Audi </option>
<option value="Mercedes"> Mercedes </option>
<option value="Lamborghini"> Lamborghini </option>
</select>
<input type="submit">
</form>
</body>
</html>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

Note: The action attribute defines the action to be performed when the form is submitted. You should
add the destination where the form is submitted.

• The <option> element defines different options that can be selected.


• By default, the first item in the drop-down list is selected.
• To define a pre-selected option, add the selected attribute to the option:<option value="abc"
selected>.

The 'Textarea' Element


The <textarea> element defines a multi-line input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Textarea Attribute </title>
</head>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action="action-page.php">
<textarea name="message" rows="5" cols="60"> This is a simple Example of Textarea. </textarea>
<br>
<input type="submit">
</form>
</body>
</html>

The 'Button' Element

The <button> element defines a clickable button.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Button Attribute </title>
</head>
<body>
<button type="button" onclick="alert('Hello World..!')">Click Me!</button>
</body>
</html>

The 'Method' Attribute


The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form
data. The GET is the default method when you submitting your form data.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

BASIS FOR
GET POST
COMPARISON

Parameters are placed URI Body


inside

Purpose Retrieval of documents Updation of data

Query results Capable of being bookmarked. Cannot be bookmarked.

Security Vulnerable, as present in plaintext Safer than GET method

Form data type constraints Only ASCII characters are No constraints, even binary data is
permitted. permitted.

Form data length Should be kept as minimum as Could lie in any range.
possible.

Visibility Can be seen by anyone. Doesn't display variables in URL.

Variable size Up to 2000 character. Up to 8 Mb

Caching Method data can be cached. Does not cache the data.

Syntax
<form action="action-page.jsp" method="get">
<form action="action-page. jsp " method="post">

Difference between GET and POST

The 'Name' Attribute


The name attribute specifies the name of <input> element. It is a good practice to use this attribute, and
also good for SEO purpose.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Name Attribute </title>
</head>
<body>
<form action="action-page.jsp">
First name:
<input type="text" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

</body>
</html>
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form and the <legend> element defines a
caption for the <fieldset> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Fieldset and Legend Attributes </title>
</head>
<body>
<form action="action-page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>

HTML Input Types


The HTML input types element is used to create interactive controls for web-based forms to accept data
from the user. Data can be entered by the user in various forms, like in alphabets, in digits or a
combination of both like an email. These different kinds of HTML input type elements in HTML defines
the type of data a user would enter in the input field. It makes easier for the browser to understand what
data is valid to be entered in a particular field and what is not. The different types of HTML input type
are specified by its ‘type’ attribute, each input type has a different ‘type’ attribute value associated with
it. Let’s see the common values of ‘type’ attribute:

Here is a list of some common HTML Form input types.

Type Description

text It defines a one-line text input field.

password Defines a one-line password input field.

submit It specifies a submit button to submit the form to server.

reset The reset button reset all values in the form.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

Type Description

radio A Radio button allows select one option.

checkbox Checkboxes allow selecting multiple options forms.

button Defines a clickable button, which can perform a task on an event.

file It defines to select the file from device storage.

image It Defines a graphical submit button.

HTML Input Type Text


The <input type="text"> defines a single line text input field. By default, a field text can take 20
Characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Text </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
<input type="submit">
</form>
</body>
</html>

HTML Input Type Password


The <input type="password"> defines a password field. It will show bullets in place of actual characters
during input.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Password </title>
</head>
<body>
<form action="#">
User name:
<input type="text" name="userid">

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

User password:
<input type="password" name="psw">
</form>
</body>
</html>

HTML Input Type Submit


The <input type="submit"> defines a Submit button that submit form data to a form-handler. The form-
handler is a type of server page with a script for processing form input data and It is specified in the
form's action attribute

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Submit </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
</body>
</html>

HTML Input Type Reset


The <input type="reset"> defines a Reset button. If you want to change the input values then click the
"Reset" button, the form data will be reset to the default values.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Reset </title>
</head>
<body>
<form action="action-page.php">
First name:<br>
<input type="text" name="firstname" value="John">
Last name:<br>
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
<input type="reset">

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

</form>
</body>
</html>

HTML Input Type Radio


The <input type="radio"> defines a Radio button. It is used where only one option out of many has to
be selected. The name attribute in all the buttons should have the same value, then only a distinct value
will get selected. The Radio buttons let a user select ONLY ONE of a limited number of choices.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Radio Button </title>
</head>
<body>
<form action="action-page.php">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<input type="submit">
</form>
</body>
</html>

HTML Input Type Checkbox


The <input type="checkbox"> defines a checkbox. It can be used to select multiple options at a time.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Checkbox </title>
</head>
<body>
<form action="action-page.php">
<input type="checkbox" name="vehicle1" value="Bike">Samsung
<input type="checkbox" name="vehicle2" value="Car">Google Pixel>
<input type="submit">
</form>
</body>
</html>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

HTML Input Type Button


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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Button </title>
</head>
<body>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>

HTML Input Type Number


The <input type="number"> defines a numeric input field. The number attribute set restrictions on what
numbers are accepted. You can set the min or max number.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Number </title>
</head>
<body>
<form action="action-page.php">
Quantity (between 1 and 10):
<input type="number" name="quantity" min="1" max="10">
<input type="submit">
</form>
</body>
</html>

HTML Form Input Restrictions


Here is a list of some common input restrictions (some are new in HTML5).

Attribute Description

disabled It specifies to disabled the input field.

max It specifies maximum value for an input field.

maxlength It specifies the maximum number of character for an input field.

min It specifies the minimum value for an input field.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

Attribute Description

pattern It specifies a regular expression to check the input value against.

readonly It specifies that an input field is read only that cannot be changed.

required It specifies that an input field is require.

size It specifies the width (in characters) of an input field.

step It specifies the legal number intervals for an input field.

value It specifies the default value for an input field.

HTML5 INPUT TYPES

The HTML5 introduced 13 different "types" attributes.

Email Fields
The value "email" is used for creating an input field for email address. This HTML input type is
specifically used to validate the email address entered by the user. It uses the standard email address
format and the user violates it then it shows error. Syntax: <input type=email>

Number Fields
The value "number" will create an input field to enter only numbers, if you enter alphabets or symbols
or anything other than numbers, it will show an error, however decimal points numbers are
allowed. Syntax:<input type=number>

Search Fields
It is used to create a search box. You can even add placeholder in the search box by using the
‘placeholder’ attribute. Syntax: <input type="search">

URL Fields
Specifically used to enter a URL. Syntax: <input type="url">

Number Fields
This HTML input type provides controls to enter numbers. It has small buttons on the right side to
increase or decrease the value of the number. In your smartphones this input type automatically opens
the numeric keyboard during entering the data. Syntax:<input type="number">

Telephone Number Fields


It is a special HTML input type field to enter phone numbers only. Syntax:<input type="tel">

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

Range Fields
It creates a slider to select a value in within a range of two values. Syntax: <input type="range" min="0"
max="10">

Date Fields
This type is used to create an input area to enter date. You can manually enter the date or can select
value from a graphical calendar. Syntax:<input type="date">

Month Fields
It only provides options of Month and year. Syntax:<input type="month">

Week Fields
Allows you to pick the week and year. Syntax:<input type="week">

Time Fields
Allows you to enter time of the day. It can be entered manually or by the help of a digital clock
format. Syntax:<input type="time">

Datetime-local Fields
Enter Date and time together in a single input field. Syntax:<input type="datetime-local">

Color Fields
If you want to enter any RGB color information on the database then use this input type. Syntax:<input
type="color">

Form Input Attribute


The HTML Form Attribute element is used to create interactive controls for web-based forms in order
to accept data from the user. This attributes can be used on the following elements such as :

The Value Attribute


The value attribute specifies the initial value for an input field.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Value Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value="John">
Last name:

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

<input type="text" name="lastname">


</form>
</body>
</html>

The readonly Attribute


The readonly attribute specifies that the input field is read only that means the value of input field cannot
be changed.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Readonly Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value ="John" readonly>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

The Disabled Attribute


The disabled attribute specifies that the input field is disabled. You cannot make any modification on
input field.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Disabled Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value ="John" disabled>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

The size Attribute


The size attribute specifies the size for the input field in character.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Size Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value="John" size="30">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

The maxlength Attribute


The maxlength attribute specifies the maximum length allowed for the input field.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form maxlength Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" maxlength="10">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
Note : The maxlength attribute, will not accept more than the allowed number of characters in input
field.

Department of Computer Science & Engineering Rohit Saxena


PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India

18. HTML <FRAMESET> TAG

HTML <frameset> tag is used to contain the group of frames which can be controlled and styled as a unit.
The <frameset> element also specifies the number of rows and columns in the frameset, and how much
space they will occupy in a frame.

Note: Do not use HTML <frameset> element as it is deprecated and not supported by HTML5,
but you can use <iframe> tag instead.
Syntax
<frameset cols=" ">............</frameset>

Following are some specifications about the HTML <frameset> tag

Display Block

Start tag/End tag Both Start and End Tag

Usage Frames

Example 1
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="50%,50%">
<frame src="xyz/html-table">
<frame src="xyz/css-table">
</frameset>
</html>
Tag-specific attribute
Attribute Value Description

cols Pixels It specifies the number and size of column spaces in the frameset. (Not
% Supported in HTML5)
*

rows Pixels It specifies the number and size of the rows spaces in the frameset.
% (Not Supported in HTML5)
*

Department of Computer Science & Engineering Rohit Saxena

You might also like