KEMBAR78
HTML New Document | PDF | World Wide Web | Internet & Web
Scribd
Upload
34 views128 pages

HTML New Document

Uploaded by

Computer science
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
34 views128 pages

HTML New Document

Uploaded by

Computer science
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
You are on page 1/ 128

INTRODUCTION TO HTML

BY

MRS. M.PAVITHRA , MCA.,M.Phil.,B.Ed..,

&

MS. S.ARSHIYABEGUM , Msc..,

Assistant Professor,

PG & Research Department of Computer Science &Applications

Sri Vidya Mandir Arts &Science College(Autonomus),Katteri

NAME:____________________

CLASS:____________________

1
Syllabus

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

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

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

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

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

2
UNIT 1

INTRODUCTION TO HTML

INTRODUCTION:

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.

A Simple HTML Document

Example:

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

OUTPUT:

My First Heading

My first paragraph.
3
Example Explained

 The <!DOCTYPE html> declaration defines that this document is an


HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

4
<p> My first paragraph. </p>

<br> none none

Some HTML tags are comment less like <br> this tag consider as empty
tag.

WEB BASICS:

 Web basics in HTML refer to the fundamental building blocks and


concepts that are essential for creating web pages.

 HTML (Hypertext Markup Language) is the standard markup language


used to structure content on the web. Here are some key web basics in
HTML:

 HTML Document Structure: HTML documents have a basic structure that


includes a <!DOCTYPE html> declaration, an <html> element, <head> and
<body> sections.

 The <head> section typically contains metadata such as the title of the
page, character set declarations, and links to external resources.

EXAMPLE:

<!DOCTYPE html>

<html>

<head>

<title>My Web Page</title>

<!-- Other metadata and links to external resources go here -->

5
</head>

<body>

<!-- Content of the web page goes here -->

</body>

</html>

HTML Elements:

HTML documents are made up of elements represented by tags. Tags are


enclosed in angle brackets, and most have opening and closing tags.

Example: <p> is a paragraph tag, <h1> to <h6> are heading tags, <a> is an
anchor tag for links, etc.

Examples:

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

<h1>This is a heading level 1.</h1>

<a href="https://www.example.com">Visit Example.com</a>

Attributes:

HTML tags can have attributes that provide additional information about an
element.

Example:

The <a> tag has an href attribute that specifies the URL of the link.

<a href="https://www.example.com">Visit Example.com</a>

Images:

The <img> tag is used to embed images in a web page. It has a src attribute
that specifies the path to the image file.

6
<img src="image.jpg" alt="A descriptive text for the image">

Lists:

HTML supports both ordered (<ol>) and unordered (<ul>) lists, as well as list
items (<li>).

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Forms:

Forms are used for user input. The <form> tag wraps form elements like text
inputs, buttons, checkboxes, etc.

<form action="/submit_form" method="post">

<label for="username">Username:</label>

<input type="text" id="username" name="username">

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

</form>

HTML Comments:

You can add comments in your HTML code using <!-- comment goes here -->.

<!-- This is a comment -->

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

 These are just some of the basic concepts in HTML.

 Understanding these fundamentals provides a solid foundation for


creating web pages and is often the first step in web development.

7
WHAT IS INTERNET:

Introduction :

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

 It was created in the 1960s by the US Department of Defence as a way to


connect computers and share information between researchers and
scientists.

 The World Wide Web, or simply the web, is a system of interconnected


documents and resources, linked together by hyperlinks and URLs. It was
created by Tim Berners-Lee in 1989 as a way for scientists to share
information more easily.

 The web quickly grew to become the most popular way to access
information on the internet.

 Together, the internet and the web have revolutionized the way we
communicate, do business, and access information.

 They have made it possible for people all over the world to connect with
each other instantly and have transformed many industries, from media
and entertainment to education and healthcare.

The Internet:

In simplest terms, the Internet is a global network comprised of smaller


networks that are interconnected using standardized communication
protocols. The Internet standards describe a framework known as the
Internet protocol suite. This model divides methods into a layered system of
protocols.

These layers are as follows:

8
Application layer (highest) – concerned with the data(URL, type, etc.). This is
where HTTP, HTTPS, etc., comes in.

Transport layer – responsible for end-to-end communication over a


network.

Network layer – provides data route.

The Internet provides a variety of information and communication facilities;


contains forums, databases, email, hypertext, etc. It consists of private,
public, academic, business, and government networks of local to global
scope, linked by a broad array of electronic, wireless, and optical networking
technologies.

1. The World Wide Web: The Web is the only way to access information
through the Internet. It’s a system of Internet servers that support specially
formatted documents.

The documents are formatted in a markup language called HTML, or


“HyperText Markup Language”, which supports a number of features
including links and multimedia.

These documents are interlinked using hypertext links and are accessible
via the Internet.

To link hypertext to the Internet, we need:

The markup language, i.e., HTML.

The transfer protocol, e.g., HTTP.

Uniform Resource Locator (URL), the address of the resource.

We access the Web using Web browsers.

Difference between Web and Internet

Internet Web

9
 The Internet is the network of The Web is a way to access
networks and the network information through the Internet.
allows to exchange of data
between two or more
computers.
 It is also known as the Network The Web is a model for sharing
of Networks. information using the Internet.
 The Internet is a way of The protocol used by the web is
transporting information HTTP.
between devices.
 Accessible in a variety of ways The Web is accessed by the Web
Browser.

 Network protocols are used to Accesses documents and online sites


transport data. through browsers.
 Access Can be accessed using Accessed through a web browser
various devices
 Connectivity Network of Connectivity Allows users to access
networks that allows devices to and view web pages, multimedia
communicate and exchange content, and other resources over the
data Internet

 Protocols TCP/IP, FTP, SMTP, Protocols HTTP, HTTPS, FTP, SMTP,


POP3, etc. etc.

 Infrastructure Consists of Infrastructure Consists of web


routers, switches, servers, and servers, web browsers, and other
other networking hardware software and hardware

 Provides the underlying Provides a platform for publishing

10
infrastructure for the Web, and accessing information and
email, and other online resources on the Internet
services
 No single creator Creator Tim Berners-Lee

 Used for communication, Used for publishing and accessing


sharing of resources, and web pages, multimedia content, and
accessing information from other resources on the Internet
around the world

URI: URI stands for ‘Uniform Resource Identifier’.

 A URI can be a name, locator, or both for an online resource whereas a


URL is just the locator. URLs are a subset of URIs.

 A URL is a human-readable text that was designed to replace the


numbers (IP addresses) that computers use to communicate with servers.

 A URL consists of a protocol, domain name, and path (which includes the
specific subfolder structure where a page is located) like-

protocol://WebSiteName.topLevelDomain/path

WEB BROWSER:

What is a web browser?

 A web browser is a software application specifically for the purpose of


