Scribd
Upload
3 views40 pages

HTML Notes

HTML is a markup language created by Tim Berners-Lee in 1991, used to format and display content on the web. The document outlines the history of HTML, the Internet, its advantages and disadvantages, web browsers, and the structure of web pages. It also explains the difference between a webpage and a website, as well as basic HTML tags for document structure.

Uploaded by

Kala Surya
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views40 pages

HTML Notes

HTML is a markup language created by Tim Berners-Lee in 1991, used to format and display content on the web. The document outlines the history of HTML, the Internet, its advantages and disadvantages, web browsers, and the structure of web pages. It also explains the difference between a webpage and a website, as well as basic HTML tags for document structure.

Uploaded by

Kala Surya
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

UNIT 1

INTRODUCTION OF HTML
• HTML is a markup language used by the browser to manipulate text, images, and other
content, in order to display it in the required format.

• HTML was created by Tim Berners-Lee in 1991. The first-ever version of HTML was
HTML 1.0, but the first standard version was HTML 2.0, published in 1995

• HTML is the universal markup language for the Web. HTML lets you format text, add
graphics, create links, input forms, frames and tables, etc., and save it all in a text file that
any browser can read and display.

• HTML stands for Hyper Text Markup [Link] is the standard markup language
for creating Web [Link] describes the structure of a Web [Link] consists of a
series of [Link] elements tell the browser how to display the content

Program
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HISTORY OF HTML
• Tim Berners-Lee, a physicist at the CERN research institute in Switzerland invented
HTML in 1991. This first version consisted of 18 HTML tages. Now, there are
currently about 140 HTML tags, although not all of them are supported by modern
browsers.
• Even though HTML is not a programming language, it is still the first language
anyone who wants to become a programmer should learn. It’s easy to write your first
HTML program. All you need is a web browser and a text editor.

INTERNET
 The Internet is the biggest world-wide communication network of computers. The
Internet has a lot of smaller domestic, academic, business, and government networks,
which together carry many different kinds of information. The short form of internet is
the ‘Net’. The World Wide Web is one of its biggest services.

 The Internet is a vast network that connects computers all over the world. Through the
Internet, people can share information and communicate from anywhere with an Internet
connection

 The internet is a global network of interconnected computers and servers that allows
people to communicate, share information, and access resources from anywhere in the
world.

 The World Wide Web, or simply the web, is a system of interconnected documents and
resources, linked together by hyperlinks and URLs.

 The word Internet was used in 1945 by the United States War Department in a radio
operator’s manual, and in 1974 as the shorthand form of Internetwork. Today, the term
Internet most commonly refers to the global system of interconnected computer
networks, though it may also refer to any group of smaller networks.

ADVANTAGE OF INTERNET
Connectivity communication and sharing : In the past days, if you sent a letter or someone sent
you, it could take days and sometimes even months to a reach letter at the destination. In modern
times, you can send a letter or important information to anyone in the e-mail all over the world
through the Internet. And, it often will be delivered to the destination in less than a minute.

Information knowledge and learning: The Internet allows people to learn information about any topic and
offers an answer to any type of question, as it contains endless knowledge and information. Using a
search engine like Google Chrome, Mozilla Firefox, and more, they all allow users to ask any
question and find a web page with an answer about that question
Selling and making money: If you want to sell products and services or run a business, the
Internet is the best place to sell goods. Because anyone can find and access your website all over
the world with the help of the Internet. With online business, you are able to sell goods every day
at all times as the Internet is always on and always available.
Entertainment : The Internet provides people to access endless entertainment. With the Internet,
you can watch movies, videos, play games online, listen to music, etc. There are many sites
available on the Internet, which contain different entertainment material like music, videos, and
more. Also, you can watch online videos on a platform like YouTube

