Unit-1

Introduction to web design

Internet
Internet is essentially global network of computing resources.

Or

The internet is a global network of computer and devices that allows people to communicate
and share information.

Working of the internet

The internet is a global computer network that connects various devices and sends a lot of
information and media. It uses an Internet Protocol (IP) and Transport Control Protocol (TCP)-
based packet routing network. TCP and IP work together to ensure that data transmission across
the internet is consistent and reliable, regardless of the device or location. Data is delivered
across the internet in the form of messages and packets. A message is a piece of data delivered
over the internet, but before it is sent, it is broken down into smaller pieces known as packets.

IP is a set of rules that control how data is transmitted from one computer to another via the
internet. The IP system receives further instructions on how the data should be transferred using
a numerical address (IP Address). The TCP is used with IP to ensure that data is transferred in
a secure and reliable manner. This ensures that no packets are lost, that packets are reassembled
in the correct order, and that there is no delay that degrades data quality.

History of internet

Talking about the history of internet, the ARPANET (Advanced Research Projects Agency
Network, later renamed the internet) established a successful link between the University of
California Los Angeles and the Stanford Research Institute on October 29, 1969. Libraries
automate and network catalogs outside of ARPANET in the late 1960s.

TCP/IP (Transmission Control Protocol and Internet Protocol) is established in the 1970s,
allowing internet technology to mature. The development of these protocols aided in the
standardization of how data was sent and received via the internet. NSFNET (National Science
Foundation Network), the 56 Kbps backbone of the internet, was financed by the National
Science Foundation in 1986. Because government monies were being used to administer and
maintain it, there were commercial restrictions in place at the time.

In the year 1991, a user-friendly internet interface was developed. Delphi was the first national
commercial online service to offer internet connectivity in July 1992. Later in May 1995, All
restrictions on commercial usage of the internet are lifted. As a result, the internet has been able
to diversify and grow swiftly. Wi-Fi was first introduced in 1997. The year is 1998, and
Windows 98 is released. Smartphone use is widespread in 2007. The 4G network is launched
in 2009. The internet is used by 3 billion people nowadays. By 2030, there are expected to be
7.5 billion internet users and 500 billion devices linked to the internet.

Uses of the Internet:

• E-mail: E-mail is an electronic message sent across a network from one computer user to
one or more recipients. It refers to the internet services in which messages are sent from
and received by servers.

• Web Chat: Web chat is an application that allows you to send and receive messages in
real-time with others. By using Internet chat software, the user can log on to specific
websites and talk with a variety of other users online. Chat software is interactive software
that allows users to enter comments in one window and receive responses from others
who are using the same software in another window.

• World Wide Web: The World Wide Web is the Internet’s most popular information
exchange service. It provides users with access to a large number of documents that are
linked together using hypertext or hyperlinks.

• E-commerce: E-commerce refers to electronic business transactions made over the

Internet. It encompasses a wide range of product and service-related online business
activities.

• Internet telephony: The technique that converts analog speech impulses into digital
signals and routes them through packet-switched networks of the internet is known as
internet telephony.

• Video conferencing: The term “video conferencing” refers to the use of voice and images
to communicate amongst users.
World Wide Web (WWW)

WWW stands for World Wide Web and is commonly known as the Web. The WWW was
started by CERN in 1989.

WWW is defined as the collection of different websites around the world, containing
different information shared via local servers(or computers).

Components of the Web

There are 3 components of the web:

• Uniform Resource Locator (URL)

URL serves as a system for resources on the web.

• Hyper Text Transfer Protocol (HTTP)

HTTP specifies communication of browser and server.

• Hyper Text Markup Language (HTML):

• HTML defines the structure, organisation and content of a web page.

Difference Between WWW and Internet

WWW Internet

It is originated in 1989. It is originated in 1960.

WWW is an interconnected network of websites and Internet is used to connect a computer

documents that can be accessed via the Internet. with other computer .

WWW used protocols such as HTTP Internet used protocols such as TCP/IP

It is based on software. It is based on hardware.

There is a entire infrastructure in

It is a service contained inside an infrastructure.
internet.

Web 2.0

Web 2.0 is a sequence of interactive websites emphasizing user-generated content material and
allowing actual conversation and collaboration. It enables continuous platform integration and
data exchange, with greater interactivity and collaboration, pervasive network connectivity,
and enhanced communication channels.

Characteristics

Web2 websites enable social media communication, collaboration, and user-generated content,
unlike Web1-era sites that only allow passive content consumption. Popular features include
social networks (like Facebook), blogs, wikis, folksonomies, video and image sharing, hosted
services, Web apps, collaborative consumption, and mashups.
 • Blog – A platform where users can create and share written content, often allowing
comments and interactions.
• Wiki – A collaborative website that allows multiple users to edit and contribute content
(e.g., Wikipedia).
• Tag – A way to categorize content, making it easier to search and organize (e.g.,
hashtags in social media).
• Videocast – Online video content, often used for sharing information, entertainment,
or education (e.g., YouTube, Vimeo).
• Podcast – Digital audio recordings available for streaming or download, often in series
format.
• Social Network – Platforms that enable users to connect, communicate, and share
content (e.g., Facebook, Twitter, LinkedIn).
• RSS (Really Simple Syndication) – A technology that allows users to subscribe to
website updates and receive new content automatically.

Web Browser

“A web browser is a software program that enables a user to access information on the Internet
via the World Wide Web”.

The web browser is an application software to explore www (World Wide Web). It provides an
interface between the server and the client and it requests to the server for web documents and
services. It works as a compiler to render HTML which is used to design a webpage. Whenever
we search for anything on the internet, the browser loads a web page written in HTML,
including text, links, images, and other items such as style sheets and JavaScript functions.
Component of a Web browser

1. User Interface: The user interface is an area where the user can use several options like
address bar, back and forward button, menu, bookmarking, and many other options to
interact with the browser.

2. Browser Engine: It connects the UI (User Interface) and the rendering engine as a
bridge. It queries and manipulates the rendering engine based on inputs from several
user interfaces.

3. Rendering Engine: It is responsible for displaying the requested content on the browser
screen. It translates the HTML, XML files, and images, which are formatted by using
the CSS. It generates the layout of the content and displays it on the browser screen.

4. Networking: It retrieves the URLs by using internet protocols like HTTP or FTP. It is
responsible for maintaining all aspects of Internet communication and security.
Furthermore, it may be used to cache a retrieved document to reduce network traffic.

5. JavaScript Interpreter: As the name suggests, JavaScript Interpreter translates and

executes the JavaScript code, which is included in a website. The translated results are
sent to the rendering engine to display results on the device screen.

6. UI Backend: It is used to draw basic combo boxes and Windows (widgets). It specifies
a generic interface, which is not platform-specific.

7. Data Storage: The data storage is a persistence layer that is used by the browser to store
all sorts of information locally, like cookies. A browser also supports different storage
mechanisms such as IndexedDB, WebSQL, localStorage, and FileSystem. It is a
database stored on the local drive of your computer where the browser is installed. It
handles user data like cache, bookmarks, cookies, and preferences.
How does a Web Browser Work

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

The browser receives information through HTTP protocol. In which transmission of data is
defined. When the browser received data from the server, it is rendered in HTML to user-
readable form and, information is displayed on the device screen.

Some Popular Web Browsers

• Google chrome
• Mozilla Firefox
• Apple Safari
• Microsoft Edge
• Tor Browser
• Opera
• Brave

Web protocols

Web protocols are network protocols that enable communication

betweendevices on the internet

Web protocols are a set of rules that govern communication over the internet. They ensure that
data is transmitted and received correctly between clients (such as web browsers) and servers.
Some of web protocols include

HTTP (Hypertext Transfer Protocol)

HTTP stands for HyperText Transfer Protocol. It is the main way web browsers and servers
communicate to share information on the internet.

HTTP protocol is used to transfer hypertexts over the internet and it is defined by the
www(world wide web) for information transfer. This protocol defines how the information
needs to be formatted and transmitted. And, it also defines the various actions the web browsers
should take in response to the calls made to access a particular web page. Whenever a user
opens their web browser, the user will indirectly use HTTP as this is the protocol that is being
used to share text, images, and other multimedia files on the World Wide Web.

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. So, generally, a website has an HTTP protocol but if the website is such that it
receives some 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. If it is not
HTTPS then it may not be secure enough to enter sensitive information.

