Web Technology

Introduction to HTML
 Overview and Objectives
• Web Technology refers to the tools, techniques and standards
used to create, manage and use websites and web
applications. It includes everything that helps users interact
with the internet — from designing web pages to managing
data on the server.
• Objectives:
1. Understand Internet & Web Concepts
2. Develop Client-Side Web Pages
3. Learn Server-Side Programming
4. Database Connectivity
5. Web Application Development
6. Understand Web Standards & Security
7. Enhance User Experience (UX)
 Introduction to Web Technology
• Web technologies refers to the way computers/devices
communicate with each other using mark up languages.
• It is communication across the web, and create, deliver or
manage web content using hypertext markup language
(HTML).
• A web page is a web document which is written in HTML
(hypertext markup language).
• It is said to have brought the world into a small village where
people and devices can communicate to each other
seamlessly.
• WWW has allowed for the access of information that would
have been impossible to find or may have been difficult to find
without the www.
The Internet & World Wide Web(WWW)
• The terms Internet and the World Wide Web are synonymous
in the minds of many, but they have different meanings.
• The Internet is a massive network of networks that connects
millions of computers worldwide.
• Computers connected to the Internet can communicate with
one another with a number of protocols such as HTTP, SMTP
(Simple Mail Transfer Protocol), FTP (File Transfer Protocol),
IRC (Internet relay chat), IM (instant messaging), Telnet and
P2P (peer-to-peer).
• The World Wide Web is a system of interlinked hypertext
documents and programs that can be accessed via the
Internet primarily by using HTTP
 Important terms of Web Technology
• Web page
• HTML
• Web Server
• Web Browser
• URL
• Protocol
• Internet Protocol (IP) Address
• HTTP
• XML
• Gateway
• API
Client-Server Model
 Continued.....
• Client-server model is a distributed application structure that
partitions tasks or workloads between the providers of a
resource or service, called servers, and service requesters,
called clients Often clients and servers communicate over
a computer network on separate hardware, but both client
and server may reside in the same system.
• A server host runs one or more server programs, which share
their resources with clients.
• A client usually does not share any of its resources, but it
requests content or service from a server.
• Clients, therefore, initiate communication sessions with
servers, which await incoming requests. Examples of
computer applications that use the client-server model
are email, network printing, and the World Wide Web.
 Web Browsers
• A Web Browser is an application software used to access, retrieve,
and view information from the World Wide Web (WWW).
• It acts as an interface between the user (client) and the web server,
enabling users to open websites, watch videos, read documents, and
interact with online services.
• The browser sends a request to the web server using HTTP/HTTPS
protocols, receives the response (usually HTML, CSS, JavaScript,
images, etc.) and then renders (displays) the web page on the
screen.
• A web browser allows tab management, bookmarking, history
tracking and extensions for added functionality, while ensuring
security through HTTPS, SSL, and safe browsing features.
• Examples of Popular Web Browsers: Include Google Chrome, Mozilla
Firefox, Microsoft Edge, Apple Safari and Opera, known for their
speed, security, privacy, and advanced browsing features.
 History of Web Browsers
• The first web browser, World Wide Web, was invented by
Tim Berners-Lee in 1990 and later renamed Nexus.
• In 1993, Mark Andreessen and his team developed
Mosaic, the first browser to display text and images
together.
• He later created Netscape in 1994. Microsoft introduced
Internet Explorer in 1995, bundled with Windows.
• This led to the development of other browsers like
Mozilla Firefox, Google Chrome, Safari and Opera, each
offering unique features.
 How Does It Works?
• When a user accesses a website by typing a URL like https://
[Link]/ into the browser, the browser first
contacts a DNS (Domain Name System) server to translate the
domain name into an IP address, such as [Link]. After
obtaining the IP address, the browser sends a request to the
corresponding web server. The web server processes this
request and responds with the required content, including
HTML, CSS, Images and scripts. The browser then uses this
content to display the webpage to the user.
 Web Servers
• A web server is a system either software, hardware or both that
stores, processes, and delivers web content to users over the
Internet using the HTTP or HTTPS protocol.
• When a user’s browser sends a request (like visiting a website),
the web server responds by delivering the appropriate resources,
such as HTML pages, images, videos, or data.
• An HTTP server is a specific type of web server which is
responsible for handling HTTP requests and responses.
• While all HTTP servers are web servers, not all web servers are
limited to HTTP.
• Some web servers may support additional protocols like FTP or
SMTP.
 How Does It Works?

