INTRODUCTION TO HTML

Objectives
Insert a graphic within a web page. Create a link within a web page.Create a table within a
webpage. Insert heading levels within a web page.Insert ordered and unordered lists within a
webpage. Create a web page.

UNITI
Introduction :Web Basics: What is Internet – Web browsers – What is Web page –
HTMLBasics:Understandingtags.

UNITII
Tags for Document structure( HTML, Head, Body Tag). Block level text
elements:Headingsparagraph(tag) –Fontstylelements:(bold,italic,font,small,strong,strike,bigtags)

UNITIII
Lists: Types of lists: Ordered, Unordered – Nesting Lists – Other tags: Marquee,
HR,BR-UsingImages – CreatingHyperlinks.

UNITIV
Tables: Creating basic Table, Table elements, Caption – Table and cell alignment –
Rowspan,Colspan–Cell padding

UNITV
Frames:Frameset–TargetedLinks–Noframe–Forms:Input,Textarea,Select,Option.

1
 UNITI

WEBBASICS:

What is the 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. It is set up by using cables such as optical fibers
and other wireless and networking technologies. At present, internet is the fastest mean of
sending or exchanging information and data between computers across the world.

Internet infrastructure comprises optical fiber data transmission cables or copper wires, as
well as numerous additional networking infrastructures, such as local area networks (LAN),wide
area networks (WAN), metropolitan area networks (MAN),etc. Sometimes wireless services such
as 4G and 5G or WiFi necessitate similar physical cable installations for internet access.

1) LAN:

A Local Area Network (LAN) is a group of computer and peripheral devices which are
connected in a limited area such as school, laboratory, home, and office building. It is a widely
useful networkforsharingresourceslikefiles,printers,games,andotherapplication.

2) WAN:

2
 Wan (Wide Area Network) is another important computer network that which is spread
across a large geographical area. WAN network system could be a connection of a LAN which
connects with other LAN‘s using telephone lines and radio waves. It is mostly limited to an
enterprise or an organization.

3) MAN:

A Metropolitan Area Network or MAN is consisting of a computer network across an

entire city, college campus, or a small region. This type of network is large than a LAN, which is
mostly limited to a single building or site. Depending upon the type of configuration, this type of
network allows you to cover an area from several milestotens of miles.

WWW
 WWW stands for World Wide Web. A technical definition of the World Wide Web is
−All the resources and users on the Internet that are using the Hypertext Transfer
Protocol (HTTP).
 A broader definition comes from the organization that Web inventor Tim Berners-Lee
helped found, the World Wide Web Consortium (W3C): The World Wide Web is the
universe of network-accessible information, an embodiment of human knowledge.
 In simple terms, The World Wide Web is a way of exchanging information between
computers on the Internet, tying them together into avast collection of interactive
multimedia resources.

HTTP
 HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to transfer
hypertext documents that makes the World Wide Web possible.
 A standard web address such asYahoo.com is called a URL and here the prefix http
Indicates its protocol.

URL

3
  URL stands for Uniform Resource Locator, and is used to specify addresses on the
World Wide Web. A URL is the fundamental network identification for any resource
connected to the web (e.g., hypertext pages, images, and sound files).
 The protocol specifies how information is transferred from a link. The protocol used for
web resources is Hyper Text Transfer Protocol (HTTP). Other protocols compatible with
most web browsers include FTP, telnet, newsgroups, and Gopher.
 The protocol is followed by a colon, two slashes, and then the domain name. The domain
name is the computer on which there source is located.
 Links to particular files or subdirectories may be further specified after the domain name.
The directory names are separated by single forward slashes.

Website:
 Currently you are on our website Tutorialspoint.com which is a collection of various
pages written in HTML markup language. This is a location on the web where people can
find tutorials on latest technologies. Similarly, there are millions of websites available on
the web.
 Each page available on the website is called a web page and first page of any website is
called home page for that site.
Web Browser:
A software application used to access information on the World Wide Web is called a Web
Browser. When a user requests some information, the web browser fetches the data from a web
server and then displays the web page on the user‘s screen.
 Web Browsers are software installed on your PC. To access the Web you need a web
browsers, such as Netscape Navigator, Microsoft Internet Explorer or Mozilla Firefox.

What is a Webpage

 A webpage is a document written in HTML and can be viewed on any web browser. It is
contained within the web server, which can be accessed by entering the URL for that
webpage, and once it is loaded, it appears on the user's web browser. Each webpage is
linked with a unique URL; hence two pages cannot have the same URL.

4
  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
asMozilla,Firefox,Chrome,etc.It isalso referred toas"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. The WWW or Internet contains
millions of web pages, and daily, a lot is being added. Tim Berners-Lee developed the first
webpage.

HTML

 HTML stands for Hypertext Markup Language. It is the most basic language, and simple
to learn and modify. It is a combination of both hypertext and markup language. It
contains the elements that can change/develop a web page‘s look and the displayed
contents. Or we can say that HTML creates or defines the structure of web pages. We
can create websites using HTML which can be viewed on internet-connected devices
like laptops, android mobile phones,etc.

 The first version of HTML is HTML 2.0 which was published in 1999, and the
