VIDHYAA ARTS AND SCIENCE COLLEGE

KONGANAPURAM - 637102

DEPARTMENT OF COMPUTER SCIENCE

STAFF NAME : Ms.K.NITHYA

CLASS : I-B.Sc (CS)

PAPER NAME :INTRODUCTION TO HTML

PAPER CODE : 23UCSSE02

. Ms.K.NITHYA M.Sc(CS)
UNIT : I

Introduction :Web Basics: What is Internet–Web browsers–What is Webpage –

HTMLBasics: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– Cellpadding.
UNIT :V
Frames: Frameset–Targeted Links–No frame– Forms: Input,
Textarea, Select,Option.

. Ms.K.NITHYA M.Sc(CS)
 UNIT – I

INTRODUCTION TO HTML

What is HTML?
 HTML stands for Hyper Text Markup Language.
 HTML is the standard markup language for creating Web pages.
 HTML describes the structure of a Web page.
 HTML consists of a series of elements.
 HTML elements tell the browser how to display the content.
 HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.

Web Basics:
The Web is an Internet-based distributed information system.

Anyone with a computer connected to the Internet can easily retrieve

information by giving a Web address or by simply clicking a mouse

button.

Ms.K.NITHYA M.Sc(CS)
.
Ms.K.NITHYA M.Sc(CS)
How the Web Works :
1. Your browser tells your computer to send out a request for a

specific URL address.

2. This request is sent to a number of other computers including

domain name servers, firewalls, routers and gateways. Each one of

these computers have a different task, but the bottom line is that

they make sure that the request is sent to the correct server.

3. The server computer accepts the request and the web server

program determines exactly what is wanted.

4. The server computer then sends out the web file that was

requested.

5. The web file is sent to the computers mentioned in step number 3.

These are not necessarily the same physical computers as before,

but the tasks that they perform will be the same.

6. Your computer receives the web file the server sent.

7. The browser parses the HTML contained in the web file and

displays the contents in the browser’s window.

8. You click a link on the page and it starts all over again with step

number 2.

Ms.K.NITHYA M.Sc(CS)
INTERNET :

What is Internet ?

 Internet is a global communication system that links together

thousands of individual networks.

 It allows exchange of information between two or more

computers on a network.

 Thus internet helps in transfer of messages through mail, chat,

video & audio conference, etc.

 It has become mandatory for day-to-day activities: bills payment,

online shopping and surfing, tutoring, working, communicating

with peers, etc.

How Do I Connect to the Internet?

 Computer

 Connection - Phone Line, Cable, DSL, Wireless, ...

 Modem

 Network Software - TCP/IP

 Application Software - Web Browser, Email, ...

 Internet Service Provider (ISP)

Ms.K.NITHYA M.Sc(CS)
 Fig : Internet

Purpose of Internet :
 Send and receive email messages.

 Download free software with FTP (File Transfer Protocol).

 Post our opinion to a Usenet newsgroup.

 Surf the World Wide Web.

 And much, much more.

 There is no charge for most services.

Web Browsers :

A Web browser is a software application that runs on a user's computer

or other Internet-capable device through which users can retrieve, view, and

interact with Web-based multimedia content such as Web pages, images, or

videos.

Ms.K.NITHYA M.Sc(CS)
 Web Browser is a common term which is frequently used by people

while discussing the Internet. However, the exact definition of a web browser

is known by few only.

History of Web Browser :

Today web browsers are easily accessible and can be used on devices like
computer, laptops, mobile phones, etc. but this evolution of making browsers
available for easy use took many years.

Given below are some salient points which one must know with regard to the
history of web browsers:

 “World Wide Web” was the first web browser created by Tim Berners Lee
in 1990. This is completely different from the World Wide Web we use
today .
 In 1993, the “Mosaic” web browser was released. It had the feature of
adding images and an innovative graphical interface. It was the “the world’s
first popular browser” 
 After this, in 1994, Marc Andreessen (leader of Mosaic Team) started
working on a new web browser, which was released and was named
“Netscape Navigator”.
 In 1995, “Internet Explorer” was launched by Microsoft. It soon overtook
as the most popular web browser.
 In 2002, “Mozilla Firefox” was introduced which was equally as competent
as Internet Explorer. 
 Apple too launched a web browser in the year 2003 and named it “Safari”.
This browser is commonly used in Apple devices only and not popular with
other devices.

Ms.K.NITHYA M.Sc(CS)
  Finally, in the year 2008, Google released “Chrome” and within a time span
of 3 years it took over all the other existing browsers and is one of the most
commonly used web browsers across the world.

Functions of Web Browser :

 The main function is to retrieve information from the World Wide Web and
making it available for users .

 Visiting any website can be done using a web browser. When a URL is
entered in a browser, the web server takes us to that website.
 To run Java applets and flash content, plugins are available on the web
browser .
 It makes Internet surfing easy as once we reach a website we can easily
check the hyperlinks and get more and more useful data online.

Types of Web Browser :

The functions of all web browsers are the same. Thus, more than the different types
there are different web browsers which have been used over the years.

Discussed below are different web browser examples and their specific features:

1. WorldWideWeb

 The first web browser ever

 Launched in 1990
 It was later named “Nexus” to avoid any confusion with the World Wide
Web
 Had the very basic features and less interactive in terms of graphical
interface
 Did not have the feature of bookmark

Ms.K.NITHYA M.Sc(CS)
2. Mosaic

 It was launched in 1993

 The second web browser which was launched
 Had a better graphical interface. Images, text and graphics could all be
integrated
 It was developed at the National Center for Supercomputing Applications
 The team which was responsible for creating Mosaic was lead by Marc
Andreessen
 It was named “the world’s first popular browser”

3. Netscape Navigator

 It was released in 1994

 In the 1990s, it was the dominant browser in terms of usage share
 More versions of this browser were launched by Netscape
 It had an advanced licensing scheme and allowed free usage for non-
commercial purposes

4. Internet Explorer

 It was launched in 1995 by Microsoft

 By 2003, it has attained almost 95% of usage share and had become the most
popular browsers of all
 Close to 10 versions of Internet Explorer were released by Microsoft and
were updated gradually
 It was included in the Microsoft Windows operating system
 In 2015, it was replaced with “Microsoft Edge”, as it became the default
browser on Windows 10

Ms.K.NITHYA M.Sc(CS)
5. Firefox

 It was introduced in 2002 and was developed by Mozilla Foundation

 Firefox overtook the usage share from Internet Explorer and became the
dominant browser during 2003-04
 Location-aware browsing was made available with Firefox
 This browser was also made available for mobile phones, tablets, etc.

6. Google Chrome

 It was launched in 2008 by Google

 It is a cross-platform web browser.
 Multiple features from old browsers were amalgamated to form better and
newer features.
 To save computers from malware, Google developed the ad-blocking feature
to keep the user data safe and secure.
 Incognito mode is provided where private searching is available where no
cookies or history is saved.
 Till date, it has the best user interface.

Web Page :

A web page is a document on the World Wide Web that contains hypertext
links. When a person searches for any information, the server sends the web page
to the user. Every Web page is given a unique Uniform Resource Locator (URL).
When a user enters the URL, the web browser downloads the file of that page and
displays it to the user.

Ms.K.NITHYA M.Sc(CS)
Elements of Web Page :

A web page is a structured document. The core element of a web page

is a text file written in the HyperText Markup Language (HTML)which

specifies the content of the web page (including links called hyperlinks) to

other web resources, primarily other web pages, and to different sections of

the same web page).

Multimedia content on the web, such as images, videos, and other web

pages, can be directly embedded in a web page to form a compound document.

How to open a web page :

Viewing a web page requires a browser like Internet Explorer, Edge, Safari,
Firefox, or Chrome. For example, you are reading this web page using a browser.
Once in a browser, you can open a web page by entering the URL in the address
bar.

Ms.K.NITHYA M.Sc(CS)
HTML Basics :

HTML is a markup language that defines the structure of your content.

HTML consists of a series of elements, which you use to enclose, or wrap,