• User Request: The user types a URL (like [Link])

in the web browser.
• Request Sent to Server: The browser sends an HTTP/HTTPS
request to the web server that hosts the website.
 Continued.....
• Server Processing: The web server receives the request,
locates the requested web page (HTML, CSS, images, etc.), or
processes it using server-side scripts (like PHP, [Link],
Python).
• Response Sent Back: The web server sends the processed web
page and data back to the client (browser).
• Page Displayed: The browser receives the response and
renders the web page for the user to view.
• Example of Web Server: Popular web servers include Apache,
and Microsoft Internet Information Services (IIS)
For example, Apache is widely used to host and deliver
websites by handling client requests over the Internet.
 MIME(Multipurpose Internet Mail
Extension)
• What is MIME?
MIME is a standard designed to extend the format of email
messages, allowing them to include more than just plain text.
It enables the transmission of multimedia content such as images,
audio, video and attachments, as well as other types of content,
across email systems that traditionally only supported plain ASCII
text.
• MIME allows email messages to carry diverse types of data by
encoding them into a format that can safely travel over protocols
like SMTP (Simple Mail Transfer Protocol) without data loss or
corruption.
• It also provides metadata to help the receiving client identify and
process the content correctly.
 Continued......
• MIME was developed in 1991 at Bell Communications by a
computer scientist named Nathan Borenstein.
• It can only transport text-based files of a restricted size in the
English language through the internet.
• It is now utilized by virtually all email service providers,
including Gmail, Yahoo-mail, and Hotmail.
 Features of MIME
1. Support for Multiple Data Types: MIME allows sending text,
images, audio, video, and application files in email. Example:
You can attach a PDF, MP3 or JPEG file.
2. Encoding of Binary Data: Converts binary files (like images
or videos) into text format so they can be sent via email
safely using Base64 encoding.
3. Multiple Attachments in a Single Message: A MIME
message can include more than one attachment (e.g., a
resume and a photo in the same mail).
4. Support for Non-ASCII Characters: MIME supports
international languages and symbols beyond the standard
ASCII set (e.g., Hindi, Chinese, emojis).
 Continued.......
5. Content Type Identification: MIME adds a Content-Type
header to specify the type of data being sent.
Example: Content-Type: text/html → HTML file,
Content-Type: image/jpeg → Image file,
Content-Type: application/pdf → PDF file
6. Multipart Messages: Allows combining different content
types (like text + image + video) into one email using a
multipart structure. Example: an email with both plain text
and HTML versions.
7. Enhanced Email Presentation: Supports rich text formatting
using HTML (fonts, colors and layouts). Example: Marketing
emails with styled content and images.
Consider the following scenario: A user wishes to send an
email via the user agent, but the email is in a non-ASCII
format. So, in this case, we utilise the MIME protocol to
transform this non-ASCII format into the 7-bit NVT ASCII
format. The message is sent via email to the other side in
the 7-bit NVT ASCII format, and then the MIME protocol
converts it back to Non-ASCII code. at the receiver’s end, so
that the receiver may read it.
 MIME Header
• It extends the characteristics of the basic email protocol by
adding five more fields to the header part of the actual email.
It adds the following fields to the header:
• MIME Version : Specifies MIME protocol version.
• This header typically has a parameter value of 1.0, indicating
that the message is MIME-formatted.
• Content-Type: It specifies the kind and subtype of data that
will be transmitted in the message.
• These communications can be of various sorts, including text,
picture, audio, and video.
• Also have several subtypes, such as png or jpeg.
• Similarly, the Video subtype might be WEBM, MP4, and so
forth.
 Continued.....
• Content Type Encoding: Specifies the technique used to
transform mail information into ASCII or Binary numbers, such
as 7-bit encoding, 8-bit encoding, and so on.
• Content ID: A unique “Content Id” number is attached to every
email messages in this field so that they may be uniquely
recognized.
• Content Description: It includes a brief summary of the email’s
content.
• This implies that the “Content Description” clearly contains
information about whatever is being mailed.
• This field also contains data about the file’s name, creation
date, and modification date.
 Advantages
1. It may transfer many sorts of data in a message, including
text, audio and video files.
2. It also allows you to send and receive emails in a variety of
languages, including Hindi, French, Japanese and Chinese.
3. It also allows individuals to link HTML and CSS to email,
allowing them to customise email according to their needs
and make it pleasant and elegant.
4. It can convey information included in an email regardless of
its length.
5. It gives each email a unique id.
 URL(Uniform Resource Locator)