DISADVANTAGE OF INTERNET
Addiction, time-waster, and causes distractions: If any person is spending much time on the
Internet connected devices, he can be addicted to the Internet. An Internet addictive person can
lead to spending his precious time on the Internet, rather than doing something productive. Thus,
anyone who is addicted to surf the Internet Can hamper workplace productivity as well.
Spam and advertising: The Internet is the best place to advertise any service or product as
compared to traditional advertising methods (for example, TV, newspaper, and radio). But you
might see more spam in your inbox than junk mail in real life because digital advertising can be
sent on a massive
Health issues and obesity :If you are surfing the Internet frequently, playing games and spending
too much time on the computer, it can also lead to obesity and an unhealthy lifestyle. Also, a
person who spends too much time on the computer can face a problem like carpal tunnel
syndrome as a computer requires a lot of repetitive movement.

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.

 The most popular web browsers that are used today are Mozilla Firefox, Google
Chrome, Microsoft Internet Explorer, Apple Safari, and the Opera browser.

 A web browser takes you anywhere on the internet. It retrieves information from other
parts of the web and displays it on your desktop or mobile device. The information is
transferred using the Hypertext Transfer Protocol, which defines how text, images and
video are transmitted on the web.

 The web browser is an application software to explore www (World Wide Web). It
provides an interface between the server and the client and it requests to the server for
web documents and services. It works as a compilerto render HTML which is used to
design a webpage.

HISTORY OF WEB BROWSER


 The first web browser World Wide Web was invented in the year of 1990 by Tim
Berners-Lee. Later, it becomes Nexus. In the year of 1993, a new browser Mosaic was
invented by Mark Andreessen and their team. It was the first browser to display text
and images at a time on the device screen.

 He also invents another browser Netscape in 1994. Next year Microsoft launched a
web browser Internet Explorer which was already installed in the Windows operating
system. After this many browsers were invented with various features like Mozilla
Firefox, Google Chrome, Safari, Opera, etc.

WEB BROWSER WORKS

 A web browser helps us find information anywhere on the internet. It is installed on the
client computer and requests information from the web server such a type of working
model is called a client-server model.

 The browser receives information through HTTP protocol. In which transmission of


data is defined. When the browser received data from the server, it is rendered in
HTML to user-readable form and, information is displayed on the device screen.
SOME POPULAR BROWSER

1. Google Chrome:Developed by Google, Chrome is one of the most widely-used web


browsers in the world, known for its speed and simplicity.
2. Mozilla Firefox:Developed by the Mozilla Foundation, Firefox is an open-source
browser that is known for its privacy features and customization options.
3. Apple Safari:Developed by Apple, Safari is the default browser on Mac and iOS
devices and is known for its speed and integration with other Apple products.

WEB PAGE
 A web page is a document on the World Wide Web "with its own address". Web pages are
delivered by a web server to the user and displayed in a web browser to act as a "retrieval
unit" for the information stored within it. A website consists of many web pages linked
together under a common domain name.

 A web page is a single page that is part of the website. The page you are currently on is a
web page. If you navigate to the home page, you are on a different web page, but still on
the same website. The home page is also a web page.

 A webpage is a digital document that is linked to the World Wide Web and viewable by
anyone connected to the internet having a web browser. It can contain any type of
information, such as text, color, graphics, animations, videos, sounds, etc

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.

Characteristics of a Web Page

o A simple webpage can be created very quickly.


o It takes very little time to create a webpage compared to a Website.
o A web page and a website should be compatible with any device, such as Mobile,
Desktop, Laptop, etc.
o The search engine provides a web page through a link, and when a user clicks on that
link, it is redirected to the webpage of a website.
o A webpage can have any type of information including videos, and audios.
o It can be made up of only HTML(Hypertext Markup Language), or CSS, or JavaScript for
dynamic and attractive behavior.

Difference between a Webpage and a Website


Website Webpage

A website is a collection of different web pages that are linked A webpage is a single hypertext document.
together with hyperlinks.

It consists of more than one webpage. It is a single document that is displayed on the user's browser.