different parts of the content to make it appear a certain way, or acta certain

way. The enclosing tags can make a word or image hyperlink to somewhere

else, can italicize words, can make the font bigger or smaller,and so on.

The main parts of our element are as follows:

1. The opening tag: This consists of the name of the element (in this case, p),

wrapped in opening and closing angle brackets. This states where the

element begins or starts to take effect — in this case where the paragraph

begins.

2. The closing tag: This is the same as the opening tag, except that it includes

a forward slash before the element name. This states where the element ends

— in this case where the paragraph ends. Failing to add a closing tag is one

of the standard beginner errors and can lead to strange results.

Ms.K.NITHYA M.Sc(CS)
 3. The content: This is the content of the element, which in this case, is just

text.

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

comprise the element.

Elements can also have attributes that look like the following:

Understanding Tags for HTML :

HTMLTagsChart

Tag Name CodeExample BrowserView

<!--ThiscanbeviewedintheHTMLpartofa
<!-- comment Nothingwillshow(Tip)
document-->
<ahref="http://www.domain.com/">
<a - anchor VisitOurSite(Tip)
Visit Our Site</a>
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example(Tip)
bodyof
HTML <body>The content of Contentsofyourweb page
<body>
documen yourHTMLpage</body> (Tip)
t
Thecontentsofyourweb page
line Thecontentsofyourpage<br>Thecontents of Thecontentsofyourweb page
<br>
break your page

<center>Thiswillcenteryour Thiswillcenteryour
<center> center
contents</center> contents
<dl> Definition Term
<dt>DefinitionTerm</dt> Definitionofthe
definition <dd>Definitionoftheterm</dd>
term
<dd> descripti <dt>DefinitionTerm</dt>
Definition Term
on
<dd>Definitionoftheterm</dd> Definitionofthe
</dl> term

Ms.K.NITHYA M.Sc(CS)
 <dl> Definition Term
<dt>DefinitionTerm</dt> Definitionofthe
definition <dd>Definitionoftheterm</dd> term
<dl> <dt>DefinitionTerm</dt>
list Definition Term
<dd>Definitionoftheterm</dd> Definitionofthe
</dl> term
<dl> Definition Term
<dt>DefinitionTerm</dt> Definitionofthe
definition <dd>Definitionoftheterm</dd> term
<dt> <dt>DefinitionTerm</dt> Definition Term
term
<dd>Definitionoftheterm</dd> Definitionofthe
</dl> term
Thisisan<em>Example</em>ofusing ThisisanExampleofusing the
<em> emphasis
the emphasis tag emphasis tag
embed <embedsrc="yourfile.mid"width="100%"
<embed>
object height="60" align="center"> (Tip)

<embedsrc="yourfile.mid"autostart="true" Music will begin playing

embed hidden="false" loop="false"> when your page is loaded
<embed>
object <noembed><bgsoundsrc="yourfile.mid"loop andwillonlyplayonetime. A
="1"></noembed> control panel will be
displayed to enable your
visitors to stop the music.
<font face="Times New
<font> font Example(Tip)
Roman">Example</font>

<fontface="TimesNewRoman"size="4">Exa
<font> font
mple</font>
Example(Tip)
<fontface="TimesNewRoman"size="+3"color
<font> font
="#ff0000">Example</font> Example (Tip)
<formaction="mailto:[email protected]"
>
Name: (Tip)
Name:<inputname="Name"value=""size="10
"><br> Email:
<form> form
Email:<inputname="Email"value=""size="10"
><br> Submit
<center><inputtype="submit"></center>
</form>

<h1> heading1 <h1>Heading1Example</h1>

<h2> heading2 <h2>Heading2Example</h2>
<h3> heading3 <h3>Heading3Example</h3>
<h4> heading4 <h4>Heading4Example</h4>
<h5> heading5 <h5>Heading5Example</h5>
<h6> heading6 <h6>Heading6Example</h6>

heading
of HTML <head>Containselementsdescribingthe
<head> Nothing will show
documen document</head>
t

Contentsofyourweb page
horizonta
<hr> <hr/> (Tip)
l rule
Contentsofyourwebpage

Ms.K.NITHYA M.Sc(CS)
 Contentsofyourwebpage
horizonta
<hr> <hrwidth="50%"size="3"/>
l rule
Contentsofyourwebpage
Contentsofyourwebpage
horizonta
<hr> <hrwidth="50%"size="3"noshade/>
l rule
Contentsofyourwebpage
<hr>(Inter <hrwidth="75%"color="#ff0000"size="4" Contentsofyourwebpage
horizonta
net />
l rule
Explorer) Contentsofyourwebpage
<hr>(Inter <hrwidth="25%"color="#6699ff"size="6" Contentsofyourwebpage
horizonta
net />
l rule
Explorer) Contentsofyourwebpage
<html>
<head>
<meta>
hypertext <title>Titleofyourwebpage</title>
<html> markup </head> Contentsofyourwebpage
language <body>HTMLwebpagecontents
</body>
</html>
<i> italic <i>Example</i> Example
<img src="Earth.gif" width="41"
<img> image height="41"border="0"alt="textdescribingthe
image" /> (Tip)

Example1:
Example1:(Tip)
<form method=postaction="/cgi-
input bin/example.cgi">
<input> Submit
field <input type="text"size="10"
maxlength="30">
<inputtype="Submit"value="Submit">
</form>
Example2:

<form method=postaction="/cgi- Example2:(Tip)

bin/example.cgi">
<input>
input <inputtype="text"style="color:#ffffff;
(Internet Submit
field font-family:Verdana;font-weight:bold;font-
Explorer)
size: 12px; background-color: #72a4d2;"
size="10" maxlength="30">
<inputtype="Submit"value="Submit">
</form>
Example3:

<formmethod=postaction="/cgi-
bin/example.cgi">
Example3:(Tip)
<table border="0"
input cellspacing="0"cellpadding="2"><tr><td
<input>
field bgcolor="#8463ff"><input type="text"
size="10" maxlength="30"></td><td
bgcolor="#8463ff"valign="Middle"><input
type="image" name="submit"
src="yourimage.gif"></td></tr></table>
</form>
Example4:
Example4:(Tip)
<formmethod=postaction="/cgi-
bin/example.cgi">

Ms.K.NITHYA M.Sc(CS)
 input EnterYour Comments:<br>
<input> field <textareawrap="virtual"name="Comments"
rows=3 cols=20
Submit Clear
maxlength=100></textarea><br>
<inputtype="Submit"value="Submit">
<inputtype="Reset"value="Clear">
</form>
Example5:

<formmethod=postaction="/cgi-
bin/example.cgi">
<center> Example5:Tip)
Selectanoption:
<select> Select an
<option>option 1</option> option2
input <optionselected>option2</option> option:
<input>
field <option>option3</option> Submit
<option>option4</option>
<option>option5</option>
<option>option6</option>
</select><br>
<input
type="Submit"value="Sub
mit"></center>
</form>
input Example6: Example6:(Tip)
<input>
field

<formmethod=postaction="/cgi- Selectanoption:
bin/example.cgi">
Selectanoption:<br> Option 1
<inputtype="radio"name="option">Option 1
<inputtype="radio"name="option" checked> Option2
Option 2 Option 3
<inputtype="radio"name="option">Option 3
<br>
Selectanoption:
<br>
Selectanoption:<br> Selection 1
<inputtype="checkbox"name="selection">
Selection 1 Selection 2
<inputtype="checkbox"name="selection"
checked> Selection 2 Selection 3
<input type="checkbox" Submit
name="selection">Selection3
<inputtype="Submit"value="Submit">
</form>

Example1: Example1:(Tip)
<menu>
<litype="disc">Listitem1</li>  Listitem 1
<litype="circle">Listitem2</li> o Listitem 2
<litype="square">Listitem3</li>  Listitem 3
</MENU>
<li> listitem
Example2: Example2:

Ms.K.NITHYA M.Sc(CS)
 <ol type="i"> i. Listitem 1