reading HTML instructions and displaying the resulting Web page. It is a
fully functional software that can interpret and display HTML Web pages,
applications, JavaScript, AJAX and other content hosted on Web servers.

 HTML is responsible for telling a Web browser how text and other
objects in a Web document should appear.

11
 Hypertext Transfer Protocol (HTTP) is define how browsers should
request Web pages and how Web servers should respond to those
requests.

How to Web Browsers Work ?

 A web browser typically reads and renders HTML documents. This


happens inside the browser as two stages - the parsing stage and the
rendering stage.

 During the parsing stage, the browser reads the markup in the document,
breaks it down into components, and builds a document object model
(DOM).

 When the DOM tree has been constructed, and any CSS style sheets have
been loaded and parsed, the browser starts the rendering stage. Each
node in the DOM tree will be rendered and displayed in the browser.

Web Browser

 The first web browser was invented in 1990 by Sir Tim Berners Lee. It
was called World Wide Web and was later renamed as Nexus.

 After that the world's first popular browser Mosaic innovated by Marc
Andreessen in 1993, which made the World Wide Web system easy to use
and more accessible to the average person.

 Over the years many other browsers were developed , but Microsoft
Internet Explorer , Mozilla Firefox and Google's Chrome continue to
dominate todays market

Web Browser HTML Support

 All web activity begins on the client side , when a user starts his or her
browser.

12
 Each browser renders HTML a bit differently such as handles JavaScript,
multimedia, style sheets, and other HTML add-ins differently.

 Web browsers were created specifically for the purpose of reading HTML
instructions and displaying the resulting Web page.

 So When you work with HTML, you need to test your pages on as many
different browsers as you can.

Web Page

 web page is a document available on world wide web. Web Pages are
stored on web server and can be viewed using a web browser.

 A web page can cotain huge information including text, graphics, audio,
video and hyper links. These hyper links are the link to other web pages.

 Collection of linked web pages on a web server is known as website.


There is unique Uniform Resource Locator (URL) is associated with each
web page.

Static Web page

 Static web pages are also known as flat or stationary web page. They are
loaded on the client’s browser as exactly they are stored on the web
server.

 Such web pages contain only static information. User can only read the
information but can’t do any modification or interact with the
information.

 Static web pages are created using only HTML. Static web pages are only
used when the information is no more required to be modified.

Dynamic Web page

13
 Dynamic web page shows different information at different point of
time.

 It is possible to change a portaion of a web page without loading the


entire web page.

 It has been made possible using Ajax technology.

Server-side dynamic web page

 It is created by using server-side scripting. There are server-side scripting


parameters that determine how to assemble a new web page which also
include setting up of more client-side processing.

 Client-side dynamic web page

 It is processed using client side scripting such as JavaScript. And then


passed in to Document Object Model (DOM).

Scripting Languages

 Scripting languages are like programming languages that allow us to


write programs in form of script.

 These scripts are interpreted not compiled and executed line by line.

 Scripting language is used to create dynamic web pages.

Client-side Scripting

 Client-side scripting refers to the programs that are executed on client-


side. Client-side scripts contains the instruction for the browser to be
executed in response to certain user’s action.

 Client-side scripting programs can be embedded into HTML files or also


can be kept as separate files.

14
Following table describes commonly used Client-Side scripting languages:

S.N. Scripting Language Description

1 JavaScript It is a prototype based scripting language. It


inherits its naming conventions from java.
All java script files are stored in file having
.js extension
2 ActionScript It is an object oriented programming
language used for the development of
websites and software targeting Adobe flash
player.

3 Dart It is an open source web programming


language developed by Google. It relies on
source-to-source compiler to JavaScript.

4 VBScript It is an open source web programming language


developed by Microsoft. It is superset of
JavaScript and adds optional static typing class-
based object oriented programming.

Server-side Scripting

Sever-side scripting acts as an interface for the client and also limit the user
access the resources on web server. It can also collects the user’s
characteristics in order to customize response.

Following table describes commonly used Server-Side scripting languages:

S.No Scripting Language Description

15
1 ASP Active Server Pages (ASP)is server-side
script engine to create dynamic web
pages. It supports Component Object
Model (COM) which enables ASP web
sites to access functionality of libraries
such as DLL.

2 ActiveVFP It is similar to PHP and also used for


creating dynamic web pages. It uses
native Visual Foxpro language and
database
3 ASP.net It is used to develop dynamic websites,
web applications, and web services.

4 Java Java Server Pages are used for creating


dynamic web applications. The Java
code is compiled into byte code and run
by Java Virtual Machine (JVM).

5 Python It supports multiple programming


paradigms such as object-oriented, and
functional programming. It can also be
used as non-scripting language using
third party tools such as Py2exe or
Pyinstaller.

6 WebDNA It is also a server-side scripting


language with an embedded database
system.

HTML BASICS:

16
 In this article, we will see the HTML Basics by understanding all the basic
stuff of HTML coding.

 There are various tags that we must consider and include while starting
to code in HTML.

 These tags help in the organization and basic formatting of elements in


our script or web pages.

 These step-by-step procedures will guide you through the process of


writing HTML.

Basic HTML Document:

 Below mentioned are the basic HTML tags that divide the whole
document into various parts like head, body, etc.

 Every HTML document begins with a HTML document tag.

 Although this is not mandatory, it is a good convention to start the


document with this below-mentioned tag.

<!DOCTYPE html>

 <html> : Every HTML code must be enclosed between basic HTML tags.

It begins with <html> and ends with </html> tag.

 <head>: The head tag comes next which contains all the header
information of the web page or documents like the title of the page
and other miscellaneous information.
 This information is enclosed within the head tag which opens with
<head> and ends with </head>. The contents will of this tag will be
explained in the later sections of the course.

17
<title>: We can mention the title of a web page using the <title> tag. This
is header information and hence is mentioned within the header tags.
 The tag begins with <title> and ends with </title>

<body>:
 Next step is the most important of all the tags we have learned so far.
The body tag contains the actual body of the page which will be visible to
all the users.
 This opens with <body> and ends with </body>.
 All content enclosed within this tag will be shown on the web page be it
writings or images or audio or videos or even links.
 We will see later in the section how using various tags we may insert
mentioned contents into our web pages.

Example:

This example illustrates the HTML basic structure.

<!DOCTYPE html>

<html>

<head>

<!-- Information about the page -->

<!--This is the comment tag-->

<title>GeeksforGeeks</title>

</head>

<body>

<!--Contents of the webpage-->

</body>
18
</html>

This code won’t display anything.

It just shows the basic pattern of how to write the HTML code and will
name the title of the page as Geeks for Geeks. <! – – comment here – – > is
the comment tag in HTML and it doesn’t read the line present inside this tag.

HTML Headings:

 These tags help us to give headings to the content of a web page.

 These tags are mainly written inside the body tag.

 HTML provides us with six heading tags from <h1> to <h6>. Every tag