To develop a website, developers need more skills and more time To develop a webpage, developers need basic HTML
compared to a webpage. knowledge and less time.

A website is accessed through its domain name, and it does not A webpage is accessed through a unique URL with some
include any extension in the URL. extension.

It can contain information for different entities, such as It can contain information for a single entity, such as currently
[Link], which contains information about different viewing a web page containing information about this page
technologies. only.

It is a little challenging to create a perfect website and requires It is very simple to create a webpage.
lots of programming.

Some examples of the website are [Link], [Link], Some examples of Webpages are the currently viewing page,
etc. contact page, registration page, the home page, etc.
UNIT-2
TAG FOR DOCUMENT STRUCTURE

 Doctype, HTML, title, head, and body are the basic five elements. These are the tags that
go at the top and bottom of an HTML file. This contains title, meta tags, content type, and
connections to external pages such as CSS and JavaScript

 The head part includes the title, encoding style, and metadata of the web pages. If the
styles and presentation are specified in a separate CSS file, a developer needs to include
the external link in the head section. The body section includes all tag elements used to
display the webpage's content.

 A line containing HTML version information, a declarative header section (delimited by


the HEAD element), a body, which contains the document's actual content.

Doctype tag:
 The HTML document type declaration, also known as DOCTYPE , is the first line of
code required in every HTML or XHTML document. The DOCTYPE declaration is an
instruction to the web browser about what version of HTML the page is written in.

Program:
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head> <body>
This is the content of the document. </body>
</html>

Html tag:
The <html> tag represents the root of an HTML document. The <html> tag is the container
for all other HTML elements (except for the <!DOCTYPE> tag). Note: You should always
include the lang attribute inside the <html> tag, to declare the language of the Web page .
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Head tag:
The <head> element is a container for metadata (data about data) and is placed between the <html>
tag and the <body> tag. Metadata is data about the HTML document. Metadata is not displayed.

Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>

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

</body>
</html>

Body tag:
 It must be the second element The <body> element contains the entire content of a
webpage inside of the parent <html> element, following only the <head> element.
 You must use this element and it should be used just once. It should start immediately
after the closing head tag and end directly before the closing html tag.
Program:
<html>
<head>
<title>Title of the WebPage</title>
</head>
<body>
<p> Everything inside the body tag is visible on the web page.</p>
</body>
</html>

Block level 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.

 A block-level element always takes up the full width available (stretches out to the left
and right as far as it can).

 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 [Link] <p>


element is a block-level element .

Program:
<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>HTML is used for designing the web page and its language easy to understandable for
human being design the fond and style add img also.</p>
</body>
</html>

Here are the block-level elements in HTML:

<address> <article> <aside>


<blockquote> <canvas> <dd>
<div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer>
<form> <h1>-<h6> <header>
<hr> <li> <main> <nav>
<noscript> <ol> <p>
<pre> <section> <table>
<tfoot> <ul> <video>
INLINE STATEMENT
An inline element does not start on a new line. An inline element only takes up as much
width as necessary. This is a <span> element inside a paragraph

Here are the inline elements in HTML:

<a> <abbr> <acronym> <b>


<bdo> <big> <br> <button>
<cite> <code> <dfn>
<em> <i> <img> <input>
<kbd> <label> <map> <object>
<output> <q> <samp> <script>
<select> <small> <span>
<strong> <sub> <sup>
<textarea> <time> <tt> <var>

Program:

<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span>
element inside a paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only takes
up as much width as necessary.</p>
</body>
</html>
HEADING PARAGRAPH
 The HTML heading tag is used to define the headings of a page. There are six levels of
headings defined by HTML. These 6 heading elements are h1, h2, h3, h4, h5, and h6; with
h1 being the highest level and h6 being the least.

 <h1> is used for the main heading. (Biggest in size)

 <h2> is used for subheadings, if there are further sections under the subheadings then