FTP (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.
And, the desired file transfer takes place between the machines.

TCP/IP (Transmission Control Protocol/Internet Protocol)

In TCP/IP, 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. It also makes sure that the packets have
information about the source of the message data, the destination of the message data, the
sequence in which the message data should be re-assembled, and checks if the message has
been sent correctly to the specific destination.
UDP (User Datagram Protocol)

UDP (User Datagram Protocol) is a connectionless, unreliable transport layer protocol. Unlike
TCP, it does not establish a reliable connection between devices before transmitting data, and
it does not guarantee that data packets will be received in the order they were sent or that they
will be received at all.UDP is faster than TCP because it has less overhead. It doesn’t need to
establish a connection, so it can send data packets immediately. It also doesn’t need to wait for
confirmation that the data was received before sending more, so it can transmit data at a higher
rate.

DNS (Domain Name System)

The Domain Name System (DNS) translates human-readable domain names (e.g.,
www.google.com) into machine-readable IP addresses (e.g., 142.250.190.14), enabling internet
communication

SMTP (Simple Mail Transfer Protocol)

SMTP protocol is 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 mail. And as soon as it delivers the mail to the receiving email id, it removes the email
from the outgoing list. The message or the electronic mail may consider the text, video, image,
etc.

IMAP/POP3 (Internet Message Access Protocol / Post Office Protocol)

IMAP (Internet Message Access Protocol) is a protocol used for retrieving emails from a mail
server. It allows users to access and manage their emails on the server, rather than downloading
them to a local device.

POP3 stands for Post Office Protocol version 3. It has two Message Access Agents (MAAs)
where one is client MAA (Message Access Agent) and another is server MAA(Message Access
Agent) for accessing the messages from the mailbox. This protocol helps us to retrieve and
manage emails from the mailbox on the receiver mail server to the receiver’s computer.
WebSockets

Enables real-time, two-way communication between clients and servers.Commonly used for
chat applications and live updates.

SSL/TLS (Secure Sockets Layer / Transport Layer Security)

Security protocols that encrypt data for secure communication.

Web Server

A web server is a software application or hardware device that stores, processes, and serves
web content to users over the internet. It plays a critical role in the client-server model of the
World Wide Web, where clients (typically web browsers) request web pages and resources, and
servers respond to these requests by delivering the requested content.

• Web Browser This is where you type the URL (e.g., www.example.com). The web
browser sends a request for the page you want to access.

• Request Sent via the Internet: The request travels over the Internet to the web server,
asking for specific content like a webpage or an image.

• Web Server: The web server is a computer that stores and delivers web pages. It receives
the request from the browser and processes it. The server then prepares the requested
information (like HTML, images, etc.).

• Response Sent Back: The web server sends the response (the requested webpage or
content) back through the internet.

• Web Browser Displays the Page: The browser receives the response from the web server
and displays the web page to the user.
Web design

Web design is the process of planning and arranging content on a website so that it's visually
appealing and easy to use.

Web design principles

1.Purpose

The purpose of a website defines its goal and helps shape its design.

Common Website Purposes:

• Sell Products/Services (e.g., Amazon, Shopify)

• Provide Information (e.g., Wikipedia, news sites)

• Entertain & Engage (e.g., YouTube, Netflix)

A website’s purpose guides its layout, colors, and features. For example, an online store needs
clear product pages and an easy checkout, while a blog needs readable text and engaging
visuals.

When designers understand the website’s purpose, they can create a user-friendly experience
that helps visitors take action—like signing up, buying a product, or learning something new.

2. Simplicity

A good website should be simple and easy to use so visitors can quickly find what they need.

Usability: A clear layout helps users navigate easily.

Fast Loading: Simple designs load faster, improving user experience.
Mobile-Friendly: Websites must adjust to different screen sizes.

Clarity: Users shouldn’t struggle to find information or complete actions.

By keeping a website clean, fast, and user-friendly, designers create a better experience that
keeps visitors engaged

3. Navigation

Navigation is how users move through a website. Good navigation makes it easy to find
information quickly.
Better User Experience (UX): Simple menus help users find what they need fast.
Customer Retention:Easy navigation keeps visitors coming back.
Search Engine Optimization (SEO): Clear navigation helps Google rank the site higher.

If users can’t find what they need in 3 clicks or less, they may leave, Keep menus clear, simple,
and organized for the best results

4. Visual Hierarchy

Visual hierarchy helps organize content so users can easily read and focus on important
information.

Font Sizes: Bigger text grabs attention first.

Colors& Contrast: Bright or bold colors highlight key areas.
Spacing: White space makes content easier to read.
Breaking Up Text: Short paragraphs and headings improve readability.
Branding: Consistent design elements create a strong brand identity.

5. Content

Content is the most important part of a website because it informs, engages, and convinces
visitors to take action.

SEO: Good content helps websites rank higher on Google.

Credibility: Quality content makes a website look professional.
Authority: Sharing useful information builds trust.
Social Sharing: Engaging content gets shared on social media.
Conversions: Strong content with a Call-to-Action (CTA) (e.g., "Subscribe" or "Buy Now")
increases sales and sign-ups.

6. Typography

Typography is the style of text on a website, including fonts, sizes, and colors. It helps make
content readable, attractive, and consistent.

Legibility: Text should be easy to read for all users.

Branding: Fonts create a unique identity for a website.
Communication: Fonts set the tone (formal, fun, modern, etc.).
Hierarchy: Bigger and bolder fonts highlight important information.
Consistency: Using the same fonts and sizes creates a professional look.
7. Color

Color plays a big role in setting the mood and style of a website. It should be consistent to
make a strong brand identity.

Emotion: Colors affect mood (e.g., red = exciting, blue = calming).

Contrast: High contrast (e.g., black text on white) improves readability.

Navigation: Colors help users find buttons and clickable items.
Aesthetics: A good color palette makes a website look professional and attractive.

8. Consistency

Consistency makes a website look professional, trustworthy, and easy to use. It helps visitors
feel familiar with the brand.

Brand Identity: Same colors, fonts, and style make a brand recognizable.
Trust & Credibility: A consistent design makes a website look reliable.
Better User Experience: Users know what to expect, making navigation easier.
More Conversions: A trustworthy website encourages users to take action (buy, sign up,
etc.).

9. Accessibility

Web accessibility means making websites usable for everyone, including people with
disabilities.

Better User Experience (UX): Easy to navigate for all users.

Legal Requirements: Some laws require websites to be accessible.
Inclusivity: Ensures everyone can use the internet.
Social Responsibility: Helps create an equal and fair digital space.
Better Google Ranking: Accessible websites rank higher in search results.
10. Mobile Compatibility & Responsiveness

As more people view websites on their mobile devices than desktop devices, responsive web
design is a must. Websites that are not optimized for mobile will offer a poor user experience
(think pinching and zooming simply to read homepage copy) and will suffer in search engine
results.Design for mobile first for a better user experience, more website traffic, and high
conversions.

Website Structure

A website structure refers to the organization and arrangement of a website's pages, content,
and navigation. It determines how different sections and pages are connected, ensuring a logical
flow for users and search engines.

Types of Website Structure

Hierarchical Structure (Tree-Like Model)

• The most common website structure, where pages are organized in a top-down
manner.

• Users start from the homepage and navigate through menus to reach deeper pages.

• Ideal for e-commerce, corporate websites, and portfolios.

• Enhances user experience and SEO by providing clear navigation

Sequential Structure (Linear Model)

• Guides users through a step-by-step process, like a guided journey.

• Common in online courses, onboarding processes, and checkout flows.

• Ensures users follow a specific path, reducing confusion and improving conversions.

Matrix Structure (Web-Like Model)

• Allows multiple interconnections between pages, providing flexible navigation.

• Found in large content-heavy websites like news platforms and e-commerce stores.

• Users can explore content freely through categories, tags, and recommendations.
Database-Driven Structure

• Relies on search functionality instead of traditional navigation menus.

• Used in websites with large user-generated content, like social media and forums.

• Highly scalable, allowing users to find relevant content dynamically.

Client-Server Technologies

Client-server technology is a network architecture where multiple clients request services, and
a server processes and responds to these requests. It is the backbone of web applications, cloud
computing, and enterprise software.

Client-Server Model Work

• Client: When we say the word Client, it means to talk of a person or an organization using
a particular service. Similarly in the digital world, a Client is a computer (Host) i.e.
capable of receiving information or using a particular service from the service providers
(Servers).

• Servers: Similarly, when we talk about the word Servers, It means a person or medium
that serves something. Similarly in this digital world, a Server is a remote computer that
provides information (data) or access to particular services.

So, it is the Client requesting something and the Server serving it as long as it is in the database.
Architecture of Client-Server Model

The client-server model can be implemented in different architectures depending on

complexity and scalability requirements.

One-tier architecture

Tier one architecture is an all-in-one architecture. It stores all the information required for the
server to function inside one package. These settings often include the user interface, database
logic, business logic, and database settings as one layer on a shared drive. Smaller networks,
for example, typically rely on tier one architecture.

Two-Tier Architecture

Two-tier architecture breaks the user interface and database into separate servers and layers,
allowing clients to make outside requests. Like online reservation systems, this architecture is
popular for sending and retrieving contract information.

Three-tier architecture

Three-tier architecture introduces middleware into the client-server architecture. The

middleware offers better security and the opportunity to handle more complex tasks and
requests. The layers are divided into a presentation layer, a database layer, and an application
layer.

• Presentation Layer (Client) – User Interface (UI) in a browser or app.

• Application Layer (Server) – Business logic and processing.

• Database Layer – Stores data.

Multi-Tier (N-Tier) Architecture

N-tier architecture adds additional middleware layers to create more complex client-server
systems that handle more varied types of network traffic and tasks. This client-server
architecture is desirable for any organization because it is flexible and scalable.
Client-side tools and technologies

client-side tools and technologies refer to those that run directly on the user's browser,
including core languages like HTML for structure, CSS for styling, JavaScript for interactivity,
and popular JavaScript frameworks like React, Angular, and Vue.js for building complex web
applications with dynamic features.

some of the commonly used client-side technologies and tools

HTML

HTML, short for HyperText Markup Language, forms the backbone of any web page. It is used
to define the structure and content of a web page. HTML tags are used to create headings,
paragraphs, lists, images, links, and other elements that make up a web page.

CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the look and formatting
of a document written in HTML. It is used to define the colors, layout, fonts, and other visual
aspects of a web page. CSS helps in creating a consistent and visually appealing user interface.

JavaScript

JavaScript is a powerful scripting language that enables dynamic and interactive features on a
web page. It allows developers to add functionalities like form validation, client-side data
processing, animations, and asynchronous communication with the server.

JavaScript frameworks and libraries such as React, Angular, and Vue.js provide additional
capabilities and simplify the development process.

React

React is a popular JavaScript library for building user interfaces. It allows developers to create
reusable UI components that can be easily composed together to build complex applications.
React follows a component-based architecture and uses a virtual DOM for efficient rendering.
It has gained significant popularity due to its performance, modularity, and extensive
ecosystem.
Angular

Angular is a full-featured JavaScript framework developed by Google. It provides a complete

solution for building robust and scalable web applications. Angular follows a component-based
architecture and offers features like two-way data binding, dependency injection, and routing.

Vue.js

Vue.js is a progressive JavaScript framework that focuses on simplicity and flexibility. It is

known for its easy learning curve and incremental adoption approach. Vue.js allows developers
to incrementally build user interfaces and can be integrated into existing projects without much
hassle. It provides features like reactive data binding, component reusability, and a virtual
DOM for efficient rendering.

Tools:

Webpack

Module bundler for code splitting and asset management.It helps improve performance by
reducing file size and managing dependencies.Great for large projects with many files.

Parcel

Zero-configuration bundler known for ease of use.Automatically bundles your files without
complex configuration.Perfect for small to medium projects where you want things to just
work.

Babel

JavaScript transpiler for ES6+ to ES5 compatibility.Babel translates new JavaScript code into
older versions so that all browsers can run it. Essential if you use modern JavaScript (ES6+)
but need to support older browsers.
Server-side Scripting

Server-side scripting is a programming technique for creating code that may run software on
the server side. In other words, server-side scripting is any scripting method that may operate
on a web server. At the server end, actions such as website customization, dynamic changes in
website content, response creation to user requests, database access, and many more are carried
out.

The server-side is made up of three parts

• Database – Stores all the data.

• Server – A powerful computer that processes requests.

• APIs – Connect different parts, like a bridge between the database and other software.

The backend web software written in the server-side scripting language. When a browser
requests a page with server-side scripting, the web server evaluates the script before delivering
the page to the browser. In this case, script processing may entail collecting information from
a database, performing simple computations, or selecting the relevant material to be shown on
the client end. The output is provided to the web browser when the script is processed. The web
server hides the scripts from the end user until the content is delivered, making the data and
source code safer.

Server-side scripting languages

Python

It is an open-source language that is very powerful and easy to learn. It is suitable for beginners
because it is simple to learn and read. It is believed to be used by Google and YouTube. It is a
OOPs language with dynamic typing and data structures. It has grown to be one of the most
popular languages for both quick application development and web development.

PHP

It is an open-source server-side scripting programming language mainly designed for web apps
and is the most utilized scripting language. It allows you to retrieve and manipulate data from
a database and is utilized along with SQL to query the database. It is a fast and simple language
to learn and develop, and Facebook, Wikipedia, and WordPress utilize it.
Ruby

It is a free and open-source programming language that was developed and firstly introduced
in the early 1990s. It is a dynamic language that is simple to read and write and an OOPs
language that is interpreted as it runs. It has evolved continuously since its development and is
one of the most utilized web development languages.

Database

MySQL: A popular open-source relational database management system(RDMS) known for

its reliability, performance, and ease of use. Its commonly used with PHP-based application.

PostgreSQL: PostgreSQL is an advanced open-source RDBMS with support for features like
ACIDF transactions, foreign key, and advanced indexing. Its known for its robustness and
extensibility.

MongoDB: A NoSQL database that stores data in flexible, JSON-like documents. MongoDB
is highly scalable, schema-less, and suitable for handling unstructured or Semi-Structured data.

Server-Side Frameworks and Libraries:

Flask: Flask is a lightweight and flexible web framework for python, ideal for building small
to medium-sized web application and APIs. Its known for its simplicity and extensibility

Spring boot: spring boot is a java-based framework that simplifies the development of
production-ready web application and microservices. It offers features like auto-configuration,
embedded servers, and dependency injection.

Expresss.js: Express.js is a minimalist web framework for NODe.js, providing a simple and
flexible architecture for building web application and APIs. Its highly extensible and widely
used in the Node.js ecosystem.
Features of Server-side Scripting

There are various features of server-side scripting. Some main features of the server-side
scripting are as follows:

1. It is connected with data access, error handling, and data processing speed.

2. It is processed and interacts with the server.

3. Using a highly integrated programming language makes it more secure than client-side
scripting.

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

https://www.geeksforgeeks.org/

Structure of a URL

A URL (Uniform Resource Locator) is the address of a resource on the internet. It tells the
web browser or any application where to find a specific webpage, file, or service. Let's break
down the structure of a URL in simple terms.

It uses multiple protocols like HTTP (Hypertext Transfer Protocol), HTTPS Protocol (Secured
HTTP), mailto for emails, FTP (File Transfer Protocol) for files, and TELNET to access
remote computers. Mostly the protocol names are specified using the colons and the double
forward slashes, but the mailto protocol is specified using the colons only.
Different Parts of a URL

A URL consists of mutliple parts that can helps you to visit a particular page on the internet.
Every part of a URL has its own importance. Let us discuss about the different parts of a URL.

The protocol or scheme:

A URL starts with a protocol that is used to access the resource on the internet. The resource is
accessed through the Domain Name System or DNS. There are multiple protocols avaiable to
use like HTTP, HTTPS, FTP, mailto, TELNET etc. The protocol used in the above URL
is https.

Domain or Host Name:

It is the reference or name of the page that you are going to access on the internet. In this case,
the domain name is: www.geeksforgeeks.org.

Port Name:

It is defined just after the domain name by using the colons between itself and the domain
name. Generally, it is not visible in the URL. The domain name and the port name combinely
can be known as Authority. The default port for web services is port80 (:80).

Path:

It refers to the path or location of a particular file or page stored on the web server to access
the content of it. The path used here is: array-data-structure.

Query:

A query mainly found in the dynamic pages. It consists of a question mark(?) followed by the
parameters. In above URL query is: ?.
Parameters:

These are the pieces of information inside a query string of URL. Multiple parameters can be
passed to a URL by using the ampersand(&) symbol to separate them. The query parameter
in above URL is: ref=home-articlecards.

Fragments:

The fragments appear at the end of a URL starts with a Hashtag(#) symbol. These are the
internal page references that refers to a specific section within the page. The fragment in the
above URL is: #what-is-array.

MIME Protocol

MIME stands for Multipurpose Internet Mail Extensions. It is used to extend the capabilities
of Internet e-mail protocols such as SMTP. The MIME protocol allows the users to exchange
various types of digital content such as pictures, audio, video, and various types of documents
and files in the e-mail.

How Does MIME Work

MIME does not work alone—it works alongside SMTP (Simple Mail Transfer Protocol),
which is responsible for sending emails.

You send an email with an attachment (e.g., an image).

MIME encodes the image into a format that can be sent through email.
SMTP sends the email over the internet.
MIME decodes the attachment on the recipient’s side so they can view or download it.

MIME Header

MIME adds five additional fields to the header portion of the actual e-mail to extend the
properties of the simple email protocol. These fields are as follows:

1. MIME Version

2. Content Type

3. Content Type Encoding

 4. Content Id

5. Content description

1. MIME Version

Defines the version of the MIME protocol. It must have the parameter Value 1.0, which
indicates that message is formatted using MIME.

2. Content Type

Type of data used in the body of the message. They are of different types like text data (plain,
HTML), audio content, or video content.

Examples:

Content-Type: image/png

3. Content Transfer Encoding

It defines the method used for encoding the message. Like 7-bit encoding, 8-bit encoding,
etc.Emails can only handle text-based content, so attachments need to be converted (encoded)
before sending.This field tells the email system how the data is encoded.

Examples:

• 7-bit encoding: Used for simple text emails

4. Content ID

It is used for uniquely identifying the message.Every email and attachment gets a unique
"Content ID" so that email systems can keep track of different parts of the message.

Example:
Content-ID: <[email protected]>

5. Content description

It defines whether the body is actually an image, video, or audio.This provides extra details
about the content being sent.It may include file names, creation dates, modification dates, or a
short description.
Search engines

Search engines are programs that allow users to search and retrieve information from the vast
amount of content available on the internet. They use algorithms to index and rank web pages
based on relevance to a user’s query, providing a list of results for users to explore. Popular
search engines include Google, Bing, and Yahoo.

How do Search Engines Work

1. . Crawling: Search engines have a number of computer programs that are responsible for
finding information that is publicly available on the internet. The crawler scans the web
and creates a list of all available websites. Then they visit each website and by reading
HTML code they try to understand the structure of the page, the type of the content, the
meaning of the content, and when it was created or updated. Why crawling is important?
Your first concern when optimizing your website for search engines is to make sure that
they can access it correctly. If crawler cannot find your content you won’t get any ranking
or search engine traffic.
2. Indexing: Information identified by the crawler needs to be organized, Sorted, and Stored
so that it can be processed later by the ranking algorithm. Search engines don’t store all the
information in your index, but they keep things like the Title and description of the page,
The type of content, Associated keywords Number of incoming and outgoing links, and a
lot of other parameters that are needed by the ranking algorithm. Why indexing is
 important? Because if your website is not in their index it will not appear for any searches
this also means that if you have any pages indexed you have more chances of appearing in
the search results for a related query.
3. Ranking: Ranking is the position by which your website is listed in any Search Engine.
There is following three steps in which how ranking works.

Usage of Search Engine

Search engines have so many usages and some of them are:

• Searching for information: People use a search engine to search for any kind of
information present on the internet. For example, Rohit wants to buy a mobile phone
but he does not know which one is the best mobile phone. So he searches “best mobile
phones in 2021” in the search engine and gets the list of best mobile phones along with
their features, reviews, and prices.

• Searching images and videos: Search engines are also used to search images and
videos. There are so many videos and images available on the internet in different
categories like plants, animals, flowers, etc., you can search them according to your
need.

• Searching location: Search engines are also used to find locations. For example,
Seema is on a Goa trip but she doesn’t know the location of Palolem beach. So she
searches “Palolem beach” on the search engine and then the search engine gives the
best route to reach Palolem beach.

• Searching people: Search engines are also used to find people on the internet around
the world.

• Shopping: Search engines are also used for shopping. Search engines optimize the
pages to meet the needs of the user and give the lists of all the websites that contain the
specified product according to the best price, reviews, free shipping, etc.

• Entertainment: Search engines are also used for entertainment purposes. It is used to
search videos, movies, games, movie trailers, reviews of movies, social networking
sites, etc. For example, Rohan wants to watch a movie named “Ram”, then he searches
this movie on a search engine and the search engine returns a list of links (of the
websites) that contain the Ram movie.
 • Education: Search engines are also used for education. With the help of search engines,
people can learn anything they wanted to learn like cooking, programming languages,
home decorations, etc. It is like an open school where you can learn anything for free.

Web Server

A web server is a system that stores and delivers web pages to users. It uses the HTTP/HTTPS
protocol to handle requests from browsers and sends back things like HTML files, images, and
videos.

Apache

Apache is free and open-source software of web server that is used by approx 40% of
websites all over the world. Apache HTTP Server is its official name. It is developed and
maintained by the Apache Software Foundation. Apache permits the owners of the websites
for serving content over the web. It is the reason why it is known as a "web server." One of the
most reliable and old versions of the Apache web server was published in 1995.

Apache is a web server software that is responsible for accepting HTTP requests from visitors
and sending them back the requested information in the form of web pages.

Or in simpler terms, it allows visitors to view content on your website.

Working of Apache

Apache is not any physical server; it is software that executes on the server. However, we define
it as a web server. Its objective is to build a connection among the website
visitor browsers (Safari, Google Chrome, Firefox, etc.) and the server. Apache can be defined
as cross-platform software, so it can work on Windows servers and UNIX.

When any visitor wishes for loading a page on our website, the homepage, for instance, or our
"About Us" page, the visitor's browser will send a request on our server. Apache will return a
response along with each requested file (images, files, etc.). The client and server communicate
by HTTP protocol, and Apache is liable for secure and smooth communication among t both
the machines.

Apache is software that is highly customizable. It contains the module-based structure. Various
modules permit server administrators for turning additional functionality off and on. Apache
includes modules for caching, security, password authentication, URL rewriting, and other
purposes. Also, we can set up our own configuration of the server with the help of a file known
as .htaccess. It is a supported configuration file of Apache.

Advantages of Apache

Apache is one of the most popular web server software programs.

1. Flexibility

• The internet has millions of different websites, each with unique needs.

• Apache is highly customizable and can be adjusted to work differently on different

websites.

It supports modules that allow developers to add features like security, caching, and
performance improvements.

2. Easy to Set Up

• Many new websites are built by beginners with little to no web design experience.

• Apache is easy to install and works well with platforms like WordPress and other CMS
(Content Management Systems).

• It requires minimal coding knowledge to get started, making it beginner-friendly.

3. Large Community & Support

• Apache is the most widely used web server in the world.

• A large user community means more online resources, tutorials, and forums where
beginners can find help easily.

• Compared to other web servers, Apache has better support and troubleshooting
solutions available online.
Disadvantages of Apache

While Apache is a powerful web server, it does have some drawbacks

1. Customization Can Lead to Security Risks

• Apache is highly customizable, which is great for flexibility.

• However, modifying settings incorrectly can create security vulnerabilities.

• Hackers can exploit these weaknesses if the server is not properly secured.

• More experienced developers can avoid these issues, but beginners might struggle.

2. Difficulty in Managing Apache Modules

• Apache offers many modules that add extra features to the server.

• However, some modules may not be necessary and could slow down performance.

• It can be difficult to recognize which modules are essential without deep knowledge of
Apache.

3. Frequent Updates

• Apache releases many updates to improve security and performance.

• While updates are important, some users find them annoying or time-consuming.

• Not updating can make a website vulnerable to cyberattacks, so staying updated is

essential.

IIS

The term "IIS" stands for Internet Information Services, which is a general-purpose webserver
that runs on the Windows operating system. The IIS accepts and responds to the client's
computer requests and enables them to share and deliver information across the LAN (or Local
Area Network) such as a corporate intranet and the WAN (or Wide Area Network) the internet.
How IIS works

It works through several different standard languages and protocols. HTML is used for creating
a variety of elements. For example, texts, buttons, hyperlinks, and direct/indirect behaviors.
The HTTP (or Hyper Text Transfer Protocol) is used for exchanging the information between
the two or more servers and users. HTTPS --HyperText Transfer Protocol Secure over the SSL
(or Secure Sockets Layer) -- uses SSL (secure sockets layer ) to encrypt the communication to
add additional data security. The FTP (or File Transfer Protocol ), or its secure variant, FTPS,
can transfer files.

IIS Express for testing

Microsoft itself provides a specific IIS version, which is known as the IIS Express, for
developers to test their websites and applications. IIS Express provides all the major
capabilities of a full IIS web server, but many tasks can be performed without administrative
privileges.

Security

Organizations need to take security measures to protect the webserver from security breaches
to ensure that the website is secure. Companies can use the facilities built into IIS to harden
IIS.

Some important security measures include:

1. SSL/TLS Encryption – Protects data transmission by encrypting it.

2. Authentication and Authorization – Ensures that only authorized users can access
specific parts of a website.

3. Firewall and IP Restrictions – Blocks unauthorized access from suspicious sources.

4. Regular Updates and Patching – Keeps IIS secure by fixing vulnerabilities.

Characteristics of IIS

Componentization: Reducing surface area is one of the most powerful ways to secure a server
system.

Extensibility: Extending IIS enables Web applications to benefit from functionality that in
many cases cannot be easily provided at the application layer.

Build custom: We can add custom features to extend or replace any existing functionality
using your own or third party server components built on the new extensibility APIs.

Database Manager: IIS Database Manager provides the ability to connect to any database on
the network.

Web Platform Installer: The best one for end website users. The web platform installer is a
gallery of the popular softwares installation.

Differences between IIS and Apache

o The IIS is only available for the Windows Operating System, but the Apache can be
used on a variety of operating systems such as Mac, Linux, and Windows etc.

o The IIS has its own help desk to fix the issues, but in Apache's case, almost all of its
support is provided by the user community.

o Internet Information Services can also integrate with the other several offspring or
languages of Microsoft, such as ASPX scripting language.

o The security features of the IIS are more reliable than the Apache web server, which
makes it a better option than the Apache.

Proxy Server

A proxy server is a system that acts as a middleman between users and the internet. It can be
software or hardware. Proxy servers can help prevent cyberattacks and protect users' privacy.

A proxy server is an intermediary server that sits between a client (like your computer or
smartphone) and the internet. It acts as a "middleman" for the communication between the user
and the websites they visit. Here's how it works:

• Client sends request: When you try to access a website, your request first goes to the
proxy server instead of directly to the website.
 • Proxy server processes request: The proxy server then forwards your request to the
website, retrieves the requested data, and sends it back to you.

Why to Use Private Proxy

• Defeat Hackers: To protect an organization’s data from malicious use, passwords are
used and different architects are set up, but still, there may be a possibility that this
information can be hacked in case the IP address is accessible easily. To prevent such
kind of misuse of Data Proxy servers are set up to prevent tracking of original IP
addresses instead data is shown to come from a different IP address.

• Filtering of Content: By caching the content of the websites, Proxy helps in fast access
to the data that has been accessed very often.

• Examine Packet Headers and Payloads: Payloads and packet headers of the requests
made by the user nodes in the internal server to access social websites can be easily
tracked and restricted.

• To control internet usage of employees and children: In this, the Proxy server is used to
control and monitor how their employees or kids use the internet. Organizations use it,
to deny access to a specific website and instead redirecting you with a nice note asking
you to refrain from looking at said sites on the company network.

• Bandwidth savings and improved speeds: Proxy helps organizations to get better overall
network performance with a good proxy server.

• Privacy Benefits: Proxy servers are used to browse the internet more privately. It will
change the IP address and identify the information the web request contains.

• Security: Proxy server is used to encrypt your web requests to keep prying eyes from
reading your transactions as it provides top-level security.

Types of Proxy Server

Forward proxy:

A forward proxy server sits between clients and the internet. Forwarding requests from clients
to internet servers on their behalf. It is commonly used for caching, anonymizing, and
controlling access to internet resources.
Reverse Proxy Server

A reverse proxy does the opposite of forward proxy. A forward proxy acts on behalf of clients
(or requesting hosts). Forward proxies can hide the identities of clients whereas reverse
proxies can hide the identities of servers.The job of a reverse proxy server to listen to the
request made by the client and redirect to the particular web server which is present on
different servers.

Web Proxy Server

Web Proxy forwards the HTTP requests, only URL is passed instead of a path. The request
is sent to particular the proxy server responds. Examples, Apache, HAP Proxy

• Anonymous Proxy Server

This type of proxy server does not make an original IP address instead these servers are
detectable still provides rational anonymity to the client device.

• Highly Anonymity Proxy

This proxy server does not allow the original IP address and it as a proxy server to be detected.

• Transparent Proxy

This type of proxy server is unable to provide any anonymity to the client, instead, the
original IP address can be easily detected using this proxy. But it is put into use to act as a
cache for the websites. A transparent proxy when combined with gateway results in a proxy
server where the connection requests are sent by the client , then IP are redirected.
Redirection will occurs without the client IP address configuration. HTTP headers present
on the server-side can easily detect its redirection .

• CGI Proxy

CGI proxy server developed to make the websites more accessible. It accepts the requests to
target URLs using a web form and after processing its result will be returned to the web
browser. It is less popular due to some privacy policies like VPNs but it still receives a lot of
requests also. Its usage got reduced due to excessive traffic that can be caused to the website
after passing the local filtration and thus leads to damage to the organization.
• Suffix Proxy

Suffix proxy server basically appends the name of the proxy to the URL. This type of proxy
doesn’t preserve any higher level of anonymity. It is used for bypassing the web filters. It is
easy to use and can be easily implemented but is used less due to the more number of web
filter present in it.

• Distorting Proxy

Proxy servers are preferred to generate an incorrect original IP address of clients once being
detected as a proxy server. To maintain the confidentiality of the Client IP address HTTP
headers are used.

• Tor Onion Proxy

This server aims at online anonymity to the user’s personal information. It is used to route
the traffic through various networks present worldwide to arise difficulty in tracking the
users’ address and prevent the attack of any anonymous activities. It makes it difficult for
any person who is trying to track the original address. In this type of routing, the information
is encrypted in a multi-folds layer. At the destination, each layer is decrypted one by one to
prevent the information to scramble and receive original content. This software is open-
source and free of cost to use.

• I2P Anonymous Proxy

It uses encryption to hide all the communications at various levels. This encrypted data is
then relayed through various network routers present at different locations and thus I2P is a
fully distributed proxy. This software is free of cost and open source to use, It also resists the
censorship.

• DNS Proxy

DNS proxy take requests in the form of DNS queries and forward them to the Domain server
where it can also be cached, moreover flow of request can also be redirected.

• Rotating Proxy

A rotating proxy assign a new or different IP address to each user that connects to proxy. As
users connect, the unique address is assign to it.
How Does The Proxy Server Operates

Every computer has its unique IP address which it uses to communicate with another node.
Similarly, the proxy server has its IP address that your computer knows. When a web request
is sent, your request goes to the proxy server first. The Proxy sends a request on your behalf
to the internet and then collect the data and make it available to you. A proxy can change
your IP address So, the webserver will be unable to fetch your location in the world. It
protects data from getting hacked too. Moreover, it can block some web pages also.

HTTP Protocol

HTTP stands for HyperText Transfer Protocol. It is the main way web browsers and
servers communicate to share information on the internet.

HTTP Methods:

• GET: Requests data from the server.

• POST: Sends data to the server (e.g., form submissions).

• PUT: Updates data on the server.

• DELETE: Removes data from the server.

• HEAD: Requests headers without the body of the response.

• OPTIONS: Returns the HTTP methods supported by the server.

HTTP Request

An HTTP request is a message sent by a web browser (client) to a web server to request
information or resources like web pages, images, or data. The server processes the request
and responds with the requested content.

There is some common information that is generally present in all HTTP requests. These are
mentioned below.

• HTTP Version

• URL

• HTTP Method

• HTTP Request Headers

• HTTP Body

1. HTTP Version – Specifies the protocol version (e.g., HTTP/1.1, HTTP/2).

2. URL (Uniform Resource Locator) – The web address of the requested resource.

HTTP Request Headers

HTTP Request Headers generally store information in the form of key-value and must be
present in each HTTP Request. The use of this Request Header is to provide core information
about the client’s information, etc.
HTTP Request Body
HTTP Request Body simply contains the information that has to be transferred. HTTP
Request has the information or data to be sent to these browsers.
HTTP Method
HTTP Methods are simply HTTP Verb. In spite of being present so many HTTP Methods,
the most common HTTP Methods are HTTP GET and HTTP POST. These two are generally
used in HTTP cases. In HTTP GET, the information is received in the form of a website.
HTTP Response

HTTP Response is simply the answer to what a Server gets when the request is raised. There
are various things contained in HTTP Response, some of them are listed below.

• HTTP Status Code

• HTTP Headers

• HTTP Body

1.HTTP Response Headers

These are metadata sent by the server along with the response. They contain details about
the response, like content type, length, and cache information.

2. HTTP Response Body

The actual content sent back by the server in response to the request (e.g., HTML page,
JSON data, or images).

Example: If you request a webpage, the HTML code of that page is returned as the body.

3. HTTP Status Codes

These are 3-digit codes returned by the server to indicate the status of the request.

2xx: Success (e.g., 200 OK).

4xx: Client Errors (e.g., 404 Not Found).

5xx: Server Errors (e.g., 500 Internal Server Error).

Introduction to HTML

HTML

HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. It is a markup language that defines the structure
and content of web pages. Let's see what is meant by Hypertext Markup Language, and Web
page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have
clicked on a hypertext. HyperText is a way to link two or more web pages (HTML
documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more interactive
and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated
by a web browser. A web page can be identified by entering an URL. A Web page can be of
the static or dynamic type. With the help of HTML only, we can create static web pages.

HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of this
version was announced in January 2008. There are two major organizations one is W3C (World
Wide Web Consortium), and another one is WHATWG( Web Hypertext Application
Technology Working Group) which are involved in the development of HTML 5 version, and
still, it is under development.

Features of HTML

• It is a very easy and simple language. It can be easily understood and modified.

• It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.

• It is a markup language, so it provides a flexible way to design web pages along

with the text.

• It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.
• It is platform-independent because it can be displayed on any platform like
Windows, Linux, and Macintosh, etc.

• It facilitates the programmer to add Graphics, Videos, and Sound to the web pages
which makes it more attractive and interactive.

• HTML is a case-insensitive language, which means we can use tags either in lower-
case or upper-case.

Example of HTML.

<!DOCTYPE>

<html>

<head>

<title>Web page title</title>

</head>

<body>

<h1>Write Your First Heading</h1>

<p>Write Your First Paragraph.</p>

</body>

</html>

Description of HTML Example

• <!DOCTYPE>: It defines the document type or it instruct the browser about the
version of HTML.

• <html > :This tag informs the browser that it is an HTML document. Text between
html tag describes the web document. It is a container for all other elements of HTML
except <!DOCTYPE>

• <head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). It must be closed before the body tag
opens.
 • <title>: As its name suggested, it is used to add title of that HTML page which
appears at the top of the browser window. It must be placed inside the head tag and
should close immediately. (Optional)

• <body> : Text between body tag describes the body content of the page that is visible
to the end user. This tag contains the main content of the HTML document.

• <h1> : Text between <h1> tag describes the first level heading of the webpage.

• <p> : Text between <p> tag describes the paragraph of the webpage.

Building blocks of HTML

• An HTML document consist of its basic building blocks which are:

• Tags: An HTML tag surrounds the content and apply meaning to it. It is written
between < and > brackets.

• Attribute: An attribute in HTML provides extra information about the element, and
it is applied within the start tag. An HTML attribute contains two fields: name &
value.

Syntax

<tag name attribute_name= " attr_value"> content </ tag name>

HTML5 Basic tags

1. HTML <!DOCTYPE> tag

On the HTML document you have often seen that there is a <!DOCTYPE html>
declaration before the <html> tag. HTML <!DOCTYPE> tag is used to inform the browser
about the version of HTML used in the document. It is called as the document type declaration
(DTD).

Technically <!DOCTYPE > is not a tag/element, it just an instruction to the browser about the
document type. It is a null element which does not contain the closing tag, and must not include
any content within it

syntax

<!DOCTYPE html>
2. HTML <html> tag

The <html> tag represents root of an HTML document hence also called as root element. It is
a container of all elements (except <!Doctype> ) such as <body>, <head> and each element
which appears in an HTML document. It tells the browser that the document is an HTML
document.

Before the <html> tag we can only use <!Doctype> declaration which gives information about
the HTML version to the browser.

Syntax
<html>....</html>

3. HTML Head

The HTML <head> element is used as a container for metadata (data about data). It is used
between <html> tag and <body> tag.

The head of an HTML document is a part whose content is not displayed in the browser on
page loading. It just contains metadata about the HTML document which specifies data about
the HTML document.

An HTML head can contain lots of metadata information or can have very less or no
information, it depends on our requirement. But head part has a crucial role an HTML
document while creating a website.

Metadata defines the document title, character set, styles, links, scripts, and other meta
information.

Syntax:
<head>
......
</head>

Following is a list of tags used in metadata:

o <title>:The HTML <title> element is used to define the title of the document. It is used
in all HTML/XHTML documents
o <style>:The HTML <style> element is used to style the HTML page. The <style>
element can have CSS properties for that HTML page only.
o <meta>:The HTML <meta> element is used to specify the character set, page
description, keywords, authors and other metadata on the webpage.
o <link>:The HTML <link> element is used to link an external style sheet to your
webpage. The <link> element contains main two attributes which are "rel" and "href".
The rel attribute indicates that it is a stylesheet, and href gives the path to that external
file.
 o <script>:HTML <script> element is used to apply client side JavaScript for the same
page or to add an external JavaScript file to current page.
o <base>:The HTML <base> element is used to specify the base URL and base target for
all relative URLs in a page.

4. HTML <body> tag

• HTML <body> tag defines the main content of an HTML document which displays on
the browser. It can contain text content, paragraphs, headings, images, tables, links,
videos, etc.
• The <body> must be the second element after the <head> tag or it should be placed
between </head> and </html> tags. This tag is required for every HTML document and
should only use once in the whole HTML document.

Syntax

<body> Place your Content here........</body>

5. HTML Anchor

• The HTML anchor tag defines a hyperlink that links one page to another page. It can
create hyperlink to other web page as well as files, location, or any URL. The "href"
attribute is the most important attribute of the HTML a tag. and which links to
destination page or URL.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

6. HTML Button Tag

The <button> tag is used to create a clickable button within HTML form on your webpage.
You can put content like text or image within the <button>........</button> tag.

<button name="button" type="button">Click Here</button>

7. HTML Heading

A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage. When you place the text within the heading tags <h1>.........</h1>, it
is displayed on the browser in the bold format and size of the text depends on the number of
heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags, from
highest level h1 (main heading) to the least level h6 (least important heading).
 <h1>Heading no. 1</h1>

<h2>Heading no. 2</h2>

<h3>Heading no. 3</h3>

<h4>Heading no. 4</h4>

<h5>Heading no. 5</h5>

<h6>Heading no. 6</h6>

8. HTML Image

HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element.

Syntax of <img> tag

<img src= "url">

For example, if you want to insert an image file on a webpage residing in the same
folder/directory on your page then only image filename is needed to be specified

To insert an image in your web, that image must be present in your same folder where you
have put the HTML file. But if in some case image is available in some other directory then
you can access the image like this:

<img src="E:/images/animal.png" height="180" width="300" alt="animal image">

9. HTML Paragraph

HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a
simple example to see how it work. It is a notable point that a browser itself add an empty line
before and after a paragraph. An HTML <p> tag indicates starting of new paragraph.

See this example:

1. <p>This is first paragraph.</p>

2. <p>This is second paragraph.</p>
3. <p>This is third paragraph.</p>

<br> and <hr> tag with paragraph

An HTML <br> tag is used for line break and it can be used with paragraph elements.
An HTML <hr> tag is used to apply a horizontal line between two statements or two
paragraphs.

HTML Formatting

HTML Formatting is a process of formatting text for better look and feel. HTML provides us
ability to format text without using CSS. There are many formatting tags in HTML. These tags
are used to make text bold, italicized, or underlined. There are almost 14 options available that
how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

o Physical tag: These tags are used to provide the visual appearance to the text.
o Logical tag: These tags are used to add some logical or semantic value to the text.

Bold Text
HTML<b> and <strong> formatting elements

The HTML <b> element is a physical tag which display text in bold font, without any logical
importance. If you write anything within <b>............</b> element, is shown in bold letters.

See this example:

<p> <b>Write Your First Paragraph in bold text.</b></p>

Output:

Write Your First Paragraph in bold text.

The HTML <strong> tag is a logical tag, which displays the content in bold font and informs
the browser about its logical importance. If you write anything between <strong>???????.
</strong>, is shown important text.
<p><strong>This is an important content</strong>, and this is normal content</p>
Output:
This is an important content, and this is normal content

Italic Text

HTML <i> and <em> formatting elements

The HTML <i> element is physical element, which display the enclosed content in italic font,
without any added importance. If you write anything within <i>............</i> element, is shown
in italic letters.

See this example:

<p> <i>Write Your First Paragraph in italic text.</i></p>

Output:

Write Your First Paragraph in italic text.

The HTML <em> tag is a logical element, which will display the enclosed content in italic
font, with added semantics importance.

See this example:

<p><em>This is an important content</em>, which displayed in italic font.</p>

Output:

This is an important content, which displayed in italic font.

HTML Marked formatting

If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.

See this example:

<h2> I want to put a <mark> Mark</mark> on your face</h2>

Output:

Underlined Text

If you write anything within <u>.........</u> element, is shown in underlined text.

See this example:

<p> <u>Write Your First Paragraph in underlined text.</u></p>

Output:

Write Your First Paragraph in underlined text.

Strike Text

Anything written within <strike>.......................</strike> element is displayed with

strikethrough. It is a thin line which cross the statement.

See this example:

<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Output:

Write Your First Paragraph with strikethrough.

Monospaced Font

If you want that each letter has the same width then you should write the content within
<tt>.............</tt> element.

See this example:

<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Output:

Hello Write Your First Paragraph in monospaced font.

Superscript Text

If you put the content within ^{..............} element, is shown in superscript; means it
is displayed half a character's height above the other characters.

See this example:

<p>Hello ^{Write Your First Paragraph in superscript.}</p>

Output:

Hello Write Your First Paragraph in superscript.

Subscript Text

If you put the content within _{..............} element, is shown in subscript ; means it is
displayed half a character's height below the other characters.

See this example:

<p>Hello _{Write Your First Paragraph in subscript.}</p>

Output:

Hello Write Your First Paragraph in subscript.

Deleted Text

Anything that puts within <del>..........</del> is displayed as deleted text.

See this example:

<p>Hello <del>Delete your first paragraph.</del></p>

Output:

Hello
Inserted Text
Anything that puts within <ins>..........</ins> is displayed as inserted text.

See this example:

<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>

Output:

Write another paragraph

Larger Text

If you want to put your font size larger than the rest of the text then put the content within
<big>.........</big>. It increase one font size larger than the previous one.

See this example:

<p>Hello <big>Write the paragraph in larger font.</big></p>

Output:

Hello Write the paragraph in larger font.

Smaller Text

If you want to put your font size smaller than the rest of the text then put the content within
<small>.........</small>tag. It reduces one font size than the previous one.

See this example:

<p>Hello <small>Write the paragraph in smaller font.</small></p>

Output:

Hello Write the paragraph in smaller font.

HTML5 Page Layout And Navigation Concept

HTML Layouts

HTML layouts provide a way to arrange web pages in a well-mannered, well-structured, and
responsive form. A web page layout specifies how the web pages can be arranged. Webpage
layout works with the arrangement of visual elements in an HTML document.

Web page layout is the most important part to keep in mind while creating a website so that
our website can appear professional with a great look. You can also use CSS and
JAVASCRIPT based frameworks for creating layouts for responsive and dynamic website
designing.
Header

The <header> element represents the header of the whole page or a section of it

The <header> element represents a group of introductory or navigational aids. A header

element is intended to usually contain the section's heading, but this is not required. The header
element can also be used to wrap a section's table of contents, a search form, or any relevant
logos.

Syntax:

<header>

<!-- Your header content will go here -- >

</header>

HTML <nav>

The <nav> elements is a container for the main block of navigation links. It can contain links
for the same page or for other pages.

HTML <nav> tag is used to represent a section which contains navigation links, either within
current document or to another document. Examples of some navigation links are menu, table
of contents, indexes, etc.

The <nav> tag is newly added tag in HTML5

Syntax
<nav>.....</nav>
Key Features of <nav> Tag:

• It is a semantic element, meaning it gives meaning to the structure of the page.

• Typically contains lists of links (<ul>, <ol>, <a>).

Example

<nav>

<ul>

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

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

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

</ul>

</nav>

HTML <section>

HTML <section> elements represent a separate section of a web page which contains related
element grouped together. It can contain: text, images, tables, videos, etc.

Syntax:

<section>

<h2>Section Title</h2>

<p> This is the content of the section.</p>

</section>

HTML <article>

The HTML <article> tag is used to contain a self-contained article such as big story, huge
article, etc.

The <article> element represents an independent item section of content such as a blog post,
forum post or a comment. It is expected that the content in the article element should be
independently distributable or reusable as in the case of content syndication

Syntax:

<article>

<h2>Article Title</h2>
 <p>This is the content of the article.</p>

</article>

HTML <aside>

• HTML <aside> define aside content related to primary content. The <aside> content must
be related to the primary content. It can function as side bar for the main content of web
page.
• It is often used for sidebars, pull quotes, and advertisements.

Syntax:

<aside>

<h3> Related Links </h3>

<ul>

<li><a href= "#">Related Article1</a></li>

<li><a href= "#">Related Article2</a></li>

</ul>

</aside>

HTML <footer>

HTML <footer> element defines the footer for that document or web page. It mostly contains
information about author, copyright, other links, etc.

<footer>

<hr >

Copyright (C) 2013. All rights reserved.

</footer>
Semantic Elements

• Semantic elements in HTML are tags that have meaningful names that describe the
content of a web page. They make web pages easier to navigate, understand, and search.
• HTML5 introduced a range of semantic elements that clearly describe their purpose in
human and machine-readable language. Unlike non-semantic elements, which provide
no information about their content, semantic elements clearly define their content.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <img>, <table>, and <article> - Clearly defines its content.

Here are some of the fundamental HTML5 semantic elements that you should use to structure
your web content:

The <article> Tag

The <article> tag is used for content that stands alone and can be independently distributed
or reused, such as a blog post or news article.

The <aside> Tag

It is used to place content in a sidebar i.e. aside from the existing content. It is related to
surrounding content.

The Details and Summary Tag

The “details” defines additional details that the user can hide or view. “summary” defines
a visible heading for a “details” element.

The Figure and Figcaption Tag

These are used to add an image to a web page with a small description.

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can
be placed as the first or as the last child of a <figure> element.

The Header Tag

As the name suggests, it is for the header of a section introductory of a page. There can be
multiple headers on a page.

The Footer Tag

Footer located at the bottom of any article or document, they can contain contact details,
copyright information etc. There can be multiple footers on a page.

The Main Tag

It defines the main content of the document. The content inside the main tag should be
unique.

The Section Tag

A page can be split into sections like Introduction, Contact Information, Details, etc and each
of these sections can be in a different section tag.

The nav Tag

It is used to define a set of navigation links in the form of a navigation bar or nav menu.

The Mark Tag

It is used to highlight the text.

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.

Types of List

There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

HTML Ordered List or Numbered List

• In the ordered HTML lists, all the list items are marked with numbers by default. It is
known as numbered list also.
• The ordered list starts with <ol> tag and end with </ol>.
• the list items start with <li> tag and end with </li>.

Example

<ol>

<li>Aries</li>

<li>Bingo</li>

<li>Leo</li>

<li>Oracle</li>
</ol>

There can be different types of numbered list:

• Numeric Number (1, 2, 3)

• Capital Roman Number (I II III)
• Small Romal Number (i ii iii)
• Capital Alphabet (A B C)
• Small Alphabet (a b c)

ol type="I"

Let's see the example to display list in roman number uppercase.

<ol type="I">

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

Output:

I. HTML
II. Java
III. JavaScript
IV. SQL

ol type="i"

Let's see the example to display list in roman number lowercase.

<ol type="i">

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

Output:
 i. HTML
ii. Java
iii. JavaScript
iv. SQL

ol type="A"

Let's see the example to display list in alphabet uppercase.

<ol type="A">

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

Output:

A. HTML
B. Java
C. JavaScript
D. SQL

ol type="a"

Let's see the example to display list in alphabet lowercase.

<ol type="a">

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

Output:
 a. HTML
b. Java
c. JavaScript
d. SQL

start attribute

The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

<ol type="i" start="5">

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

Output:

v. HTML
vi. Java
vii. JavaScript
viii. SQL
Reversed Attribute:

This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use the
reversed attribute with

tag then it will numbered the list in descending order (7, 6, 5, 4......1).

Example:

<ol reversed>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

HTML Unordered List or HTML Bulleted List

HTML Unordered List or Bulleted List displays elements in bulleted format . We can use
unordered list where we do not need to display items in any particular order. The HTML ul tag
is used for the unordered list. There can be 4 types of bulleted list:

• disc
• circle
• square
• none

HTML Unordered List Example

<ul>

<li>HTML</li>

<li>Java</li>
<li>JavaScript</li>

<li>SQL</li>

</ul>

Output:

• HTML
• Java
• JavaScript
• SQL

Type "disc"

This is the default style. In this style, the list items are marked with bullets.

ul type="circle"

In this style, the list items are marked with circles.

<ul type="circle">

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ul>

Output:

o HTML
o Java
o JavaScript
o SQL

ul type="square"

In this style, the list items are marked with squares.

<ul type="square">

<li>HTML</li>

<li>Java</li>
<li>JavaScript</li>

<li>SQL</li>

</ul>

Output:

▪ HTML
▪ Java
▪ JavaScript
▪ SQL

ul type="none"

In this style, the list items are not marked .

<ul type="none">

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ul>

Output:

HTML

Java

JavaScript

SQL

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is
also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or
other name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.

<dd> tag defines the term definition (description).

<dl>

<dt>Aries</dt>

<dd>-One of the 12 horoscope sign.</dd>

<dt>Bingo</dt>

<dd>-One of my evening snacks</dd>

<dt>Leo</dt>

<dd>-It is also an one of the 12 horoscope sign.</dd>

<dt>Oracle</dt>

<dd>-It is a multinational technology corporation.</dd>

</dl>

Output:

Aries

-One of the 12 horoscope sign.

Bingo

-One of my evening snacks

Leo

-It is also an one of the 12 horoscope sign.

Oracle

-It is a multinational technology corporation.

HTML Table

HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data
is defined by <td> tags.

HTML Table Example

Let's see the example of HTML table tag.

<table>

<tr>

<th>First_Name</th>

<th>Last_Name</th>

<th>Marks</th></tr>

<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

<tr><td>James</td><td>William</td><td>80</td></tr>

<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

</table>

HTML Table with Border

There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML

2. By border property in CSS
HTML Border attribute

You can use border attribute of table tag in HTML to specify border.

<table border=”1”>

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

<tr><td>James</td><td>William</td><td>80</td></tr>

<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

</table>

CSS Border property

It is now recommended to use border property of CSS to specify border in table.

<style>

table, th, td {

border: 2px solid black;

border-collapse: collapse;

</style>

HTML Table with cell padding

It can specify padding for table header and table data by two ways

1. By cellpadding attribute of table in HTML

2. By padding property in CSS

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;
 }

th, td {

padding: 10px;

</style>

HTML Table width:

We can specify the HTML table width using the CSS width property. It can be specify in pixels
or percentage.

We can adjust our table width as per our requirement. Following is the example to display table
with width.

table{

width: 100%;

HTML Table with colspan

If you want to make a cell span more than one column, you can use the colspan attribute.

It will divide one cell/row into multiple columns, and the number of columns depend on the
value of colspan attribute.

HTML Table with rowspan

If you want to make a cell span more than one row, you can use the rowspan attribute.

It will divide a cell into multiple rows. The number of divided rows will depend on rowspan
values.

HTML table with caption

HTML caption is diplayed above the table. It must be used after table tag only.

HTML <tbody> tag

• HTML <tbody> tag is used to group the table rows (<tr>) together, which indicates that
this is body part of a table (<table>).
• The <tbody> tag must be a child of <table> element.
• The <tbody> is used along with <thead> and <tfoot> which shows the different part of
the table that are table head, table body, and table footer, however, it does not affect the
layout of the table.
 • These elements can be used for providing semantic information which can be helpful
in accessibility purpose, or rendering the header at top and footer at the bottom while
printing a large table.

Syntax

<tbody>............</tbody>

HTML Form

An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc. .

HTML Form Syntax

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton, button

</form>

HTML <form> element

The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text
area, password field, etc.

Syntax:

<form>

//Form elements

</form>

HTML <input> element

The HTML <input> element is fundamental form element. It is used to create form fields, to
take input from user. It can apply different input filed to gather different information form user.
Following is the example to show the simple text input.

<body>
<form>
 Enter your name <br>
<input type="text" name="username">
</form>
</body>

HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as single line textfield
control. The name attribute is optional, but it is required for the server side component such as
JSP, ASP, PHP etc.

Example

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

HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.

<form>

Enter your address:<br>

<textarea rows="2" cols="20"></textarea>

</form>

Label Tag in Form

It is considered better to have label in form. As it makes the code parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have for
attribute in label tag that must be same as id attribute of input tag.

<form>

<label for="firstname">First Name: </label> <br/>

<input type="text" id="firstname" name="firstname"/> <br/>

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

<input type="text" id="lastname" name="lastname"/> <br/>

 </form>

HTML Password Field Control

The password is not visible to the user in password field control.

<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>

HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email address. You must
use @ and . in this field.

<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
Radio Button Control
The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc.Using radio buttons for multiple options, you can only choose a
single option at a time.

<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>

Submit button control

HTML <input type="submit"> are used to add a submit button on web page. When user
clicks on submit button, then form get submit to the server.
 Syntax:

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

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.

<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>

MULTIMEDIA
The word multi and media are combined to form the word multimedia. The word “multi”
signifies “many.”

Multimedia is a type of medium that allows information to be easily transferred from

one location to another.

A variety of tags such as the <img> tag, <video> tag, and <audio> tag are available
in HTML to include media on your web page. Multimedia combines different media, such
as images, audio, and videos. Users will have a better experience when multimedia is
embedded into HTML. Early web browsers only supported text and were limited to a single
font in a single color. However, later browsers introduced support for various fonts, images,
and multimedia elements.

Image

The <img> tag is self-closing because they don't have a closing tag.

The src attribute is the required attributes in the <img> tag, it helps to specify the source URL.

The alt attribute provides the alternative text to an image. If the image does not load up then
this message will be displayed.
Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag
are given below.

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the browser
where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the
alt attribute describe the image in words.

3) width

It is an optional attribute which is used to specify the width to display the image. It is not
recommended now.

4) height

The HTML height attribute also supports iframe, image and object elements. It is not
recommended now.

5) hspace attribute:

The hspace attribute is used to inserts an equal space on the left and right side of an image.

6) vspace attribute:

The vspace attribute is used to inserts an equal space on the top and bottom of an image

7) border attribute:

If you want to create a frame around an image then it is possible using border attribute of <img>
tag. By default, no border appears around an image unless the image is a link. In order to
include border of specific width, we assign the border attribute to some numeric value in the
<img> tag.

<img src = "good-morning.jpg" alt = "Good Morning Friends“ border=3>

iframes

HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML
<iframe> tag defines an inline frame, hence it is also called as an Inline frame.

An inline frame is used to embed another document within the current HTML document.
Iframe Syntax

<iframe src="URL"></iframe>

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe

Example"></iframe>

Title attribute for the <iframe>. This is used by screen readers to read out what the content of
the iframe is.

Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

Iframe Target for a link

You can set a target frame for a link by using iframe. Your specified target attribute of the link
must refer to the name attribute of the iframe.

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

Embed YouTube video using iframe

You can also add a YouTube video on your webpage using the <iframe> tag. The attached
video will be played at your webpage and you can also set height, width, autoplay, and many
more properties for the video.

<iframe width="550" height="315" src="https://www.youtube.com/embed/JHq3pL4cdy4" fr

ameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen style="padding:20px;"></iframe>
<map> Tag
The <map> tag in HTML is used to define an image map. It is an image with clickable areas
that link to different destinations or perform specific actions. The <map> tag is typically used
in combination with the <img> tag and <area> tags to create these interactive regions. Each
<area> tag within a <map> defines a shape (rectangle, circle, or polygon) and specifies the
coordinates for the clickable area.