latestversionisHTML5.WecansaveHTMLfileswithanextension.html.

Hypertext

Text that is not restricted to a sequential format and that includes links to other text is
called Hypertext. The links can connect online pages inside a single or different website.

5
Markup Language

Markup Language is a language that is interpreted by the browser and it defines the
elements within a document using―tags‖. It is human-readable, which means that markupfiles
use common words rather than the complicated syntax of programming languages.

Tags and Elements in HTML

HTML Tags:

HTML tags are special keywords that specify how the data will be displayed or how to
format the data by the webbrowsers. With tags, the webbrowser can make out in the document
that: what is HTML content and what is the normal plain content (as tags are always written in
angular brackets <> ). Usually, the start of the tags is given by angular brackets<> and the end
by angularbrackets, and /thatis </>.

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.

6
 4. The element: The opening tag, the closing tag, and the content together comprise the
element.

Example:

<head> </head>

HTML Element:

The collection of start and end tags with the content inserted in between them is known as
an HTML element.

Example:

<head> I am HTML element</head>

Important HTML Tags:

 <html></html>:
It is the root element and all the other tags are contained in it. It determines the start and
the end of the HTML document.
 <head></head>:
It contains meta data of the HTML document & is actually not displayed on the webpage.
The heading starts with <head>and end with</head>.
 <title></title>:
It is used to create a title of the document and the title appears in the title bar at the
top. At least one title appears in every document. The title portion of the document starts
with<title>and ends with</title>, and in between, enter the text that you want as the title.
 <body></body>:
It contains the contents of the document to be displayed on the web page. The content
may be an image, some text, some links, etc. This part represents the body of the web document,
which of ten includes headings, text, and paragraphs.

EXAMPLE:
<html>

7
<head>
<title> ism</title>

</head>
<body>
<h1>ALLISWELL</h1>
</body>
</html>

Output:

ALLISWELL

Block-level Elements

1) Heading

A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage. When you place the text within the heading tags <h1> .......... </h1>, it is
Displayed on the browser in the bold format and size of the text depends on the number of
heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags.

<h1> heading </h1>

<h2>subheading1</h2>
<h3>subheading2</h3>
<h4>subheading3</h3>
<h5>subheading4</h5>
<h6>subheading5</h5>

8
H1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading
and h6 is used for least important.

EXAMPLE:

<html>

<head>

<title> heading tag</title>

</head>

<body>

<h1>DEEPIKA</h1>

<h2>DEEPIKA</h2>

<h3>DEEPIKA</h3>

<h4>DEEPIKA</h4>

<h5>DEEPIKA</h5>

<h6>DEEPIKA</h6>

</body>

</html>

9
2) Paragraphhttps://write.geeksforgeeks.org/how-to-improve

In this article, we will know the HTML Paragraph, & its basic implementation through the
examples. 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. Most browsers read a line
as a paragraph even if we don‘t use the closing tag i.e, </p>, but this may raise unexpected
results. So, it is a good convention, and we must use the closing tag.

Syntax:

<p>Content</p>

Example1:
<html>
<head>
<title>Paragraph tag</title></head>
<body>
<p>
This paragraph contains a lot of lines in the sourcecode, but the browserignoresit.
</p></body>
</html>
Output:

10
 This paragraph contains a lot of lines in the sourcecode, but the browserignoresit.

Example2:

<html>
<head>
<title>Paragraphtag</title></head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamcolaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
involuptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
nonproident,sunt inculpaquiofficiadeseruntmollit animid estlaborum.</p>
</body>
</html>

Output:
Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehender
itin voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatatnonproident, sunt inculpaqui officia deseruntmollitanimid est laborum.

INLINEELEMENTS
The elements that do not begin on a new line are known as inline elements. They are
combined as a part of the main text and not a separate action. These elements occupy only the
required space. Spaces to the left and right can be added to an inline element, but there cannot be
added height to the top or bottom padding or margin of an inline element.

Syntax:

<span>Contents</span>

11
EXAMPLE:

<html>
<body>
<h1>The span element</h1>
<p>Mymotherhas<spanstyle="color:blue;font-
weight:bold;">blue</span>eyesandmyfatherhas<spanstyle="color:darkolivegreen;font-
weight:bold;">darkgreen</span>eyes.</p>
</body>
</html>
OUTPUT:

The span element

My mother has blue eyes and my father has darkgreen eyes.

FONTSTYLES:

The <font> tag in HTML plays an important role in the web page to create an attractive
and readable web page. The font tag is used to change the color, size, and style of a text. The
base font tag is used to set all the text to the same size, color and face.

Syntax:

<font attribute="value">Content</font>

FONT TYPE ATTRIBUTE:

A. Font Color:

Font color is used to set the text color using a font tag with the color attribute in an HTML
document. Color can be specified either with its name or with its hexcode.

Syntax:
12
<font color="color_name|hex_number|rgb_number">
EXAMPLE:

<html>
<body>
<fontcolor="red">HTML</font><br/>
<fontcolor="green">WEBPAGE</font>
</body>
</html>
OUTPUT:

