UNIT-1

Introduction to Internet: - A global computer network providing a variety of information and

communication facilities, consisting of interconnected networks using standardized communication
protocols.

World Wide Web

WWW is another example of client/server computing. Each time a link is followed, the client is
requesting a document (or graphic or sound file) from a server (also called a Web server) that's part
of the World Wide Web that "serves" up the document. The server uses a protocol called HTTP or
Hyper Text Transfer Protocol. The standard for creating hypertext documents for the WWW is
Hyper Text Markup Language or HTML. HTML essentially codes plain text documents so they
can be viewed on the Web.
What is protocol:
In web technology, a protocol is a standardized set of rules that governs how devices communicate and
exchange data over a network to ensure that information is sent, received, and interpreted correctly.

Examples of Web Protocols

 Hypertext Transfer Protocol (HTTP):

The foundational protocol for transferring web pages and their content across the internet.

 Hypertext Transfer Protocol Secure (HTTPS):

A secure version of HTTP that uses encryption to protect sensitive data, such as login credentials and
payment information, during transmission.

 Transmission Control Protocol/Internet Protocol (TCP/IP):

A core suite of protocols that breaks down messages into packets, routes them to their destination, and
reassembles them on the other end.
Uniform Resource Locators, or URLs:

A Uniform Resource Locator, or URL is the address of a document found on

the WWW. Browser interprets the information in the URL in order to connect to the proper
Internet server and to retrieve your desired document. Each time a click on a hyperlink in a
WWW document instructs browser to find the URL that's embedded within the hyperlink.
The elements in a URL: Protocol://server's address/filename
Hypertext protocol: http://www.aucegypt.edu
File Transfer Protocol: ftp://ftp.dartmouth.edu
Telnet Protocol: telnet://pac.carl.org
News Protocol: news:alt.rock-n-roll.stones

Browsers:
WWW Clients, or "Browser": The program you use to access the WWW is known as a browser
because it "browses" the WWW and requests these hypertext documents. Browsers can be
graphical, allows to see and hear the graphics and audio;
text-only browsers (i.e., those with no sound or graphics capability) are also available. All of
these programs understand http and other Internet protocols such as FTP, gopher, mail, and
news, making the WWW a kind of "one stop shopping" for Internet users.

Year List of Web browsers

1991 World Wide Web (Nexus)

1992 Viola WWW, Erwise, MidasWWW, MacWWW (Samba)

1993 Mosaic, Cello,[2] Lynx 2.0, Arena, AMosaic 1.0
1994 IBM WebExplorer, Netscape Navigator, SlipKnot 1.0, MacWeb, IBrowse, Agora
(Argo), Minuet
1995 Internet Explorer 1, Internet Explorer 2, Netscape Navigator 2.0, OmniWeb,
UdiWWW, Grail
1996 Arachne 1.0, Internet Explorer 3.0, Netscape Navigator
3.0, Opera 2.0, PowerBrowser 1.5,[4] Cyberdog, Amaya 0.9,[5] AWeb,
Voyager
1997 Internet Explorer 4.0, Netscape Navigator 4.0, Netscape
Communicator 4.0, Opera 3.0,[6] Amaya 1.0[5]
1998 iCab, Mozilla
1999 Amaya 2.0,[5] Mozilla M3, Internet Explorer 5.0
2000 Konqueror, Netscape 6, Opera 4,[7] Opera 5,[8] K-Meleon 0.2, Amaya 3.0,[5]
Amaya 4.0[5]
2001 Internet Explorer 6, Galeon 1.0, Opera 6,[9] Amaya 5.0[5]
2002 Netscape 7, Mozilla 1.0, Phoenix 0.1, Links 2.0, Amaya 6.0,[5] Amaya 7.0[5]
2003 Opera 7,[10] Apple Safari 1.0, Epiphany 1.0, Amaya 8.0[5]
2004 Firefox 1.0, Netscape Browser, OmniWeb 5.0
2005 Opera 8,[11] Apple Safari 2.0, Netscape Browser 8.0, Epiphany 1.8, Amaya 9.0,
[5] AOL
Explorer 1.0, Maxthon 1.0,Shiira 1.0
2006 Mozilla Firefox 2.0, Internet Explorer 7, Opera 9,[12], SeaMonkey 1.0, K-
Meleon 1.0,
Galeon 2.0, Camino 1.0, Avant11, iCab 3
2007 Apple Safari 3.0, Maxthon 2.0, Netscape Navigator 9, NetSurf 1.0, Flock 1.0,
Conkeror
2008 Google Chrome 1, Mozilla Firefox 3, Opera 9.5,[13], Apple Safari 3.1, Konqueror
4, Amaya
10.0,[5] Flock 2, Amaya 11.0[5]
2009 Google Chrome 2–3, Mozilla Firefox 3.5, Internet Explorer 8, Opera 10,[14],
Apple Safari 4, SeaMonkey 2, Camino 2,surf, Pale Moon 3.0[15]
2010 Google Chrome 4–8, Mozilla Firefox 3.6, Opera 10.50,[16], Opera 11, Apple
Safari 5, K-Meleon 1.5.4,
2011 Google Chrome 9–16, MozillaFirefox 4-9, Internet Explorer9, Opera 11.50,
Apple
Safari 5.1, Maxthon 3.0, SeaMonkey 2.1–2.6
2012 Google Chrome 17–23, MozillaFirefox 10–17, InternetExplorer10, Opera 12,
Apple
Safari 6, Maxthon 4.0, SeaMonkey 2.7-2.14
2013 Google Chrome 24–31, Mozilla Firefox 18–26, Internet Explorer 11, Opera 15–
18, Apple
Safari 7, SeaMonkey 2.15-2.23
2014 Google Chrome 32–39, Mozilla Firefox 27–34, Opera 19–26, Apple Safari 8
2015 Google Chrome 40–47, Microsoft Edge, Mozilla Firefox 35–43, Opera 27–34,
Vivaldi
2016 Google Chrome 48–55, Mozilla Firefox 44–50, Microsoft Edge 14,
Opera 35–42, Apple
Safari 10, SeaMonkey 2.24–2.30, Pale Moon 26.0.0[17], Pale Moon 27.0.0[18]
2017 Google Chrome 56–60, Microsoft Edge 15, Mozilla Firefox 51–55.0.2, Opera 43–
45, Opera Neon
What are Domains?
Domains divide World Wide Web sites into categories based on the nature of
their owner, and they form part of a site's address, or uniform resource locator (URL).
Common top- level domains are:

.com—commercial enterprises .mil—military site

org—organization site (non-profits, int—organizations established by

etc.) international treaty
.net—network .biz—commercial and personal

.edu—educational site (universities, .info—commercial and personal

schools, etc.)
.gov—government organizations .name—personal sites

UNIT - I

HTML: Introduction to web designing, difference between web applications and desktop applications,
introduction to HTML, HTML structure, elements, attributes, headings, paragraphs,images, tables,
lists, blocks, symbols, embedding multi-media components in HTML, HTML forms

INTRODUCTION TO WEB DESIGNING:

1.What is Web Designing?
Web designing is the process of creating the layout, visual appearance, and usability of a
website. It involves designing how a website looks and how users interact with it.
🟩 Main Elements of Web Designing:
1. Layout – The structure and arrangement of elements on a web page.
2. Colors – Selection of appropriate color combinations for aesthetics and readability.
3. Typography – Choosing readable and stylish fonts.
4. Images & Graphics – Adding visual elements to make the site attractive.
5. Navigation – Designing menus and links for easy movement between pages.
🟨 Core Technologies used for Web Designing:

Technology Purpose
 HTML (Hypertext Markup Language): Builds the basic structure of web pages.
 CSS (Cascading Style Sheets): Styles the layout and appearances of the website.
  JavaScript: Adds interactive features like sliders, forms, popups,
