Introduction to HTML

Unit - I
Introduction :Web Basics: What is Internet–Web browsers–What is
Webpage – HTML Basics: Understanding tags.

Unit - II
Tags for Document structure (HTML, Head, Body Tag). Block level text
elements: Headings ,paragraph(<p> tag), Font style elements: (bold, italic, font,
small, strong, strike, big tags)

Unit - III
Lists: Types of lists: Ordered, Unordered– Nesting Lists– Other tags :
Marquee, HR, - Using Images –Creating Hyperlinks.

Unit - IV
Tables: Creating basic Table, Table elements ,Caption–Table and cell alignment–
Row span ,Col span–Cellpadding.

Unit - V
Frames: Frameset–Targeted Links–Noframe– Forms: Input, Textarea, Select,
Option.

1
 Unit - I
Internet
Internet is a global network that connects billions of computers across the
world with each other and to the World Wide Web. It uses standard internet
protocol suite (TCP/IP) to connect billions of computer users worldwide. Every
computer in internet is identified by a unique IP address.

Internet is the fastest mean of sending or exchanging information and data

between computers across the world.

How does internet work?

The internet works with the help of clients and servers. A device such as a
laptop or PC , which is connected to the internet is called a client.
A server is a large computer that stores websites. It also has an IP address.
A place where a large number of servers are stored is called a data center.
The server accepts requests send by the client through a browser over a
network (internet) and responds accordingly.
To access the internet, we need a domain name, which represents an IP
address number, i.e., each IP address has been assigned a domain name. For
example, youtube.com, facebook.com, paypal.com are used to represent the IP
addresses.
2
 Once the server gets the request to provide information about a particular
website, the data starts flowing. The data is transferred through the optical fiber
cables in digital format . As the servers are placed at distant places, the data may
have to travel thousands of miles through optical fiber cable to reach client
computer.
The optical fiber is connected to a router, which converts the light signals into
electrical signals. These electrical signals are transmitted to laptop using an
Ethernet cable.

Uses of the internet

o Using social media and content sharing.

o Instant messaging, video conferencing, Internet Relay Chat (IRC), Internet

telephony, and email are all examples of electronic communication. These all
are used through the Internet.

o Access to online degree programs, courses, and workshops for education and
self-improvement.

3
 o Searching for jobs: To advertise available positions, submit job applications,
and hire candidates identified on social networking sites like LinkedIn, both
employers and applicants use the Internet.
o Apart from communication and source of information, internet also serves a
medium for entertainment. Following are the various modes for
entertainment over internet.
o Online Television
o Online Games
o Songs
o Videos
o Social Networking Apps

Different ways to Connect to the Internet

The various methods for connecting to the Internet are briefly discussed below:
o Dial-Up: Users must connect their phone line to a computer system in such
connections in order to access the Internet connection.
o Broadband: Today's most popular high-speed internet connection,
broadband is offered either by cable or phone companies.
o Wireless Connection: This category includes Mobile and Wi-Fi services
providers.
o Wi-fi: Without the use of cables, wi-fi or wireless fidelity, enables high-speed
internet connectivity.
o Mobile Phones: In modern times, all smartphones include an Internet
connectivity option that can be availed using Internet packs and coupons.

o Satellite: Satellites are utilized for wireless Internet connectivity in areas

Where broadband connections is not available.

o Integrated Services Digital Network: With the help of using telephone lines,
ISDN enables users to send audio or video data.
4
Browser
What is Browser?
A browser is a software program that is used to explore, retrieve, and display
the information available on the World Wide Web. This information may be in the
form of pictures, web pages, videos, and other files that all are connected via
hyperlinks and categorized with the help of URLs (Uniform Resource Identifiers).
A browser is a client program as it runs on a user computer or mobile device
and contacts the webserver for the information requested by the user. The web
server sends the data back to the browser that displays the results on internet
supported devices.
The browser sends requests to web servers all over the internet by
using HTTP (Hypertext Transfer Protocol).

History of Web Browser

o The World Wide Web was the first web browser. It was created by W3C
Director Tim Berners-Lee in 1990. Later, it was renamed Nexus to avoid
confusion caused by the actual World Wide Web.

o The Lynx browser was a text-based browser, which was invented in 1992. It
was not able to display the graphical content.

5
 o Although, the first graphical user interface browser was NCSA Mosaic. It
was the first most popular browser in the world, which was introduced
in 1993.

o In 1994, there were some improvements occurred in Mosaic and came to

Netscape Navigator.

o In 1995, Microsoft introduced the Internet Explorer It was the first web
browser developed by Microsoft.

o A research project started on Opera in 1994. Later, it was publicly introduced

in 1996.

o Apple's Safari browser was introduced in 2003. It was specifically released

for Macintosh computers.

o In 2004, Mozilla introduced Firefox as Netscape Navigator.

o In 2007, a browser Mobile Safari was released as Apple mobile web

browser.

o The popular browser Google Chrome was launched in 2008.

o The fast-growing mobile-based browser Opera Mini was released in 2011.

o The Microsoft Edge browser was launched in 2015.

Component of a Web browser

6
 1. User Interface: The user interface is an area where the user can use several
options like address bar, back and forward button, menu, bookmarking, and
many other options to interact with the browser.

2. Browser Engine: It connects the UI (User Interface) and the rendering engine
as a bridge. It queries and manipulates the rendering engine based on inputs
from several user interfaces.

3. Rendering Engine: It is responsible for displaying the requested content on

the browser screen. It translates the HTML, XML files, and images, which are
formatted by using the CSS. It generates the layout of the content and
displays it on the browser screen.

4. Networking: It retrieves the URLs by using internet protocols like HTTP or

FTP. It is responsible for maintaining all aspects of Internet communication
and security.

5. JavaScript Interpreter: As the name suggests, JavaScript Interpreter