HTMLWEB

PAGE

B. font Size:

This attribute is used to adjust the size of the text in the HTML document using a font tag
with the size attribute. The range of size of the font in HTML is from 1to7 and the default size is
3.

Syntax:

<font size="number">
Example:
<html>

<body>

<font size="1">WELCOME</font><br/>

<font size="2">WELCOME</font><br/>

<font size="3">WELCOME</font><br/>

<font size="4">WELCOME!</font><br/>

13
 <font size="5">WELCOME</font><br/>

<font size="6">WELCOME</font><br/>

<font size="7">WELCOME!</font>

</body>

</html>

OUTPUT:

WELCOME
WELCOME
WELCOME
WELCOME
WELCOME
WELCOME
WELCOME

C. Font Type:

Font type can be set by using face attribute with font tag in HTML document. But the
fonts used by the user need to be installed in the system first.

Syntax:
<font face="font_family">

Example: This example describes the<font>tag with different font type & font size.

<html>
<body>
<font face="TimesNewRoman"size="6">INTERNET</font> <br />
<font face="Verdana"size="6">WEBPAGE </font><br/>
<font face="ComicsansMS"size="6">WEBBROWER</font><br/>

14
</body>
</html>
Output:

INTERNETWE
B
PAGEWEBBR
OWER

BOLDTAG

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. If you want to show your text in bold letters and not have real semantic
meaning, then put it within <b></b>tag.

Syntax:

<b>This text is bold.</b>

Exapmle:

<html>

<head>

<title>bold</title>

</head>

<body>

<b>AllIsWell</b>

</body>

15
</html>

Output:

All IsWell

ITALIC:

To make text italic in HTML, use the <i>…</i> tag or <em>…</em> tag. Both the tags have
thesame functioning,but <em>tagisa phrasetag,whichrendersasemphasized text.

Syntax:

<i>Computer</i>

Example:

<html>

<head>

<title>bold</title>

</head>

<body>

<i>AllIsWell</i>

</body>

</html>

16
Output:

AllIsWell

FONT: Base font size( Such as large to medium, medium to small, etc.)

1. smallTag

The<small> tag in HTML is used to set small fontsize. It decreases the font size by one
size (from medium to small).

You can put<small>tag into another<small>tag, thus the font of the text is minimized in
correspondence with the― depth‖ of the content.

Syntax:

<small>Contents...</small>

EXAMPLE:
<html>
<head>
<title>UsageoftheSMALLtag</title>
</head>
<body>
<p>The interestrate isonly10%*</p>
<small>*perday</small>
</body>
</html>

17
OUTPUT:

2. BIG:

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.

Syntax

<big>Contents...<big>

Example:

<head>
<title>Titleofthedocument</title>
</head>
<body>
<p>Thistextisnormal.</p>
<p><big>Thistextisbigger.</big></p>
</body>
</html>

Result

18
3. STRONG:

The <strong> tag highlights an important part of a text. It can be used for such important
contents, as warnings. This can be one sentence that gives importance to the whole page, or it
may be needed if you want to highlight some words that are of greater importance compared to
the rest of the content. The content of the tag has higher weight for the search engines and the
devices, while reading emphasizes the content only with special intonation.

The <strong> tag is a phrase tag indicating that a text section has structural meaning.

The content of the tag is displayed as bold.

Syntax:
<strong>Contents...</strong>

EXAMPLE:

<html>
<head>
<title>Titleofthedocument</title>
</head>
<body>

19
 <p>Internetisaglobalnetworkthat<strong>connectsbillionsofcomputersacrosstheworld
</strong>witheachotherandtothe WorldWideWeb
</p>
</body>
</html>
OUTPUT:

4. STRIKE:

The HTML <strike> tag gives text the appearance of a strike through which draws a
horizontal line over the text. This tag is also comm. Only referred to as the <strike>element.

Syntax

<strike>Contents...<strike>

Example of the HTML<strike>tag:

<head>
<title>Title of the document</title>
</head>
<body>
<p><strike>Iamstudyingatthe school.</strike></p>
<p>Iamstudyingattheuniversity.</p>
</body>
</html>

Result

20
 UNIT3

 A list is a record of short pieces of related information used to display the data or any
information in web pages in the ordered or unordered form.
 Lists are good from a structural point of view as they help create a well-structured, more
accessible, easy-to-maintain document.
 For example, to purchase the items, we need to prepare a list that can either be ordered or
unordered list which helps us to organize the data and easy to find the item.
 There are two different types of HTML lists:

1. Ordered List or Numbered List(ol)

2. Unordered List or Bulleted List(ul)

1. Ordered List or Numbered List(ol):

An ordered list is marked with the numbers by default. You can create an ordered list
using the <ol></ol> tag and, define the list items using<li></li>.

We can create 4 types of ordered lists IN HTML−

21
  type="1"−This creates a numbered list startingfrom1.
 type="A"−This creates a list numbered with upper case letters starting from A.
 type="a"−This creates a list numbered with lowercase letters starting from a.
 type="I"−This creates a list numbered with upper case roman numbers starting from I.
 type="i"−This creates a list numbered with lowercase roman numbers starting from i.

