UNIT – 1

INTRODUCTION

Web Basics:

What is Internet
Internet is a global network that connects billions of computers across
the world with each other and to the World Wide Web. It uses standard
internet protocol suite (TCP/IP) to connect billions of computer users
worldwide. It is set up by using cables such as optical fibers and other
wireless and networking technologies. At present, internet is the fastest
mean of sending or exchanging information and data between
computers across the world. It is believed that the internet was
developed by "Defense Advanced Projects Agency" (DARPA)
department of the United States. And, it was first connected in 1969.

History of the Internet

The Internet came in the year 1960 with the creation of the first working
model called ARPANET (Advanced Research Projects Agency). It
allowed multiple computers to work on a single network which was their
biggest achievement at that time. ARPANET uses packet switching to
communicate multiple computer systems under a single network. In
October 1969, using ARPANET first message was transferred from one
computer to another. After that technology continues to grow.
How is the Internet Set Up?
The internet is set up with the help of physical optical fiber data
transmission cables or copper wires and various other networking
mediums like LAN, WAN, MAN, etc. For accessing the Internet even, the
2G, 3G, and 4G services and the Wi-Fi require these physical cable
setups to access the Internet. There is an authority named ICANN
(Internet Corporation for Assigned Names and Numbers) located in
the USA which manages the Internet and protocols related to it like IP
addresses.
How Does the Internet Work?
The actual working of the internet takes place with the help of clients and
servers. Here the client is a laptop that is directly connected to the
internet and servers are the computers connected indirectly to the
Internet and they are having all the websites stored in those large
computers. These servers are connected to the internet with the help
of ISP (Internet Service Providers) and will be identified with the IP
address.
Each website has its Domain name as it is difficult for any person to
always remember the long numbers or strings. So, whenever you search
for any domain name in the search bar of the browser the request will be
sent to the server and that server will try to find the IP address from the
Domain name because it cannot understand the domain name. After
getting the IP address the server will try to search the IP address of the
Domain name in a Huge phone directory that in networking is known as
a DNS server (Domain Name Server). For example, if we have the name
of a person and we can easily find the Aadhaar number of him/her from
the long directory as simple as that.
So, after getting the IP address, the browser will pass on the further
request to the respective server and now the server will process the
request to display the content of the website which the client wants. If
you are using a wireless medium of Internet like 3G and 4G or other
mobile data then the data will start flowing from the optical cables and
will first reach towers from there the signals will reach your cell phones
and PCs through electromagnetic waves and if you are using routers
then optical fiber connecting to your router will help in connecting those
light-induced signals to electrical signals and with the help of ethernet
cables internet reaches your computers and hence the required
information.

What is an IP Address?
IP Address stands for Internet Protocol Address. Every PC/Local
machine is having an IP address and that IP address is provided by the
Internet Service Providers (ISPs). These are some sets of rules which
govern the flow of data whenever a device is connected to the Internet.
It differentiates computers, websites, and routers. Just like human
identification cards like Aadhaar cards, Pan cards, or any other unique
identification documents. Every laptop and desktop has its own unique
IP address for identification. It’s an important part of Internet technology.
An IP address is displayed as a set of four-digit like 192.154.3.29. Here
each number on the set ranges from 0 to 255. Hence, the total IP address
range from 0.0.0.0 to 255.255.255.255.
You can check the IP address of your laptop or desktop by clicking on
the Windows start menu -> then right-click and go to network -> in that
go to status and then Properties you can see the IP address. There are
four different types of IP addresses are available:

1. Static IP Address
2. Dynamic IP Address
3. Private IP Address
4. Public IP Address
World Wide Web (WWW)
The world wide web is a collection of all the web pages, and web
documents that you can see on the Internet by searching their URLs
(Uniform Resource Locator) on the Internet. For example,
www.geeksforgeeks.org is the URL of the GFG website, and all the
content of this site like webpages and all the web documents are stored
on the world wide Web. Or in other words, the world wide web is an
information retrieval service of the web. It provides users with a huge
array of documents that are connected to each other by means of
hypertext or hypermedia links. Here, hyperlinks are known as electronic
connections that link the related data so that users can easily access the
related information hypertext allows the user to pick a word or phrase
from text, and using this keyword or word or phrase can access other
documents that contain additional information related to that word or
keyword or phrase. World wide web is a project which is created by
Timothy Berner’s Lee in 1989, for researchers to work together
effectively at CERN. It is an organization, named World Wide Web
Consortium (W3C), which was developed for further development in the
web.
Uses of the Internet
Some of the important usages of the internet are:

• Online Businesses (E-commerce): Online shopping