<li>Listitem 1</li> ii. Listitem 2
<li>Listitem 2</li>
iii. Listitem 3
<li>Listitem 3</li>
iv. Listitem 4
<li>Listitem 4</li>
</ol>
<head>
<linkrel="stylesheet"type="text/css"
<link> link
href="style.css" />
</head>

<marquee
> <marquee bgcolor="#cccccc" loop="-1"
scrolling
scrollamount="2"width="100%">Example
(Internet text
Marquee</marquee>
Explorer)
(Tip)
<menu>
 List item1
<litype="disc">Listitem1</li>
o List item2
<menu> menu <litype="circle">Listitem2</li>
 List item3
<litype="square">Listitem3</li>
</menu>
<meta name="Description"
content="Descriptionofyoursite">
<meta> meta Nothing willshow(Tip)
<meta name="keywords"
content="keywordsdescribingyoursite">
<meta HTTP-
<meta> meta EQUIV="Refresh"CONTENT="4;URL=http://w Nothing willshow(Tip)
ww.yourdomain.c om/">

<metahttp-equiv="Pragma"content="no-
<meta> meta Nothingwillshow(Tip)
cache">
<meta> meta <metaname="rating"content="General"> Nothingwillshow(Tip)
<meta> meta <metaname="robots"content="all"> Nothingwillshow(Tip)
<meta
<meta> meta Nothingwillshow(Tip)
name="robots"content="noindex,follow">
Numbered Numbered
<ol>
<li>Listitem 1</li> 1. List item1
<li>Listitem 2</li> 2. List item2
<li>Listitem 3</li> 3. List item3
<li>Listitem 4</li> 4. List item4
</ol>
NumberedSpecial Start
NumberedSpecial Start
<ol start="5"> 5. List item1
<li>Listitem 1</li> 6. List item2
<li>Listitem 2</li> 7. List item3
<li>Listitem 3</li> 8. List item 4
<li>Listitem 4</li>
</ol> Lowercase Letters
Lowercase Letters
a. List item1

Ms.K.NITHYA M.Sc(CS)
 b. List item2
<oltype="a">
c. List item3
<li>Listitem 1</li>
<li>Listitem 2</li> d. List item4
<li>Listitem 3</li>
<li>Listitem 4</li> Capital Letters
</ol>
ordered A. List item1
<ol> Capital Letters B. List item2
list
C. List item3
<oltype="A"> D. List item4
<li>Listitem 1</li>
<li>Listitem 2</li> CapitalLettersSpecial
<li>Listitem 3</li> Start
<li>Listitem 4</li>
</ol> C. List item1
D. List item2
CapitalLettersSpecialStart E. List item3
F. List item4
<oltype="A"start="3">
<li>Listitem 1</li> LowercaseRoman
<li>Listitem 2</li> Numerals
<li>Listitem 3</li>
<li>Listitem 4</li>
i. List item1
</ol>
ii. List item 2
iii. List item3
LowercaseRomanNumerals iv. List item4

<oltype="i">
CapitalRoman Numerals
<li>Listitem 1</li>
<li>Listitem 2</li>
<li>Listitem 3</li> I. List item1
<li>Listitem 4</li> II. List item2
</ol> III. List item3
IV. List item4

CapitalRoman Numerals CapitalRomanNumerals

Special Start
<oltype="I">
<li>Listitem 1</li> VII. List item1
<li>Listitem 2</li> VIII. List item2
<li>Listitem 3</li> IX. List item3
<li>Listitem 4</li> X. List item4
</ol>

CapitalRomanNumerals Special Start

<oltype="I"start="7">
<li>Listitem 1</li>
<li>Listitem 2</li>
<li>Listitem 3</li>
<li>Listitem 4</li>
</ol>
<formmethod=postaction="/cgi-
bin/example.cgi">
<center>
Selectanoption:
<select>
<option>option1</option> Selectanoption:(Tip)
listbox <optionselected>option2</option>
<option> option2

Ms.K.NITHYA M.Sc(CS)
 option <option>option3</option>
<option>option4</option>
<option>option5</option>
<option>option6</option>
</select><br>
</center>
</form>
This is an example
Thisisanexampledisplayingtheuseofthe
paragraph tag. <p> This will create a line displayingtheuseofthe
break and a space between lines. paragraph tag.

Attributes: Thiswillcreatealinebreak
andaspacebetween lines.
Example1:<br>
<br> Attributes:
<palign="left">
Thisisanexample<br> Example1:
displaying the use<br>
oftheparagraphtag.<br> Thisisanexample displaying
paragrap <br> the use
<p> Example 2:<br> oftheparagraphtag.
h
<br>
<p Example2:
align="right">Thisisa
nexample<br> Thisisanexample
displaying the use<br> displayingtheuse
oftheparagraphtag.<br> oftheparagraphtag
<br>
Example 3:<br>
Example3:
<br>
<p
Thisisanexample
align="center">Thisis
displayingtheuse
anexample<br>
oftheparagraphtag.
displaying the use<br>
of the paragraph tag.
small
<small> <small>Example</small> Example(Tip)
(text)

deleted
<strike> <strike>Example</strike> Example
text

strong
<strong> <strong>Example</strong> Example
emphasis

Example1:

<tableborder="4"cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column1</td>
<td>Column2</td>
</tr>
</table> Example1:(Tip)

Column1 Column2

Example2:(InternetExplorer)
Example2:(Tip)

Ms.K.NITHYA M.Sc(CS)
 <tableborder="2"bordercolor="#336699"
cellpadding="2" Column1 Column2
cellspacing="2"width="100%">
<tr>
<td>Column1</td>
<table> table <td>Column2</td> Example3:(Tip)
</tr>
</table>
Column 1 Column 2
Row 2 Row 2

Example3:

<tablecellpadding="2"cellspacing="2"width
="100%">
<tr>
<tdbgcolor="#cccccc">Column1</td>
<tdbgcolor="#cccccc">Column2</td>
</tr>
<tr>
<td>Row2</td>
<td>Row2</td>
</tr>
</table>

<tableborder="2"cellpadding="2"
cellspacing="2" width="100%">
<tr>
table <td>Column1</td>
<td>
data <td>Column2</td> Column1 Column2
</tr>
</table>

<divalign="center">
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th> ColumColumColum n
</tr> 1 n2 n3
table <tr>
<th> <td>Row2</td> Row2 Row2 Row2Row3
header
<td>Row2</td> Row3 Row3 Row4 Row4
<td>Row2</td> Row4
</tr>
<tr>
<td>Row3</td>
<td>Row3</td>
<td>Row3</td>

Ms.K.NITHYA M.Sc(CS)
Introduction to HTML I BSc(CS) &BCA

</tr>
<tr>
<td>Row4</td>
<td>Row4</td>
<td>Row4</td>
</tr>
</table>
</div>
Titleofyourwebpagewill be
documen
<title> <title>TitleofyourHTMLpage</title> viewable in the title
t title
bar.(Tip)
<tableborder="2"cellpadding="2"
cellspacing="2" width="100%">
<tr>
<tr> tablerow <td>Column1</td> Column1 Column2
<td>Column2</td>
</tr>
</table>
<tt> teletype <tt>Example</tt> Example
<u> underline <u>Example</u> Example
Example 1:<br>
<br> Example1:
<ul>
<li>Listitem 1</li>  List item1
<li>Listitem 2</li>  List item2
</ul>
<br>
unordere Example 2:<br> Example2:
<ul> <ultype="disc">
d list
<li>Listitem 1</li>
<li>Listitem 2</li>  List item1
<ultype="circle">  List item2
<li>Listitem 3</li> o List item3
<li>Listitem 4</li> o List item4
</ul>
</ul>

Ms.K.NITHYA M.Sc(CS)

22
 UNIT – II
Document Structure of Html

Tags for Document Structure – HTML :

Basic HTML Document Structure :

HTML, as previously said, is a markup language that uses multiple tags