displays the heading in a different style and font size.

Most HTML heading tag that we use :-

Heading 1

Heading 2

Heading 3

Example:

This example illustrates the use of 6 heading tags from <h1> to <h6> in
HTML.

<!DOCTYPE html>

<html>

<head>

<title>GeeksforGeeks</title>

</head>

19
<body>

<h1>Hello GeeksforGeeks</h1>

<h2>Hello GeeksforGeeks</h2>

<h3>Hello GeeksforGeeks</h3>

<h4>Hello GeeksforGeeks</h4>

<h5>Hello GeeksforGeeks</h5>

<h6>Hello GeeksforGeeks</h6>

</body>

</html>

Output:

Hello GeeksforGeeks

Hello GeeksforGeeks

Hello GeeksforGeeks

Hello GeeksforGeeks
HELLO GEEKSFORGEEKS
HELLO GEEKSFORGEEKS

HTML Headings

HTML Paragraph:

These tags help us to write paragraph statements on a webpage. They start


with the <p> tag and ends with </p>.

HTML Break:

20
These tags are used for inserting a single line type break. It does not have
any closing tag. In HTML the break tag is written as <br>.

Example:

This example illustrates the use of the <p> tag for writing a paragraph
statement in HTML.

<!DOCTYPE html>

<html>

<head>

<title>GeeksforGeeks</title>

</head>

<body>

<h1>Hello GeeksforGeeks</h1>

<p> A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

</p>

</body>

</html>

Output:

Hello GeeksforGeeks

A Computer Science portal for geeks

A Computer Science portal for geeks

A Computer Science portal for geeks

HTML Paragraph
21
 HTML Horizontal Line: The <hr> tag is used to break the page into
various parts, creating horizontal margins with help of a horizontal line
running from the left to right-hand side of the page.

 This is also an empty tag and doesn’t take any additional statements.

Example:

This example illustrates the use of the <hr> tag for the horizontal line in
HTML.

<!DOCTYPE html>

<html>

<head>

<title>GeeksforGeeks</title>

</head>

<body>

<h1>Hello GeeksforGeeks</h1>

<p>

A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

</p>

<hr>

<p>

A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

22
</p>

<hr>

<p>

A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>

</p>

<hr>

</body>

</html>

Output:

Hello GeeksforGeeks

A Computer Science portal for geeks

A Computer Science portal for geeks

A Computer Science portal for geeks

A Computer Science portal for geeks

A Computer Science portal for geeks

A Computer Science portal for geeks

A Computer Science portal for geeks

A Computer Science portal for geeks

A Computer Science portal for geeks

Adding horizontal line using the <hr> tag

HTML Images:

23
The image tag is used to insert an image into our web page. The source of
the image to be inserted is put inside the <img src=”source_of_image“> tag.

Image can be inserted in the image tag in two formats: –

 If the image is in the same folder, then we can just write the name of the
image and the format as the path.

 If the image is in another folder, then we do need to mention the path of


the image and the image name as well as the format of the image.

Example:

<!DOCTYPE html>

<html>

<head>

<title>GeeksforGeeks</title>

</head>

<body>

<img src="https://media.geeksforgeeks.org/wp-content/cdn-
uploads/Geek_logi_-low_res.png">

</body>

</html>

Output:

UNDERSTANDING HTML TAGS:


24
Head Tag: The head tag <head> contains all the elements describing the
document.

Title Tag: The title tag <title> specifies the HTML page title, which is shown
in the browser’s title bar.

Body Tag: The body tag <body> is where you insert your web page’s content.

Paragraph Tag:

A paragraph tag <p> is used to define a paragraph on a web page.

Heading Tag :

The HTML heading tag is used to define the heading of the HTML document.
The <h1> tag defines the most important tag, and <h6> defines the least.

Formatting Tags

Emphasis tag: The HTML <em> tag is used to emphasize the particular text
in a paragraph.

Bold Tag: The <b> tag is used to make the text bold.

Italic Tag: The <i> tag is used to make the text italic.

Underline Tag: The <u> tag is used to set the text underline.

Link Tag: The <a> tag links one page to another page. The href attribute is
used to define

List Tag: The <li> tag is used if you want to enter the contents in the listed
order. There are two types of lists.

 Ordered list <ol>


 Unordered list <ul>

25
Image Tag :

The <img> tag is used to embed an image in an HTML document. You need
to specify the source of the image inside the tag.

The center tag will center your content.

The Table Tag:

The <table> tag is used to create a table in the HTML document.

The table row (<tr>) tag is used to make the rows in the table, and the table
data (<td>) tag is used to enter the data in the table.

The style (<style>) tag is used to add methods to the content by typing the
code in the HTML file itself.

UNIT 2
26
TAGS FOR DOCUMENT STRUCTURE IN HTML:

 HTML (HyperText Markup Language) files are, basically, just simple text
files that you could create in any text editor.

 But to be displayed correctly on the World Wide Web, an HTML document


must be structured correctly.

 Any variation from this structure will cause many web browsers to show
the content incorrectly or not at all.

 Also, all HTML documents must have a suffix of “html” for the HTML
code to be viewed correctly by a web browser.

The rule-making body of the Web:

 The people who determine what this stucture is, is the World Wide Web
Consortium (W3C).

 Web browsers are supposed to follow these standards as close as


possible. For the most part they all do well, but some browsers fall quite
short of this goal (Internet Explorer being the worst culprit).

 Nonetheless, it is best when you are creating a web page to follow the
current web standards.

 This will ensure your site is viewable in as many browsers as possible. All
HTML instruction on this ETS site follows the W3C standards.

Example

<!DOCTYPE HTML>

27
<html>

<head>

<meta charset=utf-8">

<title>A Simple HTML Example</title>

<style>

p {text-align:center;}

</style>

</head>

<body>

<h1>This is a header</h1>

<p>This is a paragraph, centered on the page.</p>

<p>And this is the second paragraph with <strong>bold text</strong>.</p>

</body>

</html>

This code generates a page that looks like:

Example shown within a browser

 In the above example, you can see the use of tags which are an essential
part of an HTML document.

 An HTML tag consists of a left angle bracket (<), a tag name (such as "h1")
and a right angle bracket (>). Tags are usually paired so that you have a
tag at the beginning and the end of a section of the document (<h1> and
</h1> for example.)

 All end tags look identical to the beginning tag except a slash (/)
precedes the tag name within the brackets.

28
 A pair of tags delineates where the tag's effect should begin and end on
the page. The current web standard from W3C suggests that all tag
names be lowercase.

 Attributes

 Some tags may also include an attribute, which is additional information


that is included only within the start tag.

 Attributes are specific to each tag, although there are many similarities.
Some tags must have an attribute to function properly.

 An example of an attribute is shown in the first paragraph tag shown in


the example above (<p align="center">.)

 The web standards suggests that all attribute parameters be contained