the <h3> elements are used.

 <h6> for the small heading (smallest one).


Importance of Heading:
 Search Engines use headings for indexing the structure and organizing the content of t
webpage.

 Headings are used for highlighting important topics.

 They provide valuable information and tell us about the structure of the document

PROGRAM

!DOCTYPE html>
<html> <body>
<h1>Welcome to GeeksforGeeks</h1>
<h2>A computer science portal for geeks</h2>
<h5>Tutorial</h5>
<h6>Geeks</h6>
</body>
</html>

FONT STYLE ELEMENT


 Apart from global attributes, the font tag in HTML has three attributes, namely: size,
color, and face. The font tag in HTML is no longer used. The font tag is deprecated in
HTML5, so we can use the CSS properties to change the font size, face, color, font, font-
family, font-size, etc.
 To change font type purely with HTML, use the CSS font-family property. Set it to the
value you want and place it inside a style attribute. Then add this style attribute to an
HTML element, like a paragraph, heading, button, or span tag

HTML STYLE

 he HTML style attribute is used to add styles to an element, such as color, font, size, and
more.

PROGRAM:

<!DOCTYPE html>

<html>

<body>
<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>

<p style="font-size:50px;">I am big</p>

</body>

</html>

Background Color
 The CSS background-color property defines the background color for an HTML element.

PROGRAM:

<html>
<body style="background-color:powderblue;">

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

</body>
</html>

Text Color
 The CSS color property defines the text color for an HTML element:

PROGRAM:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html
Fonts
 The CSS font-family property defines the font to be used for an HTML element:

PROGRAM:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

</body>

</html>

TEXT SIZE
 The CSS font-size property defines the text size for an HTML element:

PROGRAM:

<!DOCTYPE html>

<html>

<body>

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

</body>

</html>

Text Alignment

 The CSS text-align property defines the horizontal text alignment for an HTML element :

PROGRAM:

<!DOCTYPE html>
<html>

<body>

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

</body>

</html>

UNIT-3
LIST
 HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are two different types of HTML lists:
 Ordered List or Numbered List (ol)
 Unordered List or Bulleted List (ul)

As we learned, HTML provides you with three types of lists:


1. Ordered lists, which have an inherent order and each item is numbered.
2. Unordered lists, which have no inherent order and each item is bulleted.
3. Description lists, which contain a list of terms and descriptions for each term.

An unordered HTML list:

 Item
 Item
 Item
 Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List

 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag
 The list items will be marked with bullets (small black circles) by default:

PROGRAM:

<!DOCTYPE html>

<html>

<body>

<h2>An unordered HTML list</h2>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

Unordered HTML List - Choose List Item Marker


The CSS list-style-type property is used to define the style of the list item marker. It can have
one of the following values:

Value Description

Disc Sets the list item marker to a bullet (default)


Circle Sets the list item marker to a circle

Square Sets the list item marker to a square

None The list items will not be marked

Nested HTML Lists


Lists can be nested (list inside list):

<!DOCTYPE html>

<html>

<body>

<h2>A Nested List</h2>

<p>Lists can be nested (list inside list):</p>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>
<li>Milk</li>

</ul>

</body>

</html>

Chapter Summary
 Use the HTML <ul> element to define an unordered list
 Use the CSS list-style-type property to define the list item marker
 Use the HTML <li> element to define a list item
 Lists can be nested
 List items can contain other HTML elements
 Use the CSS property float:left to display a list horizontally

Ordered HTML List


 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
 The list items will be marked with numbers by default:

PROGRAM:

<!DOCTYPE html>

<html>

<body>

<h2>An ordered HTML list</h2>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

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

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Control List Counting


By default, an ordered list will start counting from 1. If you want to start counting from a
specified number, you can use the start attribute

PROGRAM:

<!DOCTYPE html>
<html>
<body>
<h2>The start attribute</h2>
<p>By default, an ordered list will start counting from 1. Use the start attribute to start counting
from a specified number:</p>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