translates and executes the JavaScript code, which is included in a website.
The translated results are sent to the rendering engine to display results on
the device screen.

6. UI Backend: It is used to draw basic combo boxes and Windows (widgets).

It specifies a generic interface, which is not platform-specific.

7. Data Storage: The data storage is a persistence layer that is used by the
browser to store all sorts of information locally, like cookies. A browser also
supports different storage mechanisms such as IndexedDB, WebSQL,
localStorage, and File System

List of Internet Browsers

• Microsoft Edge
• Opera
• Apple Safari:

7
 • Google Chrome:
• Mozilla Firefox
• Internet Explorer

What is a Webpage
A web page is a single hypertext document available on World Wide Web (WWW). It
is composed of HTML elements and displayed on the user's browser such
as Mozilla, Firefox, Chrome, etc. It is also referred to as "Page."
A webpage may contain text, links for other pages, graphics, videos, etc.
Moreover, it is mainly used to provide information to the user in text, images, etc.
Characteristics of a Web Page
Following are some characteristics of a Web page:
o A simple webpage can be created very quickly.
o It takes very little time to create a webpage compared to a Website.
o A web page and a website should be compatible with any device, such as
Mobile, Desktop, Laptop, etc.
o The search engine provides a web page through a link, and when a user clicks
on that link, it is redirected to the webpage of a website.
o A webpage can have any type of information including videos, and audios.
o It can be made up of only HTML(Hypertext Markup Language), or CSS, or
JavaScript for dynamic and attractive behavior.
How does a Web Page Work?
Simple web page is created using HTML, which is a markup language.
However, we can also use CSS and JavaScript to add more functionalities and make
it more attractive.
The webpage is contained within the webserver. To load this webpage, a
client sends the request to the server, once it is responded to by the server, the
browser interprets the markup tags and displays them on the user's screen in the
correct format.
8
 The browser sends the request for a page or a file via an HTTP request. The
HTTP is the Hypertext Transfer Protocol, a network protocol that allows
transferring hypermedia documents over the internet between a browser and
server.

Once the request reaches the server, the HTTP server accepts the request,
finds the requested page, and sends it back to the browser through the HTTP
response. If a server is unable to find the requested page, it returns a 404 response.
Elements of a Webpage
The main element of the webpage is a text file composed of HTML. Apart from this,
a webpage can also have the following elements:
o CSS: The CSS code is used to make the page more interactive and control its
look and feel.
o Scripts: The JavaScript code is included in a webpage to add interactivity to
the page and add more functionalities to it.
o Media: It is used to include media components such as audio, video, and
images.
Types of a Web page
There are mainly two types of a Web page based on functionality:
o Static Webpage
o Dynamic Webpage

9
Static Webpage
Static webpages are those webpages that cannot be modified or altered by
the client. These are also known as stationary or flat web pages. They are displayed
on the client's browser in the same format and manner as they are saved in the
webserver.
A static webpage is generally made up of HTML and CSS only.
Dynamic Webpage
Dynamic webpages are dynamic, which means it shows different
information at different point of time.

Difference between a Webpage and a Website

Website Webpage
A website is a collection of different web A webpage is a single hypertext
pages that are linked together with document.
hyperlinks.
It consists of more than one webpage. It is a single document that is
displayed on the user's browser.
To develop a website, developers need To develop a webpage, developers
more skills and more time compared to a need basic HTML knowledge and
webpage. less time.
A website is accessed through its domain A webpage is accessed through a
name, and it does not include any unique URL with some extension.
extension in the URL.
Some examples of the website are Some examples of Webpages are the
Javatpoint.com, Amazon.com, etc. contact page, registration page, the
home page, etc.

10
HTML Basics
Introduction
• HTML stands for Hyper Text Markup Language
• HTML was invented by Tim Berners-Lee in 1991.
• HTML is used for creating web pages and web applications.
• It is used to describe the structure of Web pages using markup tags.
Basic Structure of HTML
Each HTML page consists of a set of tags or elements which are known as
the building blocks of web pages. They create a hierarchy that structures the
content into sections, paragraphs, headings, and other content blocks.

The basic structure of an HTML document consists of 5 elements:

• <!DOCTYPE>
• <html>
• <head>
• <title>
• <body>

11
The DOCTYPE
A DOCTYPE declaration must be specified on the first line of each web
document: The DOCTYPE tells the web browser which version of HTML the page
is written in.

The <html> Element

The <html> element tells the browser that the page will be formatted in HTML and,
optionally, which world language the page content is in.
<html>…………</html>

The <head> element

The <head> element contains information about the document, such as its title and
metadata.

<head>

<title> Page Title </title>

</head>
The <body> element
The <body> element describes the content and structure of the webpage. It may
include things such as text, images, and links.
<body>
<h1> Content Heading </h1>
<p> Content </p>
</body>
Example
<!DOCTYPE html>
<html lang="en">
<head>

12
 <meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>SVMC </h1>
</body>

</html>

HTML Elements
An HTML file is made of elements. These elements are responsible for creating web
pages and define content in that webpage. An element in HTML usually consist of
a start tag <tag name>, close tag </tag name> and content inserted between them.
Syntax
<tagname > Contents... </tagname>

HTML Element: The HTML element consists of 3 parts.

• Opening tag: It is used to tell the browser where the content material
starts.
• Closing tag: It is used to tell the browser where the content material
ends.
• Content: It is the actual content material inside the opening and closing
tags.
Example
<h1> Welcome to SVMC </h1>

Block-level and Inline HTML elements

All the elements are divided into two categories:

o Block-level element
o Inline element

13
Block-level element:

o These are the elements, which structure main part of web page, by dividing
a page into coherent blocks.
o A block-level element always start with new line and takes the full width of
web page, from left to right.
o These elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>,
<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>,
<li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>,
<tfoot>, <ul> and <video>.
Example
<html>
<head>
</head>
<body>
<div style="background-color: lightblue">This is first div</div>
<div style="background-color: lightgreen">This is second div</div>
<p style="background-color: pink">This is a block level element</p>
</body>
</html>