<img src="image.jpg" usemap="#mapname“ alt="Descriptive Image">

<map name="mapname">

<area shape="rect" coords="x1,y1,x2,y2" href="link1.html" alt="Rectangle Area">

<area shape="circle" coords="x,y,radius" href="link2.html" alt="Circle Area">

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="link3.html" alt="Polygon Area">

</map>

Where

• <img> Tag: Displays the image and references the <map> using the usemap attribute.
• <map> Tag: Defines the clickable areas within the image.
• <area> Tag: Specifies the shape, coordinates, link, and description for each clickable
area.

The Image

The image is inserted using the <img> tag. The only difference from other images is that
you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image map, and is used
to create a relationship between the image and the image map.

Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the
required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img> usemap attribute .
The Areas

Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

• rect - defines a rectangular region

• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region

Shape="rect"

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

• So, the coordinates x1,y1 is located x1 from the left margin and y1 from the top.
• The coordinates x2,y2 is located x2 from the right margin and y2 from the bottom .

Shape="circle"

To add a circle area, first locate the coordinates of the center of the circle:

x,y

Then specify the radius of the circle:

Radius in pixel

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

Shape="poly"

The shape="poly" contains several coordinate points, which creates a shape formed with
straight lines (a polygon).

This can be used to create any shape.

The coordinates come in pairs, one for the x-axis and one for the y-axis

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,

58,352,37,322,40,259,103,161,128,147" href="croissant.html">
Embedding audio and video clips on web pages
In HTML, "embed" means to insert content from another source directly into a web
page. This can be content like images, videos, applications, or feeds.

There are following few ways to include audio and video in a webpage.

• Embedding file using <EMBED> element

• Embedding files using <OBJECT> element
• Adding audio using Audio Tag
• Adding Video using Video tag
• Linking using <A> element

Embedding file using <EMBED> element:

The <EMBED> element is used to include a file in a webpage that requires a special plug-
in or helper application such as audio, video and flash animations etc. While working with
the <EMBED> element, it is essential to include SRC attribute with value set to the
Audio/Video filename that you want to include.

For Example:

<EMBED SRC ="myvideo.mpg">

Embedding files using <OBJECT> element:

The <OBJECT> element is a standard element used for embedding objects (files) in your
webpage. It is a replacement for already existing <EMBED> element. In addition to audio
and video files, it is useful for including text, java applets and even some video files and
other WebPages in your page. The <OBJECT> element is like an empty element but a
closing tag is required.

For Example: In order to include an audio file using <OBJECT> element, we will write.

<OBJECT DATA = "song.mp4" type = "video/mpg">

 HTML Audio Tag

HTML audio tag is used to define sounds such as music and other audio clips.