etc.
🟧 Types of Web Design:

 Static Design: Fixed content, same for all users.(e.g, college notice board)
 Dynamic Design: Content changes based on user input or settings.(e.g, student login
portal)
 Responsive Design: Adjusts layout automatically to different screen sizes (mobile, tablet,
desktop).

Tools Used in Web Designing

 Text Editors – Notepad, VS Code, Sublime Text.

 Browsers – Chrome, Firefox for previewing.
 Graphic Tools – Canva, Photoshop (optional for image editing).
 Web Hosting – GitHub Pages, Netlify (for publishing websites)

🟥 Why is Web Designing Important?

 Makes websites attractive and easy to use.
 Helps users find information quickly.
 Builds a strong online presence for businesses and individuals.

Career Scope in Web Designing

 Web Designer
 Front-End Developer
 UI/UX Designer
 Freelance Website Developer

2.Web App vs Desktop App

Computer applications and digital computers have always been inseparable companions on this
ever-growing journey of technology.
In general, computer applications can be distinguished into two types:
Desktop applications (desktop apps) and
Web applications (web apps).
Desktop applications:
A desktop application is software that is installed and runs directly on your
compuer(laptop/pc).
Examples of Desktop applications:
Microsoft Office applications, Adobe Illustrator, Adobe Photoshop, media players, etc.
WEB APPLICATIONS:
A web application is a software program that runs in a web browser using the internet.
Examples of Web applications: Google docs, YouTube, Facebook, Netflix, etc.
Difference between web applications and desktop application:
 Feature Web Application Desktop Application
Runs in a web browser via the Installed and runs on a local
Definition
internet computer

Web apps are hardware independent They have strict hardware

and just require a web browser and requirements for proper
Installation internet connection to function. functionality.
No installation required Requires installation on the
system
Internet Can work offline (in most
Needs internet to function
Requirement cases)
Platform Platform-independent (runs on any Often platform-dependent
Dependency browser) (Windows, macOS, etc.)
Updated automatically from the Needs manual updates or
Updates
server reinstallation
They are accessible from anywhere
and through any device with an They are accessible only in the
Accessibility
internet connection and a web machine they are installed in.
browser.
Depends on browser and internet Generally, faster with access to
Performance
speed full system power

They take space on the hard

Space acquires They take space on the remote server.
drive of the local computer

As web apps are accessible to all As they are confined to a device

Security through the internet, they are less and single or limited users, they
secure than desktop apps. are highly secure.
MS Word, Adobe Photoshop, VLC
Examples Google Docs, Facebook, Gmail
Media Player

3.Introduction to HTML
WHAT IS HTML?
HTML is the building block for web pages. HTML is a format that tells a computer how
to display a web page. The documents themselves are plain text files with special "tags" or
codes that a web browser uses to interpret and display information on your computer screen.

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

An HTML file is a text file containing small markup tags

The markup tags tell the Web browser how to display the page.
An HTML file must have an htm or html file extension.
HTML Tags: -
A tag in HTML is a special keyword enclosed in angle brackets < > that tells the browser
how to display content on a web page.
OR
HTML tags are used to mark-up HTML elements .HTML tags are surrounded by the two
characters < and >. The surrounding characters are called angle brackets. HTML tags normally
come in pairs like and the first tag in a pair is the start tag, the second tag is the end tag. The
text between the start and end tags is the element content. HTML tags are not case sensitive,
<B>means the same as <b>.
Example: <p>This is a paragraph.</p>

 <p> is an opening tag

 </p> is a closing tag
 "This is a paragraph." is the content
 Together, they form an HTML element
4.HTML Structure:
 Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and
document. body which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML
tags like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the document
title.
<body> This tag represents the document's body which keeps other HTML tags like
<h1>, <div>, <p> etc.
<p> This tag represents a paragraph.
<h1> to <h6> Defines header 1 to header 6

<br> Inserts a single line break

<hr> Defines a horizontal rule

<!--> Defines a comment

 <!DOCTYPE html> (Document Type Declaration): This line tells the browser that
the document is written in HTML5 (the current standard for HTML). It ensures that the
browser renders the page correctly in modern standards mode.
» <html> (Root Element): This is the root element of the HTML document. Everything in the
HTML page is nested inside the <html> tag. It defines the beginning and end of the HTML
document. The lang="en" attribute specifies the language of the page (in this case, English),
which helps search engines and accessibility tools understand the language of the content.

<head> (Head Section): The <head> section contains metadata about the HTML document,
which is not displayed on the page itself. It includes elements like the title, character
encoding, and links to external resources (like stylesheets or scripts). Key Elements Inside
the <head>:
 <meta charset="UTF-8">: Specifies the character encoding for the document,
ensuring that characters from different languages are displayed correctly. UTF-8 is
the most common and widely supported encoding.
 <meta name="viewport" content="width=device-width, initial-scale=1.0">:
This meta tag helps ensure that the page is responsive on different devices,
especially on mobile screens. It controls the layout of the page based on the device's
width.
 <title>: Sets the title of the webpage, which appears in the browser’s tab and when
 the page is
bookmarked. This is important for SEO and user experience.
» <body> (Body Section): The <body> section contains the content of the webpage that is
visible to users, such as text, images, links, and other elements. Key Elements Inside the
<body>:
 <h1>: Represents a top-level heading (the main title or heading of the page). There
are six levels of headings in HTML, from <h1> to <h6>.
 <p>: Defines a paragraph of text. Paragraphs are used to structure content and break
it into readable blocks.

Structural Tags
Tag Purpose
<!DOCTYPE html> Declares the document type
<html> Root of the HTML document
<head> Contains metadata, scripts, styles
<body> Contains the visible page content
Text and Formatting Tags
Tag Purpose
<h1> to <h6> Headings (from largest to smallest)
<p> Paragraph
<br> Line break
<hr> Horizontal rule
<b> Bold text
<strong> Important text (semantic bold)
<i> Italic text
<em> Emphasized text (semantic italic)
<u> Underlined text
<mark> Highlighted text
<small> Smaller text
<sup> Superscript
<sub> Subscript
<pre> Preformatted text
Links and Media
Tag Purpose
<a href=""> Hyperlink
 <img src="" alt=""> Image
<audio> Audio content
<video> Video content
<source> Specifies media source inside <audio>
or <video>
<iframe> Embeds another page
Lists
Tag Purpose
<ul> Unordered list (bullets)
<ol> Ordered list (numbers)
<li> List item
<dl> Description list
<dt> Description term
<dd> Description detail
Containers & Layout
Tag Purpose
<div> Block-level container
<span> Inline container
<section> Page section
<article> Independent article content
<nav> Navigation links
<header> Page or section header
<footer> Page or section footer
<main> Main content of page
<aside> Sidebar content
Tables
Tag Purpose
<table> Creates a table
<tr> Table row
<th> Table header cell
<td> Table data cell
<thead> Group table head content
<tbody> Group table body content
<tfoot> Group table footer content
<caption> Table caption
 Forms
Tag Purpose
<form> HTML form
<input> Input field
<label> Form field label
<textarea> Multi-line text input
<button> Button
<select> Drop-down menu
<option> Drop-down option
<fieldset> Groups related fields
<legend> Title for <fieldset>

Metadata & Script

Tag Purpose
<title> Sets page title
<meta> Metadata (charset,
description, etc.)
<link> Links external resources (e.g.,
CSS)
<style> Internal CSS
<script> JavaScript code

5.What is an HTML Element?