Inline elements:
o Inline elements are those elements, which differentiate the part of a given
text and provide it a particular function.
o These elements does not start with new line and take width as per
requirement.
o The Inline elements are mostly used with other elements.

14
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>,
<dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>,
<samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>,
<time>, <tt>, <var>.

Understanding Tags
What is HTML Tag?
HTML tags are like keywords which defines that how web browser will
format and display the content.
HTML tags contain three main parts: opening tag, content and closing tag.
But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top
to bottom and left to right. HTML tags are used to create HTML documents and
render their properties. Each HTML tags have different properties.
Syntax
<tag> content </tag>
Example
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.

Types of HTML Tags

HTML Meta Tags

15
DOCTYPE, title, link, meta and style
HTML Text Tags
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>,
<kbd>, <pre>, <samp>, <var> and <br>
HTML Link Tags
<a> and <base>
HTML Image and Object Tags
<img>, <area>, <map>, <param> and <object>
HTML List Tags
<ul>, <ol>, <li>, <dl>, <dt> and <dd>
HTML Table Tags
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption
HTML Form Tags
form, input, textarea, select, option, optgroup, button, label, fieldset and legend
HTML Scripting Tags
script and noscript
Example
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<p>It contains a
<strong>main heading</strong> and <em> paragraph </em>.
</p>
</body>
</html>
16
 Unit - II
TAGS FOR DOCUMENTS STRUCTURE
Html used predefined tags and attributes to tell the browser how to display
content, means in which format, style, font size, and images to display.
Html is a case insensitive language. Case insensitive means there is no
difference in upper case and lower case ( capital and small letters) both treated as
the same, for r example ‘D’ and ‘d’ both are the same here.

There are generally two types of tags in HTML:

Paired Tags: These tags come in pairs. That is they have both opening(< >) and
closing(</ >) tags.

Empty Tags: These tags do not require to be closed.

Structure of an HTML Document

An HTML Document is mainly divided into two parts:
HEAD: This contains the information about the HTML document. For Example,
the Title of the page, version of HTML, Meta Data, etc.

BODY: This contains everything we want to display on the Web Page.

17
<!DOCTYPE html>: This tag is used to tells the HTML version. This currently
tells that the version is HTML 5.0
<html> </html> : <html> is a root element of html. In <html > tag we use “lang”
attributes to define languages of html page such as <html lang=”en”> here en
represents English language.
<head>: Head tag contains metadata, title, page CSS etc. Data stored in the
<head> tag is not displayed to the user, it is just written for reference purposes
and as a watermark of the owner.
<title> = to store website name or content to be displayed.
<link> = To add/ link css( cascading style sheet) file.
<meta> = To store data about website, organisation , creator/ owner
<script> = to add javascript file.

<body>: A body tag is used to enclose all the data which a web page has from
texts to links. All the content that you see rendered in the browser is contained
within this element.
Following tags and elements used in the body.
1 . <h1> ,<h2> ,<h3> to <h6>
2. <p>
3. <div> and <span>
4. <b>, <i> and<u>
18
 5. <li>,<ul>and<ol>.
6. <img> , <audio> , <video> and<iframe>
7. <table> <th> , <thead>and<tr>.
8. <form>
9. <label> and <input> others……….

Block Level Text Elements

Block-level element:

o These are the elements, which structure main part of web page, by dividing
a page into coherent blocks.
o A block-level element always start with new line and takes the full width of
web page, from left to right.
o These elements can contain block-level as well as inline elements.
Following are the block-level elements in HTML.
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>,
<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>,
<li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>,
<tfoot>, <ul> and <video>.

Heading Tag
HTML headings are used to create headings and subheadings within a
webpage. There are six levels of headings defined by HTML. These 6 heading
elements are h1, h2, h3, h4, h5, and h6; with h1 being the highest level and h6
being the least.
Six levels of headings in HTML:

• h1 - main heading of the webpage and is typically the largest in size

• h2 - the second level of headings

19
 • h3 - the third level of headings
• h4 - the fourth level of headings
• h5 - the second smallest level of headings
• h6 - being the most smallest heading size

Syntax:
<h1>Heading1</h1>
<h2>Heading2</h2>
.
.
.
<h6>Heading6</h6>

Importance of Heading:
• Search Engines use headings for indexing the structure and organizing the
content of the webpage.
• Headings are used for highlighting important topics.
• They provide valuable information and tell us about the structure of the
document.
20
Example
<html>
<body>
<h1>Welcome to SVMC</h1>
<h2>A computer science portal for SVMC</h2>
<h5>CS</h5>
<h6>BCA</h6>
</body>
</html>

Changing the size of HTML Headings:

The default size of HTML headings can be changed, using the style attribute.
<h1 style="font-size: 50px">H1 with new size.</h1>

Paragraph Tag <P>

The <p> tag in HTML defines a paragraph. These have both opening and
closing tags. So anything mentioned within <p> and </p> is treated as a
paragraph. A paragraph is a block-level element so a new paragraph always
begins on a new line.
Syntax:
<p> Content </p>
Example
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>

21
Properties of the paragraph tag:
• The<p>tag automatically adds space before and after any paragraph, which is
basically margins added by the browser.
• If a user adds multiple spaces, the browser reduces them to a single space.
• If a user adds multiple lines, the browser reduces them to a single line.

<html>
<body>
<p>
This paragraph has multiple lines. But HTML reduces them to a single line.
</p>
<p>
This paragraph has multiple spaces.But HTML reduces them all to a single
space.
</p>
</body>
</html>

How to Use <br> and <hr> tag with paragraph?

