WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Unit I
Introduction and web design:

Introduction to internet:
History of Internet
In the 1960s, the U.S. Department of Defense (DoD) became interested in developing a new
large-scale computer network. The purposes of this network were communications, program
sharing, and remote computer access for researchers working on defense-related contracts. One
fundamental requirement was that the network be sufficiently robust so that even if some
network nodes were lost to sabotage, war, or some more benign cause, the network would
continue to function. The DoD‘s Advanced Research Projects Agency (ARPA) funded the
construction of the first such network. Because it was funded by ARPA, the network was
named ARPAnet. Because ARPAnet was available only to laboratories and universities that
conducted ARPA-funded research, the great majority of educational institutions were not
connected. As a result, a number of other networks were developed during the late 1970s and
early 1980s, with BITNET (Because It‘s Time Network) and CSNET (Computer Science
Network) among them. A new national network, NSFnet, was created in 1986. It was
sponsored, of course, by the National Science Foundation (NSF). 1992 NSFnet connected more
than 1 million computers around the world. In 1995, a small part of NSFnet returned to being a
research network. The rest became known as the Internet.

Internet
The Internet is a huge collection of autonomous devices (Computers, Printers, Mobile Phones,
Smart TV, etc) connected in a communications network. Internet is actually a network of
networks. The innovation that allows all of these diverse devices to communicate with each
other is a single, low-level protocol: the Transmission Control Protocol/Internet Protocol
(TCP/IP).

WWW and Web 2.0

Web 2.0 describes how the initial version of the web has advanced into a more robust, capable
system. After the initial breakthrough of the initial web capabilities, greater technologies were
developed to allow users to more freely interact and contribute to what resides on the web. The
ability for web users to be greater connected to other web users is at the core of Web 2.0.

The most commonly cited examples of Web 2.0 applications include Facebook, X, Instagram,
or Tiktok. These sites allow users to interact with web pages instead of simply viewing them.

Web Browsers
NANDINI S D, GFGCW, H N PURA Page 1
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

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

Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari are examples of web browsers.

Web server
A web server is software and hardware that uses HTTP (Hypertext Transfer Protocol) and other
protocols to respond to client requests made over the World Wide Web. The main job of a web
server is to display website content through storing, processing and delivering webpages to
users.

What is a web server and examples?

As hardware, a web server is a computer that stores web server software and other files related
to a website, such as HTML documents, images and JavaScript files. When a web browser, like
Google Chrome or Firefox, needs a file that's hosted on a web server, the browser will request
the file by HTTP.

There are many web servers available in the market both free and paid. Some of them are
described below:
1. Apache HTTP server: It is the most popular web server and about 60 percent of the
world’s web server machines run this web server. The Apache HTTP web server was
developed by the Apache Software Foundation. It is an open-source software which means

NANDINI S D, GFGCW, H N PURA Page 2

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

that we can access and make changes to its code and mold it according to our preference. The
Apache Web Server can be installed and operated easily on almost all operating systems like
Linux, MacOS, Windows, etc.

2. Microsoft Internet Information Services (IIS): IIS (Internet Information Services) is a

high performing web server developed by Microsoft. It is strongly united with the operating
system and is therefore relatively easier to administer. It is developed by Microsoft, it has a
good customer support system which is easier to access if we encounter any issue with the
server. It has all the features of the Apache HTTP Server except that it is not an open-source
software and therefore its code is inaccessible which means that we cannot make changes in
the code to suit our needs. It can be easily installed in any Windows device.

3. Lighttpd: Lighttpd is pronounced as ‘Lightly’. It currently runs about 0.1 percent of the
world’s websites. Lighttpd has a small CPU load and is therefore comparatively easier to run.
It has a low memory footprint and hence in comparison to the other web servers, requires less
memory space to run which is always an advantage. It also has speed optimizations which
means that we can optimize or change its speed according to our requirements. It is an open-
source software which means that we can access its code and add changes to it according to
our needs and then upload our own module (the changed code)

4. Jigsaw Server: Jigsaw has been written in the Java language and it can run CGI (common
gateway interference) scripts as well as PHP programs. It is not a full-fledged server and was
developed as an experimental server to demonstrate the new web protocols. It is an open-
source software which means that we can access its code and add changes to it according to
NANDINI S D, GFGCW, H N PURA Page 3
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

our needs and then upload our own module (the changed code). It can be installed on any
device provided that the device supports Java language and modifications in Java.

5. Sun Java System: The Sun Java System supports various languages, scripts, and
technologies required for Web 2.0 such as Python, PHP, etc. It is not an open-source software
and therefore its code is inaccessible which means that we cannot make changes in the code to
suit our needs

Internet Protocol
Internet Protocols are a set of rules that governs the communication and exchange of data over
the internet. Both the sender and receiver should follow the same protocols in order to
communicate the data. In order to understand it better, let’s take an example of a language.
Any language has its own set of vocabulary and grammar which we need to know if we want
to communicate in that language. Similarly, over the internet whenever we access a website or
exchange some data with another device then these processes are governed by a set of rules
called the internet protocols.
Working of Internet Protocol
The internet and many other data networks work by organizing data into small pieces called
packets. Each large data sent between two network devices is divided into smaller packets by
the underlying hardware and software. Each network protocol defines the rules for how its
data packets must be organized in specific ways according to the protocols the network
supports.
Need of Protocols
It may be that the sender and receiver of data are parts of different networks, located in
different parts of the world having different data transfer rates. So, we need protocols to
manage the flow control of data, and access control of the link being shared in the

NANDINI S D, GFGCW, H N PURA Page 4

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

communication channel. Suppose there is a sender X who has a data transmission rate of 10
Mbps. And, there is a receiver Y who has a data receiving rate of 5Mbps. Since the rate of
receiving the data is slow so some data will be lost during transmission. In order to avoid this,
receiver Y needs to inform sender X about the speed mismatch so that sender X can adjust its
transmission rate. Similarly, the access control decides the node which will access the link
shared in the communication channel at a particular instant in time. If not the transmitted data
will collide if many computers send data simultaneously through the same link resulting in the
corruption or loss of data.
What is IP Addressing?
An IP address represents an Internet Protocol address. A unique address that identifies the
device over the network. It is almost like a set of rules governing the structure of data sent
over the Internet or through a local network. An IP address helps the Internet to distinguish
between different routers, computers, and websites. It serves as a specific machine identifier
in a specific network and helps to improve visual communication between source and
destination

Types of Internet Protocol