within quotes. For example, it is not correct to have this: <p
align=center>

Closing Tags

 Also, all nested HTML tags must be ended in the reverse order they were
created.

 For example, this is incorrect: <h1><b><i>This is a bold and italic


header</h1></i></b> Because the <h1> tag was created first, it must be
closed last and since the <i> tag was created last, it must be closed first.

 All of the tags must open and close within each other like a set of
Russian nesting dolls.

 Here is the correct example: <h1><b><i>This is a bold and italic


header</i></b></h1>

29
Tag Placement

 Within a web page, some HTML tags are required for the page to be
displayed correctly.

 These tags are <html>, <head>, <title> and <body>. The <html> tags
must begin and end the document and the <head> tags must appear
before the <body> tags. Also, the <title> tags must be within the <head>
tags.

 A simple explanation of each of these tags follows:

 <html> This tag and its end tag must be the first tag (after the Doctype)
and the last tag in your document.

 It tells the browser that everything within these tags should be viewed as
HTML-coded information and should be parsed accordingly by the
browser.

 <head> This tag and its end tag sets apart the section of your document
that will not be visible on your web page but helps the browser in
working with the document.

 Many different tags can be placed within the <head> tags, but in our
example above we only have the required tag, <title>.

 <title> This is an identifier for the overall content of a document. This is


not displayed within your web page, but (usually) at the top of your
browser application's window titlebar.

 For example, this web page's <title> is "ETS - HTML Basics - Structure" as
you can see by looking at the titlebar of this browser window.

30
 This title is also displayed in a browser's history and bookmarks, so it is
best to be descriptive with this tag so that it will understandable out of
context.

 <body> This tag contains all elements of your document that will appear
within a browser's window. This is the content of your document and is
where the majority of HTML tags will be placed.

 There are many more HTML tags that you will use to create your web
page, but these four must always be within your document and ordered
in the manner shown in the example above.

BLOCK LEVEL TEXT ELELEMENT IN HTML:

HTML - Blocks

 All the HTML elements can be categorized into two categories (a) Block
Level Elements (b)Inline Elements.

Block Elements

Block elements appear on the screen as if they have a line break before and
after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>,
<ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all
block level elements.

They all start on their own new line, and anything that follows them appears
on its own new line.

Inline Elements

Inline elements, on the other hand, can appear within sentences and do not
have to appear on a new line of their own. The <b>, <i>, <u>, <em>,
<strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>,
<dfn>, <kbd>, and <var> elements are all inline elements.

31
Grouping HTML Elements

There are two important tags which we use very frequently to group various
other HTML tags (i) <div> tag and (ii) <span> tag

The <div> tag

 This is the very important block level tag which plays a big role in
grouping various other HTML tags and applying CSS on group of
elements.

 Even now <div> tag can be used to create webpage layout where we
define different parts (Left, Right, Top etc.) of the page using <div> tag.

 This tag does not provide any visual change on the block but this has
more meaning when it is used with CSS.

Example

Following is a simple example of <div> tag. We will learn Cascading Style


Sheet (CSS) in a separate chapter but we used it here to show the usage of
<div> tag −

Example program

<!DOCTYPE html>

32
<html>

<head>

<title>HTML div Tag</title>

</head>

<body>

<!-- First group of tags -->

<div style = "color:red">

<h4>This is first group</h4>

<p>Following is a list of vegetables</p>

<ul>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</div>

<!-- Second group of tags -->

<div style = "color:green">

<h4>This is second group</h4>

33
<p>Following is a list of fruits</p>

<ul>

<li>Apple</li>

<li>Banana</li>

<li>Mango</li>

<li>Strawberry</li>

</ul>

</div>

</body>

</html>

This will produce the following result –

This is first group

Following is a list of vegetables

 Beetroot
 Ginger
 Potato
 Radish

This is second group

Following is a list of fruits

 Apple
34
 Banana
 Mango
 Strawberry

The <span> tag

 The HTML <span> is an inline element and it can be used to group inline-
elements in an HTML document.

 This tag also does not provide any visual change on the block but has
more meaning when it is used with CSS.

 The difference between the <span> tag and the <div> tag is that the
<span> tag is used with inline elements whereas the <div> tag is used
with block-level elements.

Example

Following is a simple example of <span> tag. We will learn Cascading Style


Sheet (CSS) in a separate chapter but we used it here to show the usage of
<span> tag −

Example program

<!DOCTYPE html>

<html>

<head>

35
<title>HTML span Tag</title>

</head>

<body>

<p>This is <span style = "color:red">red</span> and this is

<span style = "color:green">green</span></p>

</body>

</html>

This is red and this is green

HTML Paragraphs

A paragraph always starts on a new line, and is usually a block of text.

HTML Paragraphs

 The HTML <p> element defines a paragraph.

 A paragraph always starts on a new line, and browsers automatically add


some white space (a margin) before and after a paragraph.

Example

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

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

This is a paragraph.

36
This is a paragraph.

This is a paragraph.

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra
lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the
page is displayed:

Example

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

<p>

37
This paragraph contains a lot of spaces in the source code but the browser
ignores it.</p>

Output:

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

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

The number of lines in a paragraph depends on the size of the browser


window. If you resize the browser window, the number of lines in this
paragraph will change.

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an


HTML page:

Example

<h1>This is heading 1</h1>

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

<hr>

<h2>This is heading 2</h2>

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

38
<hr>

The <hr> tag is an empty tag, which means that it has no end tag.

Output:

This is heading 1

This is some text.

This is heading 2

This is some other text.

This is heading 2

This is some other text.

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new
paragraph:

Example

<p>This is<br>a paragraph<br>with line breaks.</p>

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

39
Output:

This is
a paragraph
with line breaks.

The Poem Problem

This poem will display on a single line:

Example

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

Output:

In HTML, spaces and new lines are ignored:

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies
over the ocean. Oh, bring back my Bonnie to me.

40
Solution - The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually


Courier), and it preserves both spaces and line breaks:

Example

<pre>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

Ouput:

The pre tag preserves both spaces and line breaks:

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

41
Oh, bring back my Bonnie to me.

FONT STYLE ELEMENTS IN HTML:

In HTML, you can use various style elements to format text. Here's a detailed
explanation of some of the commonly used style elements:

Bold (<b> or <strong>):

The <b> element is used to make text bold.

The <strong> element is similar to <b>, but it carries more semantic weight,
indicating that the text is of strong importance.

Example:

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

<p>This is <strong>strong text</strong>.</p>

Output:

This is bold text.

This is strong text.

Italic (<i> or <em>):

The <i> element is used to make text italic.

The <em> element is similar to <i>, but it carries more semantic weight,
indicating that the text should be emphasized.

Example:

<p>This is <i>italic text</i>.</p>

42
<p>This is <em>emphasized text</em>.</p>

Output:

This is italic text.