<br> tag:
The HTML <br> tag element creates a line break, giving you a new line without
starting a new paragraph. Use `<br>` when you want to move to the next line
without beginning a whole new paragraph.
Syntax:
<br>
Example
<html>
22
<body>
<p>
This paragraph has multiple
<br />lines. But HTML reduces them
<br />to a single line.
</p>
</body>
</html>

<hr> tag:
The HTML <hr> tag is used to create a horizontal rule or line, visually separating
content on a webpage.
Syntax:
<hr>
Align attribute:
The <p> tag specifically supports the alignment attribute and allows us to align
our paragraphs in left, right, or center alignment.
Syntax:
<p align="value">
Example
<html>
<body>
<p align="center">
Welcome SVMC
</p>
<p align="left">
A Computer Science portal for SVMC
</p>
</body></html>
23
div tag
The <div> tag is known as the Division tag. The div tag is used in HTML
to make divisions of content in the web page like (text, images, header, footer,
navigation bar, etc).
Div tag has both open (<div>) and closing (</div>) tags and it is mandatory
to close the tag.
The Div is the most usable tag in web development because it helps us to
separate data in the web page and we can create a particular section for particular
data or function in the web pages.

div tag Usage:

• The div tag is the block-level tag.
• It is used for applying styles and layout structure <div> and allows us to
manipulate and position content through CSS.
• It also divides content into logical sections, aiding in the readability and
maintainability of the code.
Syntax
<div>
------------
</div>
Example
<body>
<div> div tag </div>
<div> div tag </div>
<div> div tag </div>
<div> div tag </div>
</body>

24
Font-style elements
Font-style elements are similar to phrase elements in that they are used to
modify pieces of text.
Bold Tag
HTML bold tag is represented by <b> tag.
HTML <b> tag is used to display the written text in bold format. It is strictly a
presentational element.
Example
<p> Hello guys, <b>Good Morning</b></p>
Output
Hello guys Good Morning
Italic Tag
The italic element specifies that text should be rendered in an italic face.
Example
<p> Hello guys, <i>Good Morning</i></p>
Output
Hello guys Good Morning
Small Tag
HTML <small> tag makes text font by one size smaller than the documents
base font size (Such as large to medium, medium to small, etc.)
Syntax
<small>Write your content here...... <small>
Example
<body>

25
 <h2>Example of small tag</h2>
<p style="color: green;">This is normal font size.....
<small style="color: blue;">It is smaller than previous...
<small style="color: red;">It is smallest.</small>
</small>
</p>
</body>
Output
Example of small tag
This is normal font size..... It is smaller than previous... It is smallest.

Strong Tag
The HTML <strong> Tag is the parsed tag and is used to show the
importance of the text. The content inside it is generally in bold format.
Syntax
<strong> Contents... </strong>
Example
<html>
<body>
<h1> Strong </h1>
<h2> <strong> Tag </h2>
<strong> Welcome to SVM </strong>
</body>
</html>
Big Tag
HTML <big> tag was used to increase the text font size one level bigger than
the document's base font size or surrounding text size, such as small to medium,
medium to large, etc.

26
Syntax
<big>Content... </big>
Example
<html>
<body>
<h1>Big </h1>
<p>This is paragraph text</p>
<big>This is big Tag text</big>
</body>
</html>
Output
This is paragraph text

This is big Tag text

Strike Tag
HTML <strike> tag was used to strike a line through the text, contained within it.
Syntax
<strike> content here....</strike>
Example
<body>
<h2>Example of strike tag</h2>
<p><strike>This is not a valid paragraph</strike></p>
<p>This is a valid paragraph</p>
</body>

27
 Unit – III

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)
Ordered List or Numbered List (OL)
An ordered list in HTML is a list of items that are marked with numbers,
letters, or Roman numerals. It is created using the <ol> (ordered list) tag, which is
a container for a set of <li> (list item) elements.
The order of the items is determined by the HTML code, and the browser
automatically generates the numbers for each item.
The <ol> tag can also have various attributes, such as start (which sets the
starting value of the first item) and type (which sets the type of numbering, such as
decimal, lowercase Roman, etc.).

There can be different types of numbered list:

o Numeric Number (1, 2, 3)

o Capital Roman Number (I II III)

o Small Romal Number (i ii iii)

o Capital Alphabet (A B C)

o Small Alphabet (a b c)

28
 Type Description

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

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

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

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

Type "a" In this type, the list items are numbered with lower case letters.

Example 1:

<ol type="i">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>

Output

i. HTML
ii. Java
iii. JavaScript
iv. SQL

Example: 2
<html>
<head>
<title>Order List</title>
</head>

29
 <body>