An HTML element is a fundamental component of an HTML document
that can contain data to display on the webpage, such as text, image, link, or sometimes
nothing. An HTML element includes an opening tag, content, and a closing tag, where the
opening tag may also include attributes. Elements define the structure and content of a web
page. There are two types of elements:
Container Elements: These have both a start tag and an end tag and can contain content
between them. For example, the <div>content</div> element is a container element that can
include text, images, or other elements.
Void Elements: These have only a start tag and do not require an end tag. An example of a void
e element is the image element, <img src="image.jpg" alt="description" />, which includes
attributes but no closing tag.
An HTML element includes:
  Opening Tag: An opening tag specifies the beginning of the element and may include
multiple attributes.
 Content: The content part includes the information to be displayed or processed within an
element.
 Closing Tag: A closing tag marks the end of the element (A closing tag may be optional for
some elements).
An HTML document consists of a tree of HTML elements, and they define the
content and layout of a webpage, like how and what content should display in the different
sections of a webpage.
Example of HTML Elements

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

<h1>This is heading content. </h1>
<div>This is division content. </div>

The following table displays the different parts (opening tag, content, and closing tag) of the
HTML elements used in the above example:

Opening
Content Closing Tag
Tag

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

<h1> This is heading content. </h1>

<div> This is division content. </div>

So here <p>...</p> is an HTML element, <h1>...</h1> is another HTML element. HTML

Element Structure
The following image demonstrates the structure of an element, like how an HTML element is
written with the opening and closing tags:

Let’s explore some of the most commonly used HTML elements, categorized into block
elements, inline elements, and other specialized elements.
 » <p>: Paragraph: The <p> tag is used to define a paragraph of text. It is a block-level
element that automatically adds space before and after the content to separate it from other
elements on the page.
E.g.: <p>This is the first paragraph of the article, giving a
brief introduction.</p>
<p>This is the second paragraph,
providing more detailed
information on the topic.</p>
Output: This is the first paragraph of the article, giving a brief
introduction.
This is the second paragraph, providing more detailed
information on the topic.
<h1> to <h6>: Headings: The <h1> to <h6> tags define headings, with <h1> being the most
important and
<h6> the least. Headings help structure the document and improve
accessibility and SEO.

E.g.:<h1>Main Title of the Document</h1>

<h2>Subheading of the Section</h2>
Output: Main Title of the Document
Subheading of the Section

» <blockquote>: Block Quotation: The <blockquote> element is used to indicate a