Nested HTML Lists


Lists can be nested (list inside list)

<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>

</body>
</html>

Chapter Summary
 Use the HTML <ol> element to define an ordered list
 Use the HTML type attribute to define the numbering type
 Use the HTML <li> element to define a list item
 Lists can be nested
 List items can contain other HTML elements

HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list


<dt> Defines a term in a description list

<dd> Describes the term in a description list

UNIT-4
TABLES
HTML tables allow us to arrange data into rows and columns on the web page. We use the
<table> tag, to create table in HTML. A table consist of rows and columns. Table heading, row
and column and table data can be set using one or more <th>, <tr>, and <td> elements.
 A table row is defined by the <tr> tag. To set table header, we use <th> tag. To insert
data in table cell, use the <td> tag.
 A table in HTML consists of table cells inside rows and columns of the table.
 Table heading is defined by the <th>...</th>. Data inside the <th> are the headings of
the column of a table.
 Each table cell is defined by a <td>...</td> tag. Data inside the <td> tag are the content
of the table rows and columns.
 Each table row starts with a <tr> ....</tr> tag.
 We use style sheet to create border for the table.

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>

OUTPUT:

TABLE CELL
Table Cell are the building blocks for defining the Table. It is denoted with <td> as a start tag &
</td> as a end tag.
SYNTAX:
</td> Content...</td>
TABLE ROW
The rows can be formed with the help of combination of Table Cells. It is denoted by <tr> and
</tr> tag as a start & end tags.
SYNTAX:
</tr> Content...</tr>
TABLE HEADER
The Headers are generally use to provide the Heading. The Table Headers can also be used to
add the heading to the Table. This contains the <th> & </th> tags.
SYNTAX:
</th> Content...</th>

TABLE ELEMENT
An HTML table element consists of some tags and attributes necessary to build a table. Those
tags are as follows:
<td>: defines a standard data cell in an HTML table.
<tr>: defines a row in an HTML table.
<th>: defines a header cell in an HTML table.
<th>: defines a header cell in an HTML table.
SYNTAX:
A <table> tag uses multiple elements to create a simple table in HTML. The following syntax
shows how to create a table with three rows and one element in each row.
<table>
<tr>
<th>....</th>
</tr>
<tr>
<td>...</td>
</tr>
<tr>
<td>...</td>
</tr>
</table>
EXAMPLE:
<table class="default">
<tr>
<td>New York</td>
<td>1 h 51 min</td>
</tr>
<tr>
<td>Allentown</td>
<td>1 h 11 min</td>
</tr>
<tr>
<td>Reading</td>
<td>1 h 12 min</td>
</tr>
</table>
OUTPUT:
New York :1 h 51 min
Allentown :1 h 11 min
Reading : 1 h 12 min

CAPTIONS
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.
Note: The <caption> tag also supports the Global Attributes and Event Attributes in HTML.
SYNTAX:
<caption align = "value" ></caption>
Attributes:
Attribute Value
Description:
Align This attribute is used to specify the alignment of text content but is deprecated from
HTML5.

TABLE
The <caption> element is used to add a caption to an HTML table. A <caption> must appear in
an HTML document as the first descendant of a parent <table>, but it may be positioned visually
at the bottom of the table with CSS.
EXAMPLE:
<table>
<caption>Favorite Colors</caption>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Bob</td>
<td>Yellow</td>
</tr>
<tr>
<td>Michelle</td>
<td>Purple</td>
</tr>
</table>
OUTPUT:
Name : Favorite Color
Bob : Yellow
Michelle :Purple
CELL ALIGNMENT
The HTML <td> align attribute is used to set the horizontal alignment of text content. It uses the
align attribute in HTML <td> to horizontally align text content within a table cell and it sets
“left,” “center,” or “right” to control horizontal alignment.
Note: The <td> align attribute is not supported by HTML5 instead uses CSS.
SYNTAX:
<td align ="left | right | center | justify | char ">

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>
elements are left-aligned.
 To center-align the content of <td> elements as well, use text-align: center