websites have made our life easier, e-commerce sites like
Amazon, Flipkart, and Myntra are providing very spectacular
services with just one click and this is a great use of the Internet.
• Cashless Transactions: All the merchandising companies
are offering services to their customers to pay the bills of the
products online via various digital payment apps like Paytm,
Google Pay, etc. UPI payment gateway is also increasing day
by day. Digital payment industries are growing at a rate of 50%
every year too because of the INTERNET.
• Education: It is the internet facility that provides a whole
bunch of educational material to everyone through any server
across the web. Those who are unable to attend physical
classes can choose any course from the internet and can have
point-to-point knowledge of it just by sitting at home. High-class
 faculties are teaching online on digital platforms and providing
quality education to students with the help of the Internet.
• Social Networking: The purpose of social networking sites
and apps is to connect people all over the world. With the help
of social networking sites, we can talk, and share videos, and
images with our loved ones when they are far away from us.
Also, we can create groups for discussion or for meetings.
• Entertainment: The Internet is also used for entertainment.
There are numerous entertainment options available on the
internet like watching movies, playing games, listening to music,
etc. You can also download movies, games, songs, TV Serial,
etc., easily from the internet.
Security and the Internet
Very huge amount of data is managed across the Internet almost the
time, which leads to the risk of data breaching and many other security
issues. Both Hackers and Crackers can lead to disrupting the network
and can steal important information like Login Credentials, Banking
Credentials, etc.
Advantages of the Internet
• Online Banking and Transaction: The Internet allows
us to transfer money online through the net banking system.
Money can be credited or debited from one account to the other.
• Education, Online Jobs, Freelancing: Through the
Internet, we are able to get more jobs via online platforms like
LinkedIn and to reach more job providers. Freelancing on the
other hand has helped the youth to earn a side income and the
best part is all this can be done via the INTERNET.
 • Entertainment: There are numerous options for
entertainment online we can listen to music, play games can
watch movies, and web series, and listen to podcasts, YouTube
itself is a hub of knowledge as well as entertainment.
• New Job Roles: The Internet has given us access to social
media, and digital products so we are having numerous new job
opportunities like digital marketing and social media marketing
online businesses are earning huge amounts of money just
because the Internet is the medium to help us to do so.
• Best Communication Medium: The communication
barrier has been removed from the Internet. You can send
messages via email, WhatsApp, and Facebook. Voice chatting
and video conferencing are also available to help you to do
important meetings online.
• Comfort to humans: Without putting any physical effort
you can do so many things like shopping online it can be
anything from stationeries to clothes, books to personal items,
etc. You can book train and plane tickets online.
• GPS Tracking and google maps: Yet another
advantage of the internet is that you are able to find any road in
any direction, and areas with less traffic with the help of GPS on
your mobile.
Disadvantages of the Internet
• Time Wastage: Wasting too much time on the internet
surfing social media apps and doing nothing decreases your
productivity rather than wasting time on scrolling social media
apps one should utilize that time in doing something skillful and
even more productive.
 • Bad Impacts on Health: Spending too much time on the
internet causes bad impacts on your health physical body needs
some outdoor games exercise and many more things. Looking
at the screen for a longer duration causes serious impacts on
the eyes.
• Cyber Crimes: Cyberbullying, spam, viruses, hacking, and
stealing data are some of the crimes which are on the verge
these days. Your system which contains all the confidential data
can be easily hacked by cybercriminals.
• Effects on Children: Small children are heavily addicted to
the Internet watching movies, and games all the time is not good
for their overall personality as well as social development.
• Bullying and Spreading Negativity: The Internet has
given a free tool in the form of social media apps to all those
people who always try to spread negativity with very revolting
and shameful messages and try to bully each other which is
wrong.