block of quoted text, typically displayed with indentation. It's meant for longer quotations.
E.g.: <blockquote>
"The only limit to our realization of tomorrow is our
doubts of today."
</blockquote>
Output: "The only limit to our realization of tomorrow is our
doubts of today."
» <pre>: Preformatted Text: The <pre> element is used for displaying preformatted text. It
preserves both whitespace and line breaks, making it ideal for code or text where formatting
matters.
E.g.: <pre>
function greet() {
console.log("Hello, world!");
}
</pre>
Output: function greet() {
console.log("H
ello,
 world!");
}
Inline Elements: Inline elements only take up as much space as their content requires and do not
start on a new line. These elements are part of your list:
» <q>: Inline Quotation: The <q> tag is used to indicate short quotations within text. It
automatically adds quotation marks around the quoted text.
E.g.: She mentioned, <q>Practice makes perfect.</q>
Output: She mentioned, “Practice makes perfect.”
» <cite>: Citation for Works: The <cite> tag is used to reference a title or work, such as a
book, film, or research paper. Text inside the <cite> tag is often italicized by default.
E.g.: His favorite book is <cite>To Kill a
Mockingbird</cite>. Output: His favorite book
is To Kill a Mockingbird.
» <dfn>: Definition of a Term: The <dfn> tag is used to define a term in a document. The
first time the term is mentioned, it is often highlighted or italicized to indicate a definition.
E.g.: The term <dfn>CSS</dfn> stands for
Cascading Style Sheets. Output: The term CSS
stands for Cascading Style Sheets.
» <abbr>: Abbreviation or Acronym: The <abbr> tag defines an abbreviation or acronym.
It can include a title attribute to provide the full form of the abbreviation when hovered
over.
E.g.: The official language of web pages is
<abbr title="Hypertext Markup Language">HTML</abbr>.
Output: The official language of web pages is HTML
(with "Hypertext Markup Language" shown on hover).
» <time>: Time and Dates: The <time> tag is used to specify a time, date, or both. It is
useful for marking up events or deadlines in a machine-readable way.
E.g.: The event is scheduled for <time
datetime="2024-12-31"> December
31, 2024</time>.

Output: The event is scheduled for December 31, 2024.

<code>: Inline Code: The <code> tag is used to display small pieces of code in a document. It
typically uses a monospaced font to differentiate the code from normal text.
E.g.: You can declare a variable like this:
<code>let x = 10;</code> Output: You can declare a
variable like this: let x = 10;
» <br>: Line Break: The <br> tag is used to insert a line break, allowing text to continue on
the next line without starting a new paragraph.
 E.g.: This is the first line. <br>This is
the second line. Output: This is the first
line.
This is the second line.
» <wbr>: Word Break: The <wbr> tag specifies a point where a long word may be broken
into the next line if necessary. It does not visibly affect the text unless a line break occurs.
E.g.: This is a veryveryvery<wbr>longword.
Output: This is a veryveryvery
longword (if the browser decides it needs to break the
word).
» Editing Elements (<ins> and <del>): The <ins> tag is used to mark text that has been newly
added, while the
<del> tag is used to indicate text that has been removed. These tags are useful for tracking
changes or edits in a document.
<ins>: Represents inserted text, usually displayed as underlined.
<del>: Represents deleted text, usually displayed as struck-through.
E.g.: We have updated the policy to include <ins>new safety
guidelines
</ins> and removed <del>outdated procedures</del>.
Output: We have updated the policy to include new
safety guidelines and removed outdated
procedures.
Text Elements (Phrasing Elements):
» <sup>: Superscript: The <sup> element is used to display text as superscript, usually for
things like exponents or footnotes. It raises the text above the normal line.
E.g.: This is an equation: x² + y²
= z². Output: This is an equation: x² + y² = z².
» <sub>: Subscript: The <sub> element is used to display text as subscript, typically for
chemical formulas or mathematical expressions. It lowers the text below the normal line.
E.g.: Water is represented as
H₂O. Output: Water
is represented as H₂O.
» <s>: Strikethrough: The <s> element is used to represent text that is no longer relevant or
has been "struck out." It draws a line through the text.
E.g.: This item is <s>sold
out</s> back in stock. Output: This
item is sold out back in stock.
» <mark>: Highlighted Text: The <mark> element is used to highlight text, often to
emphasize something important or noteworthy. It typically renders with a yellow
 background.
E.g.: Please note the <mark>deadline</mark> is approaching.
Output: Please note the deadline is approaching (with highlighted
background).
<small>: Small Text: The <small> element is used to display text in a smaller font size
compared to the
surrounding text. It’s often used for fine
print or disclaimers. E.g.:
<small>Terms and conditions
apply.</small> Output: Terms and conditions
apply (in smaller font).
» <strong>: Strong Emphasis: The <strong> element is used to indicate strong
importance or emphasis. By default, most browsers render this text in bold.
E.g.: It is <strong>crucial</strong> that you follow
the instructions. Output: It is crucial that you
follow the instructions.
» <em>: Emphasized Text The <em> element is used to stress or emphasize text, usually by
italicizing it. It conveys a sense of importance or intonation change in the text.
E.g.: I want to <em>really</em>
understand this topic. Output: I want to
really understand this topic.
» <b>: Bold Text: The <b> element is used to make text bold without adding emphasis or
importance. It’s often
used for stylistic reasons.
E.g.: The <b>headline</b>
must grab attention. Output: The
headline must grab attention.
» <u>: Underlined Text: The <u> element is used to underline text. This tag is typically
used for stylistic or typographical reasons rather than for emphasis.
E.g.: The <u>important section</u> is
underlined for clarity. Output: The important
section is underlined for clarity.
» <i>: Italic Text: The <i> element is used to italicize text, typically for stylistic purposes,
such as marking a foreign word, technical term, or a phrase from another language.
E.g.: She spoke in a
soft <i>whisper</i>. Output:
She spoke in a
soft whisper.
» <span>: Inline Container: The <span> element is an inline container that groups text or
other inline elements for styling or scripting purposes without adding semantic meaning.
E.g.: This text is normal, but <span style="color:red;">this
text is red.</span>
Output: This text is normal, but this text is red.
Summary:
» Phrasing elements: These are inline elements that operate within the flow of the
surrounding text without causing any breaks in the layout.
» Text styling and emphasis: Elements like <strong>, <em>, <b>, <i>, <u>, <mark>, and
<small> are commonly used to style and emphasize content.
» Semantically neutral styling: The <span> element is
used for styling or scripting purposes without conveying specific
meaning.
Horizontal Ruler Tag<hr>:
Horizontal ruler tag is sed to create horizontal line
across the browsers window. This tag is generally used to separate
headers and footers. It contain the following attributes.
Width: this attribute is used to specify the width of horizontal line
based on the given value
Syntax: <hr width=”50”>
Size: the size attribute allows to specify a thicker line based on the
given value. Syntax:<hr size=”20”>
Align: this attribute is used to align the line based on the selected
type of alignment. Syntax:<hr align=”center/left/right”>
No shade: this attribute is used to produce a darker, flatter
horizontal line across the browsers window. Syntax:<hr no shade>
Color: this attribute is used to change the color of horizontal line.
Syntax: <hr color=”pink”>
Horizontal def:
The element is used for horizontal rules that act as dividers
between sections
like this:

The horizontal rule does not have a closing tag. It takes attributes
such as align and width
Code Output
 <hr
width="50%"
align="center"
>

LINK ELEMENTS IN HTML

1. <a> – Anchor Tag (Hyperlink)

Used to create a hyperlink that links to another webpage, file, email, or section of the same page.
(or)
A hyper link is an association among multiple web pages or within the same web page. A hyper link
allows to navigate in between different web pages.
HTML language allows to create hyper link with the help of “anchor tag”.
Syntax:

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

The 3 basic parts of an hyper link are

The beginning and ending tag i.e.,<a>and</a>

 href attribute contains the URL or file path to link to.
 The clickable text appears between the opening and closing tags.
Hyperlinks can be done in two ways they are
Clickable text hyperlink
Clickable image hyperlink
Clickable text hyper link: consider the following example
<a href=”main.html”>click</a>
In this example the “href” attribute of anchor tag is used to create a hyper text “click”. By clicking on
the hyper text the web page”main.html” will be loaded.
Clickable image hyper link: consider the following example
<a href=”first.html”>
<img src=”pyramid.gif” height=”40” width=”40”>
</a>
In this example the “href” attribute of anchor tag is used to create a hyper image “pyramid”. By
clicking on this hyper image the web page “first.html” will be loaded.
Hyperlink color: There are some attributes that are used to change the color of hypertext. These
attributes are included in the body tag. They are link, vlink & alink.
Link: The color value assigned to the link attribute sets the colour for all unvisited hyper links.
V-link(Visited hyperlink): The color value assigned to vlink sets the colour for all visited
hyperlinks.
A-link: The color value assigned to a-link sets the color to the hypertext when the users selectors
Syntax: <body link=”red” vlink=”blue” alink=”green”>
2.<link> – Link to External Resources (CSS, favicon, etc.) Used

inside the <head> section to link external files like stylesheets. Syntax:

<link rel="stylesheet" href="style.css">

Explanation:

 rel="stylesheet" specifies the relationship of the linked file.

 href specifies the path to the CSS file

MEDIA ELEMENTS IN HTML
1. <img> – Image

Embeds an image into the webpage.

Syntax:<img src="photo.jpg" alt="Student Photo" width="300">
Explanation:
 src specifies the path of the image.
 alt provides alternative text if the image doesn’t load (important for accessibility).
 width sets the width of the image.
2. <audio> – Embed Audio
Used to embed an audio file with optional controls.
Syntax:
<audio controls>

<source src="song.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

Explanation:
 controls shows play/pause buttons.
 <source> defines the file and format.
 Text inside is shown if the browser doesn’t support audio.
3. <video> – Embed Video
Used to add a video to a
4. webpage. Syntax:
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Explanation:
 width sets the video size.
 controls allows play/pause.
 <source> includes the video file.

5. <source> – Media Source

Used inside <audio> or <video> to specify multiple media formats for better compatibility.
Syntax:
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

6.<iframe> – Inline Frame

Embeds another webpage, YouTube video, or document within the current page.
Syntax:<iframe src="https://www.wikipedia.org" width="600" height="400"></iframe>

Explanation: src is the embedded URL.

width and height define its size.
 6.Introduction to HTML Attributes

In HTML, attributes provide additional information about elements. They are always included in the
opening tag and are written as name-value pairs.
Basic Structure of an Attribute
<tagname attribute="value">Content</tagname>

For example:
<a href="https://www.google.com">Visit Google</a>

In this case:
 a is the anchor (link) tag.
 href is the attribute.
 "https://www.google.com" is the value of the href attribute.
Common HTML Attributes with Examples
1. href
Used with <a> to define the URL of a hyperlink.
<a href="https://example.com">Click Here</a>

2. src
Used with <img>, <audio>, <video> to define the file source.
<img src="image.jpg" alt="Description">

3. alt
Used with <img> to provide alternative text if the image cannot be displayed.
<img src="photo.jpg" alt="Student Photo">

4. title
Shows a tooltip when the mouse hovers over the element.
<p title="This is a tooltip">Hover over me!</p>

5. style
Used to apply inline CSS styles to an element.
<p style="color: red;">This is red text.</p>

6. id
Gives a unique identifier to an HTML element.
<p id="intro">Welcome to my page</p>

7. class
Assigns one or more class names to an element (used for styling).
<p class="highlight">This is highlighted.</p>

8. width and height

Define the dimensions of elements like <img>, <video>, etc.
<img src="logo.png" width="100" height="100">

9. target
Specifies where to open the linked document (used with <a>).
<a href="https://example.com" target="_blank">Open in New Tab</a>

10. type
Defines the type of element, especially in forms and media.
<input type="text"> <video type="video/mp4">
 7.HTML Heading Tags :
1. <h1> – Main Heading

The <h1> tag is used for the most important heading on a page. It is usually the largest in size and
typically represents the title or main topic of the webpage.
Example: <h1>Welcome to My Website</h1>

2. <h2> – Section Heading

The <h2> tag defines major sections under the main heading. It is slightly smaller than <h1> and can
be used multiple times on a page.
Example:
<h2>About Me</h2>

3.<h3> – Subsection Heading

The <h3> tag is used for subsections under an <h2> heading. It helps organize content hierarchically.
Example:
<h3>My Education</h3>

4.<h4> – Sub-subsection Heading

The <h4> tag is for smaller headings under an <h3>. It is less commonly used but helpful in long or
technical documents.
Example:
<h4>High School</h4>

5.<h5> – Minor Heading

The <h5> tag is smaller and typically used for footnotes, comments, or low-level categories
under <h4>.
Example:
<h5>Subjects Taken</h5>

6.<h6> – Smallest Heading

The <h6> tag defines the least important heading, smallest in size. It's rarely used unless the
document is very deeply structured.
Example: <h6>Reference Code</h6>

Elements vs. Tags: What's the Real Difference?

This is the most common point of confusion for beginners. Here's a simple way to think about it:
 An HTML Tag is just the opening <p> or closing </p> part. They are the instructions.
 An HTML Element is the entire thing: the opening tag, the content inside, and the closing
tag.
 Think of it like a sandwich. The two slices of bread are the tags, and the complete sandwich
with everything inside is the element.
 Understanding Nested Elements
HTML allows nesting of elements. The nested elements are created by placing one or more
HTML elements inside an HTML element. Where the container element can be considered as a
parent element and others are as child elements. The child elements are nested inside the
parent element. We can have multiple levels of nesting; however, it requires some guidelines to
follow −
 Every opening tag must have a corresponding closing tag.
 The closing tag of the parent element must come after the closing tag of the child element.
 The nested elements must be valid HTML elements.
Example
In the following example, we are nesting the italicized element (<i>...</i>) within
the h1 element and underline (<u>...</u>) element within the paragraph element.
DOCTYPE html>

<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
html>
On executing the above example, we can observe the two sentences where we have
nested one HTML within another.
Note: In the above example, the <html>, <head>, and <body> tags are also nested elements as they
have one or more elements inside them
 8.IMAGE
Images for the Web:
Images are essential for enhancing the visual appeal of web pages like photos, logos, icons
etc…and conveying information. When choosing images for the web, it's important to consider:
File Format:
Common image formats for the web include JPEG, PNG, GIF, SVG, and WebP. Each format
has its advantages: JPEG is ideal for photographs, PNG supports transparency and is suitable for
graphics, GIF is often used for simple animations, SVG is preferred for vector graphics, and
WebP offers efficient compression and quality.
File Size: Optimizing images to reduce file size helps improve page loading speed, enhancing
user experience and SEO.

Inserting Images on Page:

In HTML the <img> tag is used to embed images in a web page. The<img> tag is
empty, which means that it contains attributes only, and has no closing tag. To display an image
on a page, we need to use the
Src attribute. Src stands for "Source".
Syntax:

<img src="Image URL” height=” n” width=”n” alt=”string” align=”top”|”center”|”bottom”>

Specifying Image Attributes: Besides src and alt, the <img> tag can include other attributes
that help control how the image is displayed:
Common Attributes:
Attribute Description

Src Path or URL of the image (required)

Alt Alternative text (required for accessibility)

Width Width of the image in pixels or percentage

Height Height of the image in pixels or percentage

Title Tooltip shown when hovering over the image

Src (Source): This attribute specifies the path to the image file. It can be a relative path (to a file
on the same server) or an absolute path (URL to an external image).
E.g.: Relative path: src="images/picture.jpg"
Absolute path: src=https://example.com/images/picture.jpg

alt (Alternative Text): This attribute provides a textual description of the image, which is
displayed if the image cannot be loaded. It is also used by screen readers to assist visually
impaired users.
width and height: Specify the size of the image in pixels. It’s good practice to set these
attributes toavoid layout shifts.
Syntax:<img src="https://example.com/image.jpg" alt="A beautiful sunset" width="600"
height="400" />
title: This attribute offers additional information about the image when a user hovers over it.
Syntax:<img src="https://example.com/image.jpg" alt="A beautiful sunset" title= "Sunset
view at the beach" />
Example

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body> <p>Simple Image Insert</p>
<img src="test.png" alt="Test Image" />
</body>
</html>

9.TABLES
 HTML tables are a way to organize and display data in a grid format consisting of rows and
columns. Tables are commonly used to display structured information like reports, schedules,
or any kind of data that fits into a grid.
Tables in HTML are built using several tags that define the structure of rows, columns, headers,
and data. Understanding how to structure a table and use tags like <thead>, <tbody>, and
<tfoot> is key to creating clear, semantic tables.
Syntax:
<table [align=”center” | “left” | “right”] [border [=”n”] ] [cellpadding=”n”]
[width=”nn%”] [cellspacing=”n”] > …………………….</table>

HTML Table tags: Several key tags are used in creating tables, each serving a specific function:
 <table>: The parent tag that defines the table. All other table-related tags are placed inside it. i.e,
<tr>,<th>,<td>,<caption>.
Table tag attributes <table>:
The table tag allows to represent the data in the form of table representation i.e. I row & column format.
This tag contains the following attributes.
 Border:

This attribute allows to specify the border for table based on given value
Ex:<table border=”4”>
 Border color:

This attribute allows to specify the color for table dividers

Ex:<table border color=”pink”>
 Bgcolor:

This attribute allows to specify the background color for the entire table.
Ex:<table bgcolor=”green”>
 Background:

This attribute allows to represent an image as background for the entire table.
Ex: <table background=”URL”>
 Width:

This attribute allows to control the width of table according browser window.
Ex: <table width=”70%”>
 Align:

This attribute allows to align the table at a specific position on the browser window.
Ex: <table align=”left”/”right”/”center”>
 Cell spacing:

This attribute allows to specify the horizontal & vertical gap in b/w the cell.
 Ex: <table cell spacing=”4”>
 Cell padding:

Is use to create more white space between cell content and its border.
Ex: <table cell padding=”4”>
 Table row:<tr>
The most important tag that goes inside the tag is table row tag. Every row in the table is
represented by a <tr> element, containing table header or data cells. It contains the following
attribute.
 Bgcolor:
This attribute allows to specify a background color for the entire row.
Ex: <tr bgcolor=”pink”>

 Table Data Cell:<td>

Defines a standard data cell in the table. This is where the actual data is displayed within a table row.
Syntax:-
<td [align=”left”|”center”|”right”][valign=”top”|”center”|”bottom”][colspan=n]
[Rowspan=n]>…. </td>
It Contains the following attributes.
 Align:
This attribute is used to position the item of a cell based on given value.
Ex: <td align=”l”/”r”/”c”>
 Bgcolor:
This attribute allows to specify a background color for a single cell
Ex: <td bgcolor=”green”>
 Row span:
This attribute allows to combine multiple rows as a single row based on given value.
Ex: <td rowspan=”2”>
 Column span:
This attribute allows to combine multiple columns in a single row based on given value.
Ex: <td colspan=”5”>
 Height:
This attribute is used to increase the height of the cell
Ed: <td height=7>
 Width:
This attribute is used to increase the width of the cell
Ex: <td width=5>

 Table Header Cell:<th>

Defines a header cell in a table, which is typically bold and centered by default. Header cells are usually
found at the top of columns or at the beginning of rows. The contents of the cell can be aligned vertically and
horizontally within their row. This tag contains attributes similar to the table data tag i.e., aligns, bgcolor, row span,
height, width.

Syntax:-<th[align=”left”|”center”|”right”] [valign=”top”|”center”|”bottom”] [colspan=”n”] [rowspan=”n”]> ….

</th>

Ex: <th rowspan=7><th colspan=7>

Caption tag:<caption>
Provides a title or description for the table. This is optional but can enhance accessibility and understanding of the
 table's content. This tag can be placed either inside of table tag or outside of table tag. It contains align attribute.
Ex:<caption align=”top/bottom”>
Advanced HTML Table Tags: In addition to basic table tags, HTML supports the <thead>, <tbody>, and <tfoot>
tags to better structure and organize complex tables:
 <thead> (Table Head): This tag groups the table header rows. It defines the header section of the table and is
typically used for the column titles. It is placed before the body of the table.
 <tbody> (Table Body): This tag is used to group the rows of table data. It contains the main content of the table
and usually follows the <thead> section. Multiple <tbody> sections can be used to separate different blocks of data if
necessary.
 <tfoot> (Table Footer): This tag is used to group the footer content of the table, often containing summary data or
totals. It usually appears after the <tbody>. Even though it appears visually at the bottom, it is coded before the
<tbody> for accessibility and consistency.
General Structure of the HTML table:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td> <td>Row 1, Column 2</td>
</tr>
<tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Using <thead>tag

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ramu</td>
<td>28</td>
</tr>
<tr>
<td>Sai</td>
<td>35</td>
</tr>
</tbody>
</table>

Output:
Spanning Rows and Columns:
In HTML tables, you can use the colspan and rowspan attributes to make cells span
across multiple columns or rows, respectively. This is useful when you want to merge cells to
create more complex layouts within your table.
Column Spanning with colspan: The colspan attribute allows a cell to span across multiple
columns. This can be helpful when you want to merge two or more cells horizontally.
E.x:
<table border="1">
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr colspan=”2”>total savings $180</tr>
</table>
Output:

Row Spanning with rowspan: The rowspan attribute allows a cell to span across multiple
rows, merging vertically.
E.g.: <table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holidays!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan=”2”>$50</td>
</tr>
<tr>
<td>February</td>
 <td>$80</td>
</tr>
</table>
Output:

Formatting Tables – Borders

HTML tables can be formatted using CSS to control their appearance, including borders,
width, and alignment. break down how to format tables, focusing on borders and their
collapse properties, followed by width and alignment adjustments.
Table and Cell Borders: The border property is used to define the border for the table or
individual cells (<th>, <td>). You can set the width, style, and color of the border.
Syntax: border: border-width
border-style border-color; border:
border-width border-style border-color;
border-width: Specifies the thickness of the border (e.g., 1px, 2px).
border-style: Defines the style of the border (e.g., solid, dotted,
dashed, double). border-color: Specifies the color of the border
(e.g., black, red, blue).
E.g.: table, th, td
{
border: 1px solid black; /* 1px wide solid black border for the table and cells */
}
Collapsing Table Borders: The border-collapse property is used to merge adjacent cell
borders into a single border. Without this property, borders between cells may be displayed
twice (once for each cell).
Syntax: border-
collapse: collapse;
E.g.: table
{
border-collapse: collapse; /* Merges adjacent borders into a single line */
}
Formatting Tables – Width and Alignments
Table Width: The width property is used to define the width of the table. The width can be
specified in pixels (px) or as a percentage of the container.
Syntax: width: value;
 value: Can be an absolute value (like 500px) or a
percentage (like 100%). E.g.: table
{
width: 80%; /* Sets table width to 80% of its parent container */
}
Horizontal Text Alignment: The text-align property is used to align the text inside table
cells horizontally.
Syntax: text-align: value;
value: Can be left, center, or right.
E.g.: th, td
{
text-align: center; /* Center-aligns text horizontally in cells */
}
Vertical Text Alignment: The vertical-align property is used to control the vertical positioning
of the content inside table cells.
Syntax: vertical-align: value;
value: Can be top, middle, bottom.
E.g.: td {
vertical-align: middle; /* Vertically aligns the text in the middle of the cell
*/

10.Lists
Lists in HTML is an organization of data in a specific manner. HTML language supports 3
primary types of
List tags. Each type serves a specific purpose and has unique characteristics.
 Ordered list
 Un ordered list
 Definition list
The entire list is surrounded by the beginning and ending list tags. In
addition to that each
Item In the list is identified by “list item tag”.
Ordered list:
An ordered list displays list of items in the form of Specific identification order.
In an ordered list Of elements are prefixed by a symbol that denotes their relation order the most
commonly used symbols for Making the items of an ordered list are Arabic numbers, letters &
Roman numbers. The beginning tag and Ending tag for an ordered list is <ol>and</ol>. Each item
in an ordered list is identified by the list tag.
The beginning tag for list item is <li>, no ending tag is necessary by default the items in
 An ordered list are represented using Arabic numbers.
Syntax: <ol> E.x:
<!DOCTYPE html>
<li>First Item</li>
<html><head><title>HTML Ordered
<li>Second Item</li> List</title></head>
<li>Third Item</li> <body>

</ol> <ol><li>Beetroot</li><li>Ginger</li>
<li>Potato</li>
<li>Radish</li></ol></body>
Output:
</html>

The ordered list contains two important attributes. They are “type” & “start”.
Type: The type attributes allows to specify the type of ordering value& it can take the values
“A, a, I”.
The lower case ‘a’ results in a, b, c & the upper case ‘A’ results in A,B,C similarly the roman
numbers I & iwill
Generate lower and upper case roman number.
Start: The start attribute allows to specify the starting value of order
E.x:<OL type=”A” starts”4”> Output:
<li>internet D.internet
<li>HTML E.HTML
<li>Css F.Css
</OL>
UnOrdered list:
An Unordered list display the data in the form of symbolic representation. If
the order is not important then you can use Unordered list by default the unordered list displays
the items ‘bullets’. The beginning & ending tag for an unordered list is <ul>&</ul>. Each item in
an unordered list is identified by the list item tag i.e,<li> unordered list contains type attribute it
can take values either ‘circle’, ‘square’, or ‘disc’
E.x: Output:
 <!DOCTYPE html>
<html><head><title>HTML Unordered
List</title></head>
<body><ul type=”disc”><li>Beetroot</li>
<li>Ginger</li> <li>Potato</li>
<li>Radish</li>
</ul></body></html>

Description Lists:
Description lists are a specific type of list used in HTML to group terms and their
corresponding d descriptions. They provide a clear and structured way to present definitions,
explanations, or other information that pairs terms with details. This format is particularly
useful for glossaries, FAQs, or any content that requires a term- and-definition structure.
Structure of Description Lists:
A description list consists of three main elements:
<dl>: The container for the entire description list.
 <dt>: Represents a term or item that you want to define or describe. Each term is
usually formatted to stand out. <dt> defines the term; <dd> gives the description.

 <dd>: Contains the description or definition associated with the preceding term
(<dt>). This can be multiple lines long if needed.
Syntax: <dl>

<dt>Term 1</dt>
<dd>Description for Term 1.</dd>
<dt>Term 2</dt>
<dd>Description for Term 2.</dd>
</dl>
E.x:

Nested List in HTML:

<!DOCTYPE html>
<html><head>
<title>HTML Definition List</title>
</head><body>
 A nested list in HTML is a list that contains other lists within its list items. This creates a
hierarchical structure, often used to represent categories and subcategories.
Here’s an example of a nested list: output:

11.HTML Blocks
 In HTML, content is organized using block-level elements .HTML Blocks refer to block-level
elements in HTML that occupy the full width available and always start on a new line the
document. These elements structure the layout and structure of a webpage. Can contain
other block or inline elements.

Structural & Layout Elements:

 <div> – Generic container for grouping content

 <header> – Introductory content or page header
 <footer> – Footer section of a page or section
 <section> – Thematic grouping of content
 <article>– Independent, self-contained content
 – Sidebar or related content
<aside>
 <main> – Main content of a document
 <nav> – Navigation links
Block Elements: Block elements take up the full width available and always start on a new line
in. They are used to structure the content into sections and blocks.
» <div>: Generic Container: The <div> element is a generic block-level container used to
group content together, allowing for easier styling and layout. It doesn’t add any specific
meaning to the content but is essential for structuring web pages.
E.g.: <div>This is a content block that
groups elements.</div> Output: This is a
content block that groups elements.

<header>: Introductory Section: The <header> element represents the header section of a page
or section.
It often contains navigation links, logos, or
 introductory content. E.g.: <header>
<h1>Welcome to My Website</h1>
</header>
Output: Welcome to My Website
» <footer>: Footer Section: The <footer> element is used to define the footer of a page or
section. It typically includes information like copyrights, author details, or links to related
content
E.g.: <footer>
&copy; 2024 My Website. All rights reserved.
</footer>
Output: © 2024 My Website. All rights reserved.
» <article>: Independent Content: The <article> element represents a self-contained,
independent piece of content, such as a blog post, news article, or forum entry. Each
<article> should make sense on its own.<article>: Represents independent, self-contained
content. Each article could stand alone, like a blog post, news item, or forum post.
E.g.: <article>
<h2>Breaking News</h2>
<p>Today, major advancements were made in AI
technology...</p>
</article>
Output: Breaking News
Today, major advancements were made in AI
technology...
» <nav>: Navigation Links: The <nav> element is used to define a block of navigation links
that help users navigate the site. It typically contains links to the main sections of a website.
E.g.: <nav>
<ahref="#home">Home</a> |
<a href="#about">About</a> |
<a href="#services">Services</a>
</nav>
Output: Home | About | Services
» <aside>: Side Content: The <aside> element represents content that is tangentially
related to the main content, such as sidebars, pull quotes, or advertisements. It is often
displayed alongside the main content. E.g.: <aside>
<p>Related article: How to use HTML tags
effectively.</p>
</aside>
Output: Related article: How to use HTML tags effectively.
» <section>: Thematic Section: The <section> element defines a thematic grouping of
 content within a webpage. Each section often has its own heading and is used to structure
the page logically.
E.g.: <section>

<h2>Features</h2>
<p>Our product offers
several key features
that improve user
experience.</p>
 </section>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Simple Web Page Layout</title>

<style>

header, nav, aside, main, footer {

text-align: center;

header {

background-color: #cbb6e5;

nav {

background-color: #f5732a;

}
.container {

display:flex;

min-height:300px;

aside {

width: 25%;

background-color: #b7f24c;
 text-align: left;

main {

width: 75%;

background-color: #0ca7e0;

footer {

background-color: #cbb6e5;

} </style>

</head>

<body>

<header>

My Personal Website

</header>
<nav>

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

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

<a href="#">Services</a>

<a href="#">Contact</a>

</nav>

<div class="container">

<aside>

<ul>

<li>Dashboard</li>

<li>Messages</li>

<li>Settings</li>

<li>Logout</li>

</ul>

</aside>

<main>

<h2>Welcome to My Website</h2>

<p>This is the main content area where you can share information, articles, blog posts, or
any kind of text you want visitors to read.</p>

<p>You can also include images, videos, or links to other pages. Use this space to highlight
what's important on your website.</p>

</main>

</div>

<footer>

&copy; 2025 My Personal Website. All rights reserved.

 </footer>

</body>

</html>

Output:

| Header (Purple) |

| Navigation Bar (Orange) |

| Aside | Main Content |

| | (Flexbox Layout) |

|Green | (Blue Area) |

| Footer (Purple) |

12.What is an HTML Symbol?

An HTML symbol is a special character that is displayed using:

 A named entity: &name;

 Or a numeric code: &#number;

Common HTML Symbols and Their Codes

Basic Symbols:

 Space (non-breaking) → &nbsp; →

 Less than → &lt; → <
 Greater than → &gt; → >
 Ampersand → &amp; → &
 Double quotes → &quot; → "
 Single quote (apostrophe) → &apos; → '
© Legal & Copyright Symbols:

 Copyright → &copy; → ©
 Registered → &reg; → ®
 Trademark → &trade; → ™

Currency Symbols:

 Rupee → &#8377; → ₹
 Dollar → &dollar; or &#36; → $
 Euro → &euro; → €
 Pound → &pound; → £
 Yen → &yen; → ¥

Math Symbols:
 Plus-minus → &plusmn; → ±
 Division → &divide; → ÷
 Multiplication → &times; → ×
 Less than or equal to → &le; → ≤
 Greater than or equal to → &ge; → ≥
 Not equal → &ne; → ≠

Example in HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>HTML Symbols Example</title>
</head>
<body><p>Copyright &copy; 2025</p>
<p>Price: &#8377;500</p>
<p>5 &lt; 10 and 10 &gt; 5</p>
<p>I &#10084; HTML</p>
</body>

</html>

13.Embedding Multimedia Components in HTML: In HTML, you can embed multimedia

content like audio, video, images, and interactive content directly into a webpage using
specific tags. This enhances user engagement and improves content delivery.
1. Embedding Images with <img>
Syntax:<img src="image.jpg" alt="Description" width="300" height="200">

Attributes:

 src: Path to the image file

 alt: Text shown if image fails to load
 width & height: Size of the image in pixels

2. Embedding Audio with <audio>

Syntax:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Attributes:

 controls: Adds play, pause, and volume buttons

 autoplay: Starts playing automatically (optional)
 loop: Repeats the audio (optional)

3. Embedding Video with <video>

Syntax:
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Attributes:

 controls: Adds video player controls

 autoplay: Starts playing when loaded
 loop: Repeats video
 muted: Mutes video on start

4. Embedding YouTube or Web Content with <iframe>

Syntax (YouTube):
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0"

allowfullscreen>
</iframe>

5. AND OBJECT:
 HTML <embed> tag is used to embed external content such as images, videos,
and web applications. It is often used for embedding content like Flash
movies or audio/video players.
 HTML <object tag is used to embed various types of external resources,
including
> images, videos, PDFs, and other web resources. It can render multiple
types of files.

Syntax

Here is the syntax of embedding multimedia in the webpage:

 <embed src = "url_of_resource">
EMBED
<object
Objectdata="url_of_resource"
tag: type="typeOfResource">
 14.FORMS

HTML forms are essential for collecting user input and sending it to a server for processing.
Forms in HTML allow for the creation of interactive user interfaces on websites. They consist of
various fields, labels, and buttons, and the submitted data can be processed through either client-
side or server-side programming.
Parts of an HTML Form
Designing the Form: The structure of the form, which includes various fields (like text fields,
radio buttons, checkboxes), labels for identifying fields, and buttons (like submit and reset) that
enable interaction.
Processing the Form: After submission, the form data can be processed using client-side or
server-side programming languages to handle user input and perform desired actions.

Processing Forms in HTML

» Client-Side Programming: Client-
side programming allows processing
tasks without sending data to the server,
which is beneficial for user interface
interactions and basic validation, like
checking that fields are filled. Uses:
Manipulating the browser window,
validating data before submission, and
styling.
Languages: JavaScript, VBScript, CSS
(for styling), AJAX, and jQuery.

» Server-Side Programming: Server-side programming involves processing that occurs on

the server after the form data is submitted. This is more secure and is used for tasks like
database management and server- based logic.
Uses: Loading requested pages, handling web application structure, interacting with
databases, performing CRUD (Create, Read, Update, Delete) operations.
Languages: PHP, ASP.NET (C# or Visual Basic), Python, Ruby on Rails, Java and JSP, and
C++.

Syntax:
Common Attributes of <form>
» action: Defines the URL where the form data will be sent after submission. The server
script at this URL handles the processing of form data, such as storing it in a database or
sending it via email.
»target: Specifies where to display the server's response after submission. It can take values
like _self (same window) or _blank (new window/tab).
method: Defines the HTTP method to use for form submission.
 GET: Sends data as URL variables in name/value pairs and is suitable for non-
sensitive information.
 POST: Sends data in the HTTP request body, which is secure and suitable for larger,
sensitive data.

GET method vs.

POST method
GET:
» Appends data to the URL, making it visible
and limited to about 2048 characters.
» Should not be used for sensitive data since the
data appears in the URL.
» Ideal for bookmarkable search queries or requests.
POST:
» Sends data in the request body, which does not
appear in the URL.
» Suitable for large amounts of data and sensitive information.
» Cannot be bookmarked.
 HTML Form Controls :
There are different types of form controls that you can use to collect data using HTML
Form.

 Text Input Controls

 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button
Text Input Controls:-
There are three types of text input used on forms:
1) Single-line text input controls - This control is used for items that require only one line of user input,
such as search boxes or names. They are created using HTML
<input> tag.

<input type="text"> defines a one-line input field for text input:

Example:

<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

2)Password input controls –

This is also a single- line text input but it masks the character as soon as a user enters it. They are also
created using HTML <input> tag.

Input Type Password

<input type="password"> defines a password field:

 <form>

User name:<br>

<input type="text" name="username"><br> User password:<br>

<input type="password" name="psw">

</form>

 email: A field optimized for email addresses, with built-in validation to check for a standard email
format. Some browsers display a specialized keyboard with the "@" symbol on mobile devices to
simplify entry.
E.g.: <input type="email">
 tel: Allows input intended for phone numbers without enforcing a specific format. Many mobile
browsers display a numeric keypad to make entering a phone number easier.
E.g.: <input type="tel">
 url: Designed for entering web addresses, this field expects a valid URL format. Browsers may validate
the entry and present a customized keyboard on mobile devices to aid with URLs.
E.g.: <input type="url">
 color: Opens a color picker interface, allowing users to select or input a color code. Supported by
modern browsers, it simplifies color selection in forms.
E.g.: <input type="color">
 date: Provides a date picker UI, making it easier to select dates without manual entry. This input is
often used for booking, scheduling, and date-related fields.
E.g.: <input type="date">
 hidden: Stores data that isn’t visible to users, making it useful for tracking data or form state without
user interaction. It's often used to pass values to the server.
E.g.: <input type="hidden" name="user_id" value="12345">

Checkboxes Controls:-
 Checkboxes are used when more than one option is required to be selected. They are also created using HTML
<input> tag but type attribute is set to checkbox.
E.g.: <input type="checkbox" name="interests" value="sports"> Sports
here is an example HTML code for a form with two checkboxes:

<!DOCTYPE html>

<html> <head> <title>Checkbox Control</title> </head>

<body>

<form>

<input type="checkbox" name="C++" value="on"> C++<br>

<input type="checkbox" name="C#" value="on"> C#<br>

<input type="checkbox" name="JAVA" value="on"> JAVA

</form>

</body> </html>

Radio Button Control:-

Enables users to select only one option from a group of mutually exclusive choices. To group radio buttons,
the name attribute must be the same across each related radio input. They are also created using
HTML <input> tag but type attribute is set to radio.

E.g.: <input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female

<!DOCTYPE html>

<html> <head> <tit le>Radio Box Control</title> </head>

<body> <p>Select a Course</p>

<form><input type="radio" name="subject" value="C++"> C++<br>

<input type="radio" name="subject" value="JAVA"> JA VA<br>

<input type="radio" name="subject" value="HTML"> HTML

</form> </body> </html>

File Select boxes:- If you want to allow a user to upload a file to your web site, you will need to use a file upload
 box, also known as a file select box. It's commonly used for document, image, and multimedia file uploads.

This is also created using the<input > element but type attribute is set to file.

E.g.: <input type="file">

<!DOCTYPE html>

<html><head><title>File Upload Box</title></head>

<body>

<p>File Upload Box</p>

<form>

<input type="file" name="fileupload" accept="image/*" />

</form>

</body></html>

Button Controls:-
There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by

Setting its type attribute to button. The type attribute can take the following values:

Submit: A button that submits form data to the server for processing. Upon clicking, it sends all form data to
the location specified in the form tag’s action attribute.
E.g.: <input type="submit" value="Submit">
Rreset: A button that resets all fields in the form to their initial values, useful for clearing user input quickly
without reloading the page.
E.g.: <input type="reset" value="Reset">
» <button>: The <button> element creates a clickable button, often used for form submissions, navigation, or
triggering JavaScript functions. Unlike <input type="submit">, it allows for more complex content within, such as
text, icons, or HTML.
E.g.: <button type="button">Click Me!</button>
The type attribute defines the button’s behavior (e.g., submit, reset, or button for custom actions), making
it versatile for interactive web forms and interfaces.
 Using an image to submit a form: Using an image to submit a form in HTML can enhance the user interface and
make the submission process more visually appealing. This can be achieved by using the <input> element with
type="image". When the user clicks on the image, it acts as a submit button, sending the form data to the server.

E.g.: <form action="/submit" method="post">

<input type="text" name="username" placeholder="Enter your username">
<input type="image" src="submit-button.png" alt="Submit" width="100"
height="50">
</form>
Additional <input> Attributes:
 value: Sets an initial value for the input field, which can be displayed as default text or data. This value
will also be submitted with the form if not changed.
 readonly: Renders the input field non-editable, so users can view but not modify the value, while still
allowing it to be submitted with the form.
 disabled: Disables the input, making it unclickable and uneditable. The disabled field's data will not be
sent when the form is submitted.
 placeholder: Displays a hint or example text inside the field, helping users understand what data to
enter. This text disappears as soon as the user types.
 required: Ensures that users must fill out the field before submitting the form. Browsers will prompt
users to complete any missing required fields.
maxlength: Sets a maximum character limit for input, preventing users from entering more than the
specified number of characters.

Select Box Controls :-

The <select> element creates a dropdown menu that allows users to choose from a list of options. Paired
With <option> tags for each choice, it provides a compact way to present multiple selections. When combined
with attributes like multiple, it can also allow users to select more than one option.

<!DOCTYPE html>

<html><head><title>Select Box Control</title></head

<body>

<form>

<select name="dropdown">
 <option value="C++" selected>C++</option>

<option value="JAVA">JA VA</option>

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

</select></form></body></html>

» <select>: The <select> element creates a dropdown menu that allows users to choose from a list of options.
Paired with <option> tags for each choice, it provides a compact way to present multiple selections. When
combined with attributes like multiple, it can also allow users to select more than one option..
E.g.: <select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
</select>
The <optgroup> element is used within <select> to group related <option> elements, making large lists more
organized and easier to navigate. The label attribute defines the group’s heading, which isn’t selectable.
E.g.: <select name="genre">
<optgroup label="Fiction">
<option>Science Fiction</option>
<option>Fantasy</option>
</optgroup>
<optgroup label="Non-Fiction">
<option>Biography</option>
<option>History</option>
</optgroup>
</select>

» <label>: The <label> element links descriptive text to a form control, improving accessibility and usability.
When a label is associated with an input (using the for attribute that matches the input’s id), users can click on
the label to focus or activate the input. This is particularly useful for screen readers, helping visually impaired
users understand form fields.
E.g.: <label for="username">Username:</label>
 <input type="text" id="username" name="username">
» <textarea>: The <textarea> element creates a multi-line text input field, allowing users to enter larger
amounts of text, such as comments or messages. Unlike <input type="text">, <textarea> can expand vertically
and horizontally, making it ideal for longer input.

E.g.: <textarea rows="4" cols="50" name="comments"></textarea>

<!DOCTYPE html>
<html><head><title>Multiple-Line Input Control</title>
</head>
<body>
<form> Description: <br />
<textarea rows="5" cols="50" name="description">
Enter description here... </textarea>
</form>
</body>
</html>

» <fieldset> and <legend>:

The <fieldset> element groups related form controls and labels within a box, visually organizing complex
forms and making them more accessible. It’s commonly used to separate sections in a form, like personal
information or payment details.

The <legend> element provides a caption for the <fieldset>, describing its purpose to users and screen readers.
Placed at the top of the fieldset, it acts as a label for the grouped content.
<html>

<head>

<title>Fieldset and Legend Elements Example</title>

</head>

<body>

<form action="/submit-form" method="POST">

<!-- Fieldset with Legend for Personal Information -->

<fieldset>
 <legend>Personal Information</legend>

<label for="fname">First Name:</label>

<input type="text" id="fname" name="fname" required>

<br><br>

<label for="lname">Last Name:</label>

<input type="text" id="lname" name="lname" required>

<br><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

</fieldset>

<br><br>

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

< /form>

</body>

</html>