Syntax

<oltype="1">
<li>Iteminlist…</li>
<li>Iteminlist…</li>
<li>Iteminlist…</li>
</ol>
Example1:

<html>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Output:

1. Coffee
2. Tea
3. Milk

22
Example2:

<html>

<body>

<oltype="A">

<li>computer</li>

<li>mouse</li>

<li>keyboard</li>

</ol>

</body>

</html>

Output:

A. computer
B. mouse
C. keyboard

2. UN ORDERED LIST OR BULLETED LIST(UL):

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

 disc
 circle
 square

Syntax:

23
 <ul>list of items</ul>

Example1:

<html>
<body>
<ul>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>
Output:

 HTML
 Java
 JavaScript
 SQL

Example2:
<html>
<body>
<ulstyle="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

24
Output:

 Coffee
 Tea
 Milk

3. Nested list:
A nested list is simply a list inside another list. The proper way to create a nested list
is to realize that the nested list is a child of a list item, not a list. A nested list can be
ordered or unordered.

A. Nested un ordered list

To create an unordered list in HTML, use the ul (unordered list) tag with the li (list
item)tag in a hierarchical structure. In the example below, the list represents vegetable categories
with a nested list showing the vegetable names of a particular category.

Example

<html>
<body>
<ul>
<li>Fruit
<ul>
<li>Bananas</li>
<li>Apples
<ul>
<li>Green</li>
<li>Red</li>
</ul>

25
 </li>
<li>Pears</li>
</ul>
</li>
<li>Vegetables</li>
<li>Meat</li>
</ul>
</body>
</html>

OUTPUT

B. 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. In the example below, an ordered list represents the course curriculum
with a nested list showing the sub topics of each course.

26
Example

<html>
<body>
<h2>NestedOrderedList</h2>
<ol>
<li>Coffee</li>
<li> Tea
<ol>
<li>Blacktea</li>
<li>Greentea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT:

MarqueeHTML

27
 The Marquee HTML tag is a non-standard HTML tag which was used to create a
scrolling text or an image. It was used to make the text or image scroll horizontally across or
vertically down the web page.

Syntax

<marquee>welcome</marquee>

Example1:

<html>
<body>
<marquee width="100%"behavior="scroll"bgcolor="pink">welcometomypage
</marquee>
</body>
</html>
OUTPUT:

Example2:
<html>
<head>
<title>marquee</title>

28
 </head>
<body>
<marquee direction="down">welcometomypage</marquee>
</body>
</html>
OUTPUT:

HR TAG:

 The<hr>tag in HTML is used to give a thematic break between paragraphs on a webpage.

 The<hr> tag is used when we want to change the topic or break the flow of the content.

Syntax

<hr>

EXAMPLE:

<html>

<head>

<title>Title of the document</title>

</head>

29
 <body>

<h1>What is the Internet</h1>

<p> Internet is a global network that connects billions of computers across the world with
each other and to the World Wide Web. </p>

<hr>

<h1>WhatisHTML</h1>

<p> HTML stands for Hypertext Markup Language. It is the most basic language, and
simple to learn and modify. It is a combination of both hypertext and markup language.</p>

</body>

</html>

OUTPUT:

WhatistheInternet

Internetisaglobalnetworkthatconnectsbillionsofcomputersacrosstheworldwitheachotherandto
theWorld WideWeb.

WhatisHTML

HTML stands for Hypertext Markup Language. It is the most basic language, and simple to
learnandmodify.Itisacombinationof both hypertextand markup language.

BR TAG:

 The <br> tag inserts a single line break.

 The <br>tag is useful for writing addresses or poems.

30
  The<br>tag is an empty tag which means that it has no end tag.

Syntax

Text<br>Text

Example:

<html>

<head>

<title>BRtag

</title>

</head>

<body>

<p>HTMLstandsforHypertextMarkupLanguage.<br>Itisthemostbasiclanguage,andsimpletolearn
andmodify.<br>Itisacombinationofbothhypertextandmarkuplanguage.
</p>

</body>

</html>

Output:

HTMLstandsfor HypertextMarkupLanguage.
Itisthemostbasiclanguage,andsimpletolearnandmodify.Itisa
combinationofbothhypertextandmarkuplanguage.

IMAGE:

 The<img> tag is used to embed an image in an HTML page.

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

31
  That requires two attributes to be useful: src and alt.
 The src stands for‗source. The src attribute contains a URL pointing to the image you
want to embed in the page.
 The alt stands for ‗alternate text, ‘which is included by developers to entail what the
image is about.

Images Syntax

<img src="url" alt="some_text" style="width:304 px;height:228px;">

EXAMPLE1:

<html>

<head>

<title>Imagetag</title>

</head>

<body>

<h2><center>DEER</center></h2>

<img src="https://static.javatpoint.com/htmlpages/images/animal.jpg"
height="180"width="300"alt="animal image">

</body>

</html>

OUTPUT:

32
CreatingHyperlinks:

 HTML links are hyperlinks.

 If we want to add or insert the link in Html document for linking to another Html page