Before HTML5, audio cannot be added to web pages in the Internet Explorer era. To
play audio, we used web plugins like Flash. After the release of HTML5, it is possible.
This tag supports Chrome, Firefox, Safari, Opera, and Edge.

Currently there are three supported file format for HTML 5 audio tag.

1. Mp3(MPEG Audio layer 3)

2. Wav(Waveform audio file format)
3. Ogg(ogg vorbis)

Syntax:
<audio>
<source src="file_name" type="audio_file_type">
</audio>

Attributes of <audio> tag

Attribute Value Description

When the page is loaded. It specifies to play audio as soon

autoplay autoplay
as possible.

controls controls It displays audio control.

loop loop It will start the audio again when it is finished.

muted muted When the page is loaded audio will be automatically muted.

auto
metadata It specifies how the author thinks the audio will be loaded
preload
when the page is ready.
none

src URL It specifies the URL of the audio file.

HTML Video Tag

To embed video in HTML, we use the <video> tag. It contains one or more video sources
at a time using <source> tag.

, there are three video formats supported for HTML video tag:

1. mp4
2. webM
3. ogg

Syntax

<video controls>

<source src="movie.mp4" type="video/mp4">

Your browser does not support the html video tag.

</video>

Attributes of <video> tag

Attribute Value Description

When the page is loaded. It specifies to play video as soon as

autoplay autoplay
possible.

controls controls It displays video control such as play, pause, and stop.

loop loop It will start the video again when it is finished.

muted muted When the page is loaded video will be automatically muted.

poster URL It specifies an image will be shown until video play.

auto
It specifies how the author thinks the video will be loaded when
preload metadata
the page is ready.
none

src URL It specifies the URL of the audio file.

Attribute Value Description

It specifies the width of the video area. The default value of

width pixels
width is ‘auto’.

It specifies the height of the video area. The default value of

height pixels
height is ‘auto’.