This is emphasized text.

Font (<font>):

The <font> element allows you to set various text properties such as color,
size, and face. However, using CSS is recommended for styling instead of the
deprecated <font> tag.

Example:

<p><font color="red" size="4" face="Arial">Colored, sized, and Arial font


text</font></p>

Output:

Colored, sized, and Arial font text

Small (<small>):

The <small> element is used to decrease the font size, indicating that the
text is smaller than the normal text.

Example:

<p>This is <small>small text</small>.</p>

Output:

This is small text.

Strike (<strike> or <s>):

43
The <strike> element is used to draw a horizontal line through the text,
indicating that it is no longer relevant.

The <s> element is also used for strike through text.

Example:

<p>This is <strike>strikethrough text</strike>.</p>

<p>This is <s>strikethrough text using s tag</s>.</p>

Output:

This is strikethrough text.

This is strikethrough text using s tag.

Big (<big>):

The <big> element is used to increase the font size, indicating that the text is
larger than the normal text.

Example:

<p>This is <big>big text</big>.</p>

Output:

This is big text.

Here's a complete HTML example using these style elements:

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

44
<title>Text Styling Example</title>

</head>

<body>

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

<p>This is <strong>strong text</strong>.</p>

<p>This is <i>italic text</i>.</p>

<p>This is <em>emphasized text</em>.</p>

<p><font color="red" size="4" face="Arial">Colored, sized, and Arial font


text</font></p>

<p>This is <small>small text</small>.</p>

<p>This is <strike>strikethrough text</strike>.</p>

<p>This is <s>strikethrough text using s tag</s>.</p>

<p>This is <big>big text</big>.</p>

</body>

</html>

Output:

45
This is bold text.

This is strong text.

This is italic text.

This is emphasized text.

Colored, sized, and Arial font text

This is small text.

This is strikethrough text.

This is strikethrough text using s tag.

This is big text.

Remember that using CSS for styling is generally recommended over these
HTML tags for better separation of concerns.

46
UNIT 3

LIST

HTML lists allow web developers to group a set of related items in lists.

Example

An unordered HTML list:

Item

Item

Item

Item

An ordered HTML list:

First item

Second item

Third item

Fourth item

OUTPUT:

An Unordered HTML List

Coffee

Tea

Milk

An Ordered HTML List

Coffee

47
Tea

Milk

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:

Example

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

OUTPUT:

An unordered HTML list

Coffee

Tea

Milk

UNORDEREED LIST:

HTML Unordered Lists

The HTML <ul> tag defines an unordered (bulleted) list.

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

Example

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

OUTPUT:

An unordered HTML list

Coffee

Tea

Milk

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)


49
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

Example - Disc

<ul style="list-style-type:disc;">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

OUTPUT:

Unordered List with Disc Bullets

 Coffee
 Tea
 Milk

Example - Circle

<ul style="list-style-type:circle;">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

50
</ul>

OUTPUT:

Unordered List with Circle Bullets

Coffee

Tea

Milk

Example - Square

<ul style="list-style-type:square;">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

OUTPUT:

Unordered List with Square Bullets

Coffee

Tea

Milk

Example - None

<ul style="list-style-type:none;">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

51
OUTPUT:

Unordered List without Bullets

Coffee

Tea

Milk

Nested HTML Lists

Lists can be nested (list inside list):

Example

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>

OUTPUT:

A Nested List

Lists can be nested (list inside list):

52
Coffee

Tea

Black tea

Green tea

Milk

Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Example

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333333;