Internet Protocols are of different types having different uses. These are mentioned below:
1. TCP/IP(Transmission Control Protocol/ Internet Protocol)
2. SMTP(Simple Mail Transfer Protocol)
3. PPP(Point-to-Point Protocol)
4. FTP (File Transfer Protocol)
5. SFTP(Secure File Transfer Protocol)
6. HTTP(Hyper Text Transfer Protocol)
7. HTTPS(HyperText Transfer Protocol Secure)
8. TELNET(Terminal Network)
9. POP3(Post Office Protocol 3)
10.IPv4
11.IPv6
12.ICMP
13.UDP
14.IMAP
15.SSH
16.Gopher

1. TCP/IP(Transmission Control Protocol/ Internet Protocol)

These are a set of standard rules that allows different types of computers to communicate
with each other. The IP protocol ensures that each computer that is connected to the Internet
is having a specific serial number called the IP address. TCP specifies how data is exchanged

NANDINI S D, GFGCW, H N PURA Page 5

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

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. The TCP is also known as a
connection-oriented protocol.
For more details, please refer TCP/IP Model article.

2. SMTP(Simple Mail Transfer Protocol)

These protocols are important for sending and distributing outgoing emails. This protocol
uses the header of the mail to get the email id of the receiver and enters the mail into the
queue of outgoing 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. It helps in setting up some communication server rules.
3. PPP(Point-to-Point Protocol)
It is a communication protocol that is used to create a direct connection between two
communicating devices. This protocol defines the rules using which two devices will
authenticate with each other and exchange information with each other. For example, A user
connects his PC to the server of an Internet Service Provider and also uses PPP. Similarly, for
connecting two routers for direct communication it uses PPP.
4. 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.

5. SFTP(Secure File Transfer Protocol)

SFTP which is also known as SSH FTP refers to File Transfer Protocol (FTP) over Secure
Shell (SSH) as it encrypts both commands and data while in transmission. SFTP acts as an
extension to SSH and encrypts files and data then sends them over a secure shell data stream.
This protocol is used to remotely connect to other systems while executing commands from
the command line.

6. HTTP(Hyper Text Transfer Protocol)

This 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

NANDINI S D, GFGCW, H N PURA Page 6

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

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.
Note: Hypertext refers to the special format of the text that can contain links to other texts.

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

8. TELNET(Terminal Network)
TELNET is a standard TCP/IP protocol used for virtual terminal service given by ISO. This
enables one local machine to connect with another. The computer which is being connected is
called a remote computer and which is connecting is called the local computer. TELNET
operation lets us display anything being performed on the remote computer in the local
computer. This operates on the client/server principle. The local computer uses the telnet
client program whereas the remote computer uses the telnet server program.

9. POP3(Post Office Protocol 3)

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. This is implied between the receiver and the receiver mail server. It can also be
called a one-way client-server protocol. The POP3 WORKS ON THE 2 PORTS I.E. PORT
110 AND PORT 995.

10. IPv4
The fourth and initially widely used version of the Internet Protocol is called IPv4 (Internet
Protocol version 4). It is the most popular version of the Internet Protocol and is in charge of
distributing data packets throughout the network. Maximum unique addresses for IPv4 are
4,294,967,296 (232), which are possible due to the use of 32-bit addresses. The network
address and the host address are the two components of each address. The host address
identifies a particular device within the network, whereas the network address identifies the
network to which the host belongs. In the “dotted decimal” notation, which is the standard for

NANDINI S D, GFGCW, H N PURA Page 7

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

IPv4 addresses, each octet (8 bits) of the address is represented by its decimal value and
separated by a dot (e.g. 192.168.1.1).

11. IPv6
The most recent version of the Internet Protocol, IPv6, was created to address the IPv4
protocol’s drawbacks. A maximum of 4.3 billion unique addresses are possible with IPv4’s
32-bit addresses. Contrarily, IPv6 uses 128-bit addresses, which enable a significantly greater
number of unique addresses. This is significant because IPv4 addresses were running out and
there are an increasing number of devices that require internet access. Additionally, IPv6
offers enhanced security features like integrated authentication and encryption as well as
better support for mobile devices. IPv6 support has spread among websites and internet
service providers, and it is anticipated to gradually displace IPv4 as the main internet
protocol.
For more details, please refer Differences between IPv4 and IPv6 article.

12. ICMP
ICMP (Internet Control Message Protocol) is a network protocol that is used to send error
messages and operational information about network conditions. It is an integral part of the
Internet Protocol (IP) suite and is used to help diagnose and troubleshoot issues with network
connectivity. ICMP messages are typically generated by network devices, such as routers, in
response to errors or exceptional conditions encountered in forwarding a datagram. Some
examples of ICMP messages include:
 Echo Request and Echo Reply (ping)
 Destination Unreachable
 Time Exceeded
 Redirect
ICMP can also be used by network management tools to test the reachability of a host and
measure the round-trip time for packets to travel from the source to the destination and back.
It should be noted that ICMP is not a secure protocol, it can be used in some types of network
attacks like DDoS amplification.

13. UDP
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. Instead, UDP simply sends packets of data to a destination
without any error checking or flow control. UDP is typically used for real-time applications
such as streaming video and audio, online gaming, and VoIP (Voice over Internet
Protocol) where a small amount of lost data is acceptable and low latency is important. UDP
NANDINI S D, GFGCW, H N PURA Page 8
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

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.

14. IMAP
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. This means that the user can access their emails from
multiple devices and the emails will be synced across all devices. IMAP is more flexible
than POP3 (Post Office Protocol version 3) as it allows users to access and organize their
emails on the server, and also allows multiple users to access the same mailbox.

15. SSH
SSH (Secure Shell) is a protocol used for secure remote login and other secure network
services. It provides a secure and encrypted way to remotely access and manage servers,
network devices, and other computer systems. SSH uses public-key cryptography to
authenticate the user and encrypt the data being transmitted, making it much more secure
than traditional remote login protocols such as Telnet. SSH also allows for secure file
transfers using the SCP (Secure Copy) and SFTP (Secure File Transfer Protocol) protocols. It
is widely used in Unix-based operating systems and is also available for Windows. It is
commonly used by system administrators, developers, and other technical users to remotely
access and manage servers and other network devices.

16. Gopher
Gopher is a type of file retrieval protocol that provides downloadable files with some
description for easy management, retrieving, and searching of files. All the files are arranged
on a remote computer in a stratified manner. It is an old protocol and it is not much used
nowadays.

Web design principles &website structures

Web Design principles are one of the most important steps and practices that one must ensure
in order to obtain a professional web design. Principles of web design aim to simplify the
web design process into some set of systems and procedures which when followed, lead to a
professional web design. Now there is no fixed number of Web Design principles and every
designer has their own principles. After all, this is not math but design. However, upon
researching and learning from multiple design professionals, we have come up with a list of
design principles that are more or less consistent among various designers and give the best
results.

NANDINI S D, GFGCW, H N PURA Page 9

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Components of Web Design