with the current working page.
 You can click on a link and jump to an other document.
 When you move the mouse over a link, the mouse arrow will turn in to a little hand.

Syntax:

<ahref="url">Linktext</a>

Explanation:

<a></a>:This is the anchor tag that creates a hyperlink. Anything between this tag becomes
part of the link. The user can click that part to reach the linked document.

 href: Specifies the destination address of the link used.

 Text link: The visible part of the link.

Example:

33
<html>

<head>

<title>web page linking</title>

</head>

<body>

<h1>HTMLLinksprogram</h1>

<p><ahref=file:///D:/ZDeeps/image.html>imageprogram</a></p>

</body>

</html>

Output:

34
 UNIT4

TABLE:

 A table is a structured set of data made up of rows and columns (tabular data).
 A table allows you to quickly and easily look up values that indicate some kind of
connection between different types of data
 For example a person and their age, or a day of the week, or the time table for a local
swimming pool.

Table element in HTML

Table tag in HTML, is used to display data in tabular format (i.e. in row-column
format).The set able tags manages the layout of the page (i.e.Header, Body Content etc.). To
create a table in HTML, you will need to define the table with the <table> tag. The <table> tag is
the container of the table that specifies where the table will begin and where it ends.

35
Common HTML Table tags

 <tr> -represents rows

 <td> -used to create data cells
 <th>-used to add table headings
 <caption>-used to insert captions

Creating Tables in HTML

HTML table allows you to arrange data into rows and columns. They are commonly used
to display tabular data like product listings, customer's details, financial reports, and so on. You
can create a table using the <table> element. Inside the <table> element, you can use the
<tr>elements to create rows, and to create columns inside a row you can use the <td> elements.
You can also define a cell as a header for a group of table cells using the<th>element.

Example1:

36
<html>

<body>

<tableborder="1"style="width:40%"bordercolor="green"bgcolor="yellow">

<h5>studentdetails</h5>

<tr>

<th>No.</th>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>1</td>

<td>PeterParker</td>

<td>16</td>

</tr>

<tr>

<td>2</td>

<td>ClarkKent</td>

<td>34</td>

</tr>

</table>

</body>

37
</html>

OUTPUT:

CAPTION

The <caption> tag is used to define the header of the table. The tag itself must be inside
the <table>element immediately after the opening (<table>) tag, and it must be the first child of
its parent<table> element. It is possible to define only one caption per table.

When the <table> element containing <caption> is the only descendant of the
<figure>element, you must use the<fig caption>element instead of<caption>.

By default, a table caption is center-aligned above a table. But it is possible to use the
text-align and caption-side properties to align and place the caption.

Syntax

<caption>NAMELIST</caption>

EXAMPLE:

38
<html>

<body>

<table border="1"style="width:40%">

<caption>Employee Details</caption>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>EmpId</th>

<th>Age</th>

<th>Designation</th>

</tr>

<tr>

<td>John</td>

<td>Roy</td>

<td>9111</td>

<td>28</td>

<td>SalesHead</td>

</tr>

<tr>

<td>Dinesh</td>

<td>Shetty</td>

<td>9112</td>

<td>43</td>

39
 <td>Developer</td>

</tr>

<tr>

<tr>

<td>Niks</td>

<td>Raw</td>

<td>9114</td>

<td>45</td>

<td>Tester</td>

</tr>

</table>

</html>

OUTPUT:

Table & Cell Align Attribute

40
TableAlignAttribute

The HTML table align attribute is used to control the horizontal alignment of a table on
a web page. It specifies where the table should be positioned relative to the surrounding text or
other content on the page.

The align attribute can be set to one of three values: left, center, or right. When set to left
or right, the table will be aligned to the respective edge of the page, with any remaining space
on the opposite side. When set to center, the table will be horizontally centered on the page.

ThepurposeofusingtheHTMLtablealignattributeistoimprovethevisualappearance of a
web page by aligning the table with the surrounding content in a way that is aesthetically
pleasing and easy to read. This is especially important for pages that contain a lot of text and
data, a sit can be difficult for readers to navigate the content without clear visual cues.

For example, a table that is aligned to the left of a web page may be more visually
appealing and easier to read when surrounded by text that is also aligned to the left. Conversely,
a table that is centered on a page may be more effective in drawing attention to its content and
separating it from surrounding text.

Syntax:

Table align="left">

AttributeValues:

 left: It sets the left align to the table. It is a default value.

 right: It sets the right align to the table.
 center: It sets the center align to the table.

RIGHTALIGNMENT

<html>

<head>

41
 <title>

HTMLtablealignAttribute
</title>
</head>
<body>

<h2>TablealignAttribute</h2>
<tableborder="1"align="right">
<caption>STUDENTDETAILS</caption>
<tr>
<th>NAME</th>
<th>AGE</th>

<th>BRANCH</th>
</tr>
<tr>
<td>UMA</td>

<td>22</td>
<td>CS</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>

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

OUTPUT

42
LEFTALIGNMENT

<html>
<head>
<title>
HTML table align Attribute
</title>
</head>

<body>

<h2>TablealignAttribute</h2>

<tableborder="1"align="left">
<caption>STUDENTDETAILS</caption>