53
li {

float: left;

li a {

display: block;

color: white;

text-align: center;

padding: 16px;

text-decoration: none;

li a:hover {

background-color: #111111;

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

54
<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

OUTPUT:

Navigation Menu

In this example, we use CSS to style the list horizontally, to create a


navigation menu

Home

News

Contact

About

ORDERDER LIST:

HTML Ordered Lists

The HTML <ol> tag defines an ordered list. An ordered list can be numerical
or alphabetical.

Ordered HTML List

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

Example

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

OUTPUT:

Coffee

Tea

Milk

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

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

Numbers

<ol type="1">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

OUTPUT

 Coffee

 Tea

 Milk

Uppercase Letters:

<ol type="A">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

OUTPUT

A. Coffee

B. Tea

C. Milk

Lowercase Letters:

<ol type="a">

57
<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

OUTPUT:

a. Coffee

b. Tea

c. Milk

Uppercase Roman Numbers:

<ol type="I">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

OUTPUT:

I. Coffee

II. Tea

III. Milk

Lowercase Roman Numbers:

<ol type="i">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

58
</ol>

OUTPUT:

i. Coffee

ii. Tea

iii. Milk

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:

Example

<ol start="50">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

OUTPUT:

50. Coffee

51. Tea

52. Milk

Nested HTML Lists

Lists can be nested (list inside list):

Example

<ol>

59
<li>Coffee</li>

<li>Tea

<ol>

<li>Black tea</li>

<li>Green tea</li>

</ol>

</li>

<li>Milk</li>

</ol>

OUTPUT:

1. Coffee

2. Tea

1. Black tea

2. Green tea

3. Milk

Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.

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

60
List items can contain other HTML elements

Finish the HTML code to make an ordered list.

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

OUTPUT:

 Coffee

 Tea

 Milk

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

HTML <marquee> Tag:

The <marquee> tag in HTML is used to create scrolling text or image in a


webpages. It scrolls either from horizontally left to right or right to left, or
vertically top to bottom or bottom to top.

Syntax :

61
The marquee element comes in pairs. It means that the tag has opening and
closing elements.

<marquee>

<--- contents --->

</marquee>

ATTRIBUTES:

ATTRIBUTES VALUES DESCRIPTION

Define the background color of the


bgcolor Color Name
marquee.

Top, Down, Define the direction of scrolling the


direction
Left, Right content

Specifies how many times content


loop Number
moves. The default value is infinite.

height px or % Define the height of marquee

width px or % Define the width of marquee

Specify horizontal space around


hspace px
marquee

vspace px Specify vertical space around marquee

62
Methods

start (): This method is used to start the scrolling of the Marquee Tag.

stop (): This method is used to stop the scrolling of the Marquee Tag.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Marquee Tag</title>

<style>

.main {

text-align:center;

.marq {

padding-top:30px;

padding-bottom:30px;

.geek1 {

font-size:36px;

font-weight:bold;

color:white;

padding-bottom:10px;

</style>

63
</head>

<body>

<div class = "main">

<marquee class="marq" bgcolor = "Green" direction = "left" loop="" >

<div class="geek1">GeeksforGeeks</div>

<div class="geek2">A computer science portal for geeks</div>

</marquee>

</div>

</body>

</html>

GeeksforGeeks

A computer science portal for geeks

HR AND BR TAGS:

Sure, let me provide you with a detailed explanation of the <hr> (horizontal
rule) and <br> (line break) tags in HTML, along with example programs and
their expected outputs.

<hr> (Horizontal Rule):

The <hr> tag is used to create a thematic break or horizontal line in the
HTML document.

64
It is often used to separate content into different sections.

Example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Horizontal Rule Example</title>

</head>

<body>

<h2>Section 1</h2>

<p>This is some content in Section 1.</p>

<hr>

<h2>Section 2</h2>

<p>This is some content in Section 2.</p>

</body>

</html>

Output:

Section 1

This is some content in Section 1.

65
Section 2

This is some content in Section 2.

<br> (Line Break):

The <br> tag is used to insert a line break within text. It forces the text
following it to start on a new line.

EXAMPLE:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Line Break Example</title>

</head>

<body>

<p>This is some text with a<br>line break.</p>

</body>

</html>

Output:

This is some text with a

66
line break.

In the above examples, <hr> is used to create a horizontal line to visually


separate sections, while <br> is used to force a line break within a
paragraph. Both tags are useful for structuring and formatting content in
HTML documents.

Images in HTML:

The <img> tag is used to embed images in HTML.

Example Program:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Image Example</title>

</head>

<body>

<h2>Displaying an Image</h2>

<img src="example.jpg" alt="Example Image">

</body>

</html>

OUTPUT:

Displaying an Image

67
These elements (<hr>, <br>, <img>) are simple but essential for structuring
and formatting content in HTML. Use them judiciously to improve the
readability and visual presentation of your web pages.

CREATING HYPERLINKS:

Links are found in nearly all web pages. Links allow users to click their way
from page to page.

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.

Note: A link does not have to be text. A link can be an image or any other
HTML element!

HTML Links - Syntax


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

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

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.

Example

This example shows how to create a link to W3Schools.com:

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

OUTPUT:

HTML Links

Visit W3Schools.com!

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

An unvisited link is underlined and blue

A visited link is underlined and purple

69
An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window.
To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_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

Use target="_blank" to open the linked document in a new browser window


or tab:

<a href="https://www.w3schools.com/" target="_blank">Visit


W3Schools!</a>

OUTPUT:

The target Attribute

70
Visit W3Schools!

If target="_blank", the link will open in a new browser window or tab.

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the
href attribute.

A local link (a link to a page within the same website) is specified with a
relative URL (without the "https://www" part):

Example

<h2>Absolute URLs</h2>

<p><a href="https://www.w3.org/">W3C</a></p>

<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>

<p><a href="html_images.asp">HTML Images</a></p>

<p><a href="/css/default.asp">CSS Tutorial</a></p>

OUTPUT:

Absolute URLs

W3C

Google

71
Relative URLs

HTML Images

CSS Tutorial

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">

</a>

OUTPUT:

Image as a Link

The image below is a link. Try to click on it.

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's
email program (to let them send a new email):

Example

<a href="mailto:someone@example.com">Send email</a>

72
OUTPUT:

Link to an Email Address

To create a link that opens in the user's email program (to let them send a
new email), use mailto: inside the href attribute:

Send email

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a


click of a button:

Example

<button onclick="document.location='default.asp'">HTML Tutorial</button>

OUTPUT:

Button as a Links

Click the button to go to the HTML tutorial.

HTML Tutorial

Link Titles

73
The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves
over the element.

Example

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML


section">Visit our HTML Tutorial</a>

OUTPUT:

Link Titles

The title attribute specifies extra information about an element. The


information is most often shown as a tooltip text when the mouse moves
over the element.

Visit our HTML Tutorial

More on Absolute URLs and Relative URLs

Example

Use a full URL to link to a web page:

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

OUTPUT:

External Paths

This example uses a full URL to link to a web page:

HTML tutorial

74
Chapter Summary

Use the <a> element to define a link

Use the href attribute to define the link address

Use the target attribute to define where to open the linked document

Use the <img> element (inside <a>) to use an image as a link

Use the mailto: scheme inside the href attribute to create a link that opens
the user's email program

HTML Link Tags

Tag Description

<a> Defines a hyperlink

For a complete list of all available HTML tags, visit our HTML Tag Reference.

UNIT 4:

TABLES:

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

A table in HTML consists of table cells inside rows and columns.

75
A table in HTML consists of table cells inside rows and columns

EXAMPLE:

<!DOCTYPE html>

<html>

<style>

table, th, td {

border:1px solid black;

</style>

<body>

<h2>A basic HTML table</h2>

<table style="width:100%">

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

76
</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

</table>

<p>To understand the example better, we have added borders to the


table.</p>

</body>

</html>

OUTPUT:

A basic HTML table

Company Contact Country

Alfreds
Maria Anders Germany
Futterkiste

Centro comercial Francisco


Mexico
Moctezuma Chang

To understand the example better, we have added borders to the table.

Table Cells

Each table cell is defined by a <td> and a </td> tag.


77
td stands for table data.

Everything between <td> and </td> are the content of the table cell.

<!DOCTYPE html>

<html>

<style>

table, th, td {

border:1px solid black;

</style>

<body>

<h2>TD elements define table cells</h2>

<table style="width:100%">

<tr>

<td>Emil</td>

<td>Tobias</td>

<td>Linus</td>

</tr>

</table>

<p>To understand the example better, we have added borders to the


table.</p>

78
</body>

</html>

output:

td elements define table cells


Emil Tobias Linus

To understand the example better, we have added borders to the table.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

EXAMPLE:

<!DOCTYPE html>

<html>

<style>

table, th, td {

border:1px solid black;

</style>

<body>

<h2>TR elements define table rows</h2>

<table style="width:100%">

<tr>
79
<td>Emil</td>

<td>Tobias</td>

<td>Linus</td>

</tr>

<tr>

<td>16</td>

<td>14</td>

<td>10</td>

</tr>

</table>

<p>To understand the example better, we have added borders to the


table.</p>

</body>

</html>

OUTPUT:

TR elements define table rows


Emil Tobias Linus

16 14 10

To understand the example better, we have added borders to the table.

80
Table Headers
Sometimes you want your cells to be table header cells. In those cases use
the <th> tag instead of the <td> tag:

th stands for table header.

EXAMPLE:

<!DOCTYPE html>

<html>

<style>

table, th, td {

border:1px solid black;

</style>

<body>

<h2>TH elements define table headers</h2>

<table style="width:100%">

<tr>

<th>Person 1</th>

<th>Person 2</th>

<th>Person 3</th>

</tr>

<tr>

<td>Emil</td>

81
<td>Tobias</td>

<td>Linus</td>

</tr>

<tr>

<td>16</td>

<td>14</td>

<td>10</td>

</tr>

</table>

<p>To understand the example better, we have added borders to the


table.</p>

</body>

</html>

OUTPUT:

TH elements define table headers


Person Person Person
1 2 3

Emil Tobias Linus

16 14 10

To understand the example better, we have added borders to the table.

HTML Table Tags


Tag Description

82
<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption
Defines a table caption
>

<colgrou Specifies a group of one or more columns in a table for


p> formatting

Specifies column properties for each column within a


<col>
<colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

TABLE AND CELL ALIGNMENT :

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:

83
Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

EXAMPLE:

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

border: 1px solid black;

table {

border-collapse: collapse;

width: 100%;

td {

text-align: center;

</style>

84
</head>

<body>

<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of
the content in th or td.</p>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>

<td>Joe</td>

85
<td>Swanson</td>

<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

OUTPUT:

The text-align Property


This property sets the horizontal alignment (like left, right, or center) of the
content in th or td.

Firstna Lastna Savin


me me gs

Peter Griffin $100

Lois Griffin $150

Swanso
Joe $300
n

Clevela Brown $250

86
nd

To left-align the content, force the alignment of <th> elements to be left-


aligned, with the text-align: left property:

Firstna Lastna Savin


me me gs

Peter Griffin $100

Lois Griffin $150

Swanso
Joe $300
n

EXAMPLE:

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

border: 1px solid black;

table {

border-collapse: collapse;

width: 100%;

87
}

th {

text-align: left;

</style>

</head>

<body>

<h2>The text-align Property</h2>

<p>This property sets the horizontal alignment (like left, right, or center) of
the content in th or td.</p>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

88
</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>

<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

OUTPUT:

89
The text-align Property
This property sets the horizontal alignment (like left, right, or center) of the
content in th or td.

First name Last name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Cleveland Brown $250

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:

First name Last name Savings

Peter Griffin $100

Lois Griffin $150

90
Joe Swanson $300

<!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

border: 1px solid black;

table {

border-collapse: collapse;

width: 100%;

td {

height: 50px;

vertical-align: bottom;

</style>

</head>

<body>
91
<h2>The vertical-align Property</h2>

<p>This property sets the vertical alignment (like top, bottom, or middle) of
the content in th or td.</p>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>

<td>Joe</td>

92
<td>Swanson</td>

<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

OUTPUT:

The vertical-align Property


This property sets the vertical alignment (like top, bottom, or middle) of the
content in th or td.

First name Last name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

93
Cleveland Brown $250

HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.

NAME

APR
IL

94
2022

FIESTA

Table - Colspan

To make a cell span over multiple columns, use the colspan attribute:

EXAMPLE:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

</style>

</head>

<body>

95
<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan
attribute.</p>

<table style="width:100%">

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

</body>

</html>

OUTPUT:

96
Cell that spans two columns
To make a cell span more than one column, use the colspan attribute.

Name Age

Jill Smith 43

Eve Jackson 57

Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

</style>

</head>

<body>

<h2>Cell that spans two rows</h2>

97
<p>To make a cell span more than one row, use the rowspan attribute.</p>

<table style="width:100%">

<tr>

<th>Name</th>

<td>Jill</td>

</tr>

<tr>

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

<td>555-1234</td>

</tr>

<tr>

<td>555-8745</td>

</tr>

</table>

</body>

</html>

OUTPUT:

Cell that spans two rows


To make a cell span more than one row, use the rowspan attribute.

Name Jill

Phone 555-1234

98
555-8745

Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space
between the cells.

With padding

hello hello hello

hello hello hello

hello hello hello

With Spacing
hello hello hello

hello hello hello

hello hello hello

Cell Padding
Cell padding is the space between the cell edges and the cell content.
99
By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 15px;

</style>

</head>

<body>

<h2>Cellpadding</h2>

<p>Cell padding specifies the space between the cell content and its
borders.</p>

<table style="width:100%">

<tr>

<th>Firstname</th>

100
<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

<p><strong>Tip:</strong> Try to change the padding to 5px.</p>

</body>

</html>
101
OUTPUT:

Cell padding
Cell padding specifies the space between the cell content and its borders.

First name Last name Age

Jill Smith 50

Eve Jackson 94

John Doe 80

Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing
property on the table element:

Example

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}
102
table {

border-spacing: 30px;

</style>

</head>

<body>

<h2>Cellspacing</h2>

<p>Change the space between the cells with the border-spacing


property.</p>

<table style="width:100%">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

103
<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>

</body>

</html>

OUTPUT:

Cell spacing
Change the space between the cells with the border-spacing property.

First name Last name Age

Jill Smith 50

Eve Jackson 94

John Doe 80

104
UNIT 5

FRAMES

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.

The frameset tag is used to define how to divide the browser. Each frame is
indicated by frame tag and it basically defines which HTML 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.

Example:

<!DOCTYPE html>

<html>

<head>

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

105
</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:

106
<!DOCTYPE html>

<html>

<head>

<title>Example of HTML Frames Using col Attribute</title>

</head>

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

<frame name = "top" src =

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

<framename="main"src= "C:/Users/dharam/Desktop/gradient3.png"
/>

<frame name = "bottom" src =

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

<noframes>

107
<body>The browser you are working does

not support frames.</body>

</noframes>

</frameset>

</html>

Output:

The above example basically used to create three vertical frames: left, center
and right using col attribute of frameset tag.

frame tag

Attributes of Frameset tag:

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

The size or width of the column is set in the frameset in the following ways:

Use absolute value in pixel

Example:

<frameset cols = "300, 400, 300">

Use percentage value

Example:

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

Use wild card values:

108
Example:

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

In the above example * will take the remaining percentage for creating
vertical frame.

Rows: The rows attribute is used to create horizontal frames in web browser.
This attribute is used to define no of rows and its size inside the frameset
tag.

The size of rows or height of each row use the following ways:

Use absolute value in pixel

Example:

<frameset rows = "300, 400, 300">

Use percentage value

Example:

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

Use wild card values

Example:

<frameset rows = "30%, *, 30%">

In the above example * will take the remaining percentage for creating
horizontal frame.

Border: This attribute of frameset tag defines the width of border of each
frames in pixels. Zero value is used for no border.

Example:

<frameset border="4" frameset>


109
frameborder:

This attribute of frameset tag is used to specify whether the three-


dimensional border should be displayed between the frames or not for this
use two values 0 and 1, where 0 defines for no border and value 1 signifies
for yes there will be 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 an
parameter which basically denotes the value in pixel.

Example:

<framespacing="20">

It means there will be 20 pixel spacing between the frames

Attributes of Frame Tag:

Name:

This attribute is used to give names to the frame. It differentiate one frame
from another. It is also used to indicate which frame a document should
loaded into.

Example:

<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />

<framename="main"src="C:/Users/dharam/Desktop/gradient3.png" />

<framename="bottom"src="C:/Users/dharam/Desktop/col_last.png" />

Here we use three frames with names as left center and right.

110
src: This attribute in frame tag is basically used to define the source file that
should be loaded into the frame.The value of src can be any url.

Example:

<frame name = "left" src = "/html/left.htm" />

In the above example name of frame is left and source file will be loaded
from “/html/left.htm” in frame.

MARGINWIDTH:

This attribute in frame tag is used to specify width of the spaces in pixels
between the border and contents of left and right frame.

Example:

<frame marginwidth="20">

MARGINHEIGHT:

This attribute in frame tag is used to specify height of the spaces in pixels
between the border and contents of top and bottom frame.

Example:

<frame marginheight="20">

SCROLLBAR:

To control the appearance of scroll bar in frame use scrollbar attribute in


frame tag. This is basically used to control the appearance of scrollbar. The
value of this attribute can be yes, no, auto. Where the value no denotes there
will be no appearance of scroll bar.

Example:

<frame scrollbar="no">

111
Advantages:

 It allows the user to view multiple documents within a single Web page.

 It load pages from different servers in a single frameset.

 The older browsers that do not support frames can be addressed using
the tag.

Disadvantages:

 Due to some of its disadvantage it is rarely used in web browser.

 Frames can make the production of website complicated.

 A user is unable to bookmark any of the Web pages viewed within a


frame.

 The browser’s back button might not work as the user hopes.

 The use of too many frames can put a high workload on the server.

 Many old web browser doesn’t support frames.

Note: This tag is not supported in HTML5.

Supported Browser: The browser supported by <frame> tag are listed below:

 Google Chrome

 Internet Explorer

 Firefox

 Opera

 Safari

112
CSS is the foundation of webpages, is used for webpage development by
styling websites and web apps.

TARGETLINKS IN HTML”;

The HTML <link> target Attribute is used to specify the window or a frame
where the linked document is loaded. It is not supported by HTML 5.

Syntax:

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

113
HTML link target Attribute

</title>

</head>

<body>

<center>

<h1 style="color:green;">

GeeksforGeeks

</h1>

<h2>

HTML <link> target Attribute

</h2>

<link href="geeksforgeeks.org" target="_blank">

</center>

</body>

</html>

Output:

114
Supported Browsers:

The HTML <link> target attribute is not supported by any browsers.

NOFRAME TAGS IN HTML:

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>

Note: <noframes> tag placed inside of <frameset> tag.

EXAMPLE:

<html>

<head>

<title>noframes tag</title>

<style>

frame {

text-align: center;

</style>

</head>

115
<!-- 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:

116
Supported Browsers:

The browsers supported by HTML <noframes> tag are listed below:

 Google Chrome

 Internet Explorer

 Firefox

 Safari

 Opera

HTML FORMS:

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

HTML Forms

First name: John

Last name: Doe

117
If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".

OUTPUT:

HTML Forms
First name:
John

Last name:
Doe

Submit

If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".

The <form> element is a container for different types of input elements,


such as: text fields, checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form
Elements.

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:

118
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


type="checkbox"> more of many choices)

<input Displays a submit button (for submitting the


type="submit"> form)

<input Displays a clickable button


type="button">

All the different input types are covered in this chapter: HTML Input Types.

TEXTAREA IN HTML:

Definition and Usage

The <textarea> tag defines a multi-line text input control.

119
The <textarea> element is often used in a form, to collect user inputs like
comments or reviews.

A text area can hold an unlimited number of characters, and the text renders
in a fixed-width font (usually Courier).

The size of a text area is specified by the cols and rows attributes (or with
CSS).

The name attribute is needed to reference the form data after the form is
submitted (if you omit the name attribute, no data from the text area will be
submitted).

The id attribute is needed to associate the text area with a label.

EXAMPLE:

<!DOCTYPE html>

<html>

<body>

<h1>The textarea element</h1>

<form action="/action_page.php">

120
<p><label for="w3review">Review of W3Schools:</label></p>

<textarea id="w3review" name="w3review" rows="4" cols="50">At


w3schools.com you will learn how to make a website. They offer free
tutorials in all web development technologies.</textarea>

<br>

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

</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the

server called "action_page.php".</p>

</body>

</html>

OUTPUT:

The text area element

Review of W3Schools:

Submit

121
Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".

SELECT IN HTML:

Definition and Usage

The <select> element is used to create a drop-down list.

The <select> element is most often used in a form, to collect user input.

The name attribute is needed to reference the form data after the form is
submitted (if you omit the name attribute, no data from the drop-down list
will be submitted).

The id attribute is needed to associate the drop-down list with a label.

The <option> tags inside the <select> element define the available options in
the drop-down list.

Tip: Always add the <label> tag for best accessibility practices!

EXAMPLE:

<!DOCTYPE html>

<html>

<body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list.</p>

122
<form action="/action_page.php">

<label for="cars">Choose a car:</label>

<select name="cars" id="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="opel">Opel</option>

<option value="audi">Audi</option>

</select>

<br><br>

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

</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the

server called "action_page.php".</p>

</body>

</html>

OUTPUT:

The select element


123
The select element is used to create a drop-down list.

Choose a car:

Submit

Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".

Browser Support

Element

<select> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description

autofocus autofocus Specifies that the drop-down list should


automatically get focus when the page loads

disabled disabled Specifies that a drop-down list should be

124
disabled

form form_id Defines which form the drop-down list


belongs to

multiple multiple Specifies that multiple options can be selected


at once

name name Defines a name for the drop-down list

required required Specifies that the user is required to select a


value before submitting the form

size number Defines the number of visible options in a


drop-down list

Global Attributes

The <select> tag also supports the Global Attributes in HTML.

Event Attributes

The <select> tag also supports the Event Attributes in HTML.

OPTIONS IN HTML

125
Definition and Usage

The <option> tag defines an option in a select list.

<option> elements go inside a <select>, <optgroup>, or <datalist> element.

Note: The <option> tag can be used without any attributes, but you usually
need the value attribute, which indicates what is sent to the server on form
submission.

Tip: If you have a long list of options, you can group related options within
the <optgroup> tag.

Element

<option> Yes Yes Yes Yes Yes

Attributes

Attribute Value description disabled Specifies that an option should be


disabled

label text Specifies a shorter label for an option

Selected selected Specifies that an option should be pre-selected when the


page loads

Value text Specifies the value to be sent to a server

Global Attributes

The <option> tag also supports the Global Attributes in HTML.


126
Event Attributes

The <option> tag also supports the Event Attributes in HTML.

More Examples

Example

Use of <option> in a <datalist> element:

<label for="browser">Choose your browser from the list:</label>

<input list="browsers" name="browser" id="browser">

<datalist id="browsers">

<option value="Edge">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

127
<option value="Safari">

</datalist>

Example

Use of <option> in <optgroup> elements:

<label for="cars">Choose a car:</label>

<select id="cars">

<optgroup label="Swedish Cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

</optgroup>

<optgroup label="German Cars">

<option value="mercedes">Mercedes</option>

<option value="audi">Audi</option>

</optgroup>

</select>

128

You might also like