There are various steps in the process of web design and multiple components of web design.
The following are the most important components of web design
 Research and Analysis – taking surveys, and presenting information to stakeholders.
 Creating wireframes and prototypes with tools like Figma, Adobe XD, Sketch, etc.
 Working on Layout and Structure, Typography, Color Scheme, etc.
 Creating the final user interface.
 Working on the graphics and visual elements of the design.
 Measuring how designs are performing, taking feedback and iterating.

Principles of Web Design

We discussed earlier, there are different principles of web design and it defers from designer
to designer, but here is a list of Web design principles that the most important and most
commonly used ones.

Balance
Balance simply means visual harmony. Good balance is like trying to create a Visual
Harmony on your website. For example, avoiding one side of the website from having all the
information when the other side has almost nothing. Balance can be measured in three forms:
symmetrically, asymmetrically and radially.
Note:- Next four practices are together called C.R.A.P. (Contrast, Repetition, Alignment,
Proximity)

Alignment
Alignment is the way in which elements are placed on the website. The most common usage
of alignment is with text alignment, making the text written left, center, right or justify align.
But alignment is more than just about text alignment, it is also used to add interest into your
design. designers use alignment to add creativity to their designs. Good alignment ensures
proper readability which in turn ensures good communication of your message.

Proximity
Proximity of elements means how close the elements are to other elements. the primary use
of proximity Is for creating relationships between elements, like objects go together and
distantly related objects are further away from each other. Proximity is the design principle
designers are often referring to when they speak about white space in the design, so
proximity like white space helps your elements breathe and make sections distinct from one
another. bad proximity can have negative effects on your website.

NANDINI S D, GFGCW, H N PURA Page 10

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Repetition
Repetition is basically creating a pattern in user’s mind looking at the user interface.
Repetition is all about the consistency and the unity of the design in trying to create a
cohesion between all the elements. Repetition is probably the most used in naturally intuitive
design principle. It is extremely unlikely that a website doesn’t even have the modest amount
of repetition. The most obvious example of repetition is typography, think about it, every
paragraph is designed the same font size, every H1 heading should look like every other H1
heading and every H2 heading should look like every other H2 heading and so on, this ends
up creating a cohesion. Repetition also helps in creating brand, style, consistency, a better
user experience and of course repetition. Repetition should be consistent throughout a
website’s typography, sets of buttons, stylings, spacings and very importantly header and
footer.

Contrast
Contrast is a design principle where we try and differentiate one or more elements/visuals
from others by differentiating them by help of colors, fonts, typography, repetition,
alignment, or anything else. The idea is to make a particular element or visual to stand out to
the users. In design terms – The visual design principle of contrast refers to the juxtaposition
of two visually different elements. Contrast is when you notice the difference between two
objects in the user interface and that difference emphasizes that they are different. This
distinction might mean that they belong to different categories or have different functions or
behave differently etc.

Accessibility
Accessibility is designing products services (in our case, it’s designing UI/UX) and
environments in an all-inclusive manner. In simpler terms, it means designing for everybody,
keeping in mind the people who might have some special needs and taking care of those
needs in the product experience and interface.
For example you can create a new feature of listening to news in your social media app and
improve its accessibility by also providing the transcript in some commonly used languages
so that the feature becomes accessible to people with hearing issues.

Design thinking
Design thinking is basically a creative way to solve problems. It is the sum of all the
processes that results in designing of a prototype, The most important skills for design
thinking are – having empathy for the users and prototyping.
Design thinking involves five main steps:
 understand the challenge
 defining the problem.
 coming up with solutions

NANDINI S D, GFGCW, H N PURA Page 11

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

 creating a prototype
 test the prototype and iterate.

Design differs from art in that it has to have a purpose. Visually, this functionality is interpreted
by making sure an image has a center of attention, a point of focus.
Step 1: Design. This is the fun part. ...
Step 2: Review. Once the team has had some time to work through the design process. ...
Step 3: Develop. Now that the design is approved, it is time for the website to go to the
developer. ...
Step 4: Test. ...
Step 5: Launch!

Client- server Technologies

The Client-server model is a distributed application structure that partitions task or workload
between the providers of a resource or service, called servers, and service requesters called
clients. In the client-server architecture, when the client computer sends a request for data to
the server through the internet, the server accepts the requested process and deliver the data
packets requested back to the client. Clients do not share any of their resources. Examples of
Client-Server Model are Email, World Wide Web, etc. How the Client-Server Model works
? In this article we are going to take a dive into the Client-Server model and have a look at
how the Internet works via, web browsers. This article will help us in having a solid
foundation of the WEB and help in working with WEB technologies with ease.
 Client: When we talk the word Client, it mean 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 the word Servers, It mean a person or medium that serves
something. Similarly in this digital world a Server is a remote computer which provides
information (data) or access to particular services.
So, its basically the Client requesting something and the Server serving it as long as its present
in the database.

NANDINI S D, GFGCW, H N PURA Page 12

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

How the browser interacts with the servers ? There are few steps to follow to interacts with
the servers a client.
 User enters the URL(Uniform Resource Locator) of the website or file. The Browser then
requests the DNS(DOMAIN NAME SYSTEM) Server.
 DNS Server lookup for the address of the WEB Server.
 DNS Server responds with the IP address of the WEB Server.
 Browser sends over an HTTP/HTTPS request to WEB Server’s IP (provided by DNS
server).
 Server sends over the necessary files of the website.
 Browser then renders the files and the website is displayed. This rendering is done with the
help of DOM (Document Object Model) interpreter, CSS interpreter and JS
Engine collectively known as the JIT or (Just in Time) Compilers.

Advantages of Client-Server model:

 Centralized system with all data in a single place.
 Cost efficient requires less maintenance cost and Data recovery is possible.
 The capacity of the Client and Servers can be changed separately.

NANDINI S D, GFGCW, H N PURA Page 13

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Disadvantages of Client-Server model:

 Clients are prone to viruses, Trojans and worms if present in the Server or uploaded into
the Server.
 Server are prone to Denial of Service (DOS) attacks.
 Data packets may be spoofed or modified during transmission.
 Phishing or capturing login credentials or other useful information of the user are common
and MITM(Man in the Middle) attacks are common.

What are the examples of client-side technologies?

Client-side Languages Example
JavaScript.
VBScript.
HTML (Structure)
CSS (Designing)AJAX.
jQuery etc.

Client side tools & technologies

Client Side Technologies are the tools and languages that run in the user's web browser, rather
than on a web server. They determine how the content will be displayed to the end-user. Some
popular client-side technologies you might have heard of include HTML, CSS, and JavaScript.

What are client-side tools?

In web development, 'client side' refers to everything in a web application that is displayed or
takes place on the client (end user device). This includes what the user sees, such as text,
images, and the rest of the UI, along with any actions that an application performs within the
user's browser.
Netflix is a globally known brand, hence an excellent example of how a client-side model
works.