to structure the document. These tags are surrounded by angle braces <Tag
Name>. Except for a few tags, the majority of tags contain matching closing tags.
For example, a <head> tag has a closing tag </head>, and a <body> tag has a
closing tag </body> tag, and so on. The following template shows a basic
structure of a HTML document.

S.no Tag name Description

<!DOCTYPE
1 ....> This tag defines the document type and HTML version.
This tag encloses the whole HTML page and consists mostly of the
document header (represented by <head>...</head> tags) and the
2 <html> document body (represented by <body>...</body> tags).
This tag represents the document's header, which includes additional
3 <head> HTML tags such as <title>, <link>, <meta> and so forth.
4 <meta> The <meta> tag is used to define metadata about an HTML document.
 Metadata is information (data) about the document.
The <title> tag is used within the <head> tag to specify the document’s
5 <title> title.
This tag represents the document's body, which contains additional

6 <body> HTML tags such as <h1>, <div>, <p>, and so on.

This tag represents the heading. There are six different HTML headings
7 <h1> from <h1> to <h6>.
8 <p> This tag represents the paragraph.

The <!DOCTYPE> Declaration :

 The <!DOCTYPE> declaration indicates the document type and assists

browsers to display web pages appropriately.
 It must appear just once, at the top of the page (before any HTML tags).
 Every HTML document must begin with a <!DOCTYPE> declaration.

Declaration in HTML5:

Since the declaration of <!DOCTYPE> tag is NOT case-sensitive; the below

declarations are valid.

The <html> tag :

 The <html> HTML element is often known as the root element because it
represents the root (top-level element) of an HTML page. All other elements
must be descended from this one.
 Except for the <!DOCTYPE> tag, the <html> tag serves as a container for
all other HTML elements.
 To specify the Web page’s language, always use the lang attribute inside
the <html> tag. This is intended to help search engines and browsers.

The <head> tag :

 The HTML tag <head> includes machine-readable information (metadata)

about the document, such as the title, scripts, and style sheets.
 The <head> tag is generally used to store information for machine processing
rather than for human reading. The <header> element is used to display
human-readable information such as top-level headers and listed authors.

 The following tags can go inside the <head> tag:

 <title> (required in every HTML document): This tag defines the
document’s title.

Example:-

 <style>:- The HTML element <style> includes style information for a

document or a portion of a document. It includes CSS that is applied to the
contents of the document that contains the <style> element.

Ms.K.NITHYA M.Sc(CS)
Example:-
<style type="text/css">
p{
color: #26b72b;
}
</style>
<p>Hi! I am a paragraph</p>

 <base>:- The <base> HTML element defines the reference point for all
relative URLs in a document.

Example:-

<base href="https://www.example.com/">
<base target="_blank">
<base target="_top" href="https://example.com/">

 <link> :- The <link> tag establishes a connection between the current

content and an external resource.

Example:-
<link href="/media/examples/link-element-example.css" rel="stylesheet">

<p>This text will be red as defined in the external stylesheet.</p>

 <meta> :- The <meta> element defines metadata about an HTML

document. Metadata is data (information) about data.

Example:-

<!--> A character set is the total amount of distinct characters that a computer program and hardware can
support. Character sets are also known as character maps, charsets, and character codes.</!-->
<meta charset="utf-8">

 <script> :- The <script> tag is used to integrate a client-side script

(JavaScript).

Example:-
Ms.K.NITHYA M.Sc(CS)
<script src="javascript.js"></script>

 <noscript>:- The <noscript> element specifies alternate content to be

presented to users who have scripts deactivated in their browser or are using
a browser that does not support script.

Example:-

<script>
document.write("Coding Ninjas")
</script>
<!--> When the above tag fails to display the content owing to the browser's lack of support, the <noscript>
tag is used. </!-->
<noscript> Computer Portal </noscript>

The <body> tag :

 The content of an HTML document is represented by the <body> HTML

element.
 A document can only have one <body> element.
 The <body> element includes all of the content of an HTML page,
including headers, paragraphs, pictures, hyperlinks, tables, lists, and so on.

Example:-

<html>
<head>
<title>Document title</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>

The <p> tag :

Ms.K.NITHYA M.Sc(CS)
  A paragraph is represented by the HTML element <p>. In visual media,
paragraphs are often portrayed as blocks of text separated by blank lines or
the first-line indentation. In contrast, HTML paragraphs can be any
structural grouping of related content, such as images or form fields.
 Paragraphs are block-level elements, and if another block-level element is
processed before the ending </p> tag, they will automatically close.
 The block-level element begins on a new line. A block-level element
always occupies the entire available width (stretches out to the left and right
as far as it can).

Syntax:-

<p>---content---</p>

Example:-

<!DOCTYPE html>
<html>
<head>
<title>Paragraph tag Example</title>
</head>
<body>

<h1>The p element</h1>

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

</body>
</html>

HTML Block Elements :

A block-level element always starts on a new line, and the browsers

automatically add some space (a margin) before and after the element.

Ms.K.NITHYA M.Sc(CS)
Introduction to HTML I BSc(CS) & BCA

 A block-level element always takes up the full width available (stretches

out to the left and right as far as it can). A block-level element always starts
on a new line and takes up the full width available
 An inline element does not start on a new line and it only takes up as much
width as necessary
 The <div> element is a block-level and is often used as a container for other
HTML elements
 The <span> element is an inline container used to mark up a part of a text,
or a part of a document

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

Example :-
<p>Hello World</p>
<div>Hello World</div>

Heading in HTML :

Heading tags are used in HTML to define a heading. There are sixheading
tags in total: H1, H2, H3, H4, H5, and H6. H1 is considered as the most important
heading, whereas H6 is considered as the least important heading.
Browsers generally display the various headings in different sizes, with <h1>
being the largest and <h6> being the smallest. The default value for eachheading
tag is different.

Ms.K.NITHYA M.Sc(CS)
<h1> Welcome to Dot Net Tutorials </h1>
<h2> Welcome to Dot Net Tutorials </h2>
<h3> Welcome to Dot Net Tutorials </h3>
<h4> Welcome to Dot Net Tutorials </h4>
<h5> Welcome to Dot Net Tutorials </h5>
<h6> Welcome to Dot Net Tutorials </h6>

The heading element is a block-level element. Every new heading element starts
on a new line.

HTML Heading Tags Default Size

Ms.K.NITHYA M.Sc(CS)
Introduction to HTML I BSc(CS) & BCA

Changing the size of HTML Headings:

Using the style attribute, we can modify the default size of HTML
headings. We can specify the size of headings using the CSS font-size property.
We can also increase or decrease the heading size according to our
requirements.
<h1 style=”font-size: 60px;”> Dot Net Tutorials </h1>

Paragraph in HTML :

Paragraph tags are used in Html to define a paragraph. A paragraph tag is

a paired tag, which means it has both an opening and a closing tag. Anything
between <p> and </p> is considered as a paragraph by browser.

<p> This is a paragraph </p>

<p> This is another paragraph </p>
Introduction to HTML I BSc(CS) & BCA

Paragraphs in HTML Without Closing Tags :

Closing tags are very important in Html. Closing tags indicate the end of
an element. But there are some elements that work fine without closing tags and
a paragraph is one of them. But it’s best practice to close tags to avoid browser
incompatibilities.

<p> This is a paragraph with no spacing</p>

<p> This is another paragraph with spacing </p>

If you want to add spacing in paragraphs you can use &nbsp; to add spaces
between text in paragraphs. nbsp stands for non breaking space. It will appear like
“ ” in the browser.&nbsp; adds one blank space in the document.

<p> This is a paragraph with no spacing</p>

<p> This is a paragraph with &nbsp; spacing </p>

Ms.K.NITHYA M.Sc(CS)
Multiline Paragraph in HTML :

When we add multiple lines inside the paragraph element in HTML, they are
considered as a single line only. Observe the following example .

<p>

This is

paragraph with

multiple line

</p>

We need to use line breaks within the element to display them on different lines.
In the example below we have used the <br> tag to display text on different lines.

<p>
This is <br>
a <br>
paragraph with <br>
multiple line
</p>

