Chapter Two

World Wide Web

What is the World Wide Web
(WWW)?
 Definition:
 World Wide Web, which is also known as a Web, is
a collection of websites or web pages stored in
web servers and connected to local computers
through the internet.
 Globalcollection of linked documents and
resources.
 Accessed using browsers via the Internet.
 Key Components:
 Web pages (HTML).
 Hyperlinks (connecting pages).
 HTTP/HTTPS (data transfer protocols).
History of the World Wide Web:
 The World Wide Web was invented by a
British scientist, Tim Berners-Lee in 1989.
 Hewas working at CERN at that time.
Originally, it was developed by him to fulfil
the need of automated information sharing
between scientists across the world, so that
they could easily share the data and results of
their experiments and studies with each
other.
URL
 URLs And Their Meaning
 To find information, a user needs to specify the correct web server and a web
page on the server.
 Users enter a URL, which is a string of characters divided into parts by
punctuation characters.
 URL Components:
 The first part specifies the protocol for contacting the web server.
 The second part indicates the domain name of the server to contact.
 The third part identifies the specific web page on the server to request.
 URL Structure:
 The string "://" separates the protocol from the server name.
 A slash ("/") further separates the server name from the name of a particular
web page. 4
Conventional Web Pages & Static Content

 Static Content:
 Fixed content, doesn't change for different users.
 Static website is the basic type of website that is
easy to create. You don't need the knowledge of
web programming and database design to create
a static website. Its web pages are coded in
HTML.
 Examples: Company sites, simple blogs.
 Advantages:
 Easy to maintain.
 Fast to load (minimal processing).
Accessing a Page with Changeable
Content
 Dynamic Web Pages:
 Content varies by user input or time.
 Requires server-side processing.
 Dynamic website is a collection of dynamic web pages whose
content changes dynamically. It accesses content from a
database or Content Management System (CMS).
 Dynamic website uses client-side scripting or server-side
scripting, or both to generate dynamic content.
 Client side scripting generates content at the client computer
on the basis of user input.
 Steps:
 Browser request.
 Server processes data.
Imagine you’re shopping online for a new pair of
sneakers. As you browse, the website starts showing you
shoe options that match your previous searches or even
your current weather conditions.
How a Browser Accesses a Static Web
Page
 Process:
 User enters URL or clicks a link.
 DNS lookup to find server IP.
 Browser sends an HTTP request.
 Server responds with HTML file.
 Browser renders the page.
 Static page is displayed.
Accessing a Page with Changeable
Content
 Dynamic Web Pages:
 Content varies by user input or time.
 Requires server-side processing.
 Steps:
 Browser request.
 Server processes data.
 Server sends back a customized page.
Personalized Web Pages & Dynamic
Content
 Personalized Content:
 Pages customized based on user data (e.g.,
preferences).
 Example: Recommended products in an
online store.
 Technologies:
 Server-side scripts (PHP, Python).
 Databases (MySQL, MongoDB) for user data.
Frames Within a Browser
Window
 Frames:
 Multiple documents in one browser window.
 Each frame operates independently.
 Example:
 Topmenu and bottom content displayed
together.
User Interaction with Forms

 Forms:
 Allowusers to submit information (e.g.,
logins, feedback).
 Key Elements:
 Input
fields (text, radio buttons,
checkboxes).
 Submit button (to send data to server).
Shopping Carts & Cookies

 Shopping Carts:
Stores selected items for checkout.
 Cookies:
Small data files on user devices.
Usedfor session management (e.g.,
remembering cart items).
Social Networking & Personal
Publishing
 Social Networks:
 Platforms like Facebook, Instagram.
 Enable
interaction, sharing, and
messaging.
 Personal Publishing:
 Blogs, websites for self-expression.
 Examples: WordPress, Medium.
 The Evolution of the Web
 Web 1.0 (1990-2000)
 Web 1.0, also known as the read-only web, was the
first generation of the Internet.
 Itwas characterized by static web pages, one-way
communication, and limited user interaction.
 Content on Web 1.0 sites was typically created by a
small number of people, and users were primarily
consumers of information.

18
 The Evolution of the Web
 Example of Web 1.0: Britannica Online Encyclopedia
 Launched in 1994, Britannica Online was one of the first
major online encyclopedias.
 Itprovided users with access to the full text of the
Encyclopedia Britannica, as well as additional features such
as images, audio, and video.
 BritannicaOnline was a popular resource for students and
researchers, but it was a static website that did not allow for
much user interaction.

19
 The Evolution of the Web
 Web 2.0 (2000-present)
 Web 2.0, also known as the social web, is the
second generation of the internet.
 Itis characterized by dynamic web pages, two-way
communication, and user-generated content.
 Web 2.0 sites allow users to interact with each other
and create their own content, such as blogs, social
media posts, and videos

20
 The Evolution of the Web
 Example of Web 2.0: Facebook
 Launched in 2004, Facebook is one of the most
popular social media platforms in the world.
 It allows users to create profiles, connect with
friends, share content, and interact with each other.
 Facebook is a dynamic website that is constantly
being updated with new content from users.

21
 The Evolution of the Web
 Web 3.0 (emerging)
 Web 3.0, also known as the semantic web, is the third
generation of the internet.
 Itis still in its early stages of development, but it is
envisioned to be a more intelligent and interconnected web.
 Web 3.0 will use artificial intelligence and machine learning
to make the web more personalized and relevant to users.
 Itwill also make it easier for users to find and access the
information they need.

22
 The Evolution of the Web
 Example of Web 3.0: Brave browser
 Launched in 2019, Brave is a web browser that is
built on the Brave blockchain.
 Braveusers can earn rewards for viewing ads, and
they can also use their BAT tokens to tip content
creators.
 Braveis a decentralized application that is not
controlled by any single company.

23
 The Evolution of the Web
Characterist
Web 1.0 Web 2.0 Web 3.0
ic
Web page type Static Dynamic Semantic
Communication One-way Two-way Peer-to-peer
Content Intelligent and
Limited User-generated
creation contextual
User interaction Limited High Immersive
Artificial
intelligence,
Key HTML, CSS,
HTML, CSS machine
technologies JavaScript 24

learning,
blockchain
Anatomy of a Web Page

 HTML Structure:
 Head: Metadata, stylesheets, scripts.
 Body: Visible content (text, images, videos).
 Key Elements:
 Header: Logo, navigation.
 Main Content: Articles, blog posts.
 Footer: Contact info, links.
Conti………
 The anatomy of a web page refers to the different elements
that make up a web page and how they are organized to
provide a user-friendly experience.
 Common elements of web page anatomy include the header,
hero section, body content, sidebar, and footer.
 Each element of a web page has a specific purpose and
contributes to the overall user experience.
 The design and placement of elements on a web page can
impact how users interact with the page.
 By understanding the anatomy of a web page, designers and
developers can create pages that are both visually appealing
26
and easy to use.
Conti………
1. Header
 Header is the top part of the webpage.
 Header provides the core navigation around the website.
 Headers are also referred to as site menus and are positioned as an
element of primary navigation in the website layout.
 Headers may include the following elements:
 Logo,Call-to-action button, Links to basic categories of website
content
 Links to the social networks, Basic contact information, Language
switcher
 Search field, Subscription field or button, Links to interaction with the
product
27
Conti………
 Not all of the mentioned elements should be included in one
web page header.
 The more objects attract the user's attention, the harder it is to
concentrate on the vital ones.
 Designers, sometimes together with marketing specialists,
decide on the strategically important options and pick them up
from the list or add the others.

28
Conti………
2. CTA Button
 A call-to-action (CTA) button is an element of a user interface that
encourages users to take a certain action.
 The goal of a CTA button is to turn passive users into active ones.
 CTA buttons are typically bold and contain microcopy that explains the
main action for the page.
 Effective CTA buttons are easy to notice and encourage users to take
action.
 If CTA buttons are not clearly defined, users are likely to leave the page
without taking action.

29
Conti………

30
Conti………
 Hero Section
 The hero section is the above-the-fold (pre-scroll) area of a web page
that contains a strong visual hook.
 The visual hook can be a hero image, slider, catchy piece of typography,
video, or anything else that attracts visitors' attention and conveys a
message.
 The visual hook can be a product photo, theme image, landscape,
device, building, abstract model, or composition.
 The main goal of the hero section is to instantly grab attention and set a
quick visual, emotional, and informative connection with users, engaging
them to scroll or click to learn more.

31
Conti………

32
Conti………
 Footer
 The footer is the bottom part of a web page that marks its end.
 Footers provide additional fields for useful links and data that users may
be interested in finding.
 Footers can include:
 Brand identity signs (name and logo), Links to user support sections
(FAQ, About, Privacy Policy, Terms and Conditions, Support Team, etc.)
 Credits to website creators, Contact forms.
 Links to company or product social media accounts
 Testimonials and badges
 Certification signs
 Subscription field or button
33
Conti………

34
Conti………

 Navigation Bar: Similar to the table of contents, it

helps users navigate through different sections of
the website.
 Content Area: This is the main part of the page,
where the actual "story" is. It includes text, images,
videos, and other multimedia elements.
 Sidebar: If applicable, this is like the margin notes
or additional information. It can contain links, ads,
or supplementary content.

35
Conti………
 Forms: Like a questionnaire in the middle of a book,
forms gather information from users. This could be a
contact form, signup form, etc.
 Social Media Integration: Just as a book might
have references or quotes, web pages often
integrate social media elements for sharing or
following.
 Responsive Design Elements: These ensure that
the page looks good and functions well on different
devices, like phones, tablets, and desktops.

36
Should You Accept Cookies?
 Cookie Acceptance Choices:
 Servers can send cookies to browsers at any time.
 Most browsers offer user configurations to reject, accept all, or
prompt for each cookie.
 Advantages of Accepting Cookies:
 Enables servers to keep a history of user visits.
 History, along with dynamic content technologies, personalizes
web pages.
 Disadvantages of Accepting Cookies:
 Privacy is compromised as servers learn about browsing and
shopping habits.

37