Server side Scripting:

Server-side scripting is a technique used in web development which involves employing scripts
on a web server which produces a response customized for each user's (client's) request to the
website. Scripts can be written in any of a number of server-side scripting languages that are
available

NANDINI S D, GFGCW, H N PURA Page 14

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

The client-side programming languages are HTML, CSS, and JavaScript. In contrast, server-
side scripting programming languages, including PHP, ColdFusion, Python, ASP.net, Java,
C++, Ruby, C#, A server-side script communicates with the server when it is executed.

Markup languages like HTML and CSS are interpreted by the browser on the client side

Uniform Resource Locators

URL stands for Uniform Resource Locator. A URL is nothing more than the address of a given
unique resource on the Web. In theory, each valid URL points to a unique resource. Such
resources can be an HTML page, a CSS document, an image

There are 3 types of URL’s

1.Canonical URLs. Site owners can use them in case they have duplicate content. ...
2.Callback URLs. They refer to a home destination when users complete a process on an
external system.
3. Vanity URLs. Also known as custom short URLs, they are easy-to-remember web addresses.

MIME
Multipurpose Internet Mail Extensions (MIME) is an Internet standard that extends the format
of email messages to support text in character sets other than .

There are three basic styles in the two types of mime: Oriental, Italian, and French. The Oriental
style is very elaborate, employing wigs, detailed makeup, props, and music. Usually stock
characters familiar to the audience are portrayed. Oriental mime also includes exciting
gymnastic movements.

NANDINI S D, GFGCW, H N PURA Page 15

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

There are two basic types of mime—literal and abstract. Literal mime is the best-known form. It
tells a story, usually humorous, in such a way that the audience knows exactly how to interpret
the plot. In abstract mime there often is no plot at all.

Search engine:
A search engine is a software system that provides hyperlinks to web pages and other relevant
information on the Web in response to a user's query. The user inputs a query within a web
browser or a mobile app, and the search results are often a list of hyperlinks, accompanied by
textual summaries and images. Users also have the option of limiting the search to a specific
type of results, such as images, videos, or news.

Introduction to HTML
The full form of HTML
Hyper Text Markup Language.

HTML
It is a markup language which allows the user to create a web page. A HTML document
includes text, picture and links to other related information or document. It is not case sensitive.
To create a HTML document we need the following,
1. A Text Editor
2. A Web Browser
3. A Graphics Software
4. A Web Server

A text editor or a word processor allows us to create a HTML codes. The text editor should
support ASCII format of storing the data.
Example:- Notepad, WordPad
A web Browser us to test and execute the codes.
Example:- Internet Explorer, Netscape Navigator
To include pictures in the HTML document we can use Graphics software.
Example:- Adobe Photoshop
By using a web server, the document can be made available on the Internet.

What Is HTML5 ?
HTML5 is a specification defined to help web developers by extending HTML/XHTML with
new:
• Semantically rich elements
NANDINI S D, GFGCW, H N PURA Page 16
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

• Deprecating specific attributes

• Introducing new attributes
• Altering some old element and their attributes

Additionally, there is the possibility of using HTML5 attributes to create web pages that are
Web Accessibility Initiative - Accessible Rich Internet Applications (WAI ARIA) enabled.
This refers to make web pages a whole lot more accessible to people with various disabilities.

HTML5 Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>

HTML5 also introduces a number of APIs which helps making it easy to create web
applications, such as:
• 2D drawing API with the canvas element
• API for playing of video and audio (with the video and audio elements) • API that allows a
Web application to register itself for certain protocols or media types
• Editing API in combination with a new global content editable attribute . • Drag & drop API
in combination with a draggable attribute
• API that exposes Browser history and allows pages to add to it to prevent breaking the back
button
• Cross-document messaging with postMessage.
HTML5 seems to have two main areas of focus. Markup of webpage content, which is focused
on the look and feel of web sites and their pages. API ( Application Programming Interface ),
which is focused on building web driven commercial applications. In both these two areas
HTML5 delivers of a lot of brand new syntax, semantics and technology.
New Structural Elements HTML is largely unstructured. Hence in HTML5 a few new
elements have been introduced to try and rectify this weakness.

Features:
 It has introduced new multimedia features that support audio and video controls by using
<audio> and <video> tags.

NANDINI S D, GFGCW, H N PURA Page 17

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

 There are new graphics elements including vector graphics and tags.
 Enrich semantic content by including <header> <footer>, <article>, <section> and
<figure> are added.
 Drag and Drop- The user can grab an object and drag it further dropping it in a new
location.
 Geo-location services- It helps to locate the geographical location of a client.
 Web storage facility which provides web application methods to store data on a web
browser.
 Uses the SQL database to store data offline.
 Allows drawing various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e. <!doctype html>
 Easy character encoding i.e. <meta charset=”UTF-8″>

The HTML5 Structure based elements are:

Element Explanation
<section> A section with web page content, or section of a chapter of a text
within a book
<header> The <header> element can be used to describe the web page header
section. This is not the same as the <head> element
<footer> The <footer> element can be used to describe the web page footer
section
<nav> The <nav> element can be used to encompass web page links. The
websites menu items can be bound within these elements
<article> The <article> element can be used to encapsule a blog article
<aside> The <aside> element can be used to provide extra information for a
block of text. Much like sidebar material in books.
<figure> The <figure> element can be used to annotate main text with
diagrams

Examples For <section> Elements <section>

NANDINI S D, GFGCW, H N PURA Page 18
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<h1>WWW</h1> <a href="/css/">CSS</a> |

<p>The World Wide Web for Nature <a href="/js/">JavaScript</a> |
(WWW) is....</p> <a href="/jquery/">jQuery</a>
</section> </nav>
Examples For <article>Elements
Examples For <article> & <article>
<header>Elements <h1>Google Chrome</h1>
<article> <p>Google Chrome is a free, open-source
<header> web browser developed by Google, released
<h1>Most important heading here</h1> in 2008.</p>
<h3>Less important heading here</h3> </article>
<p>Some additional information here</p>
</header> Examples For <aside>Elements
<p>Lorem Ipsum dolor set amet....</p> <p>My family and I visited The Epcot
</article> center this summer.</p>
<aside>
Examples For <footer>Elements <h4>Epcot Center</h4>
<footer>
<p>Posted by: Hege Refsnes</p> <p>The Epcot Center is a theme park in
<p>Contact information: <a Disney World, Florida.</p> </aside>
href="mailto:[email protected]">
[email protected]</a>.</p> Examples For <figure>Elements
</footer> <figure>
<img src="img_pulpit.jpg" alt="The Pulpit
Examples For <nav> Elements Rock" width="304" height="228">
<nav> </figure>
<a href="/html/">HTML</a> |