<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>UMA</td>

43
 <td>22</td>
<td>CS</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ISM</td>
</tr>
<tr>
<td>DEEPIKA</td>
<td>21</td>
<td>BCA</td>
</tr>
</table>
</body>

</html>
OUTPUT

44
CENTERALIGNMENT

<html>
<head>
<title>
HTMLtablealignAttribute
</title>
</head>

<body>

<h2>TablealignAttribute</h2>

<tableborder="1"align="center">
<caption>STUDENTDETAILS</caption>

<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>UMA</td>
<td>22</td>
<td>CS</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ISM</td>
</tr>
<tr>

45
 <td>DEEPIKA</td>
<td>21</td>
<td>BCA</td>
</tr>
</table>
</body>

</html>

OUTPUT

Cell Align Attribute:

Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right,or center)of the content in
<th>or<td>.Bydefault,thecontentof<th>elementsarecenter-alignedandthecontentof<td>

46
Elements are left-aligned. To center-align the content of<td>elements as well, use text-align:
center

EXAMPLE:

<html>
<body>
<table border="1"width="500">
<tr style="text-align:center;">
<th>name</th>
<th>age</th>
<tr style="text-align:right;">
<td>uma</td>
<td>55</td>
</tr>
<tr style="text-align:left;">
<td>siva</td>
<td>44</td>
</tr>
<tr style="text-align:center;">
<td>kumar</td>
<td>44</td>
</tr>
</table>
</body>
</html>

47
OUTPUT:

name age

uma 55

siva 44

kumar 44

VerticalAlignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content
in<th>or<td>. Bydefault, the vertical alignment of the content in a table is middle (forboth
<th>and<td>elements).The following example sets the vertical text alignment to bottom for
<td>elements:

PROGRAM

<html>

<body>

<table border="1"width="100%"height="100%">

<tr>

<thvalign="top">Header1</th>

<thvalign="middle">Header2</th>

<thvalign="bottom">Header3</th>

</tr>

<tr>

<tdvalign="top">Row1,Column1</td>

48
 <tdvalign="middle">Row1,Column2</td>

<tdvalign="bottom">Row1,Column3</td>

</tr>

<tr>

<tdvalign="top">Row2,Column1</td>

<tdvalign="middle">Row2,Column2</td>

<tdvalign="bottom">Row2,Column3</td>

</tr>

</table>

</body>

</html>

OUTPUT:

colspan

49
 Colspanin HTML is an attribute that defines the number of columns a single cell can
spanin a table.

It allows the single table cell to span the width of more than one cell or column.

It provides the same functionality as―merge cell ‖in a spread sheet program like Excel.
It can be used with<td>and <th> element while creating an HTMLTable.

AttributeValues:

<td>: The col span attribute when used with <td> tag determines the number of
standard cell sit should span.

Syntax:

<td colspan="value">tablecontent...</td>

Example1:

<html>

<body>

<h2>studentdetails</h2>

<table border="1"style="width:40%">

<tr>

<th colspan="2">Name</th>

<th>Age</th>

</tr>

<tr>

50
 <td>siva</td>

<td>raja</td>

<td>43</td>

</tr>

<tr>

<td>ram</td>

<td>arun</td>

<td>57</td>

</tr>

</table>

</body>

</html>

Output:

51
rowspan:
The row span attribute in HTML specifies the number of rows a cell should span.

That is if arrow spans two rows, it means it will take up the space of two rows in that
table. It allows the single table cell to span the height of more than one cell or row.

It provides the same functionality as ―merge cell‖ in the spread sheet program like
Excel.

Attribute Values:
 <td>:The row span attribute when used with <td> tag determines the number of
standard cell sit should span.

Syntax:

<tdrowspan="value">tablecontent...</td>

EXAMPLE:

<html>

<body>

<h2>Studentphonenumber</h2>

<table border="1"style="width:40%">

<tr>

<th>Name</th>

<td>Deepika</td>

</tr>

<tr>

<throwspan="2">Phone</th>

52
 <td>9632587410</td>

</tr>

<tr>

<td>9874663210</td>

</tr>

</table>

</body>

</html>

Output:

CELL PADDING

Cell padding is use to adjust the white space in your table cells. The cell padding
represents the distance between cell borders and the content within a cell.

Cell padding is the space between cell borders of the table and the content within a cell of
the table.

53
Syntax:

<tablecellpadding="pixels">

Example
<html>
<head>
<title>HTMLTableCellpadding</title>
</head>
<body>
<table border="1"cellpadding="50"cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>RameshRaman</td>
<td>5000</td>
</tr>
<tr>
<td>ShabbirHussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>
Output:

54
CELL SPACING

Cell spacing is something different from cell padding. In HTML,cell spacing is yet
another attribute of the table tag. It regulates the distance between the single cells in a table. By
using this feature, developers might simply change the space between the edges of several
adjacent cells. It enhances the table's readability. The cell border appears to increase as the
number of cell spacing increases.

Cell spacing is most commonly utilized in web design. Different programming languages
utilize different syntax for cell spacing, like CSS utilizes the "border-spacing"property,
whereasHTMLutilizesthe"cellspacing"property.

Syntax:

<tablecellspacing="value"> ......</table>

EXAMPLE:

<html>
<head>
<title>HTMLTableCellpadding</title>
</head>

55
 <body>
<tableborder="1"cellspacing="30" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
<th>phone no</th>
</tr>
<tr>
<td>deepiks</td>
<td>5000</td>
<td>963258741</td>
</tr>
<tr>
<td>ShabbirHussein</td>
<td>7000</td>
<td>123654789</td>
</tr>
<tr>
<td>uma</td>
<td>7000</td>
<td>523654789</td>
</tr>
</table>
</body>
</html>

OUTPUT:

56
 UNIT5

FRAMES

 To use frames on a page we use <frameset> tag instead of <body> tag. and it divides a
webpage into multiple sections or frames, and each frame can contain different web
pages.
 The task is to create frames using HTML. HTML is HyperText Markup Language, and
it is the standard markup language for creating web pages. It describes the shape of a web
page and includes a sequence of elements.
 HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTMLdocument. A collection of frames in the browser

57
 Window is known as a frame set. The window is divided into frames in a similar way the
tables are organized :into row sand columns.

Attribute

Attribute Value Description

cols Pixels% Itspecifiesthe numberandsizeofcolumnspacesintheframeset

rows Pixels% Itspecifiesthe numberandsizeoftherowsspacesintheframeset

Syntax

<frame src="URL">

Example 1:

CreateVerticalframes:

FRAME1
<html>
<body>
<h3>frame1</h3>
<p>thisisfirstframe</p>
</body>
</html>

59
FRAME2:
<html>
<body>
<h3>frame1</h3>
<p>thisissecoundframe</p>
</body>
</html>

FRAME3
<html>
<body>
<h3>frame1</h3>
<p>thisisthirdframe</p>
</body>
</html>

FRAME4:
<html>
<head>
<title>Frame tag</title>
</head>
<framesetcols="25%,50%,25%">
<frame src="frame1.html">
<framesrc="frame2.html">
<framesrc="frame3.html">
</frameset>
</html>

OUTPUT:

60
Example2:
CreateHorizontalframes:

FRAME1
<html>
<body>
<h3>frame1</h3>
<p>thisisfirstframe</p>
</body>
</html>

FRAME2:
<html>
<body>
<h3>frame1</h3>
<p>thisissecoundframe</p>
</body>
</html>

61
FRAME3
<html>
<body>
<h3>frame1</h3>
<p>thisisthirdframe</p>
</body>
</html>FRA

ME4:

<html>
<head>
<title>Frametag</title>
</head>
<framesetrows="30%,40%,30%">
<framename="top"src="frame1.html">
<frame name="main" src="frame2.html">
<framename="bottom"src="frame3.html">
</frameset>
</html>

OUTPUT:

62
Syntax:
<noframes>Statementfortheuser</noframes>

insideelementofanormalHTMLpage.The tagshouldbenestedinside
tag.

EXAMPLE:

63
FRAME1
<html>
<body>
<h3>frame1</h3>
<p>thisisfirstframe</p>
</body>
</html>

FRAME2:
<html>
<body>
<h3>frame1</h3>
<p>thisissecoundframe</p>
</body>

FRAME3:
</html>
<html>
<head>
<title>Frametag</title>
</head>
<body>
<framesetcols="50%,25%">
<frame src="frame1.html">
<framesrc="frame2.html">

<noframes>Thebrowserwon‘t support theframetag.</noframes>

</frameset>
</body>
</html>
OUTPUT:

64
FORMSINPUT:

The <input> tag specifies an input field where the user can enter

data.The<input> elementisthemost importantform element.

The<input>elementcanbedisplayedinseveralways,dependingonthetypeattribute.

The<input>tag in HTML is used to design interactive controls in web forms for accepting
data from the user end.

The<input>tagisoneofthemostimportantelementsusedinallofHTMLduetoitssheernumber
ofcombinationsof attributesand inputtypes.

The <input type=‖―>tag is an important element of a HTML<form>element. The

―type‖attributeinsidethe<input>tagcanbeofvarioustypesandisusedtodefineinformation
fieldsuchas<inputtype=‖text‖>providesatextbox.Thedefaulttypeforthe<input>tagistext.

65
Type Description

<inputtype="text"> Displaysasingle-linetextinputfield

<inputtype="radio"> Displaysa radiobutton(forselectingone ofmanychoices)

<inputtype="checkbox"> Displaysacheckbox(for selectingzero ormoreofmanychoices)

<inputtype="submit"> Displaysasubmitbutton(forsubmittingtheform)

<inputtype="button"> Displaysaclickable button

The<label>Element

Noticetheuseofthe<label>elementintheexampleabove.The<labe

l>tagdefinesalabel for manyformelements.

The <label> element is useful for screen-reader users, because the screen-reader will
readoutloud thelabel when theuser focuseson the inputelement.

The <label> element also helps users who have difficulty clicking on very small
regions(suchasradiobuttonsorcheckboxes)-becausewhentheuserclicksthetextwithinthe
<label>element, ittogglestheradio button/checkbox.

66
TextFields

TheHTMLtextboxisaninputcontrolthatallowstheusertoentertheasingle-lineinputfield for
text input on theweb page. The<input type= ―text‖> isused to createatextbox.

EXAMPLE1:

<html>

<body>

<h2>Textinputfields</h2>

<form>

<labelfor="fname">Firstname:</label><br>

<inputtype="text"value="John"><br>

<labelfor="lname">Lastname:</label><br>

<inputtype="text"value="Doe">

</form>

</body>

</html>

67
EXAMPLE2:

<html>

<form>

Firstname:<br>

<inputtype="text"><br>Lastn

ame:<br>

<inputtype="text">

</form>

</html>

OUTPUT

RadioButtons

The<inputtype="radio">definesaradiobutton.Radiobuttonsareusedwhenoutofmanyoptions,just
oneoption isrequiredto beselected.

EXAMPLE

<html>

<body>

<h2>RadioButtons</h2>

68
 <form>

<inputtype="radio"name="fav_language">HTML<br>

<inputtype="radio"name="fav_language">C<br>

<inputtype="radio"name="fav_language">JAVA<br>

</form>

</body>

</html>

OUTPUT

Checkboxes

The HTML<inputtype=”checkbox”>isusedtodefineacheckboxfield.Thecheckboxis
shownas asquareboxthatis tickedwhenitis activated.Itallows
theusertoselectoneormoreoptionamongallthelimitedchoices.

Syntax:
<inputtype="checkbox">

EXAMPLE:

<html>

<body>

<h2>Checkboxes</h2>

69
 <form >

<inputtype="checkbox">Ihave a bike<br>

<inputtype="checkbox">Ihavea car<br>

<inputtype="checkbox">Ihave a boat<br><br>

<inputtype="submit"value="Submit">

</form>

</body>

</html>

Output:

SubmitButton

The <input type="submit"> defines a button for submitting the form data to a form-

handler.The form-handleristypicallya fileontheserverwith a script for processinginput data.

Theform-handlerisspecifiedinthe form'sactionattribute.

Example:

70
<html>
<body>
<h2>personaldetailsform</h2>
<form
>NAME:<br
>
<input
type="text"><br>AGE:<
br>
<input
type="text"><br>MOBIL
ENUMBER:<br>
<input
type="text"><br>COLL
EGENAME:<br>
<inputtype="text"><br><br><br><br>
<inputtype="submit"value="Submit">
</form>
</body>
</html>
Output:

71
TEXTAREA

The HTML<textarea>tagisusedtodefinea multi-linetextinputcontrol.

Itcanholdunlimitednumberofcharactersandthetextsaredisplayedinafixed-
widthfont(usuallycourier).

ThesizeoftheHTMLtextareaisdefinedby<cols>and<rows>attribute,oritcanalsobe
definedthrough CSSheight and width properties.

Attributevalues:

 cols:Itisusedtotellthebrowserhowmanyaverage-
widthcharactersshouldfitonasinglelinei.ethenumberofcolumnstodisplay.
 form:Itisusedtospecifytheoneormoreformsthatthe<Textarea>elementbelongsto.
 name:Itisusedtospecifythenameofthe<Textarea>element.
 rows:Itisusedtospecifythenumberofvisibletextlinesforthecontroli.e.thenumberofrowstodis
play.
Syntax:
<textarea>.... </textarea>

PROGRAM1:

<html>

<body>

<form >

Name:<input type="text">

<inputtype="submit">

</form>

<br>

72
<textarearows="9"cols="70"name="comment">Ent

ertext here...

OUTPUT

SELECT(OR)OPTION

YouusetheHTMLselecttagtocreatedrop-downmenussothatuserscanselectthevalue
theywant.

Theselecttagnormallygoeswithinaformelement,withtheitemstochoosefromcodedwithinano
ther tag, <option>.

The<optgroup>elementcanbe usedforgroupingrelatedoptionsina list.

Syntax

<select>

<option></option>

</select>

73
Example:

<html>

<body>

<h2>Languagesubject</h2>

<form >

<label>Enteryourname</label>

<inputtype="text"><br><br>

<label>Choosealangauge:</label>

<selectid="language"name="language">

<optionvalue="TAMIL">TAMIL</option>

<optionvalue="ARABIC">ARABIC</option>

<optionvalue="URDU">URDU</option>

<optionvalue="MALAYALAM">MALAYALAM</option>

</select><br><br><br>

<inputtype="submit">

</form>

</body>

</html>

74
OUTPUT:

EXAMPLE2:

<html>

<body>

<form >

<label>Language</label>

<selectname="languages"id="lang">

75
 <optionvalue="javascript">JavaScript</option>

<optionvalue="php">PHP</option>

<optionvalue="java">Java</option>

<optionvalue="golang">Golang</option>

<optionvalue="python">Python</option>

<optionvalue="c#">C#</option>

<optionvalue="C++">C++</option>

<optionvalue="erlang">HTML</option>

</select>

<inputtype="submit"value="Submit"/>

</form>

</body>

</html>

76
77