Style Elements in HTML:

Ms.K.NITHYA M.Sc(CS)
The <style> tag is used to declare style information (CSS) for a document. It
is where the developer can define the appearance and layout of the website or
page, including font styles, colors, and spacing.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
</head>
<body>
<p>
<b>Lorem Ipsum</b> is simpl y dummy text of the printing and
typesetting industry.
</p>
</body>
</html>

HTML <font> Tag :

The HTML <font> Tag 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 and it was used in HTML4. The base font tag is used to set all
the text to the same size, color, and face.

Syntax:
<font attribute = "value"> Content </font>
In HTML 5 we use as:
<p style="color:green">GeeksforGeeks is a leading platform</p>
Ex:

<!DOCTYPE html>
<html>

<body>
<h2>GeeksforGeeks</h2>

<!--Normal paragraph tag-->

<p>Hello Geeks!.</p>

<!--font tag-->

<font size="5"> Welcome to GeeksforGeeks </font>

</body>
Ms.K.NITHYA M.Sc(CS)
 </html>

Output:

HTML <bold> Tag :

Example of making the text bold with the <b> tag:

<!DOCTYPE html>
<html>
<head>

<title> Title of the document </title>

</head>
<body>
<p>

<b> Lorem Ipsum </b> is simply dummy text of the printing and

typesetting industry.

</p>
</body>
</html

Result

Hello everyone…!
HTML <i> Tag :

The <i> tag defines a part of text in an alternate voice or mood. The content
inside is typically displayed in italic.

Ms.K.NITHYA M.Sc(CS)
The <i> tag is often used to indicate a technical term, a phrase from another
language, a thought, a ship name, etc.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

i{

font-style: italic;

</style>

</head>

<body>

<p>An i element is displayed like this:</p>

<i>Some italic text</i>

<p>Change the default CSS settings to see the effect.</p>

</body>

</html>

Output:

An i element is displayed like this:

Some italic text

Ms.K.NITHYA M.Sc(CS)
Change the default CSS settings to see the effect.

HTML <small> Tag:

The <small> tag defines smaller text (like copyright and other side-comments).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
span.small {
font-size: smaller;
}
</style>
</head>
<body>

<h1>Use CSS to define smaller text</h1>

<p>This is some normal text.</p>

<p><span class="small">This is some smaller text.</span></p>

</body>
</html>

Output :

Use CSS to define smaller text

This is some normal text.

This is some smaller text

HTML <strong> Tag:

The <strong> tag is used to define text with strong importance. The content
inside is typically displayed in bold.

Example:

<!DOCTYPE html>
<html>
Ms.K.NITHYA M.Sc(CS)
<head>
<style>
strong {
font-weight: bold;
}
</style>
</head>
<body>

<p>A strong element is displayed like this:</p>

<strong>Some important text</strong>

<p>Change the default CSS settings to see the effect.</p>

</body>
</html>
Output:

A strong element is displayed like this:

Some important text

Change the default CSS settings to see the effect.

HTML <strike> Tag :

The <strike> tag was used in HTML 4 to define strikethrough text.

Ex:

<!DOCTYPE html>
<html>
<body>

<h1>The del element</h1>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> Ms.K.NITHYA M.Sc(CS)

</body>
</html>

Output:

The del element

My favorite color is blue red!

HTML <big> Tag :

The <big> tag was used in HTML 4 to define bigger text.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
font-size: 30px;
}
p.ex2 {
font-size: 50px;
}
</style>
</head>
<body>

<p>This is a normal paragraph.</p>

<p class="ex1">This is a bigger paragraph.</p>

<p class="ex2">This is a much bigger paragraph.</p>

</body>
</html>

O/p:

This is a normal paragraph.

This is a bigger paragraph. Ms.K.NITHYA M.Sc(CS)

This is a much bigger
paragraph.

Ms.K.NITHYA M.Sc(CS)
 UNIT – III

LIST
HTML Lists :

 A list is a record of short pieces of related information or used to

display the data or any information on web pages in the ordered or unordered
form. For instance, 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 & easy
to find the item.
 HTML lists allow web developers to group a set of related items in
lists.HTML Lists are used to specify lists of information. All lists may contain
one or more list elements.

Tags used in HTML lists :

Tags Explanation

<ol> Defines an ordered list.

<ul> Defines an unordered list.

<dl> Defines a description list.

<li> Defines a list item in ordered or unordered lists.

<dt> Defines a term in description list.

<dd> Defines the description of a term in the description list.

 Example:

Types of Lists :
There are three types of lists in HTML
 Ordered list or Numbered list (ol)
 Unordered list or Bulleted list (ul)
 Description list or Definition list (dl)

Ordered List or Numbered List (ol) :

In HTML, all the list items in an ordered list are marked with numbers
by default instead of bullets. An HTML ordered list starts with the <ol> tag and
ends with the </ol> tag. The list items start with the <li> tag and end with </li>
tag.

Syntax

<ol>List of Items</ol>

Example of HTML Ordered List :

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>

Ms.K.NITHYA M.Sc(CS)
 <ol>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ol>
</body>
</html>

Output :

HTML Unordered List or Bulleted List :

In HTML unordered list, the list items have no specific order or sequence.
An unordered list is also called a Bulleted list, as the items are marked with
bullets. It begins with the <ul> tag and and closes with a </ul> tag. The list
items begin with the <li> tag and end with </li> tag.

Syntax
<ul>List of Items</ul>

Ms.K.NITHYA M.Sc(CS)
Example of HTML Unordered List :

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</body>
</html>

Output :

Nesting of list in HTML :

A nested list is a list that appears as an element in another list. In this
list, the element with index 3 is a nested list. If we print( nested[3] ), we get [10,

Ms.K.NITHYA M.Sc(CS)
20] . To extract an element from the nested list, we can proceed in two steps.
First, extract the nested list, then extract the item of interest.
A nested list is a list of lists, or any list that has another list as an element
(a sublist). They can be helpful if you want to create a matrix or need to store a
sublist along with other data types.

Create a Nested List in HTML :

 In HTML documents, you will utilise either the
HTML<ul> or <ol> elements to construct a nested list. The first element refers
to an unordered list, while the second element is used to produce an ordered list.

However, neither of these two ways produces a completely

working list without the HTML <li> element. This tag is used to not only list all
of the products you'll need but also to create nested ordered and unordered lists.

For creating a basic list in HTML:

1. You have to use an <ul> or <ol> tag to describe the order of your list. For
creating an unordered list, use the <ul> tag, while for creating an ordered
list, use the <ol> tag.

Ms.K.NITHYA M.Sc(CS)
 2. After that, you have to mention the info you need to display by using
the <li> tag. This tag should be mentioned inside the <ul> or <ol> tag.

Nested Ordered List in HTML

 In HTML, ordered lists are those in which the order of the elements is
important.
 The <ol> tag can be used to create an ordered list. Then, using the
<li> tag, list each and everything you wish to include in your list.
 The <ol> tag, which stands for an ordered list, is the parent of the
<li> tag, or we can simply say that the <li> tag is the child of the
<ol> tag.
 Always the first child of the <ol> tag will be a <li> tag after that, you can
nest another <ul> or <ol> tag to create a nested ordered/unordered list.

<!DOCTYPE html>
<html>
<head>
<title> ordered List </title>
</head>
<body>
<h2>Nested ordered List</h2>

<ol>
<li>Progrmming Languages</li>
<ol>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ol>
<li>DSA</li>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>stack</li>
<li>Queue</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
<li>Web Technologies</li>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<ol>
<li>React</li>
<li>Angular</li>
<li>Vue</li>
</ol>

Ms.K.NITHYA M.Sc(CS)
 <li>Bootstrap</li>
</ol>
</ol>

</body>
</html>

Output :

Marquee tags in HTML :

 The marquee tag is a non-standard HTML element which causes

.
text to scroll up, down, left or right automatically

Ms.K.NITHYA M.Sc(CS)
  The <marquee> HTML element is used to insert a scrolling area of