An element
It is a fundamental component of the structure of a text document. It identifies how the
information should be presented to the user. An element includes a number of tags.
Example:- heads, tables, paragraphs, lists.

Tag
HTML tags allows us to mark the elements of a file for the browser. They consists of left angle
bracket (<) and a right angle bracket (>).There are two types of tag elements in HTML are
empty tag and a container tag.

An empty tag

NANDINI S D, GFGCW, H N PURA Page 19

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

It represents a formatting option like line break, paragraph setting. Ex: <p>, <br>, <li>

Container tag
It includes a section of text, that specifies a formatting construction for the selected text. It
always includes a start tag and end tag. <body> , <title>

How to execute a HTML program?

1. By using note pad create HTML codes and save it using the extension .html or .htm
2. To view the document open Internet explorer, click File→Open
3. To make modifications in the document, select view→ Source which brings note pad for
use. After making modifications, save the file, go back to Internet Explorer and click on
Refresh button.

Markup tags
1. HTML- It tells the browser that the file contains HTML coded information.
2. Head- It identifies the first part of the document that contains the title.
3. Title – It contains document title and identifies its content in a global context the title is
displayed in the title bar but not in the window.
4. Body- It contains the content of the document displayed within the text area of browser
window.

Basic HTML Document

Every HTML5 document begins with an HTML5 document tag (called document type
declaration): <!DOCTYPE html>.
Although this is not mandatory, it is a good convention to start the document with the below-
mentioned tag.
Please refer to the HTML Doctypes article for more information related to Doctypes.
Below mentioned are the basic HTML5 tags that divide the whole page into various parts
like head, body, etc.

Basic HTML5 Tags for Document Structure

Tags Descriptions

Encloses the entire HTML5 document, serving as the root element for all HTML5
<html>
content.

Contains header information about the webpage, including title, meta tags, and
<head>
linked stylesheets. It is part of the document’s structure but is not displayed on the

NANDINI S D, GFGCW, H N PURA Page 20

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Basic HTML5 Tags for Document Structure

Tags Descriptions

webpage.

Used within the <head> section to define the title of the HTML5 document. It
<title> appears in the browser tab or window and provides a brief description of the
webpage’s content.

Encloses the visible content of the webpage, such as text, images, audio, videos,
<body> and links. All elements within this tag are displayed on the actual webpage when
viewed in a browser.

Example
This example illustrates the Basic HTML structure.
<!DOCTYPE html>
<html>
<head>
<!-- Information about the web page -->
<!--This is the comment tag-->
<title>GeeksforGeeks</title>
</head>
<body>
<!--Contents of the webpage-->
<p>GeeksforGeeks is a online study platform</p>
</body>
</html>

HTML Headings
HTML Heading tag helps us to give headings to the content of a webpage. These tags are
mainly written inside the body tag. HTML provides six heading tags from <h1> to <h6>.
Every tag displays the heading in a different font size.
Syntax
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>

NANDINI S D, GFGCW, H N PURA Page 21

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<h5></h5>
<h6></h6>

Example
This example illustrates the use of 6 heading tags from <h1> to <h6> in HTML.
<!DOCTYPE html>
<html>
<head>
<title>HTML heading tag</title>
</head>
<body>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>
</html>

Output:

HTML Paragraph and Break Elements

HTML <p> tags help us to write paragraph statements on a webpage. They start with
the <p> tag and end with </p>.
HTML <br> tag is used to insert a single line break. It does not have any closing tag. In
HTML, the break tag is written as <br>.

NANDINI S D, GFGCW, H N PURA Page 22

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Syntax
// for Parapgraph
<p> Content... </p>
// for Break
<br>

Example
This example illustrates the use of <p> tag for writing a paragraph statement in HTML.
<!DOCTYPE html>
<html>
<head>
<title>
Example of paragraph and break elements
</title>
</head>
<body>
<p>
HTML stands for HyperText Markup Language.<br>
It is used to design web pages using a markup
language.<br>HTML is a combination of Hypertext
and Markup language.<br>Hypertext defines the
link between web pages.<br>A markup language
is used to define the text document within the
tag which defines the structure of web pages.
</p>
</body>
</html>

Output

HTML Horizontal Line

HTML <hr> tag is used to break the page into various parts, creating horizontal margins with
the help of a horizontal line running from the left to right-hand side of the page. This is also
an empty tag and doesn’t take any additional statements.

NANDINI S D, GFGCW, H N PURA Page 23

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Syntax
<hr>

Example
This example illustrates the use of the <hr> tag for the horizontal line in HTML.
<!DOCTYPE html>
<html>
<head>
<title>HTML <hr> tag</title>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<p>
A Computer Science portal <br>
A Computer Science portal <br>
A Computer Science portal <br>
</p>
<hr>
<p>
A Computer Science portal <br>
A Computer Science portal <br>
A Computer Science portal <br>
</p>
<hr>
<p>
A Computer Science portal <br>
A Computer Science portal <br>
A Computer Science portal <br>
</p>
<hr>
</body>
</html>

Output

NANDINI S D, GFGCW, H N PURA Page 24

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

HTML Images
The <image> tag is used to insert an image into our web page. The source of the image to be
inserted is put inside the <img src=”source_of_image“> tag.
Syntax
<img src="geeks.png">
Example
This example illustrates the use of the <img> tag for inserting the images in HTML.
<!DOCTYPE html>
<html>
<head>
<title>HTML img tag</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png">
</body>

</html>

HTML Comments
HTML comments are ignored by browsers if we comment in HTML code then codes are more
readable to us. In lots of scenarios, we comment out a few elements for debugging purposes.

What are HTML Comments?

HTML comments are annotations or notes added in an HTML code that are not displayed by
the browser. Just like comments in other languages HTML comments also serve the same
purpose of providing code explanations, reminders, or instructions for developers who are
collaborating on the same project.
HTML comments are not displayed on browsers while rendering the page making them useful
to add additional information without affecting the appearance of the webpage. You can use
the HTML comment tag to comment in the html code.
NANDINI S D, GFGCW, H N PURA Page 25
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Ways to Comment in HTML

There are two ways to comment in HTML. Each type of comment can be used to add comments
in HTML.
Comment Descriptions Syntax

The single-line comment is given inside the ( <!– comment <!– comment
Single-line
–> ) tag. –>

<!– Multi
It follows the syntax of a single-line comment by adding
Multi-line Line
multiple lines in the comment.
Comment –>

Formatting togs in HTML:

HTML Text Formatting provides various tags for text formatting to enhance the visual
presentation of content on a webpage. You can make your text bold, italic, etc. by using some
HTML tags.
Text Formatting can be categorized into 2 techniques, i.e., the logical tag where the tags
denote the logical or semantic value of the text, and the Physical tag, which denotes the visual
appearance of the text.