WEB BROWSER
What is a Web Browser?
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. Google Chrome, Microsoft Edge,
Mozilla Firefox, and Safari are examples of web browsers.
History of the Web Browsers
The first web browser World Wide Web was invented in the year of 1990
by Tim Berners-Lee. Later, it becomes Nexus. In the year of 1993, a new
browser Mosaic was invented by Mark Andreessen and their team. It was
the first browser to display text and images at a time on the device
screen. He also invents another browser Netscape in 1994. Next year
Microsoft launched a web browser Internet Explorer which was already
installed in the Windows operating system. After this many browsers
were invented with various features like Mozilla Firefox, Google Chrome,
Safari, Opera, etc.
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.
Website Cookies
When we visited any website over the internet our web browser stores
information about us in small files called cookies. Cookies are designed
to remember stateful information about our browsing history. Some more
cookies are used to remember about us like our interests, our browsing
patterns, etc. Websites show us ads based on our interests’ using
cookies.
Some Popular Web Browsers
Here is a list of 7 popular web browsers:
1. Google Chrome:
Developed by Google, Chrome is one of the most widely-used web
browsers in the world, known for its speed and simplicity.
2. Mozilla Firefox:
Developed by the Mozilla Foundation, Firefox is an open-source browser
that is known for its privacy features and customization options.
3. Apple Safari:
Developed by Apple, Safari is the default browser on Mac and iOS
devices and is known for its speed and integration with other Apple
products.
4. Microsoft Edge:
Developed by Microsoft, Edge is the default browser on Windows 10 and
is known for its integration with other Microsoft products and services.
5. Tor Browser:
Developed by The Tor Project, Tor Browser is a web browser that is
designed for anonymous web browsing and is based on Mozilla Firefox.
6. Opera:
Developed by Opera Software, Opera is a web browser that is known for
its speed and built-in VPN feature.
7. Brave:
Developed by Brave Software, Brave is a web browser that is focused
on privacy and security and blocks third-party ads and trackers by
default.

Difference Between World Wide Web and the Internet

The main difference between the World Wide Web and the Internet are:

World Wide Web Internet

All the web pages and web

documents are stored there on the The Internet is a global network of
World wide web and to find all that computers that is accessed by the World
stuff you will have a specific URL for wide web.
each website.

The world wide web is a service. The Internet is an infrastructure.

The world wide web is a subset of The Internet is the superset of the world
the Internet. wide web.

The world wide web is software-

The Internet is hardware-oriented.
oriented.

The world wide web uses HTTP. The Internet uses IP Addresses.
 World Wide Web Internet

The world wide web can be

considered as a book from the The Internet can be considered a Library.
different topics inside a Library.

WHAT IS WEBPAGE
A webpage is a document written in HTML and can be viewed on any web
browser. It is contained within the web server, which can be accessed by
entering the URL for that web page, and once it is loaded, it appears on
the user's web browser. Each webpage is linked with a unique URL; hence
two pages cannot have the same URL.
A webpage may contain text, links for other pages, graphics, videos,
etc. Moreover, it is mainly used to provide information to the user in text,
images, etc.

A webpage is a part of a website; it means a website contains different

web pages. Such as javaTpoint.com is a website, and the page currently
you are accessing is the webpage. It can be understood as an example
of a book. So, a website is like a complete book, and a webpage is like a
page of that book.
The WWW or Internet contains millions of web pages, and daily, a lot is
being added. Tim Berners-Lee developed the first webpage.

Let's understand some basic terms that are used with Webpage:

o Website: A website is a collection of several web pages. These

pages are linked together with hyperlinks. A website has a unique
domain name, and we can access it by entering that domain name
in the URL.
o Search Engine: A search engine is an internet service that helps
users find any information available on the internet. Some examples
of search engines are Google, Yahoo, Bing, It is usually accessed
with the help of Web browser.
o Web Browser: A web browser or simply browser is application
software used to access the internet. Some examples of Web
browsers are Google Chrome, Microsoft Internet Explorer,
Safari, etc. It does two things:

o It connects to a web server on the internet and requests a

page that the user wants to view; once it finds that page, it
displays it on its device.
o It can interpret the set of HTML tags within a page to display
the page in the correct format.

o Webserver: A web server can be understood as a computer that

hosts or provide a website on the internet. It contains webserver
software and component files of a website such as HTML
document, images, CSS stylesheet, and JS files.
o HTML: HTML is an abbreviation of Hyper-Text Markup
Language. A markup language is a computer language that
 specifies how a page should be formatted. With the help of HTML,
one can specify fonts, colors, images, headings, and everything that
he wants to display on a page displayed by the browser.

Characteristics of a Web Page

Following are some characteristics of a Web page:

o A simple webpage can be created very quickly.

o It takes very little time to create a webpage compared to a website.
o A web page and a website should be compatible with any device,
such as Mobile, Desktop, Laptop, etc.
o The search engine provides a web page through a link, and when a
user clicks on that link, it is redirected to the webpage of a website.
o A webpage can have any type of information including videos, and
audios.
o It can be made up of only HTML (Hypertext Markup Language), or
CSS, or JavaScript for dynamic and attractive behavior.

Difference between a Webpage and a Website

Since both Websites and Web pages are related to each other, some
users may use them interchangeably, but they are much different from
each other. The basic difference between them is that webpage is a
single web document, whereas a website is a collection of different
web pages. Here are some more differences between both of them:

WEBSITE WEBPAGE
A website is a collection of A webpage is a single hypertext
different web pages that are linked document.
together with hyperlinks.