EXAMPLE:

Firstname Lastname Savings


Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Example
td {
text-align: center;
}

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:
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Example
td {
height: 50px;
vertical-align: bottom;
}

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 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 a spreadsheet program like Excel.
 Note: 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:
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>

COLSPAN
 HTML Table with Colspan allows you to merge or combine adjacent table cells
horizontally, creating a single, wider cell that spans across multiple columns.
 Note: The colspan is defined as the <th> element.

EXAMPLE:
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
CELL PADDING
 The HTML <table> cell padding Attribute is used to specify the space between the cell
content and cell wall. The cellpadding attribute is set in terms of pixels. By default, the
padding is set to 0.
 Note: The <table> cellpadding Attribute is not supported by HTML5.

Syntax:
<table cellpadding="pixels">
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>

Unit-5
Frames
The <frameset> tag in HTML is used to define the frameset. The <frameset> element
contains one or more frame elements. It is used to specify the number of rows and columns in
frameset with their pixel of spaces. Each element can hold a separate document.
Note: The <frameset> tag is not supported in HTML5.

Syntax:
<frameset cols = "pixels|%|*">
Attributes :
The list of frameset attributes are given below:

 cols: The cols attribute is used to create vertical frames in a web browser. This attribute is
basically used to define the no. of columns and their size inside the frameset tag.

 rows: The rows attribute is used to create horizontal frames in the web browser. This attribute is
used to define the no. of rows and their size inside the frameset tag.
 border: This attribute of frameset tag defines the width of the border of each frame in pixels.
Zero value is used for no border.

 frameborder : This attribute of frameset tag is used to specify whether a three-dimensional


border should be displayed between the frames or not for this use two values 0 and 1, where 0
defines no border and value 1 signifies for yes there will be a border.

 framespacing: This attribute of frameset tag is used to specify the amount of spacing between
the frames in a frameset. This can take any integer value as a parameter which basically denotes the
value in pixel.

Example 1:

<!DOCTYPE html>

<html>

<head>

<title>frameset attribute</title>

</head>

<!-- frameset attribute starts here -->

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

<frame name = "top" src = "[Link]" />

<frame name = "main" src = "[Link]" />

<frame name = "bottom" src = "col_last.png" />

<noframes>

<body>The browser you are working does not

support frames.</body>
</noframes>

</frameset>

<!-- frameset attribute ends here -->

</html>

Supported Browsers:

 Google Chrome
 Internet Explorer
 Firefox
 Opera
 Safari

Targeted links:

 _self - Default. Opens the document in the same window/tab as it was clicked.
 _blank - Opens the document in a new window or tab.
 _parent - Opens the document in the parent frame.
 _top - Opens the document in the full body of the window.

Example:

<!DOCTYPE html>

<html>

<head>

<title>

HTML link target Attribute


</title>

</head>

<body>

<center>

<h1 style="color:green;">

GeeksforGeeks

</h1>

<h2>

HTML <link> target Attribute

</h2>

<link href="[Link]" target="_blank">

</center>

</body>

</html>

NO FRAMES:
 The HTML <noframes> tag is used to handle the browsers which do not support <frame> tag.
This tag is used to display alternate text message.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>HTML noframes Tag</title>
</head>

<frameset cols = "200, *">


<frame src = "/html/[Link]" name = "menu_page" />
<frame src = "/html/[Link]" name = "main_page" />

<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>

</html>

FORMS
 An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

PROGRAM:

<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>

ELEMENT THE FORM:The <form> element is a container for different types of input
elements, such as: text fields, checkboxes buttons, submit buttons, etc.
The <input> Element
The HTML <input> element is the most used form element.

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

Here are some examples:

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 Displays a checkbox (for selecting zero or more of many


type="checkbox"> choices)

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

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