text. You can control what happens when the text reaches the edges of its
content area using its attributes.
 In simple words, you can say that it scrolls the image or text up,

down, left or right automatically.

 Marquee tag was first introduced in early versions of Microsoft's

Internet Explorer. It is compared with Netscape's blink element.

Example :

<!DOCTYPE html>

<html>

<body>

<marquee>This is an example of html marquee </marquee>

</body>

</html>

Output :

This is an example of html marquee

<-………… Scrolling ………..->

Ms.K.NITHYA M.Sc(CS)
HTML <hr> Tag :
 The <hr> tag defines arithematic break in an HTML page (e.g. a shift of
topic).
 The <hr> element is most often displayed as a horizontal rule that is used
to separate content (or define a change) in an HTML page.
 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> ...

Attributes:
The table given below describes the <hr> tag attributes. These attributes are
not supported in HTML5

Ms.K.NITHYA M.Sc(CS)
Example :
<!DOCTYPE html>

<html>

<body>

<p>
Normal horizontal line.
</p>
<!--HTML hr tag is used here-->

<hr>
<p>
Horizontal line with height of 30 pixels
</p>
<hr size="30">

<p>
Horizontal line with height of 30 pixels
and noshade.
</p>

<hr size="30" noshade>

</body>

</html>

Output :

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

Ms.K.NITHYA M.Sc(CS)
  <br>: The Line Break element. The <br> HTML element produces
a line break in text (carriage-return). It is useful for writing a poem or anaddress,
where the division of lines is significant.
 The browser does not recognize new lines and paragraph formatting
in the text. If you want to start a new line, you need to insert a line break with the
help of the <be>.
 It’s a self-closing tag and doesn’t require any type of closing tag.
It is used for addresses, poetry, or in situations where line breaks are needed.

Syntax:
<br>

Attributes:
Attribute Value Description

It indicates where to begin the next

clear
line after the break.

Example :

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

<head>
<title>HTML5 br Tag</title>
</head>

<body>
<h2>GeeksforGeeks</h2>

<!--br tag is used in below paragraph-->

<p>Hi Geeks!
<br>Welcome to GeeksforGeeks
</p>

</body>

</html>

Ms.K.NITHYA M.Sc(CS)
Output :

HTML Images :
 The HTML <img> tag is used to embed an image in a web 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.
 The <img> tag is empty, it contains attributes only, and does not have a
closing tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">

Example :
<!DOCTYPE html>
<html>
<body>

Ms.K.NITHYA M.Sc(CS)
<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who
cannot see the image get an understanding of what the image
contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460"

height="345">

</body>
</html>
O/P :
Alternative text

The alt attribute should reflect the image content, so users who cannot see the
image get an understanding of what the image contains:

Ms.K.NITHYA M.Sc(CS)
HTML Links – Hyperlinks :
 HTML links are hyperlinks. 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.
 The most important attribute of the <a> element is the
href attribute, which indicates the link's destination.
 The link text is the part that will be visible to the reader.
 Clicking on the link text, will send the reader to the specified URL
address.

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

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

Example :

<!DOCTYPE html>
<html>
<body>

Ms.K.NITHYA M.Sc(CS)
<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Visit
W3Schools.com!</a></p>

</body>

</html>

Output :

HTML Links
Visit W3Schools.com!

Ms.K.NITHYA M.Sc(CS)
 UNIT – IV
Tables
Tables in HTML :

The HTML Table is an arrangement of data in rows and columns in tabular

format. Tables are useful for various tasks such as presenting text information and
numerical data. A table is a useful tool for quickly and easily finding connections
between different types of data. Tables are also used to create databases.

 The <table> tag defines an HTML table.

 An HTML table consists of one <table> element and one or

more <tr>, <th>, and <td> elements.

 The <tr> element defines a table row, the <th> element defines a
table header, and the <td> element defines a table cell.

 An HTML table may also

include <caption>, <colgroup>, <thead>, <tfoot>,
and <tbody> elements.

Uses of creating a table in html :

A table in HTML makes a lot of sense when you want to organize data that
would look best in a spreadsheet. An HTML table is a great way to display things
such as financial data, calendars, pricing, feature comparison, the nutrition facts
information panel, bowling scores, and many other tabular data.

The table-layout property defines the algorithm used to lay out table cells,
rows, and columns. Tip: The main benefit of table-layout: fixed; is that the table
renders much faster. On large tables, users will not see any part of the table until
the browser has rendered the whole table.

Ms.K.NITHYA M.Sc(CS)
Table Tags

HTML Tags Descriptions

Defines the structure for organizing

<table> data in rows and columns within a web
page.

Represents a row within an HTML

<tr>
table, containing individual cells.

Shows a table header cell that

<th>
typically holds titles or headings.

Represents a standard data cell,

<td>
holding content or data.

Provides a title or description for the

<caption>
entire table.

Defines the header section of a table,

<thead>
often containing column labels.

Represents the main content area of a

<tbody> table, separating it from the header or
footer.

Specifies the footer section of a table,

<tfoot>
typically holding summaries or totals.

Defines attributes for

<col> table columns that can be applied to
multiple columns at once.

Groups together a set of columns in a

<colgroup> table to which you can apply formatting
or properties collectively.

Ms.K.NITHYA M.Sc(CS)
Creating HTML Tables :

Tables are a great way to present data visually. Tables allow us to display
large amounts of data in a structured way (rows and columns) that is easy to read
and understand. In this blog, we will learn about HTML tables.
You will understand the basics of HTML tables, such as rows, cells, adding
captions, and making cells span multiple columns and rows. You will also learn
how to add padding and background color in HTML tables.

HTML Table Syntax

Here is the syntax to create a table with two rows and two columns:

Ms.K.NITHYA M.Sc(CS)
Example :

<!DOCTYPE html>
<html>

<body>
<table>
<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>
</tr>
</table>
</body>
</html>

Ms.K.NITHYA M.Sc(CS)
Output :

The Table element :

The <table> HTML element represents tabular data — that is, information
presented in a two-dimensional table comprised of rows and columns of cells
containing data.

Ms.K.NITHYA M.Sc(CS)
HTML <caption> Tag :
 The <caption> tag defines a table caption.

 The <caption> tag must be inserted immediately after the

<table> tag.

 The <caption> tag defines a table caption. The <caption> tag must
be inserted immediately after the <table> tag.

 Tip: By default, a table caption will be center-aligned above a table.

However, the CSS properties text-align and caption-side can be used
to align and place the caption.

 The <caption> tag is used to specify the caption of a table. Only

one caption can be specified for one table.

 It is by default aligned to the center and Specifically placed

immediately after the <table> tag and before any <tr> or <th> tag
elements.

Syntax:
<caption align = "value" ></caption>

Attributes:
Attribute Value Description

This attribute is used to specify the

align alignment of text content but is
deprecated from HTML5.

Ms.K.NITHYA M.Sc(CS)
Example :
<!DOCTYPE html>
<html lang="en">

<head>
<title>HTML5 caption Tag</title>
</head>

<body>
<h1>GeeksForGeeks</h1>
<h2>HTML <Caption Tag></h2>

<table>
<!-- Adding caption to the table -->
<caption>Students</caption>
<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>
</tr>
</table>
</body>

</html>

Ms.K.NITHYA M.Sc(CS)
Output:

Table and Cell Alignment :

Table data defaults to left alignment; table headers to center. In order
to change the alignment in one cell, insert the appropriate "ALIGN="
attribute within the code for that cell. In order to change the alignment in
all cells in a row, insert the appropriate alignment attribute within the code
for that row.

The HTML <table> align Attribute is used to specify the

alignment of the table and its content. Instead ofthe
align attribute, CSS properties like margin and text-align are preferred
for table alignment. For aligning content within table rows or cells, use
the align attribute within <tr>.

Syntax
<table align="left | right | center">

Ms.K.NITHYA M.Sc(CS)
Attribute Values

Attributes Descriptions

It sets the left align to the table. It is a

left
default value.