It consists of more than one It is a single document that is

webpage. displayed on the user's browser.

To develop a website, developers To develop a webpage,

need more skills and more time developers need basic HTML
compared to a webpage. knowledge and less time.

A website is accessed through its A webpage is accessed through a

domain name, and it does not unique URL with some extension.
include any extension in the URL.

It can contain information for It can contain information for a

different entities, such as single entity, such as currently
Javatpoint.com, which contains viewing a web page containing
information about different information about this page only.
technologies.

It is a little challenging to create a It is very simple to create a

perfect website and requires lots webpage.
of programming.

Some examples of the website are Some examples of Webpages are

Javatpoint.com, Amazon.com, etc. the currently viewing page, contact
page, registration page, the home
page, etc.
How does a Web Page Work?

A simple web page is created using HTML, which is a markup language.

However, we can also use CSS and JavaScript to add more functionalities
and make it more attractive.

It is created using HTML, hence containing different markup tags that

specify how the data should be formatted on screen.

The webpage is contained within the webserver. To load this webpage, a

client sends the request to the server, and generally, the browser is known
as the client, which can request the page on the internet.

The web browser requests the page on the internet. Once it is responded
to by the server, the browser interprets the markup tags and displays them
on the user's screen in the correct format.

The browser sends the request for a page or a file via an HTTP
request. The HTTP is the Hypertext Transfer Protocol, a network
protocol that allows transferring hypermedia documents over the internet
between a browser and server.
Once the request reaches the server, the HTTP server accepts the
request, finds the requested page, and sends it back to the browser
through the HTTP response. If a server is unable to find the requested
page, it returns a 404 response.

Elements of a Webpage

The main element of the webpage is a text file composed of HTML. Apart
from this, a webpage can also have the following elements:

o CSS: The CSS code is used to make the page more interactive and
control its look and feel.
o Scripts: The JavaScript code is included in a webpage to add
interactivity to the page and add more functionalities to it.
o Media: It is used to include media components such as audio,
video, and images.

Although every web page is different from another web, some

components are common to almost all the pages. Some of these
components are given below; you can also relate these elements by the
given image:
1. Name of the Website: Each webpage includes the name of the
website or company, or blog to which it is attached. The name of the
website and the logo are mostly situated at the top-left corner of the
page. The logo may also contain a slogan of the site or a brief
introduction to the site so that visitors can quickly identify what this
site is about. It is one of the important components of the webpage.
The website's name also has a link that can redirect to the home
page of that site. The name of the website usually includes at the
header of the page.
2. Search bar: A search bar is also an important component that
should present on each page of a website or blog. The search blog
allows the visitor to search related information on that website.
3. Navigation Bar: A navigation bar is a component of a webpage
that contains links to some important sections of the website. It helps
the visitors to easily traverse some major sections of the website. It
is placed mainly on the top of the web page or the left side of the
page. When the user clicks on any link given in the navigation bar,
it redirects to the page.
4. Heading of the page: Heading of the page tells the main
information about the page, i.e., what this is all about. The heading
is available on the top of the page, and it is included with the help
of the <h1> tag of HTML.
5. Content of the Page: The content of the page means the
information of the page. As you are visiting this page and reading
this information, all the information contained within this page is
known as the page's content. It may contain below sub-elements:
o Paragraphs: A webpage can have different paragraphs as
per their length. The opening paragraph is crucial on the whole
 page, as it draws the attention of the visitor. If the first
paragraph is not interesting and not related to the topic, a user
may leave the page immediately. To create a paragraph <P>
tag is used in HTML.
o Subheadings: A page may have different subheadings as per
the topic, whether related to information about something or a
website's web page. In HTML from <H2> to <H6> tags are
used for including subheadings. Each page should be divided
into different subheadings to make it easier for the users to
read and understand.
o Images: Each webpage contains images to make its content
more attractive. To include an image, <img> tag is used in
HTML.

6. Feedback or Comment form: Different websites include a

Feedback or Comment form on each webpage. It is used to know
the visitor's views about the information of that page and any other
feedback for the page or site. It lets to know the creator of the page
that if the information is helpful or not.
7. Social Share links: Social share links allow the visitors to share
that webpage with their friends on different social sites such as
Facebook, Linked In, Twitter, etc.
8. Copyright Info: Each webpage must have Copyright information
along with Privacy Policy. This information is available at the end of
the page or on the footer of the page.
9. Go to Top: On most of the pages, a Back to Top button or link is
available. This option helps the users to return to the upper section
of the page.
 10. Advertisement Banner: Whenever you visit any good
