INTRODUCTION TO HTML

PREPARED BY

Mrs.B. Divya M.Sc

DEPARTMENT OF COMPUTER SCIENCE

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

UNIT I
Introduction :Web Basics: What is Internet – Web browsers – What is Web page –
HTML Basics: Understanding tags.

UNIT II
Tags for Document structure( HTML, Head, Body Tag). Block level text elements:
Headings paragraph(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,
BR- Using Images – Creating Hyperlinks.

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

UNIT V
Frames: Frameset – Targeted Links – No frame – Forms : Input, Textarea, Select, Option.

2
 UNIT I

WEB BASICS:

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 network for sharing resources like files, printers, games, and other application.

2) WAN:

3
 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 miles to tens 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 a vast 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 as Yahoo.com is called a URL and here the prefix http
indicates its protocol

URL

4
  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 HyperText 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 the resource 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 webpage 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 web
page, 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.

5
  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.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 latest
version is HTML 5. We can save HTML files with an extension .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.

6
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 markup files
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 web browsers. With tags, the web browser 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 angular brackets, and / that is </>.

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.

7
 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 metadata 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 often includes headings, text, and paragraphs.

EXAMPLE:
<html>

8
<head>
<title>ism</title>

</head>
<body>
<h1>ALL IS WELL</h1>
</body>
</html>

Output:

ALL IS WELL

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>sub heading 1</h2>
<h3>sub heading 2</h3>
<h4>sub heading 3</h3>
<h5>sub heading 4</h5>
<h6>sub heading 5</h5>

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

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

Example 1:
<html>
<head>
<title> Paragraph tag </title></head>
<body>
<p>
This paragraph contains a lot of lines in the source code,but the browser ignores it.
</p></body>
</html>
Output:

11
 This paragraph contains a lot of lines in the source code,but the browser ignores it.

Example 2:

<html>
<head>
<title> Paragraph tag </title></head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Out put:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

INLINE ELEMENTS
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>

12
EXAMPLE:

<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>
</body>
</html>
OUTPUT:

The span element

My mother has blue eyes and my father has dark green eyes.

FONT STYLES:

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

Syntax:

<font color="color_name|hex_number|rgb_number">

13
EXAMPLE:

<html>
<body>
<font color="red">HTML</font><br />
<font color="green">WEB PAGE</font>
</body>
</html>
OUTPUT:

HTML

WEB 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 1 to 7 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 />

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

14
 <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="Times New Roman" size="6">INTERNET </font> <br />
<font face="Verdana" size="6"> WEB PAGE </font><br />
<font face="Comic sans MS" size=" 6"> WEB BROWER </font><br />
</body>
</html>

15
Output:

INTERNET
WEB PAGE
WEB BROWER

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. 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>All Is Well</b>

</body>

</html>

16
Output:

All Is Well

ITALIC :

To make text italic in HTML, use the <i>…</i> tag or <em>…</em> tag. Both the tags have the
same functioning, but <em> tag is a phrase tag, which renders as emphasized text.

Syntax:

<i>Computer</i>

Example:

<html>

<head>

<title>bold</title>

</head>

<body>

<i>All Is Well</i>

</body>

</html>

Output:

All Is Well

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

1. small Tag

The <small> tag in HTML is used to set small font size. 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>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small>
</body>
</html>

OUTPUT:

18
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>Title of the document</title>
</head>
<body>
<p>This text is normal.</p>
<p><big>This text is bigger.</big></p>
</body>
</html>

Result

19
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>Title of the document</title>
</head>
<body>

20
 <p>Internet is a global network that <strong>connects billions of computers across the world
</strong>with each other and to the World Wide Web
</p>
</body>
</html>
OUTPUT:

4. STRIKE:

The HTML <strike> tag gives text the appearance of a strikethrough which draws a
horizontal line over the text. This tag is also commonly 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>I am studying at the school.</strike></p>
<p>I am studying at the university.</p>
</body>
</html>

Result

21
 UNIT 3

 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 −

22
  type="1"− This creates a numbered list starting from 1.
 type="A"− This creates a list numbered with uppercase 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 uppercase roman numbers starting from I.
 type="i"− This creates a list numbered with lowercase roman numbers starting from i.

Syntax

<ol type="1">
<li>Item in list…</li>
<li>Item in list…</li>
<li>Item in list…</li>
</ol>
Example 1:

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

</body>
</html>

Output:

1. Coffee
2. Tea
3. Milk

23
Example 2:

<html>

<body>

<ol type="A">

<li>computer</li>

<li>mouse</li>

<li>keyboard</li>

</ol>

</body>

</html>

Output:

A. computer
B. mouse
C. keyboard

2. UNORDERED 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:

24
 <ul> list of items </ul>

Example 1:

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

 HTML
 Java
 JavaScript
 SQL

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

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

26
 </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 subtopics of each course.

27
Example

<html>
<body>
<h2>Nested Ordered List</h2>
<ol>
<li>Coffee</li>
<li> Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT:

Marquee HTML

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

Example 1:

<html>
<body>
<marquee width="100%" behavior="scroll" bgcolor="pink"> welcome to my page
</marquee>
</body>
</html>
OUTPUT:

Example 2:
<html>
<head>
<title> marquee </title>
</head>

29
 <body>
<marquee direction="down">welcome to my page</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>

<body>

30
 <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> What is HTML</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:

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.

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

BR TAG:

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

 The <br> tag is useful for writing addresses or poems.
 The <br> tag is an empty tag which means that it has no end tag.

31
Syntax

Text <br> Text

Example:

<html>

<head>

<title> BR tag

</title>

</head>

<body>

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

</body>

</html>

Output:

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.

IMAGE:

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

 Images are not technically inserted into a web page; images are linked to web pages. The
<img> tag creates a holding space for the referenced image.
 That requires two attributes to be useful: src and alt.

32
  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:304px; height:228px;">

EXAMPLE 1:

<html>

<head>

<title>Image tag</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:

33
Creating Hyperlinks:

 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 another document.
 When you move the mouse over a link, the mouse arrow will turn into a little hand.

Syntax:

<a href="url">Link text</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:

34
<html>

<head>

<title> web page linking</title>

</head>

<body>

<h1>HTML Links program</h1>

<p><a href=file:///D:/ZDeeps/image.html> image program </a></p>

</body>

</html>

Output:

35
 UNIT 4

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 timetable 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).
These table 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.

Common HTML Table tags

 <tr> - represents rows

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

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

Example 1:

<html>

<body>

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

<h5> student details </h5>

<tr>

37
 <th>No.</th>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>1</td>

<td>Peter Parker</td>

<td>16</td>

</tr>

<tr>

<td>2</td>

<td>Clark Kent</td>

<td>34</td>

</tr>

</table>

</body>

</html>

OUTPUT:

38
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 <figcaption> 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> NAME LIST </caption>

EXAMPLE:

<html>

<body>

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

39
<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>Sales Head</td>

</tr>

<tr>

<td>Dinesh</td>

<td>Shetty</td>

<td>9112</td>

<td>43</td>

<td>Developer</td>

</tr>

<tr>

40
 <tr>

<td>Niks</td>

<td>Raw</td>

<td>9114</td>

<td>45</td>

<td>Tester</td>

</tr>

</table>

</html>

OUTPUT:

Table & Cell Align Attribute

Table Align Attribute

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

The purpose of using the HTML table align attribute is to improve the visual
appearance 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, as it 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">

Attribute Values:

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

RIGHT ALIGNMENT

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

42
 </title>
</head>
<body>
<h2>Table align Attribute</h2>
<table border="1" align="right">
<caption>STUDENT DETAILS</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

43
LEFT ALIGNMENT

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

<body>

<h2>Table align Attribute</h2>

<table border="1" align="left">

<caption>STUDENT DETAILS</caption>

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

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

45
CENTER ALIGNMENT

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

<body>

<h2>Table align Attribute</h2>

<table border="1" align="center">

<caption>STUDENT DETAILS</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>

46
 <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>.By default, the content of <th> elements are center-aligned and the content of <td>

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

OUTPUT:
48
 name age

uma 55

siva 44

kumar 44

Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content
in <th> or <td>.By default, the vertical alignment of the content in a table is middle (for both
<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>

<th valign="top">Header 1</th>

<th valign="middle">Header 2</th>

<th valign="bottom">Header 3</th>

</tr>

<tr>

<td valign="top">Row 1, Column 1</td>

<td valign="middle">Row 1, Column 2</td>

49
 <td valign="bottom">Row 1, Column 3</td>

</tr>

<tr>

<td valign="top">Row 2, Column 1</td>

<td valign="middle">Row 2, Column 2</td>

<td valign="bottom">Row 2, Column 3</td>

</tr>

</table>

</body>

</html>

OUTPUT:

colspan

Colspan in HTML is an attribute that defines the number of columns a single cell can
span in a table.

50
 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 spreadsheet program like Excel.
It can be used with <td> and <th> element while creating an HTML Table.

Attribute Values:

<td>: The colspan attribute when used with <td> tag determines the number of
standard cells it should span.

Syntax:

<td colspan = "value">table content...</td>

Example 1:

<html>

<body>

<h2>student details</h2>

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

<tr>

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

<th>Age</th>

</tr>

<tr>

<td>siva</td>

51
 <td>raja</td>

<td>43</td>

</tr>

<tr>

<td>ram</td>

<td>arun</td>

<td>57</td>

</tr>

</table>

</body>

</html>

Output:

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

52
 That is if a row 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 spreadsheet program like
Excel.

Attribute Values:
 <td>: The rowspan attribute when used with <td> tag determines the number of
standard cells it should span.

Syntax:

<td rowspan = "value">table content...</td>

EXAMPLE:

<html>

<body>

<h2>Student phone number</h2>

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

<tr>

<th>Name</th>

<td>Deepika</td>

</tr>

<tr>

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

<td>9632587410</td>

53
 </tr>

<tr>

<td>9874663210</td>

</tr>

</table>

</body>

</html>

Output:

CELLPADDING

cellpadding is use to adjust the white space in your table cells. The cellpadding 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.

Syntax:

54
 <table cellpadding="pixels">

Example
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "50" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>

</html>
Output:

55
CELLSPACING

Cellspacing is something different from cellpadding. In HTML, cellspacing 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 cellspacing increases.

Cellspacing is most commonly utilized in web design. Different programming languages

utilize different syntax for cellspacing, like CSS utilizes the "border-spacing" property, whereas
HTML utilizes the "cellspacing" property.

Syntax:

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

EXAMPLE:

<html>
<head>
<title>HTML Table Cellpadding</title>
</head>

56
 <body>
<table border = "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>Shabbir Hussein</td>
<td>7000</td>
<td>123654789</td>
</tr>
<tr>
<td>uma</td>
<td>7000</td>
<td>523654789</td>
</tr>
</table>
</body>
</html>

OUTPUT:

57
 UNIT 5

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 HTML document. A collection of frames in the browser

58
 window is known as a frameset. The window is divided into frames in a similar way the
tables are organized: into rows and columns.

Attribute

Attribute Value Description

cols Pixels % It specifies the number and size of column spaces in the frameset

rows Pixels % It specifies the number and size of the rows spaces in the frameset

Syntax

< frame src = "URL" >

Example 1:

Create Vertical frames:

FRAME 1
<html>
<body>
<h3>frame 1</h3>
<p> this is first frame</p>
</body>
</html>

59
FRAME 2:
<html>
<body>
<h3>frame 1</h3>
<p> this is secound frame</p>
</body>
</html>

FRAME 3
<html>
<body>
<h3>frame 1</h3>
<p> this is third frame</p>
</body>
</html>

FRAME 4:
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

OUTPUT:

60
Example 2:
Create Horizontal frames:

FRAME 1
<html>
<body>
<h3>frame 1</h3>
<p> this is first frame</p>
</body>
</html>

FRAME 2:
<html>
<body>
<h3>frame 1</h3>
<p> this is secound frame</p>
</body>
</html>

61
FRAME 3
<html>
<body>
<h3>frame 1</h3>
<p> this is third frame</p>
</body>
</html>

FRAME 4:

<html>
<head>
<title>Frame tag</title>
</head>
<frameset rows="30%, 40%, 30%">
<frame name="top" src="frame1.html" >
<frame name="main" src="frame2.html">
<frame name="bottom" src="frame3.html">
</frameset>
</html>

OUTPUT:

62
FRAME
The <noframes> tag contains an alternate text to be displayed in browsers which do not support
frames (defined using <frame> tag). The tag can also contain a link to a non-frameset version of
the web site. If the browser supports frames, the <noframes> tag will be ignored.

The <noframes> tag can contain all the HTML elements that can be used inside
the <body> element of a normal HTML page.The <noframes> tag should be nested inside
the <frameset> tag.

Syntax:
<noframes> Statement for the user </noframes>

EXAMPLE:

63
FRAME 1
<html>
<body>
<h3>frame 1</h3>
<p> this is first frame</p>
</body>
</html>

FRAME 2:
<html>
<body>
<h3>frame 1</h3>
<p> this is secound frame</p>
</body>

FRAME 3:
</html>
<html>
<head>
<title>Frame tag</title>
</head>
<body>
<frameset cols="50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">

<noframes> The browser won’t support the frame tag. </noframes>

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

64
FORMS INPUT:

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

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

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

The <input> tag is one of the most important elements used in all of HTML due to its
sheer number of combinations of attributes and input types.

The <input type=” “> tag is an important element of a HTML <form> element. The
“type” attribute inside the <input> tag can be of various types and is used to define information
field such as <input type=”text”> provides a text box. The default type for the <input> tag is
text.

65
 Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)

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

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

The <label> Element

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

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

The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

66
Text Fields

The HTML textbox is an input control that allows the user to enter the a single-line input
field for text input on the web page. The <input type = “text”> is used to create a textbox.

EXAMPLE 1:

<html>

<body>

<h2>Text input fields</h2>

<form>

<label for="fname">First name:</label><br>

<input type="text" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" value="Doe">

</form>

</body>

</html>

67
EXAMPLE 2:

<html>

<form>

First name: <br>

<input type="text" > <br>

Last name:<br>

<input type="text" >

</form>

</html>

OUTPUT

Radio Buttons

The <input type="radio"> defines a radio button. Radio buttons are used when out of many
options, just one option is required to be selected.

EXAMPLE

<html>

<body>

<h2>Radio Buttons</h2>

68
 <form>

<input type="radio" name="fav_language" > HTML<br>

<input type="radio" name="fav_language"> C<br>

<input type="radio" name="fav_language"> JAVA<br>

</form>

</body>

</html>

OUTPUT

Checkboxes

The HTML <input type=”checkbox”> is used to define a checkbox field. The

checkbox is shown as a square box that is ticked when it is activated. It allows the user to
select one or more option among all the limited choices.

Syntax:
<input type="checkbox">

EXAMPLE:

<html>

<body>

<h2>Checkboxes</h2>

69
 <form >

<input type="checkbox" > I have a bike<br>

<input type="checkbox" > I have a car<br>

<input type="checkbox" > I have a boat<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Output:

Submit Button

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

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

Example:

70
<html>
<body>
<h2>personal details form</h2>
<form >
NAME: <br>
<input type="text"><br>
AGE: <br>
<input type="text"><br>
MOBILE NUMBER: <br>
<input type="text"><br>
COLLEGE NAME: <br>
<input type="text"><br><br><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:

71
TEXTAREA

The HTML <textarea> tag is used to define a multi-line text input control.

It can hold unlimited number of characters and the texts are displayed in a fixed-width
font (usually courier).

The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can also
be defined through CSS height and width properties.

Attribute values:

 cols: It is used to tell the browser how many average-width characters should fit on a single
line i.e the number of columns to display.
 form: It is used to specify the one or more forms that the <Textarea> element belongs
to.
 name: It is used to specify the name of the <Textarea> element.
 rows: It is used to specify the number of visible text lines for the control i.e. the
number of rows to display.
Syntax:
<textarea>....</textarea>

PROGRAM 1:

<html>

<body>

<form >

Name: <input type="text" >

<input type="submit">

</form>

<br>

72
<textarea rows="9" cols="70" name="comment" >

Enter text here...

OUTPUT

SELECT (OR) OPTION

You use the HTML select tag to create drop-down menus so that users can select the
value they want.

The select tag normally goes within a form element, with the items to choose from coded
within another tag, <option>.

The <optgroup> element can be used for grouping related options in a list.

Syntax

<select>

<option></option>

</select>

73
Example :

<html>

<body>

<h2>Language subject</h2>

<form >

<label> Enter your name</label>

<input type="text"><br><br>

<label >Choose a langauge:</label>

<select id="language" name=" language ">

<option value="TAMIL">TAMIL</option>

<option value="ARABIC">ARABIC</option>

<option value="URDU">URDU</option>

<option value="MALAYALAM">MALAYALAM</option>

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

<input type="submit">

</form>

</body>

</html>

74
OUTPUT:

EXAMPLE 2:

<html>

<body>

<form >

<label >Language</label>

<select name="languages" id="lang">

<option value="javascript">JavaScript</option>

75
 <option value="php">PHP</option>

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

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

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

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

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

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

</select>

<input type="submit" value="Submit" />

</form>

</body>

</html>

76
77