right It sets the right align to the table.

center It sets the center align to the table.

Example :
<!DOCTYPE html>
<html>

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

<body>
<h1 style="green">GeeksforGeeks</h1>

<h2>HTML table align Attribute</h2>

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

<caption>Author Details</caption>

<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr> Ms.K.NITHYA M.Sc(CS)
<td>RAM</td>
<td>21</td>
 <td>ECE</td>
</tr>
</table>
</body>

</html>

Output :

HTML Table – Rowspan :

The rowspan attribute in HTML specifies the number of rows a cell should
span. That is if a row spans two rows, it means it will take up the spaceof 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 spreadsheetprogram
like Excel.

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

Ms.K.NITHYA M.Sc(CS)
 HTML <td> rowspan Attribute :
The rowspan attribute specifies the number of rows a cell should span.

Syntax
<td rowspan="number">

Attribute Values :

Value Description

number Specifies the number of rows a cell should span. Note: rowspan="0"
tells the browser to span the cell to the last row of the table section
(thead, tbody, or tfoot). Chrome, Firefox, and Opera 12 (and earlier
versions) support rowspan="0".

Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style> Ms.K.NITHYA M.Sc(CS)
</head>
<body>

<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
<th rowspan="3">Savings for holiday!</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="0">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<p><b>Note:</b> This example demonstrates rowspan="0". It works in
Chrome, Firefox, and Opera.</p>
</body>
</html>

Ms.K.NITHYA M.Sc(CS)
Output:

Month Savings
January $100 Savings for $100
holiday!
February $80

Note: This example demonstrates rowspan="0". It works in Chrome, Firefox, and

Opera.

HTML 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. It provides the same functionality as “merge cell” in a spreadsheet
program like Excel. Usage: It can be used with and element while creating an
HTML Table.
 Use rowspan if you want to extend cells down and colspan to extend
across. You can use rowspan="n" on a td element to make it span n rows, and
colspan="m" on a td element to make it span m columns. Looks like your first td
needs a rowspan="2" and the next td needs a colspan="4".

Applies to
The colspan attribute can be used on the following elements:

Elements Attribute

<td> colspan

<th> colspan

Syntax Ms.K.NITHYA M.Sc(CS)

<td colspan="number">
Examples :
<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

</style>

</head>

<body>

<h1>The td colspan attribute</h1>

<table>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$80</td>

</tr>

<tr> Ms.K.NITHYA M.Sc(CS)

 <td colspan="2">Sum: $180</td>

</tr>

</table>

</body>

</html>

Output :

The td colspan attribute

Month Savings

January $100

February $80

Sum: $180

Cell Padding :
The HTML cell padding Attribute is used to specify the space between
the cell content and cell wall. The cell padding attribute is set in terms of pixels.
pixels: It holds the space between the cell content and cell wall in terms of pixels.
Note: The cell padding Attribute is not supported by HTML 5.

HTML tables can adjust the padding inside the cells, and also the space
between the cells. Cell padding is the space between the cell edges and the cell
content. By default the padding is set to 0. To add padding only above the content,
use the padding-top property.

Syntax:
<table cellpadding="pixels">
Attribute Values:
pixels: It holds the space between the cell content and cell wall in terms of
pixels.

Ms.K.NITHYA M.Sc(CS)
Example :
<!DOCTYPE html>
<html>

<head>
<title>
HTML table cellpadding Attribute
</title>
</head>

<body>
<h1>GeeksforGeeks</h1>

<h2>
HTML table cellpadding Attribute
</h2>

<table border="1" cellpadding="15">

<caption>Author Details</caption>

<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>

</html>

Ms.K.NITHYA M.Sc(CS)
Output :

Ms.K.NITHYA M.Sc(CS)
 UNIT – V
Frames

Frams :
 HTML tag define the particular area within an HTML file where
another HTML web page can be displayed. A tag is used with , and it divides a
webpage into multiple sections or frames, and each frame can contain different
web pages.
 The tag was used in HTML 4 to define one particular window
(frame) within a . What to Use Instead? Use the tag to embed another document
within the current HTML document.

HTML <frame> tag :

HTML Frames are used to divide the web browser window into multiple
sections where each section can be loaded separately. A frameset tag is the
collection of frames in the browser window.

Creating Frames:

Instead of using body tag, use frameset tag in HTML to use frames in web
browser. But this Tag is deprecated in HTML 5. The frameset tag is used to
define how to divide the browser.

Each frame is indicated by frame tag and it basically defines whichHTML

document shall open into the frame. To define the horizontal frames use row
attribute of frame tag in HTML document and to define the vertical frames use
col attribute of frame tag in HTML document.

Ms.K.NITHYA M.Sc(CS)
Example:

<!DOCTYPE html>

<html>

<head>

<title>Example of HTML Frames using row attribute</title>

</head>

<frameset rows = "20%, 60%, 20%">

<frame name = "top" src =

"C:/Users/dharam/Desktop/attr1.png" />

<frame name = "main" src =

"C:/Users/dharam/Desktop/gradient3.png" />

<frame name = "bottom" src =

"C:/Users/dharam/Desktop/col_last.png" />

<noframes>

<body>The browser you are working does

not support frames.</body>

</noframes>

</frameset>

</html>

Output :
Ms.K.NITHYA M.Sc(CS)

The above example basically used to create three horizontal frames: top, middle and
bottom using row attribute of frameset tag and the noframe tag is used for those browse r
who doesn’t support no frame.

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

Syntax

<frameset cols=" "> ......... </frameset>

Following are some specifications about the HTML <frameset> tag

Ms.K.NITHYA M.Sc(CS)
Display Block

Start tag/End tag Both Start and End Tag

Usage Frames

Example:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="50%,50%">
<frame src="https://www.javatpoint.com/html-table">
<frame src="https://www.javatpoint.com/css-table">
</frameset>
</html>

Output :

Targeted links in html :

Ms.K.NITHYA M.Sc(CS)
  The HTML target Attribute is used to specify where to open the
linked document. It can be used on various elements such as: _blank: It opens the
link in a new window. _self: It is the default value. It opens the linked document
in the same frame.
 The HTML target Attribute is used to specify where to open the
linked document. It can be used on various elements such as:
 HTML | <a> target Attribute
 HTML | <area> target Attribute
 HTML | <base> target Attribute
 HTML | <form> target Attribute
Syntax:

<element target="_blank|_self|_parent|_top|framename"\>

Attribute Values:
 _blank: It opens the link in a new window.
 _self: It is the default value. It opens the linked document in the same
frame.
 _parent: It opens the linked document in the parent frameset.
 _top: It opens the linked document in the full body of the window.
 framename: It opens the linked document in the named frame.

Example:
<!DOCTYPE html>
<html>

<head>
<title>
HTML target Attribute
</title>
</head>

<body>
<center>
<h1>GeeksForGeeks</h1>

<h2>HTML Target Attribute</h2>

<p>Welcome to
<a href="https://ide.geeksforgeeks.org/"
id="GFG" target="_self">
GeeksforGeeks Ms.K.NITHYA M.Sc(CS)
 </a>
</p>
</center>
</body>

</html>

Output:

No Frames :
The <noframes> tag is the backup for those browsers that does not support
frames. This tag can contains all the 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>

Example:

<html>

<head>

<title>noframes tag</title>

<style>

frame {

text-align: center;
Ms.K.NITHYA M.Sc(CS)
 }

</style>

</head>

<!-- frameset attribute starts here -->

<frameset cols="30%, 40%, 30%">

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

<!-- frameset attribute ends here -->

</html>

Output :

If browsers supported:

Ms.K.NITHYA M.Sc(CS)
If browsers does not supported:

HTML forms :

An HTML Form is a section of the document that collects input from

the user. The input from the user is generally sent to a server (Web servers, Mail
clients, etc). We use the HTML element to create forms in HTML. The HTML
element is used to create HTML forms.

Ms.K.NITHYA M.Sc(CS)
HTML Form Elements
A form contains special interactive elements that users use to send the
input. They are text inputs, textarea fields, checkboxes, dropdowns, and much
more. For example,