HTML Formatting Elements

Tags Descriptions

<i> Showcases italicized text.

<small> Renders text in a smaller font size.

<ins> Highlights added or inserted text.

<sub> Creates subscript text.

<strong> Emphasizes text with importance, often in bold.

<b> Displays text in a bold format.

NANDINI S D, GFGCW, H N PURA Page 26

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Tags Descriptions

<mark> Accentuates text with a background highlight.

<del> Strikes through text to signify deletion.

Adds emphasis to text, commonly styled as

<em>
italic.

<sup> Formats text as superscript.

Example: This example display text in HTML strong, small, and Highlight formatting
respectively.
<!DOCTYPE html>
<html>
<head>
<title>
HTML text formatting
</title>
</head>
<body>
<h2>Welcome To GFGCW</h2>
<!--Text in Strong-->
<strong>Hello GFGCW </strong>
<br>
<!--Text in small-->
<small>Hello GFGCW </small>
<br>
<!--Text in Highlight-->
<mark>Hello GFGCW </mark>
</body>
</html>

Output:

NANDINI S D, GFGCW, H N PURA Page 27

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Making text Bold or Strong

We can make the text bold using the <b> tag. The tag uses both opening and closing tags. The
text that needs to be made bold must be within <b> and </b> tag. We can also use
the <strong> tag to make the text strong, with added semantic importance. It also opens with
<strong> and ends with </strong> tag.
Example 1: The below example describes the formatting of the text to normal, bold, & strong.
<!DOCTYPE html>
<html>
<head>
<title>HTML bold Text</title>
</head>
<body>
<!--Normal text-->
<p>Hello Gfgcw</p>
<!--Text in Bold-->
<p>
<b>Hello Gfgcw </b>
</p>

<!--Text in Strong-->
<p>
<strong>Hello Gfgcw </strong>
</p>
</body>
</html>

Output:

NANDINI S D, GFGCW, H N PURA Page 28

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Making text Italic or emphasize

The <i> tag is used to italicise the text. It opens with <i> and ends with </i>
tag. The <em> tag is used to emphasize the text, with added semantic importance. It opens
with <em> and ends with </em> tag.
Example 2: The below example describes the formatting of the text to Italic or emphasize.
<!DOCTYPE html>
<html>
<head>
<title>HTML italic formatting</title>
</head>
<body>
<!--Normal text-->
<p>Hello Gfgcw </p>
<!--Text in Italics-->
<p>
<i>Hello Gfgcw </i>
</p>
<!--Text in Emphasize-->
<p>
<em>Hello Gfgcw </em>
</p>
</body>
</html>

Output:

NANDINI S D, GFGCW, H N PURA Page 29

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Highlighting a Text
It is also possible to highlight a text in HTML using the <mark> tag. It has an opening tag
<mark> and a closing tag </mark>.
Example: The below example describes the use of the <mark> tag that is used to define the
marked text.
<!DOCTYPE html>
<html>
<head>
<title>Highlight the text in HTML</title>
</head>
<body>
<!--Text in Normal-->
<p>Hello Gfgcw </p>
<!--Text in Highlight-->
<p>
<mark>Hello Gfgcw </mark>
</p>
</body>
</html>

Output:

Making a text as Subscript or Superscript

The <sup> element is used to superscript a text and the <sub> element is used to subscript a
text. They both have an opening and a closing tag.
Example: The below example describes the use of the <sup> & <sub> tags that are used to
add the superscript & subscript texts to the HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Superscript and Subscript</title>
</head>
<body>
NANDINI S D, GFGCW, H N PURA Page 30
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<!--Text in Normal-->
<p>Hello GFGCW</p>
<!--Text in Superscript-->
<p>Hello
^GFGCW
</p>
<!--Text in Subscript-->
<p>Hello
_GFGCW
</p>
</body>
</html>

Output:

Making text smaller

The <small> element is used to make the text smaller. The text that needs to be displayed
smaller should be written inside <small> and </small> tag.
Example: The below example describes the use of the <small> tag that is used to set small
font sizes.
<!DOCTYPE html>
<html>
<head>
<title>HTML <small></title>
</head>
<body>
<!--Text in Normal-->
<p>Hello Gfgcw</p>
<!--Text in small-->
<p>
<small>Hello Gfgcw </small>
</p>
NANDINI S D, GFGCW, H N PURA Page 31
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

</body>
</html>

Output:

Striking through the text

The <del> element is used to strike through the text marking the part as deleted. It also has an
opening and a closing tag.
Example: The below example describes the use of the <del> tag that is used to mark a
portion of text which has been deleted from the document.
<!DOCTYPE html>
<html>
<head>
<title>HTML striking </title>
</head>
<body>
<!--Text in Normal-->
<p>Hello gfgcw </p>
<!--Text in Delete-->
<p> <del>Hello gfgcw </del> </p>
</body>
</html>

Output:

Adding a Text

NANDINI S D, GFGCW, H N PURA Page 32

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

The <ins> element is used to underline a text marking the part as inserted or added. It also has
an opening and a closing tag.
Example: This example describes the use of the <ins> tag to used to specify a block of
inserted text.
<!DOCTYPE html>
<html>
<head>
<title>Inserting the text in HTML</title>
</head>
<body>
<!--Text in Normal-->
<p>Hello gfgcw</p>
<!--Text in Insert-->
<p>
<ins>Hello gfgcw </ins>
</p>
</body>
</html>

Output:

HTML5 page Layout and Navigation concepts:

HTML5 layout refers to the structure of a web page, achieved through elements like
<header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>. These elements help
organize content, define the page’s sections, and enhance accessibility and SEO.

NANDINI S D, GFGCW, H N PURA Page 33

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<div class = "header"> ..... </div>

<div class = "section"> ..... </div>
<div class = "footer"> ..... </div>

Page Layout Information:

 Header: The part of the front end which is used at the top of the page. <header> tag is
used to add a header section on web pages.
 Navigation bar: The navigation bar is the same as the menu list. It is used to display the
content information using hyperlinks. <nav> tag is used to add the nav section(nav
elements) in web pages.
 Index / Sidebar: It holds additional information or advertisements and is not always
necessary to be added to the page.
 Content Section: The content section is the central part where content is
displayed.<main> tag is used to add the main content of the webpages.
 Footer: The footer section contains the contact information and other query related to web
pages. The footer section is always put on the bottom of the web pages. The <footer> tag
sets the footer on web pages.

HTML5 Semantics:
HTML tags are classified into two types.
 Semantic
 Non-Semantic

Semantic Elements:
Semantic elements have meaningful names that tell about the type of content. For example
header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below
which make the code easier to write and understand for the developer as well as instruct the
browser on how to treat them.
 <article>
NANDINI S D, GFGCW, H N PURA Page 34
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>

Details and Summary:

“details” defines additional details that the user can hide or view. “summary” defines a visible
heading for a “details” element.
<!DOCTYPE html> </style>
<html> </head>

<head> <body>
<title>Detail and summary Tag</title> <details>
<style> <summary class="GFGCW">
.GFG { GFGCW, H N Pura
Color:#006400; </summary>
font-size:50px; <p>Computer Science portal
Text-align:none; where you can learn good
margin-bottom:0px; programming.
} </p>
p{ </details>
font-size:25px; </body>
text-align:none;
margin-top:0px; </html>
}

NANDINI S D, GFGCW, H N PURA Page 35

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Main:
It defines the main content of the document. The content inside the main tag should be
unique.
<!DOCTYPE html> White House etc
<html> </p>

<head> <article>
<title>main Tag</title> <h1>Rashtrapati Bhavan</h1>
<style> <p>
h1 { It is the home of
color:#006400; the President of India.
} </p>
p{ </article>
font-size:25px;
text-align:none; <article>
margin-top:0px; <h1>The White House</h1>
} <p>
</style> It is the home of the
</head> President of United
States of America.
<body> </p>
<main> </article>
<h1>Important Residences</h1> </main>
<p> </body>
A few of them are
Rashtrapati Bhavan, </html>

NANDINI S D, GFGCW, H N PURA Page 36

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Mark:
It is used to highlight the text.
<!DOCTYPE html>
<html> <body>
<h1>mark tag</h1>
<head> <p>
<title>mark Tag</title> GFGCW is a
<style> <mark>Computer Science</mark>
h1 { portal
color:#006400; </p>
} </body>
</style>
</head> </html>

List and types of List:

NANDINI S D, GFGCW, H N PURA Page 37

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

HTML supports three types of lists. They are

• Unordered list – An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag. The list items are marked with bullets typically small black circles
• Ordered list – An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
• Definition lists - A definition list is a list of terms, with a description of each term.
Definition list values appear within <dl> and </dl> tag. It consists of two parts: Definition Term
<DT> and the Definition Description <DD>
Example : Illustration of unordered lists and Illustration of ordered lists and Illustration of
Definition lists
<html> <li>Aishwarya Rai
<body> <li>Rakshitha
<p><b> My Favorite Actors are</b><p> <li>Karina Kapoor
<ul type="circle"> </OL>
<li> Mammuti <p><b> Components of Computer </b></p>
<li>Sudeep <dl>
<li>Salman Khan <dt> Keyboard
<li> Vijay <dd> It is an input device
</ul> <dt> Printer
<p><b> My Favorite Actress are</b><p> <dd> It is an output device
<OL type="A"> </dl> </body></html>
<li>Anushka shetty

NANDINI S D, GFGCW, H N PURA Page 38

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Table Layout
Tables are very useful to arrange in HTML and they are used very frequently by almost all web
developers. Tables are just like spreadsheets and they are made up of rows and columns. Tables
are defined with the <table> tag in HTML.A table is divided into rows with the <tr> tag where
tr stands for table row. A row is divided into data cells with the <td> tag, where td stands for
table data. A row can also be divided into headings with the <th> tag where th stands for table
heading. The <td> elements are the data containers in the table. The <td> elements can contain
all sorts of HTML elements like text, images, lists, other tables, etc.
Inside <table> element the table is written out row by row. A row is contained inside a
<tr> tag which stands for table row. And each cell is then written inside the row element using a
<td> tag which stands for table data.
Syntax:
Table Heading - The <th> Element:
Table heading can be defined using <th> element. This tag will be put to replace <td> tag which
is used to represent actual data.
Example
<html> <td> 20%</td>
<table border="5"> </tr>
<th> RollNo </th> <tr>
<th> Name </th> <td> BCM202301</td>
<th> Class </th> <td> Antony</td>
<th> Marks </th> <td> I BCOM</td>
<tr> <td> 50%</td>
<td> BCM202301</td> </tr>
<td> Amar</td> <tr>
<td> I BCOM</td> <td> BCM202309</td>
<td> 90%</td> <td> Sona</td>
</tr> <td> I BBA</td>
<tr> <td> 99%</td>
<td> BCM202301</td> </tr>
<td> Akbar</td> </table>
<td> I BCOM</td> </html>

NANDINI S D, GFGCW, H N PURA Page 39

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Table Cellpadding and Cellspacing:

There are two attribiutes called cellpadding and cellspacing which you will use to adjust the
white space in your table cell. Cellspacing defines the width of the border, while cellpadding
represents the distance between cell borders and the content within
You will use colspan attribute if you want to merge two or more columns into a single column.
Similar way you will use rowspan if you want to merge two or more rows.
Example:
<html> <tr><td colspan="3">Row 3 Cell
<body> 1</td></tr>
<table border="1"> </table></body></html>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell
3</td></tr>

Form
Web form is container of different controls which is displaying on web pages. By using <form>
tag we can create different form tools with its attributes.
Design a simple form
<html> <textarea rows="5" cols="50"
<body> name="description"> Enter description
<form action="Login" method="get"> here...
ENTER YOUR NAME: </textarea>
<input type="text" name="first_name" /> <p>
<br> Select Gender
SET PASSWORD: <br>
<input type="Password" name="last_name" <input type="radio" name="gender"
/> value="Male" /> Male <br>
<br> <input type="radio" name="gender"
Address: value="Female" /> Female<br>
<input type="radio" name="gender"
value="Female" /> SheMale<br>
NANDINI S D, GFGCW, H N PURA Page 40
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<p> <option value="Maths"

Select your hobbies from the list <br> selected>BBA</option>
<input type="checkbox" name="Write" <option value="Physics">BCom</option>
value="on"> Writing<br> <option value="Chemistry">BSc</option>
<input type="checkbox" name="Sing" </select>
value="on"> Singing<br> <p>
<input type="checkbox" name="Play" <input type="file" name="fileupload"
value="on"> Playing<br> accept="image/*" />
<input type="checkbox" name="Draw" <input type="Reset" value="Clear" />
value="on"> Drawing <br> <input type="submit" value="Submit" />
<p> </form>
Choose your course <br> </body>
<select name="dropdown"> </html>

Multimedia basics
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. Multimedia is the presentation
of text, pictures, audio, and video with links and tools that allow the user to navigate,
engage, create, and communicate using a computer. Multimedia refers to the computer-
assisted integration of text, drawings, still and moving images(videos) graphics, audio,
NANDINI S D, GFGCW, H N PURA Page 41
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

animation, and any other media in which any type of information can be expressed, stored,
communicated, and processed digitally.