<b>
<ol>
<li> Computer</li>
<li> Computer</li>
<li> Computer</li>
` </ol>
<ol type="a">
<li> Computer</li>
<li> Computer</li>
<li> Computer</li>
</ol>
<ol type="A">
<li> Computer</li>
<li> Computer</li>
<li> Computer</li>
</ol>
<ol type="i">
<li> Computer</li>
<li> Computer</li>
<li> Computer</li>

</ol>
<ol type="I">
<li> Computer</li>
<li> Computer</li>
<li> Computer</li>
</ol>
30
 </b>
</body>
</html>

Unordered List or Bulleted List (UL)

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.
The HTML ul tag is used for the unordered list. There can be 4 types of bulleted
list:

o disc

o circle

o square

o none

31
 Type Description

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

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

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

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

Example1:
ul type="circle"
<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>

Output

o HTML
o Java
o JavaScript
o SQL

Example 2:

<html>

32
<head>

<title>Order List</title>

</head>

<body>

<b>

<ul>

<li> Computer</li>

<li> Computer</li>

<li> Computer</li>

</ul>

<ul type="circle">

<li> Computer</li>

<li> Computer</li>

<li> Computer</li>

</ul>

<ul type="square">

<li> Computer</li>

<li> Computer</li>

<li> Computer</li>

</ul>

<ul type="desc">

<li> Computer</li>

<li> Computer</li>

<li> Computer</li>

</ul>
33
 </b>

</body>

</html>

Description List or Definition List (dl)

HTML Description List or Definition List displays elements in definition

form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description
list.

The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.

2. <dt> tag defines data term.

3. <dd> tag defines data definition (description).

<html>

<head>

<title>LIST</title>

34
</head>

<body>

<dl>

<dt>HTML</dt>

<dd>

Hyper text Markup Language

<dl>

<dt>CSS</dt>

<dd> Cascading Stylesheet</dd>

</dl>

</dd>

<dt>CSS</dt>

<dd>

Cascading Stylesheet

<ul type="square">

<li>HTML</li>

<li>CSS</li>

<li>JS</li>

<li>JQUERY</li>

<li>PHP</li>

</ul>

</dd>

</dl>

</body></html>

35
Nested list?
A nested list is simply a list inside another list. A nested list can be ordered
or unordered.
Nested unordered list
To create an unordered list in HTML, use the ul (unordered list) tag with
the li (list item) tag in a hierarchical structure.
Example
<ul>
<li>
<ul>
<li>Spinach</li>
<li>Kale</li>
</ul>
</li>
<li>
<ul>
36
 <li>Carrots</li>
<li>Potatoes</li>
</ul>
</li>
</ul>
Output
• Leafy Greens
o Spinach
o Kale
• Root Vegetables
o Carrots
o Potatoes
Nested ordered list
To create an ordered list in HTML, use the ol (ordered list) tag with the li (list
item) tag in a hierarchical structure.
<ol>
<li>
<ol>
<li>Variables and Data Types</li>
<li>Control Structures</li>
<li>Functions</li>
</ol>
</li>
<li>
<ol>
<li>Arrays and Lists</li>
<li>Stacks and Queues</li>
<li>Trees and Graphs</li>
37
 </ol>
</li>
<li>
</ol>
Marquee HTML
The Marquee HTML tag is a non-standard HTML element which is used to
scroll a image or text horizontally or vertically.
Syntax
<marquee>Contenet </marquee>
Example
<marquee>SVMC</marquee>

HTML Marquee Attributes

Marquee's element contains several attributes that are used to control and
adjust the appearance of the marquee.
Attribute Description
behavior It facilitates user to set the behavior of the marquee to one of the
three different types: scroll, slide and alternate.
direction defines direction for scrolling content. It may be left, right, up and
down.
width defines width of marquee in pixels or %.
height defines height of marquee in pixels or %.
hspace defines horizontal space in pixels around the marquee.
vspace defines vertical space in pixels around the marquee.
scrolldelay defines scroll delay in seconds.
scrollamount defines scroll amount in number.
loop defines loop for marquee content in number.
bgcolor defines background color. It is now deprecated.

38
HTML Scroll Marquee
It is a by default property. It is used to scroll the text from right to left, and
restarts at the right side of the marquee when it is reached to the end of left side.
After the completion of loop text disappears.
Example
<marquee width="100%" behavior="scroll" bgcolor="pink"> SVMC </marquee>

HTML Slide Marquee

In slide marquee, all the contents to be scrolled will slide the entire length of
marquee but stops at the end to display the content permanently.
Example
<marquee width="100%" behavior="slide" bgcolor="pink"> SVMC </marquee>

Direction in HTML marquee

This is used to change the direction of scrolling text. Let's take an example of
marquee scrolling to the right. The direction can be left, right, up and down.
Example
<marquee width="100%" direction="right"> Welcome </marquee>

HR tag
The <hr> tag in HTML stands for horizontal rule and is used to insert a
horizontal rule or a thematic break in an HTML page to divide or separate
document sections.
The <hr> tag is an empty tag, and it does not require an end tag.
Syntax
<hr> ...

Example
<h2>HTML</h2>

39
 <p>HTML is a language for describing web pages.</p>
<hr/>
<h2>HR Tag </h2>
<p> HR tag is used to draw a horizontal line .<p>

Output:
HTML
HTML is a language for describing web pages.

HR Tag
HR tag is used to draw a horizontal line

Attributes:
The table given below describes the <hr> tag attributes.
Attribute Values Value Description
align left center right Used to specify the alignment of the
horizontal rule.
noshade noshade Used to specify the bar without
shading effect.
size pixels Used to specify the height of the
horizontal rule.
width pixels Used to specify the width of the
horizontal rule.

HTML Image Tag

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

40
Adding Images Using the < img > Element
Images are added to a site using the < img > element, which has to carry
at least two attributes: the src attribute, indicating the source of the image, and an
alt attribute, which provides a description of the image.

Example

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

Attributes of HTML <img> tag

src:
It is used to specify the path to the image.
<img src="URL">
alt:
It is used to specify an alternate text for the image, if the image cannot be
displayed then this alternate text will be displayed.
41
 <img alt="text">
Example
<h2>HTML Image Example</h2>
<img src="good_morning.jpg" alt="Good Morning Friends"/>
height:
It is used to specify the height of the image.
<img height="pixels">
width:
It is used to specify the width of the image.
<img width="pixels">
Example
<img src="good_morning.jpg"width="420"height="100" alt="Good Morning Fr
iends"/>

align
The align attribute was created to align an image within the page ,
Align values are
Left, right , top, middle, bottom
<img src=”images/cover.gif” alt=”Book cover” align=”left” />

Border
A border is a line that can appear around an image or other element. The border
attribute was created to specify the width of the border in pixels:
< img src=”images/logo.gif” alt=”Wrox Logo” border=”2” />

hspace and vspace

The hspace and vspace attributes can be used to control the amount of
white space around an image.
< img src=”images/logo.gif” alt=”Logo” hspace=”10” vspace=”14” />
ismap:

42
 It is used to specify an image as a server-side image map.
<img ismap>
usemap:
It is used to specify an image as a client-side image map.
<img usemap="#mapname">
longdesc:
It is used to specify a URL to a detailed description of an image.

HTML Links
A webpage can contain various links that take we directly to other pages and
even specific parts of a given page. These links are known as hyperlinks.
Creating Link with <a> Element
A link is specified using HTML tag <a>. This tag is called anchor tag and
anything between the opening <a> tag and the closing </a> tag becomes part of
the link and a user can click that part to reach to the linked document.
Example
<a href = "Document URL" ... attributes-list>Link Text</a>

<body>
<p>Click following link</p>
<a href = "https://www.svmcugi.com"
target = "_self">SVMC</a>
</body>
The target Attribute

This attribute is used to specify the location where linked document is

opened. Following are the possible options −

Sr.No Option & Description

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

_self
2
Opens the linked document in the same frame.

_parent
3
Opens the linked document in the parent frame.

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

targetframe
5
Opens the linked document in a named targetframe.

Appearance of HTML anchor tag

• An unvisited link is displayed underlined and blue.
• A visited link displayed underlined and purple.
• An active link is underlined and red.
Using Image as a Link in HTML
An image can be used to create a link to a specified URL. When the viewer
clicks on the link, it redirects them to another page.
Example
<html>
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;"></a>
</body>

44
 </html>

The < a > Element ’ s Other Attributes

The <a> element supports all of the universal attributes, the UI event
attributes, and the following attributes:
▪ accesskey
▪ charset
▪ coords
▪ href
▪ hreflang
▪ rel
▪ shape
▪ style
▪ type

45
 Unit - IV

Tables
HTML table tag is used to display data in tabular form (row * column). There
can be many columns in a row.

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

We can create a table to display data in tabular form, using <table> element,
with the help of <tr> , <td>, and <th> elements.

HTML Table Tags

Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for

formatting.

<col> It is used with <colgroup> element to specify column properties

for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

46
Basic Table Elements and Attributes
The <table> Element
The <table> element represents tabular data — that is, information
presented in a two-dimensional table comprised of rows and columns of cells
containing data.
Example
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</body>
The < table > element can carry the following attributes
• align
• bgcolor
• border
• cellpadding
• cellspacing
• rules
• summary
• width
align attribute
This attribute indicates how the table must be aligned inside the containing
document. It may have the following values:
• left: the table is displayed on the left side of the document;
• center: the table is displayed in the center of the document;
47
 • right: the table is displayed on the right side of the document.

bgcolor attribute
The background color of the table. It is a 6-digit hexadecimal RGB code, prefixed
by a '#'.
<table bgcolor="color_name | hex_number | rgb_number">
<table bgcolor="red”>

border attribute
This integer attribute defines, in pixels, the size of the frame surrounding the table.

<table border="1">

Cellspadding and Cell Spacing

Cell padding This attribute defines the space between the content of a cell
and its border, displayed or not. If the cellpadding's length is defined in pixels.
Cell spacing attribute defines the size of the space between two cells in a
percentage value or pixels.
<table cellpadding="value" >.....</table>
<table cellspacing="value" >.....</table>

rules attribute
The rules attribute is used to indicate which inner borders of the table
should be displayed.
rules=” ruleType ”

48
Summary attribute
This attribute defines an alternative text that summarizes the content of the
table.
width Attribute
The width attribute is used to specify the width of the table, and usually its
value is given in pixels.
width=”500”

The <tr> Element

HTML <tr> tag is used to define the rows in the table. The <tr> tag can consist
one or more <th> head cells and <td> data cells to define a single row of HTML
table.
The <tr> tag must be a direct child of <table> element

Syntax
<tr>.......</tr>

Example

<table border="1">
<tr>
<th>Rank</th>
<th>Country</th>
<th>Total medals</th>
</tr>
</table >

<tr> tag Attribute

Attribute Value Description
align right It determines the alignment of the content in the table
left row.
center

49
 justify
char
bgcolor rgb(x,x,x) It defines the background color of the table row.
#xxxxx
color_name
char character It specifies the alignment of content to the character.
charoff number It specifies the number of character the table row
content will be aligned from the character, and which is
specified by char attribute.
valign Top It specifies the vertical alignment of the table row
Middle content.
Bottom
baseline

The <td> Element

HTML <td> tag is used to specify the cells of an HTML table which contain
data of the table. The <td> tag must be the child element of <tr> (table row) tag.
Each table row can contain multiple <td> data elements.

Syntax
<td>.......</td>

Example
<table>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Books</td>
<td>5</td>

50
 <td>589</td>
</tr>
<tr>
<td>T-shirt</td>
<td>5</td>
<td>3500</td>
</tr>

<td> tag Attribute

Attribute Value Description
align left It specifies the alignment of the content of the cell. (Not
right Supported in HTML5)
center
justify
char
bgcolor rgb(x,x,x) It sets the background color of the cell. (Not Supported
#xxxxxx in HTML5)
Color_name
char character It specifies the alignment of the content of cell to the
character.
charoff number It determines the number of characters the content
aligned from the character specified by the char
attribute.
colspan number It determines the number of columns a cell should
span.
headers header_id It determines one or more header cells to which a cell is
related.
51
height % It determines the height of a table cell.
pixels
rowspan number It determines the number of rows a cell should span.
scope col It specifies the cells that the header element relates to
colgroup
row
rowgroup
valign top It determines the vertical alignment of the cell content.
middle
bottom
baseline
width % It determines the width of the cell
pixels

The <th> Element

HTML <th> tag is used to define the header cells of an HTML table. The
header cell renders as bold and centered by default on the browser.

Syntax
<th>Content....... </th>
Example
<table border="1">
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>January</td>
<td>20.01.2018</td>
</tr>
<table>

52
HTML Table <caption> tag
HTML <caption> tag is used to add a caption or title of an HTML table. It
should be used inside the <table> element and just after the <table> start tag. A
table may contain only one <caption> element.

Syntax
<caption>Table title...</caption>
Attribute
Tag-specific Attributes

Attribute Value Description

align o top It aligns the caption with respect to table

o bottom
o left
o right

Example
<body>
<h2>Example of Caption tag</h2>
<table width="800">
<caption>Employee Details</caption>
<thead>
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>Email</th>
</tr>

53
 </thead>
<tbody>
<tr>
<td>1.</td>
<td>Ankit Pandey</td>
<td>[email protected]</td>
</tr>
<tr>
<td>2.</td>
<td>Ashvini Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>3.</td>
<td>Swati Sharma</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</body>

54
Row Span and Col Span
Row Span
The HTML rowspan attribute define the number of rows a cell of a table
should span in an HTML document. It can only be applied on td or th HTML
element.
Example

Syntax
Following is the syntax −
<tagname rowspan=”number”></tagname>

Elements that accept rowspan

The following elements accept the rowspan attribute.
• <td> Specifies a table data cell -- see example above
• <th> Creates a table header cell.

<th> with rowspan

Example
<table class="tbl">
<tr>
55
 <th rowspan="2">Name</th>
<td>Anna</td>
</tr>
<tr>
<td>Paxton</td>
</tr>
<tr>
<th rowspan="3">Address</th>
<td>124 W 7th Street</td>
</tr>
<td>Austin</td>
</tr>
</tr>
<td>Texas, 78702</td>
</tr>
</table>

colspan attribute
The colspan attribute in HTML specifies the number of columns a cell
should span. It allows the single table cell to span the width of more than one cell
or column.
56
Syntax:
<td colspan = "value">table content...</td>

Attribute Values:
Attribute Values Description
number It specifies how many columns a cell
should cover. When set to
`colspan=”0″`, it instructs the browser
to expand the cell to the last column of
the table section (thead, tbody, or
tfoot).

Using with <td> tag

The colpan attribute when used with <td> tag determines the number of columns
a table cell should span.
Syntax:
<td colspan = "value">table content...</td>

Example
<table>
<tr>
<th>Name</th>

57
 <th>Expense</th>
</tr>
<tr>
<td>Arun</td>
<td>$10</td>
</tr>
<tr>
<td>Priya</td>
<td>$8</td>
</tr>
<tr>
<td colspan="2">Sum: $18</td>
</tr>
</table>

Using with <th> tag

The colspan attribute when used with <th> tag determines the number of
header cells it should span.
Syntax:
<th colspan = "value">table content...</th>
Example
<table>
58
 <tr>
<th colspan="2">Expense</th>
</tr>

<tr>
<td>Arun</td>
<td>$10</td>
</tr>

<tr>
<td>Priya</td>
<td>$8</td>
</tr>
</table>

Table Cellpadding
Cellpadding is the attribute that defines the space in a cell between the cell content
and its border.
Syntax
<table cellpadding="value" >.....</table>
Type of value
Type of value of HTML cellpadding attribute is pixel, percent or
multilength(i.e. relative length).
Value

59
 A length in pixels, percent or a relative length.
Default value
There is no default value of HTML cellpadding attribute.

Example 1:
Table with Cellpadding set as 15 pixels
<table border="1"
cellpadding="15">
<caption>Book</caption>
<tr>
<th>NAME</th>
<th>AUTHOR</th>
<th>GENRE</th>
</tr>
<tr>
<td>The Kite Runner</td>
<td>Khaled Hosseini</td>
<td>Historical fiction Drama</td>
</tr>
</table>

Example 2:
Table with Default Cellpadding (1 pixel)
<table border="1">
<caption>Book</caption>

60
 <tr>
<th>NAME</th>
<th>AUTHOR</th>
<th>GENRE</th>
</tr>
<tr>
<td>The Kite Runner</td>
<td>Khaled Hosseini</td>
<td>Historical fiction Drama</td>
</tr>
</table>

How to create tables in HTML?

We use the <table> tag, to create table in HTML. A table consist of rows
and columns. Table heading, row and column and table data can be set using one
or more <th>, <tr>, and <td> elements.

Add a Table Heading in HTML

The <th> is used to add headings to tables.
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
</tr>

61
Add a Caption to a Table
To insert a caption into a table, use the <caption> tag.
<table>
<caption></caption>
<tr> </tr>
</table>
Example
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
62
 </tr>
</table>
</body>

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

<frameset> element
The <frameset> element contains one or more frame elements. It is used to
specify the number of rows and columns in frameset with their pixel of spaces.
Syntax:
<frameset cols = "pixels|%|*">

<frameset> Attribute
There are several frameset attributes are given below:
• Cols
• Rows

64
 • Border
• framespacing
cols: The cols attribute is used to create vertical frames in a web browser. This
attribute is basically used to define the no. of columns and their size inside the
frameset tag.
<frameset cols = "20%, 60%, 20%">
<frame name = "top" src = "attr1.png" />
<frame name = "main" src = "gradient3.png" />
<frame name = "bottom" src = "col_last.png" />
</frameset>

rows: The rows attribute is used to create horizontal frames in the web browser.
This attribute is used to define the no. of rows and their size inside the frameset tag.
<frameset rows = "20%, 60%, 20%">
<frame name = "top" src = "attr1.png" />
<frame name = "main" src = "gradient3.png" />
<frame name = "bottom" src = "col_last.png" />
</frameset>

border: This attribute of frameset tag defines the width of the border of each frame
in pixels. Zero value is used for no border.
<frameset border = “2”>
framespacing: This attribute of frameset tag is used to specify the amount of
spacing between the frames in a frameset. This can take any integer value as a
parameter which basically denotes the value in pixel.
<frameset rows="*" cols="200, *" framespacing="30">

65
<frame> Element
The <frame> HTML element defines a particular area in which another
HTML document can be displayed.
<frame>Attribute
▪ src Attribute
▪ name Attribute
▪ frameborder Attribute
▪ marginwidth and marginheight Attributes
▪ noresize Attribute
▪ scrolling Attribute
▪ longdesc Attribute
src Attribute
This attribute in frame tag is basically used to define the source file that
should be loaded into the frame.The value of src can be any url.
Example:
<frame name = "left" src = "/html/left.htm" />

Name Attribute
It is used to assign the name to the frame.
<frame name = "text">
<frame name = "SVMC">

frameborder Attribute
frameborder attribute is to specify whether or not to display a border around
a frame.
The value of this attribute can be set to “1” or “0”.
Example

66
 <frame frameborder="value" >.....</frame>
<frame src="frame_left.htm" frameborder="0" />

marginwidth Attribute
This attribute in frame tag is used to specify width of the spaces in pixels
between the border and contents of left and right frame.
Example:
<frame marginwidth="20">

Marginheight Attribute
This attribute in frame tag is used to specify height of the spaces in pixels
between the border and contents of top and bottom frame.
Example:
<frame marginheight="20">
Scrollbar Attribute
To control the appearance of scroll bar in frame use scrollbar attribute in
frame tag. This is basically used to control the appearance of scrollbar. The value of
this attribute can be yes, no, auto.
Example
<frame scrollbar="no">
noresize attribute
noresize attribute is used to specify that the frame element can not be resize
by the user. This type of attribute is used to lock the size of the frame element.
<frameset cols="30%, 40%, 30%">
<frame name="top" src="attr1.png" noresize="noresize"/>
</frameset>

longdesc Attribute
longdesc Attribute is used to specify a page which contains the long
description of the content of the frame.
67
 Syntax:
<frame longdesc="URL">
Example
<frameset cols="50%,50%">
<frame src="frame_a.htm" longdesc="w3s.txt">
<frame src="frame_b.htm">
</frameset>

Nesting Framesets
Nesting framesets involves including one frameset within another, which
can provide more flexibility in designing complex layouts.

Creating Nested Frames

1. Start by defining the outer frameset using the < frameset> tag.
2. Within the outer frameset, define the rows or columns using the rows or
cols attribute respectively.
3. The rows attribute specifies the height of each row as a comma-separated
list of values or percentages.
4. The cols attribute specifies the width of each column in a similar manner.
5. Inside each row or column, define another frameset using the
68
 < frameset> tag.
6. Repeat this process to include as many nested framesets as required.
7. Finally, include the < frame> or < iframe> tags within the innermost
framesets to display the desired content.

Example

<frameset rows="50%, 50%">

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

<frame src="frame1.html">

<frame src="frame2.html">

</frameset>

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

<frame src="frame3.html">

<frame src="frame4.html">

</frameset>

</frameset>

Noframe tag
The <noframes> tag is the backup for those browsers that does not support
frames. This tag can contains the entire element that can be placed in <body> tag.
It is used to create link with the non-frame set version of any website where
you want to display a message to the user.
This <noframes> tag is not supported in HTML5.
Syntax:
<noframes> Statement for the user </noframes>

69
Browser compatibility
The HTML noframes tag is supported by different types of browsers.
• Chrome
• Firefox
• Opera
• Safari
• Internet Explorer
Example
<!DOCTYPE html>
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
<noframes>Sorry, your browser does not handle frames!</noframes>
</frameset>
</html>

70
HTML Form
An HTML form is a section of a document which contains controls such as text
fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server
for processing such as name, email address, password, phone number, etc. .

HTML Form Syntax

<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>

HTML Form Tags

Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> 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.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button

71
HTML <input> element
The HTML <input> element is fundamental form element. It is used to create
form fields, to take input from user. We can apply different input filed to gather
different information form user.
Attributes
Attributes Descriptions
type It is used to specify the type of the input
element. Its default value is text.
value It is used to specify the value of the
input element.
placeholder Placeholder attribute is used to specify
hint that describes the expected value of
an input field.
name It is used to specify the name of the
input element.
alt It is used to provide alternate text for
the user, if they cannot view the image.
autofocus It specifies that an element should
automatically get focus when the page
loads.
checked It specifies that an element should be
pre-selected (checked) when the page
loads.
disabled The disabled attribute specifies that the
element should be disabled
max It is used to specify the maximum value
for an < input > element.
required It specifies that an input field must be
filled out before submitting the form.
readonly It specifies that an input field is read-
only. A read-only input field cannot be
modified.
align It is used to specifies the alignment of
an image input.

<input type=”text”>
The HTML <input type=”text”> is used to define a single-line text field .

Syntax
72
 <input type="text">

Example
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>

<input type=”password”>
The HTML <input type=”password”> is used to specify the password field
of input tag.
Example
<input type="password" id="mypasswd">

HTML <textarea> tag

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size
of <textarea> can be specify either using "rows" or "cols" attribute or by CSS.
Example
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>

73
Radio Button Control
The radio button is used to select one option from multiple options. It is used for
selection of gender, quiz questions etc.
Example
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Fe
male <br/>
</form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
74
 <input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>

Submit button control

HTML <input type="submit"> are used to add a submit button on web page. When
user clicks on submit button, then form get submit to the server.

Syntax:
<input type="submit" value="submit">
Example
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>
75
HTML <select> Tag
The <select> tag in HTML is used to create a drop-down list. The <select>
tag contains <option> tag to display the available option of drop-down list.
Syntax:
<select>
<option>
</option>
...
</select>
<select>
<option value="By the way">BTW</option>
<option value="Talk to you later">TTYL</option>
<option value="To be honest">TBH</option>
<option value=" I don’t know">IDK</option>
</select>

Example

<form>
<fieldset>
76
 <legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <
br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>

77