<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">Nepal</option>
<option value="usa">USA</option>
<option value="australia">Australia</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30"
rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>
Ms.K.NITHYA M.Sc(CS)
Browser Output :

Form Attributes :

The HTML <form> element contains several attributes for controlling data
submission. They are as follows:
Action
Method
o Post
o Get
o Dialog
Target
Example- Html Form :

<form>
<label for="firstname">First name: </label>
<input type="text" name="firstname" required>
<br>
<label for="lastname">Last name: </label>
Ms.K.NITHYA M.Sc(CS)
 <input type="text" name="lastname" required>
<br>
<label for="email">email: </label>
<input type="email" name="email" required>
<br>
<label for="password">password: </label>
<input type="password" name="password" required>
<br>
<input type="submit" value="Login!">
</form>

Browser Output :

Input tag in HTML :

The HTML element is used to create interactive controls for web-based
forms in order to accept data from the user; a wide variety of types of input data
and control widgets are available, depending on the device and user agent.

The HTML input Tag is the place where a user can enter data. The input
tag is used within < form> element to declare input controls that allow users to
input data. The default value accepted by the <input> Tag is text.
An input field can be of various types depending upon the attribute type.
The Input tag is an empty element that only contains attributes. For defining labels
for the input element, can be used.

Syntax

<input type = "value" ... />

Ms.K.NITHYA M.Sc(CS)
Attributes
Attributes Descriptions

It is used to specify the type of the

type
input element. Its default value is text.

It is used to specify the value of the

value
input element.

Placeholder attribute is used to

placeholder specify hint that describes the
expected value of an input field.

It is used to specify the name of the

name
input element.

It is used to provide alternate text for

alt the user, if they cannot view the
image.

It specifies that an element should

autofocus automatically get focus when the
page loads.

It specifies that an element should be

checked pre-selected (checked) when the
page loads.

The disabled attribute specifies that

disabled
the element should be disabled

The form attribute is used to specify

form one or more forms to which the
<input> element belongs to.

It is used to specify the maximum

max
value for an < input > element.

It specifies that an input field must be

required
filled out before submitting the form.

It specifies that an input field is read-

readonly only. A read-only input field cannot be
modified.

Ms.K.NITHYA M.Sc(CS)
 Attributes Descriptions

It is used to specifies the types of files

accept
that the server accepts.

It is used to specifies the alignment of

align
an image input.

It s used to specifies whether an

autocomplete <input> element should have
autocomplete enabled

It is used to specifies that the text

dirname
direction will be submitted.

It is used to specifies the URL of the

formaction file that will process the input control
when the form is submitted

It is used to specifies how the form-

formenctype data should be encoded when
submitting it to the server

It is used to defines the HTTP method

formmethod
for sending data to the action URL

It is used to defines that form

formnovalidate elements should not be validated
when submitted

It is used to specifies where to display

formtarget the response that is received after
submitting the form

It is used to specifies the height of an

height
<input> element

It is used to refers to a <datalist>

list element that contains pre-defined
options for an <input> element

It is used to specifies the maximum

maxlength number of characters allowed in an
<input> element

min It is used to specifies a minimum

Ms.K.NITHYA M.Sc(CS)
 Attributes Descriptions

value for an <input> element

It is used to specifies that a user can

multiple enter more than one value in an
<input> element

It is used to specifies a regular

pattern expression that an <input> element’s
value is checked against

It is used to specifies the width, in

size
characters, of an <input> element

It is used to specifies the URL of the

src
image to use as a submit button

It is used to specifies the legal

step
number intervals for an input field

It is used to specifies the width of an

width <input> element (only Ifor
type=”image”)

Example:
<!DOCTYPE html>
<html lang="en">
<style>
body {
text-align: center;
}
</style>

<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>

<form>
<label>Name:</label>
<input type="text" name="name" value="">
<br><br>

<label>E-mail:</label>
<input type="email" name="emailaddress">
<br><br>

Ms.K.NITHYA M.Sc(CS)
 <label>Password: </label>
<input type="password" name="password">
<br><br>

<input type="submit">
</form>
</body>

</html>

Output :

Textarea Tag In Html :

 The <textarea> tag in HTML defines a multi-line plain-text editing control.
A text space will hold an infinite range of characters, and therefore the text
renders in a set-width font (usually Courier).
 The size of a text area is often such by the cols and rows attributes, or perhaps
better; through CSS’ height and dimension properties. The textarea is generally
used in a form, to collect user inputs like comments or reviews.
 The name attribute is needed for the reference in the form data after the form
is submitted. By omitting the name attribute, data from the text area will not
be submitted. The id attribute is required to link the text area with a label..

Syntax:

<textarea> ... </textarea>

Attribute values:

Ms.K.NITHYA M.Sc(CS)
 autocomplete: It is used to specify whether the Textarea field has autocompleted
on or off.
 autofocus: It is used to specify that the textarea field should get automatically
focus when the page loads.
 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.
 dirname: It is used to enable the text direction of the Textarea Field after
submitting the form.
 disabled: It is used to specify that the text area element is disabled.

Example:
<!DOCTYPE html>
<html>
<head>
<title>textarea tag</title>
</head>

<body>
<h1>GeeksForGeeks</h1>
<h2>HTML Textarea tag </h2>
<form action="#">
<textarea rows="10"
cols="20"
name="blog">
Share your knowledge by writing your own blog!
</textarea>
<br>
<input type="submit"
value="submit">
</form>
</body>
</html>

Output:

Ms.K.NITHYA M.Sc(CS)
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>

Attributes: The attributes of the <select> tag are listed below:

 autofocus: The HTML <select> autofocus Attribute is used to specify that the
dropdown should automatically get focus when the page loads. It is a type of
boolean attribute.
 disabled: The <select> disabled attribute is used to specify the select element
is disabled. A disabled drop-down list is un-clickable and unusable. It is a
boolean attribute.
 form: The HTML <select> form attribute is used to specify one or more forms
that the <select> element belongs to.
 multiple: The HTML <select> multiple attribute is a Boolean Attribute. It
specifies that the user is allowed to select more than one value that presents in
<select> element.
Example
<!DOCTYPE html>
<html>

<body>
<h2>Welcome To GeeksforGeeks</h2>
<select>
<option value="By the way">BTW</option>
<option value="Talk to you later">TTYL</option> Ms.K.NITHYA M.Sc(CS)
<option value="To be honest">TBH</option>
 <option value=" I don’t know">IDK</option>
</select>
</body>

</html>

Output:

HTML <option> Tag :

 The <option> tag in HTML is used to choose an option from a Drop-
Down menu. This tag can be used with or without any attributes and the needed
value can be sent to the server. The <option> tag is used within a
<select> element to create a selectable option in a dropdown list.
 This elements must be inside <select> tag, <optgroup>,
or <datalist> tags. It represents an individual option within a <select> dropdown,
allowing users to choose among multiple choices.
 Each <option> tag can include text or numeric values, which will
be presented to the user. The <option> tag also supports the Global Attributes
and Event Attributes in HTML.

Syntax:

<option> Contents... </option>

Attributes:

Attribute Values Description

This attribute contains the value

disabled which represents the option
disabled is disabled.

This attribute contains the text value

which represents the shorted label for
label the option.

Ms.K.NITHYA M.Sc(CS)
 Attribute Values Description

This attribute contains the value

selected which represents the item
that is pre-selected when the browser
selected loaded.

This attribute contains the value text

value sent to the server.

Example :
<!DOCTYPE html>
<html>

<body>
<h1>GeeksforGeeks</h1>
<h2>HTML option Tag</h2>
<select>
<!-- option tag starts -->
<option>Choose an option</option>
<option value="html">HTML</option>
<option value="java">JAVA</option>
<option value="C++">C++</option>
<option value="php">PHP</option>
<option value="perl">PERL</option>
<!-- option tag ends -->
</select>
</body>

</html>
output:

Ms.K.NITHYA M.Sc(CS)