Images
Images are very important to beautify as well as to depict many concepts on your web page. It is
true that one single image is worth than thousands of words. So as a Web Developer you should
have clear understanding on how to use images in web pages. This is done in HTML using the
<img> element
Syntax:
<img src="image URL" attr_name="attr_value"...more attributes >
Attributes of <img> tag:
Following are the attributes for <img> tag.
• width: sets width of the image. This will have a value like 10 or 20%etc.
• height: sets height of the image. This will have a value like 10 or 20% etc.
• border: sets a border around the image. This will have a value like 1 or 2 etc.
• src: specifies URL of the image file.
Example:
<!DOCTYPE html>
<html>
<body>
<h1> III BCA STUDENTS 2022-23</h1>
<img src="D:\Photos\Studentspic.jpg"
alt="Team Members" width="700"
height="350">
</body>
</html>

Output:

Use of Frames
Frames divide a browser window into several pieces or panes, each pane containing a separate
HTML document. One of the key advantages that frames offer is that you can then load and
reload single panes without having to reload the entire contents of the browser window. A
collection of frames in the browser window is known as a frameset. The window is divided up
into frames in a similar pattern to the way tables are organized into rows and columns. The
simplest of framesets might just divide the screen into two rows, while a complex frameset
could use several rows and columns.
To create a frameset document, first you need the <frameset> element, which is used instead of
the <body> element. The frameset defines the rows and columns your page is divided into,

NANDINI S D, GFGCW, H N PURA Page 42

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

which in turn specify where each individual frame will go. Each frame is then represented by a
<frame> element.
The <frameset> Element:
• The <frameset> tag replaces the <body> element in frameset documents.
• The <frameset> tag defines how to divide the window into frames.
• Each frameset defines a set of rows or columns. If you define frames by using rows then
horizontal frames are created. If you define frames by using columns then vertical frames are
created.
• The values of the rows/columns indicate the amount of screen area each row/column will
occupy.
• Each frame is indicated by <frame> tag and it defines what HTML document to put into the
frame.
The <frameset> Element Attributes:
Following are important attributes of <frameset> and should be known to you to use frameset.
• cols: specifies how many columns are contained in the frameset and the size of each column.
You can specify the width of each column in one of four ways:
o Absolute values in pixels. For example to create three vertical frames, usecols="100,
500,100".
o A percentage of the browser window. For example to create three vertical frames, use
cols="10%, 80%,10%".
o Using a wildcard symbol. For example to create three vertical frames, usecols="10%, *,10%".
In this case wildcard takes remainder of the window.
o As relative widths of the browser window. For example to create three vertical frames, use
cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the
browser window. Here the window is divided into sixths: the first column takes up half of the
window, the second takes one third, and the third takes one sixth.
• rows: attribute works just like the cols attribute and can take the same values, but it is used to
specify the rows in the frameset. For example to create two horizontal frames, use rows="10%,
90%". You can specify the height of each row in the same way as explained above for columns.
• border: attribute specifies the width of the border of each frame in pixels. For example
border="5". A value of zero specifies that no border should be there.
• frameborder: specifies whether a three-dimensional border should be displayed between
frames. This attrubute takes value either 1 (yes) or 0 (no). For example frameborder="0"
specifies no border.
• framespacing: specifies the amount of space between frames in a frameset. This can take any
integer value. For example framespacing="10" means there should be 10 pixels spacing
between each frames.
The <frame> Element:
The <frame> element indicates what goes in each frame of the frameset. The <frame>
element is always an empty element, and therefore should not have any content, although each

NANDINI S D, GFGCW, H N PURA Page 43

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

<frame> element should always carry one attribute, src, to indicate the page that should
represent that frame.
The <frame> Element Attributes:
Following are important attributes of and should be known to you to use frames.
• src: indicates the file that should be used in the frame. Its value can be any URL. For example,
src="/html/top_frame.htm" will load an HTML file avaible in html directory.
• name: attribute allows you to give a name to a frame. It is used to indicate which frame a
document should be loaded into. This is especially important when you want to create links in
one frame that load pages into a second frame, in which case the second frame needs a name to
identify itself as the target of the link.
• frameborder: attribute specifies whether or not the borders of that frame are shown; it
overrides the value given in the frameborder attribute on the <frameset> element if one is given,
and the possible values are the same. This can take values either 1 (yes) or 0 (no).
Example:
<html>
<head>
<title>Sidebar.html</title></head>
<frameset cols="25%,50%,25%">
<frameset rows="50%,50%">
<frame src="time.html">
<frame src="address.html">
</frameset>
<frame src="college.html">
<frame src="Link.html">
</frameset>
</html>

Map tag
The <map> tag is to define the map-image on the user interface which is clickable.
The <map> required the <img> tag that helps the relation between the image and map.

NANDINI S D, GFGCW, H N PURA Page 44

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

The <map> element contains a number of <area> elements that define the clickable areas in
the image map.
Syntax:
<map name=""> </map>

Embedding audio and video clips on web pages

Audio clips
To embed audio in HTML, we use the <audio> tag. 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 in three audio formats – MP3, WAV, OGG. Only Safari browser doesn’t support OGG
audio format.
Syntax:
<audio>
<source src="file_name" type="audio_file_type">
</audio>
Attributes of <audio> tag
Attribute Value Description

autoplay autoplay When the page is loaded. It specifies to play audio as soon 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
It specifies how the author thinks the audio will be loaded when the
preload metadata
page is ready.
none

src URL It specifies the URL of the audio file.

Example:
<!DOCTYPE html> <head>
<html> <title>Page Title</title>
NANDINI S D, GFGCW, H N PURA Page 45
WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

</head> Output:
<body>
<h2>Click play button to play audio</h2>
<audio src="./test.mp3" controls></audio>
</body>
</html>

Video clips
To embed video in HTML, we use the <video> tag. It contains one or more video sources at a
time using <source> tag. It supports MP4, WebM, and Ogg in all modern browsers. Only Ogg
video format doesn’t support in Safari browser.
Syntax
<video>
<source src="file_name" type="video_file_type">
</video>
Attributes of <video> tag
Attribute Value Description

autoplay autoplay When the page is loaded. It specifies to play video as soon as 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 the
preload metadata
page is ready.
none

src URL It specifies the URL of the audio file.

It specifies the width of the video area. The default value of width is
width pixels
‘auto’.

NANDINI S D, GFGCW, H N PURA Page 46

WEB TECHNOLOGIES (6TH SEM BSc)(NEP)

Attribute Value Description

It specifies the height of the video area. The default value of height is
height pixels
‘auto’.

Example:
In this example, we will add a video to our webpage. To add video, we will use the <video>
tag defining source using <source> tag. Create an HTML file just like an audio file example
and save the video file in the same directory. Suppose a video file name test.mp4 save in the
same directory where your HTML file was saved.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play video</h2>
<video src="./test.mp4" controls></video>
</body>
</html>

Output:

NANDINI S D, GFGCW, H N PURA Page 47