An HTML form is used to collect user input on a web page. This input can then be
sent to a server for processing, or handled client-side using JavaScript.

Basic Structure of an HTML Form:


The core of an HTML form is the <form> element, which acts as a container for
various form controls.
EXAMPLE;

<form action="/submit-data" method="post">


<!-- Form elements go here -->
</form>

action attribute: Specifies the URL where the form data will be sent when
submitted.

method attribute: Defines the HTTP method used to send the data. Common
methods are:

get: Appends form data to the URL as name/value pairs. Suitable for non-sensitive
data and when users might want to bookmark the result (e.g., search queries).

post: Sends form data in the body of the HTTP request. Suitable for sensitive data
or larger amounts of data.

Common Form Elements:

Inside the <form> tag, various interactive elements are used to collect user input:

<input>: A versatile element with a type attribute to define its behavior:

type="text": Single-line text input.

type="password": Hides input characters.

type="email": Validates email format.

type="number": Allows only numeric input.

type="checkbox": Allows multiple selections.

type="radio": Allows a single selection from a group.

type="submit": A button to submit the form.

type="reset": A button to reset form values.

<label>: Provides a descriptive label for an input element, improving


accessibility. The for attribute should match the id of the associated input.

<textarea>: Multi-line text input area.


<select> and <option>: Create a dropdown list for selecting one or more options.

<button>: A general-purpose button element, which can also be used


as type="submit" or type="reset".

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Form</title>
</head>
<body>

<h2>Contact Us</h2>
<form action="/contact" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="user_name" required><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="user_email" required><br><br>

<label for="message">Message:</label><br>
<textarea id="message" name="user_message" rows="5"
cols="30"></textarea><br><br>

<input type="submit" value="Send Message">


</form>

</body>
</html>
1. Form Elements in HTML

<form>
The form element is used to create an area for user input. It contains attributes like action,
which specifies where the form data should be sent, and method, which defines how the data is
sent (GET or POST).
<label>
This tag is used to provide descriptive text for input fields. It improves accessibility by linking text to
specific inputs using the for attribute.

<input>
This is the most commonly used form element. It is used to accept different types of user data
such as text, passwords, numbers, and files. The behavior of this element depends on its type
attribute.

<textarea>
This element is used to accept multi-line text input. It is useful in comment boxes, feedback
sections, and long messages.

<select> and <option>


The <select> element creates a dropdown list, and <option> defines the choices within the
dropdown. It is used when users need to select one item from a list.

<button>
This tag allows creation of clickable buttons such as submit, reset, or custom action buttons.

<fieldset> and <legend>


<fieldset> groups related form elements together for better organization, while <legend> gives
a title to that group.

<datalist>
This element provides auto-suggestions to an input box. It improves user experience by allowing
users to choose from predefined options.

<output>
This element is used to display calculation results or dynamic values inside a form.

2. Commonly Used Input Types in HTML

Text Input (type="text")


It is used for entering single-line text such as names, usernames, and addresses.

Password Input (type="password")


This hides the characters typed by the user, making it suitable for passwords and sensitive
data.
Email Input (type="email")
Automatically validates email format and is used in login and registration forms.

Number Input (type="number")


It allows only numerical values with optional limits using min and max.

Radio Button (type="radio")


Used when the user must select only one option from a set of choices.

Checkbox (type="checkbox")
Allows users to select multiple options at the same time.

File Input (type="file")


Enables users to upload files such as images, PDFs, or documents.

Date and Time Inputs (type="date", type="time", type="datetime-local")


These allow users to select dates and time values easily with built-in calendar controls.

Submit Button (type="submit")


Sends the form data to the server once the user clicks the button.

Reset Button (type="reset")


Clears all input fields in the form and resets them to default values.

Range Input (type="range")


Provides a slider for selecting numeric values in a given range.

Color Input (type="color")


Opens a color picker allowing users to choose colors.

You might also like