• A URL or Uniform Resource Locator is a Unique identifier that

is contained by all the resources available on the internet. It
can help to locate a particular resource due to its uniqueness.
It is also known as the web address. A URL consists of different
parts like protocol, domain name, etc. The users can access
the URLs by simply typing them inside the address bar or by
clicking any button or link web page.
• Example: [Link]
Structure of URL’s
1. A URL (Uniform Resource Locator) starts with a protocol
followed by the name of the resource to be accessed.
2. Protocol defines the method or medium used to access the
resource (e.g., HTTP, HTTPS, FTP).
3. The domain name or subdomain comes after the protocol —
it specifies where the resource is located.
4. Common Protocols used in URLs:
– HTTP (Hypertext Transfer Protocol) – for web pages.
– HTTPS (Hypertext Transfer Protocol Secure) – for secure web
communication.
– FTP (File Transfer Protocol) – for file transfer.
– mailto: – for sending emails.
– TELNET – for accessing remote computers.
5. Format of a typical URL: protocol://domain_name/path
Example: [Link]
HTTP(Hypertext Transfer Protocol)
• HTTP stands for Hypertext Transfer Protocol.
It is the foundation of data communication on the World
Wide Web.
• Whenever you open a webpage, play a video online, or submit
a form — HTTP is the protocol that makes this communication
between your browser (client) and the web server possible.
How It Works?
• User Action: You type a website address (like
[Link] into your browser.
• Browser Sends a Request: The browser sends an HTTP
request to the web server that hosts the website.
• Server Processes the Request: The web server receives the
request, finds the requested resource (like an HTML page,
image, or video), and prepares a response.
• Server Sends a Response: The server sends an HTTP response
back to the browser. This response includes:
• A status code (e.g., 200 for success, 404 for not found)
• The content (webpage data, images, etc.)
• Browser Displays the Page: The browser interprets the data
(HTML, CSS, JS) and displays the webpage for the user.
Structure of an HTTP Request/Response: An HTTP An HTTp
request/response typically has:
• A client (a browser) sends an HTTP request to the web
• A web server receives the request
• The server runs an application to process the request
• The server returns an HTTP response (output) to the browser
• The client (the browser) receives the response
 Internet Protocol
• Internet Protocols are a set of rules that governs the
communication and exchange of data over the internet.
• Both the sender and receiver should follow the same protocols
in order to communicate the data.
• Example : Any language has its own set of vocabulary and
grammar which we need to know if we want to communicate
in that language.
• Similarly, over the internet whenever we access a website or
exchange some data with another device then these processes
are governed by a set of rules called the internet protocols.
 Working of Internet Protocol
• The internet and many other data networks work by
organizing data into small pieces called packets.
• Each large data sent between two network devices is divided
into smaller packets by the underlying hardware and
software.
• Each network protocol defines the rules for how its data
packets must be organized in specific ways according to the
protocols the network supports.
 Why do we need Protocols
• It may be that the sender and receiver of data are parts of
different networks, located in different parts of the world
having different data transfer rates.
• So, we need protocols to manage the flow control of data,
access control of the link being shared in the communication
channel.
• Suppose there is a sender X who has a data transmission rate
of 10 Mbps. And, there is a receiver Y who has a data
receiving rate of 5Mbps.
• Since the rate of receiving the data is slow so some data will
be lost during transmission.
• In order to avoid this, the receiver Y needs to inform sender X
about the speed mismatch so that the sender X can adjust its
transmission rate.
 Continued.....
• Similarly, the access control decides the node which will access
the link shared in the communication channel at a particular
instant of time.
• If not the transmitted data will collide if many computers send
data simultaneously through the same link resulting in the
corruption or loss of data.
 Types of Internet Protocol
• The Internet Protocols are of different types having different
uses:-
1. TCP/IP(Transmission Control Protocol/ Internet Protocol):
These are a set of standard rules that allows different types
of computers to communicate with each other.
• The IP protocol ensures that each computer that is connected
to the Internet is having a specific serial number called the IP
address.
• TCP specifies how data is exchanged over the internet and
how it should be broken into IP packets.
• The functionality of TCP/IP is divided into 4 layers.
[Link](Simple Mail Transfer Protocol): These protocols are
important for sending and distributing outgoing emails. This
protocol uses the header of the mail to get the email id of the
receiver and enters the mail into the queue of outgoing mails. And
as soon as, it delivers the mail to the receiving email id.
[Link] (File Transfer Protocol): This protocol is used for transferring
files from one system to the other. This works on a client-server
model. When a machine requests for file transfer from another
machine, the FTO sets up a connection between the two and
authenticates each other using their ID and Password.
[Link](Secure File Transfer Protocol): SFTP which is also known as
SSH FTP refers to File Transfer Protocol (FTP) over Secure Shell (SSH)
as it encrypts both commands and data while in transmission. SFTP
encrypts files and data then sends them over a secure shell data
stream. This protocol is used to remotely connect to other systems
while executing commands from the command line
6. HTTPS(HyperText Transfer Protocol Secure): HTTPS is an extension
of the Hypertext Transfer Protocol (HTTP). It is used for secure
communication over a computer network with the SSL/TLS protocol
for encryption and authentication. Generally, a website has an HTTP
protocol but the website receives sensitive information such as credit
card details, debit card details, OTP, etc then it requires an SSL
certificate installed to make the website more secure. So, before
entering any sensitive information on a website, we should check if
the link is HTTPS or not.
7. TELNET(Terminal Network): TELNET is a standard TCP/IP protocol
used for virtual terminal service given by ISO. This enables one local
machine to connect with another. The computer which is being
connected is called a remote computer and which is connecting is
called the local computer. TELNET operation display anything being
performed on the remote computer in the local computer. The local
computer uses the telnet client program whereas the remote
computer uses the telnet server program.
 HTML(HyperText Markup Language)
• HTML (HyperText Markup Language) is the standard language
for creating and structuring web pages using tags and
elements. It defines how content like text, images, and links
appear in a browser.
• It is a markup language.
• This means it annotates text to define how it is structured and
displayed by web browsers.
• It is a static language, meaning it does not inherently provide
interactive features but can be combined with CSS for styling
and JavaScript for interactivity.
• HTML uses predefined tags and elements that tell the browser
to properly display the content on the screen
• Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph of text!</p>
</body>
</html>
 HTML Syntax
Syntax:
<!Doctype html>
<html>
<head>
<title>--------------------</title>
</head>
<body>
<p>----------</p>
-------------
----------------
</body>
</html>

Note: this documents save using .html extension

HTML Document Structure
 HTML Headings
• The HTML heading tags are used to create headings for the
content of a webpage. These tags are typically placed inside
the body tag. HTML offers six heading tags, from <h1> to
<h6>, each displaying the heading in a different font size.
Syntax:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
• Example:
<!DOCTYPE html>
<html>
<head>
<title>National College of Engineering</title>
</head>
<body>
<h1>Welcome to National College MCA Department</h1>
<h2>Welcome to National College MCA Department</h2>
<h3>Welcome to National College MCA Department</h3>
<h4>Welcome to National College MCA Department</h4>
<h5>Welcome to National College MCA Department</h5>
<h6>Welcome to National College MCA Department</h6>
</body>
</html>
 HTML Paragraph and Break Elements
• HTML <p> tags are used to write paragraph statements on
a webpage. They start with the <p> tag and end with
</p>.
• The HTML <br> tag is used to insert a single line break and
does not require a closing tag. In HTML, the break tag is
written as <br>
Syntax:
// for Paragraph
<p> Content... </p>
// for Break
<br>
• Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>National College of Engineering</title>
</head>
<body>
<p>
The MCA Department at National College offers a strong foundation in
computer applications and modern technologies.<br> Our program
focuses on software development, database management and web
technologies.<br> Students are trained to meet industry standards
through practical learning and real-world projects.<br> The department
aims to create skilled professionals ready for IT and research careers.<br>
We combine theoretical knowledge with hands-on experience for overall
student development.
</p>
</body>
</html>
 HTML Horizontal Line
• The HTML <hr> tag is used to divide a page into sections
by creating a horizontal line that spans from the left to
the right side of the page. This is an empty tag and does
not require a closing tag or any additional attributes.
• Syntax:
<hr>
• Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>National College MCA Department</title>
</head>
<body>
<p>
Welcome to the MCA Department at National College<br>
Learn modern technologies and programming skills<br>
Build your career in software and web development<br>
</p>
<hr>
<p>
Experienced faculty and practical learning environment<br>
Focus on innovation, teamwork, and real-world projects<br>
Join us to become a skilled IT professional<br>
</p>
<hr>
</body>
</html>
 HTML Comments
• HTML comments are annotations in your code that are
not displayed in the browser. They are enclosed
within <!-- and --> tags and are primarily used for
documentation, explanation or temporarily disabling
code during debugging.
Syntax: [Link]-line comment:
<!-- This is a single-line comment -->
[Link]-line comment:
<!-- This is a multi-line comment
spanning multiple lines-->
 HTML Text Formats
• HTML text formatting refers to the use of specific HTML tags to
modify the appearance and structure of text on a webpage. It
allows you to style text in different ways, such as making it bold,
italic, underlined, highlighted or struck-through.
– <b> - Bold text
– <strong> - Important text
– <i> - Italic text
– <em> - Emphasized text
– <mark> - Marked text
– <small> - Smaller text
– <del> - Deleted text
– <ins> - Inserted text
– <sub> - Subscript text
– <sup> - Superscript text
• Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Text Formatting</title>
</head>
<body>
<p><b>Bold text:</b> This is <b>National College MCA
Department</b>.</p>
<p><strong>Important text:</strong> <strong>Admissions are now open!
</strong></p>
<p><i>Italic text:</i> Learn <i>Web Technologies</i> and <i>Database
Systems</i>.</p>
<p><em>Emphasized text:</em> <em>Education is the key to
success.</em></p>
 <p><mark>Marked text:</mark> <mark>Don’t miss the
registration deadline!</mark></p>
<p><small>Smaller text:</small> <small>This information is
subject to change.</small></p>
<p><del>Deleted text:</del> <del>Old syllabus no longer
applicable.</del></p>
<p><ins>Inserted text:</ins> <ins>New syllabus introduced for
MCA 2025 batch.</ins></p>
<p>_{Subscript text:} H₂O (Water)</p>
<p>^{Superscript text:} X² +
Y² = Z²</p>
</body>
</html>
 HTML LINK
• HTML Links, also known as Hyperlinks, are used to connect one
web page to another, allowing users to navigate easily between
different pages, websites, or sections within the same page.
• Defined using the <a> (anchor) tag.
• The href attribute specifies the destination URL.
• Links can open in the same tab or a new tab using
the target attribute.
• Can be used to link text, images, or buttons for navigation.
Syntax: <a href="">..........</a>
Example: <a href=“https\\D:\pooja\[Link]”>College
Logo </a>
 Images
• The HTML <img> tag is used to embed an image in web
pages by linking them. It creates a placeholder for the
image, defined by attributes like src, width, height, and
alt, and does not require a closing tag.
• There are two ways to insert the images into a webpage:
• By providing a full path or address (URL) to access an
internet file.
• By providing the file path relative to the location of the
current web page file
Syntax: <img>
Example: <img src=“.........” alt=“........”>
• Example:
<!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>National College MCA Department</h2>
<img src="[Link]" alt="National College Building" width="400"
height="250">
</body>
</html>
 Image Attributes
1. Src: Specifies the path or URL of the image.
Example: "images/[Link]“
2. Width: Sets the width of the image (in pixels or %). Example:
"300" or "50%“
3. Height: Sets the height of the image (in pixels or %). Example:
"200" or "30%“
4. Alt: Alternative text shown if the image fails to load. Example:
"Beautiful Landscape“
5. Usemap: Links the image to an image map.
6. Ismap: Indicates image is part of a server-side image map.
7. Decoding: Suggests how browser should decode the image.
Example: "async", "sync", "auto“
8. Referrerpolicy: Controls what referrer info is sent with image
requests. Example: "no-referrer"
<!DOCTYPE html>
<html>
<head>
<title>HTML Image Attributes Example</title>
</head>
<body>
<h2>Example of Image with All Attributes</h2>
<img
src="[Link]
alt="Beautiful nature scenery"
width="400"
height="250"
title="Nature Image"
usemap="#naturemap"
referrerpolicy="no-referrer"
decoding="async"
>

<map name="naturemap">
<area shape="rect" coords="0,0,100,100"
href="[Link] alt="Trees">
<area shape="circle" coords="200,150,50"
href="[Link] alt="River">
</map>

</body>
</html>
 LISTS
• An HTML List allows you to organize data on web pages into an
ordered or unordered format to make the information easier to
read and visually appealing.
• HTML Lists are very helpful for creating structured, accessible
content in web development.
• HTML lists organize content using tags like <ul>, <ol> & <li>.
• They improve readability by presenting data in a structured
format.
• There are three types in html list
[Link] List(ul)
[Link] List(ol)
[Link] List(dl)
 Unordered List
• An unordered list in HTML is used to display a group of related
items where the order does not matter.
• It is created using the <ul> (unordered list) tag. Each item in the
list is defined using the <li> (list item) tag.
• By default, browsers display unordered lists with bullet points
(•) before each item. The bullet style can be changed to
circles,squares or discs using the type attribute or CSS.
• Unordered lists are often used for navigation menus, feature
lists, and to show information neatly.
• The <ul> tag acts as a container, and the <li> tags represent
individual list items.
• Syntax: <ul type="bullet_style">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li> </ul>
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h2>My Favorite Fruits</h2>
<ul type=“circle”>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
</body>
</html>
 Ordered List
• An ordered list in HTML is used to display items in a specific
sequence or order
• It is created using the <ol> (ordered list) tag. Each item in the list
is defined using the <li> (list item) tag.
• By default, numbering starts from 1, but it can be changed using
the start attribute. The type attribute allows you to change the
numbering style (e.g., numbers, letters, or Roman numerals).
• Ordered lists are commonly used for step-by-step instructions,
rankings, or procedures.
• You can nest lists inside one another to create multi-level
ordered lists.
• Syntax: <ol type=“ ”>
<li> List1 </li>
<li> List2 </li>
<li> List3 </li> </ol>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Coffee Menu</title>
</head>
<body>
<h2>☕ Coffee Menu</h2>
<ol type="1">
<li>Espresso</li>
<li>Cappuccino</li>
<li>Latte</li>
<li>Mocha</li>
<li>Americano</li>
</ol>
<h3>Special Menu (Alphabetical Order)</h3>
<ol type="A">
<li>Cold Coffee</li>
<li>Caramel Macchiato</li>
<li>Vanilla Latte</li>
</ol>

<h3>Limited Edition (Reverse Order)</h3>

<ol type="I" reversed>
<li>Hazelnut Coffee</li>
<li>Irish Coffee</li>
<li>Turkish Coffee</li>
</ol>
</body>
</html>
 Descriptive List
• A descriptive list is used to display items with their descriptions or
definitions.
• It is created using the <dl> (definition list) tag.
• Each term or item is defined using the <dt> (definition term) tag.
The description or meaning of the term is given using the <dd>
(definition description) tag.
• Descriptive lists are commonly used for glossaries, FAQs and
menus where terms and their meanings are listed together.
• You can have multiple <dd> elements for a single <dt> if one term
has more than one description.
Syntax: <dl> <dt>Term 1</dt>
<dd>Description of Term 1</dd>
<dt>Term 2</dt>
<dd>Description of Term 2</dd> </dl>
• Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Descriptive List Example - Coffee Menu</title>
</head>
<body>
<h2>☕ Coffee Menu (Descriptive List)</h2>
<dl>
<dt>Espresso</dt>
<dd>A strong and bold coffee made by forcing hot water
through finely-ground coffee beans.</dd>
<dt>Cappuccino</dt>
<dd>A classic Italian coffee made with espresso, steamed milk,
and milk foam.</dd>
<dt>Latte</dt>
<dd>A smooth coffee made with espresso and a larger amount
of steamed milk.</dd>

<dt>Mocha</dt>
<dd>A chocolate-flavored coffee made with espresso, milk,
and cocoa or chocolate syrup.</dd>

<dt>Americano</dt>
<dd>Espresso diluted with hot water for a lighter flavor and
larger cup size.</dd>
</dl>
</body>
</html>
 HTML TABLES
• An HTML table is used to organize and display data in rows and
columns. It helps present information in a structured, grid-like
format — similar to an Excel sheet.
• Tables are created using the <table> tag along with <tr> (table
row), <th> (table header), and <td> (table data).
Syntax: <table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th> </tr>
<tr>
<td>Data 1</td>
<td>Data 2</td> </tr>
</table>
• Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table Example</title>
</head>
<body>
<h2>National College MCA Department - Student Details</h2>
<table border="1">
<tr>
<th>Student Name</th>
<th>Register Number</th>
<th>Branch</th>
</tr>
<tr>
<td>Priya Sharma</td>
<td>21MCA01</td>
<td>MCA</td>
</tr>
<tr>
<td>Rahul Kumar</td>
<td>21MCA02</td>
<td>MCA</td>
</tr>
<tr>
<td>Neha Patil</td>
<td>21MCA03</td>
<td>MCA</td>
</tr>
</table>
</body>
</html>
 Progress Tags
• The <progress> tag in HTML is used to display the progress of
a task — such as file downloading, uploading or loading
completion — in a visual progress bar format.
• It represents how much of a task has been completed out of a
total value.
Syntax: <progress value="current" max="total"></progress>
• value → specifies how much of the task is completed.
• max → specifies the total value (the full completion point).
• Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Progress Tag Example</title>
</head>
<body>
<h3>File Download Progress:</h3>
<progress value="70" max="100"> 70% </progress> 70%
</body>
</html>
 Media Tags
• Media tags in HTML are used to embed multimedia content such as
audio, video, and images directly into a web page.
• They make web pages more interactive and engaging by allowing
users to listen to music, watch videos or view visuals without leaving
the page.
• Common Media Tags in HTML:
– <audio> → Used to embed sound or music.
– <video> → Used to embed video clips or movies.
– <source> → Specifies the media file path and type (used inside
<audio> or <video>).
Syntax: 1. Audio Tag Syntax
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element. </audio>
2. Video Tag Syntax
<video controls width="400" height="250">
<source src="videofile.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
• Explanation:
– controls → adds play, pause, and volume buttons.
– src → specifies the file path of the media.
– type → defines the file format.
– The fallback text (inside the tag) appears if the browser
doesn’t support the media element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Media Tags Example</title>
</head>
<body>
<h2>Media Tags Example - National College MCA
Department</h2>
<h3>🎵 Audio Example:</h3>
<audio controls>
<source src="college_song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h3>🎥 Video Example:</h3>
<video controls width="400" height="250">
<source src="campus_tour.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
 HTML FORMS
• HTML forms let users send information from a web page to a
server (for signup, login, search, feedback, file upload, etc.).
• A form groups input controls (text fields, checkboxes, radio
buttons, selects, files, buttons) and tells the browser how and
where to send the data.
Syntax: <form action="/submit" method="post“
enctype="multipart/form-data" autocomplete="on"
novalidate> <!-- form controls --> </form>
— action — URL where the form data is sent. Example: /submit
or [Link]
– method — HTTP method: GET (data appended to URL) or
POST (data in request body). Use POST for sensitive or large
data.
 – enctype — Encoding type for form data. Common values:
application/x-www-form-urlencoded (default)
multipart/form-data (use when uploading files) text/plain
– autocomplete — on or off — browser autofill behavior.
– novalidate — if present, disables browser's built-in validation.
• Common form controls / tags
i. <input> — the most used control
<input type="text" name="fullName" placeholder="Full name"
required>
• Important type values:
• text — single-line text
• password — masked input
• email — expects email format, built-in validation
• tel — telephone number
• number — numeric input with min, max, step
• url — expects URL
• date, datetime-local, time — date/time pickers
• checkbox — boolean option
• radio — choose one from a group (same name)
• file — file upload (enctype="multipart/form-data" required)
• hidden — hidden value
• submit — submit button
• reset — reset form fields
• button — generic button (use with JS)
Common attributes:
• name — key used when data is sent (required for submission)
• id — used to associate <label> and for scripting/CSS
• value — default or submitted value
• placeholder — hint text shown when empty
• required — field must be filled
• readonly / disabled
• min, max, step (for number, date)
• pattern — regex for client-side validation
• maxlength, minlength
ii. <label> — accessible labels
Syntax: <label for="email">Email address</label>
<input id="email" type="email" name="email">
Use <label> with for="id" or wrap the input
inside <label> for better accessibility
iii. <textarea> — multi-line text
Syntax: <textarea name="message" rows="5" cols="40"
placeholder="Your message"></textarea>
The <textarea> tag is used to create a multi-line text input
box where users can type longer messages or comments.
rows and cols set its size, and placeholder displays a hint
when the box is empty.
iv. <select> and <option> — dropdown lists
Syntax: <select name="course" required>
<option value="">Select course</option>
<option value="mca">MCA</option>
<option value="msc">MSc</option>
</select>
Add multiple attribute to allow multiple selections.
v. <fieldset> and <legend> — group related controls
Syntax: <fieldset>
<legend>Personal Details</legend>
<!-- inputs --> </fieldset>
The <fieldset> tag is used to group related form elements
together, creating a clear section in a form.
The <legend> tag provides a title for that group, making the form
more organized and readable.
vii. <button> — clickable buttons
Syntax: <button type="submit">Submit</button>
<button type="button" onclick="doSomething()">Click</button>
type="submit", type="reset", or type="button“
• type="submit" → Sends the form data to the server when
clicked.
• type="reset" → Clears all form fields and resets them to their
default values.
• type="button" → A normal button that performs a custom
action (usually with JavaScript), but does not submit the form.
viii. <input type="submit">
Syntax: <input type="submit" value="Send">
The <input type="submit"> tag creates a submit button that
sends the form data to the server.
The value="Send" sets the text displayed on the button.
3. Client-side validation attributes
• required → Makes the field mandatory; the form cannot be
submitted unless it is filled.
• pattern → Uses a regular expression to check if the input
follows a specific format (e.g., only letters).
• type="email" / type="url" → Automatically checks if the input
is a valid email address or URL.
• min, max, step → Used for number or date inputs to set
allowed minimum, maximum, and step values.
• maxlength, minlength → Restrict how many characters a user
can type into a field.
• Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>National College MCA - Admission Enquiry</title>
</head>
<body>
<h1>Admission Enquiry - National College MCA</h1>
<form action="/submit-enquiry" method="post"
enctype="application/x-www-form-urlencoded“
autocomplete="on">
<fieldset>
<legend>Personal Details</legend>
<label for="fullname">Full Name</label><br>
<input id="fullname" name="fullname" type="text"
placeholder="Pooja H S" required><br><br>
<label for="email">Email</label><br>
<input id="email" name="email" type="email"
placeholder="you@[Link]" required><br><br>
<label for="phone">Phone</label><br>
<input id="phone" name="phone" type="tel"
placeholder="9876543210" pattern="[0-9]{10}" required>
<small>Format: 10 digits</small><br><br>
</fieldset>
<fieldset>
<legend>Course Details</legend>
<label for="course">Interested Course</label><br>
<select id="course" name="course" required>
<option value="">-- Select --</option>
<option value="mca">MCA</option>
<option value="pgdca">PGDCA</option>
</select><br><br>
<label>Preferred Shift</label><br>
<input type="radio" id="shift_m" name="shift"
value="morning" checked>
<label for="shift_m">Morning</label>
<input type="radio" id="shift_e" name="shift"
value="evening">
<label for="shift_e">Evening</label><br><br>
</fieldset>

<fieldset>
<legend>Additional</legend>

<label for="message">Message / Questions</label><br>

<textarea id="message" name="message" rows="4"
cols="50" placeholder="Write your queries
here..."></textarea><br><br>
<label for="cv">Upload CV (optional)</label><br>
<input id="cv" name="cv" type="file"
accept=".pdf,.doc,.docx"><br><br>
</fieldset>

<input type="checkbox" id="consent" name="consent"

required>
<label for="consent">I agree to be contacted by the
college.</label><br><br>
<button type="submit">Submit Enquiry</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
 HTML SPAN & DIV TAGS
• The HTML <span> tag is an inline container that is used to
group and apply styles or scripts to specific parts of text or
elements within a document.
• The <span> tag is inline, meaning it doesn't create a new line.
It stays within the same line as the text around it.
• The <span> tag doesn’t change how the content looks on its
own. It's used to apply styles or to control parts of content
through JavaScript
Syntax: <span class="">Some Text</span>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
<style>
.highlight { background-color: yellow;
font-weight: bold; }
.color-text {
color: blue;
}
.underline {
text-decoration: underline;
}
</style> </head> <body>
 <h1>HTML <span class="underline">Span Tag</span>
Example</h1>
<p>
The <span class="highlight">span tag</span> is used to
style small parts of a text without breaking the line.
</p>
<p>
My favorite color is <span class="color-text">Blue</span>.
</p>
<p>
You can also use <span class="highlight">multiple
styles</span>
in a single sentence.
</p>
</body>
</html>
• The <div> tag in HTML is a block-level container used to group
elements together for layout, styling, or scripting.
• It doesn’t add any visual effect by itself but becomes useful
when combined with CSS or JavaScript.
• <div> is used to divide a webpage into sections.
• It helps in organizing content, applying CSS styles, and
creating layouts like header, footer, sidebar, etc.
• It always starts on a new line because it is a block-level
element.
Syntax:
<div>
<!-- Content goes here -->
</div>
• Example:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Div Example</title>
</head>
<body>

<div style="background-color: lightblue; padding: 10px;">

<h2>Welcome to MCA Department</h2>
<p>This is the first section.</p>
</div>

<div style="background-color: lightgreen; padding: 10px;

margin-top: 10px;">
 <h2>About National College</h2>
<p>This is the second section.</p>
</div>

<div style="background-color: lightcoral; padding: 10px;

margin-top: 10px;">
<h2>Contact Information</h2>
<p>Email: info@[Link]</p>
</div>

</body>
</html>