website, you see different advertisement banners on each site's
page. These banners are used to displays ads in different places on
a page. These banners are used to provide monitory benefits to the
owner of the website.
11. Previous and Next buttons or links: On most of the
pages, previous and Next buttons are available that help the user
easily navigate to the previous and next page related to the topic. A
page can also have links to other pages.
12. Company Info: On the footer of the page, there is a brief
introduction about the company or website of that page. By this,
visitors get to know about the company and can build trust in it.

Types of a Web page

There are mainly two types of a Web page based on functionality:

o Static Webpage
o Dynamic Webpage

Static Webpage
Static webpages are those webpages that cannot be modified or altered
by the client. These are also known as stationary or flat web pages. They
are displayed on the client's browser in the same format and manner as
they are saved in the webserver. Users can only load the page and read
the information but cannot perform any change on the page.

A static webpage is generally made up of HTML and CSS only.

Dynamic Webpage
As the name suggests, Dynamic webpages are dynamic, which means it
shows different information at different point of time.

The dynamic webpage shows different content each time it is viewed.

There are two types of Dynamic web pages, which are:

o Server-Side Dynamic Webpage: These web pages are

created using Server-side scripting. These pages are changed
when they are visited or viewed. Some examples of server-side
pages are login pages, submission forms, shopping carts, etc.
Various scripting languages such as PHP, ASP.Net, JSP, etc., can
be used for server-side scripting.
o Client-side Dynamic Webpage: These web pages are
created using Client-side scripting. These pages get changed in
response to actions that occur within that page, such as mouse or
keyboard action. Scripting languages such as JavaScript, Dart,
etc., can be used for client-Side scripting.

HTML Basics
What is HTML?

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>My first paragraph. </p>
</body>
</html>

OUTPUT:

My first paragraph.

Basic HTML Tags for Document Structure

Tags Descriptions

Encloses the entire HTML document, serving as the root

<html>
element for all HTML content.

Contains header information about the webpage, including

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

Used within the <head> section to define the title of the

<title> HTML document. It appears in the browser tab or window
and provides a brief description of the webpage’s content.
 Basic HTML Tags for Document Structure

Tags Descriptions

Encloses the visible content of the webpage, such as text,

images, audio, videos, and links. All elements within this
<body>
tag are displayed on the actual webpage when viewed in a
browser.

HTML Headings
The HTML heading tags are used to create headings for the content of a
webpage. These tags are typically placed inside the body tag. HTML
offers six heading tags, from <h1> to <h6>, each displaying the heading
in a different font size.
Syntax:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

EXAMPLE:

<!DOCTYPE html>

<html>
<head>

<title>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:
UNDERSTANGING TAGS

What are HTML Tags?

HTML (HyperText Markup Language) is the standard markup language
used to create the structure and layout of web pages. HTML documents
consist of a series of elements, and these elements are defined using
HTML tags. HTML tags are essential building blocks that define the
structure and content of a webpage. In this article, we'll explore what
HTML tags are, how they work, and provide detailed examples of
common HTML tags.

Understanding HTML Tags

HTML tags are composed of an opening tag, content, and a closing tag.
The opening tag marks the beginning of an element, and the closing
tag marks the end. The content is the information or structure that falls
between the opening and closing tags. Here's the basic structure of an
HTML tag:
<tagname> Content... </tagname>

Let's delve into some commonly used HTML tags:

Tag Name Description

The <html> tag is the root

element of an HTML document.
<html> Tag
It encapsulates the entire
content of the page.
 Tag Name Description

The <head> tag contains meta-

information about the HTML
<head> Tag document, such as the title,
links to stylesheets, and
character set declaration.

The <body> tag encloses the

main content of the HTML
<body> Tag document, including text,
images, links, and other
elements.

Heading tags are used to define

headings in HTML, ranging from
Heading Tags <h1> to <h6>
<h1> as the largest to <h6> as
the smallest.

The <p> tag is used to define

Paragraph Tag <p>
paragraphs of text.

The <a> tag creates hyperlinks.

Anchor Tag <a> The href attribute specifies the
URL of the linked page.
 Tag Name Description

The <img> tag is used to embed

Image Tag <img> images. The src attribute
specifies the image file.

HTML supports both unordered

lists (<ul>) and ordered lists
List Tags <ul>, <ol>, <li>
(<ol>), with list items (<li>)
defining each list item.

The bold tag in HTML is used to

bold Tag <b> specify the bold text without any
extra importance.

Example 1:

<!DOCTYPE html>

<html>

<head>

<title>HTML Tags example</title>

</head>

<body>

<h2>Welcome To GeeksforGeeks</h2>

<p>A computer science portal for geeks. </p>

</body>
</html>

Output: