LESSON 1:
THE
WORLD
WIDE
WEB
AFTER STUDYING
THIS LESSON,
YOU SHOULD BE
ABLE TO:
• Identify the various
browsers
• Navigate the Web
• List the type of
websites based on
purpose
• Learn about web
standars
2
CREATING WEB
PAGES, WE WILL
LEARN ABOUT THE
WORLD WIDE WEB OR
THE WEB’S
FUNDAMENTAL
CONCEPTS. WE WILL
BE DISCUSSING WHAT
THE WEB IS, HOW TO
NAVIGATE IT, THE
DIFFERENT TYPE OF
WEBSITES, AND
LEARN ABOUT WEB
STANDARDS.
The web is the collection of
THE WEB
digital resources, such as web
pages and documents, that are
accessible over the internet.
These resources are hosted on
computers called servers. Each
resource on the web is
identifi ed by an address or a
Uniform Resource Locator
(URL). To access the resource,
you enter its URL in a web
browser. Hyperlinks or links
connect websites and web
pages. Once clicked or tapped,
links load another page or
resource.
These days, many use "the Web"
and "the Internet" as
interchangeable terms. But to be
strict about it, the Internet
refers to the global network of
computers, servers, and
facilities, while the Web pertains
mainly to information. One can
think of the Internet as the
infrastructure that provides
access to the Web.
5
THE WEB
BROWSE
RS
You need a WEB BROWSER to access
the Web. A web browser is a software
application that allows you to access
websites, web pages, and documents
and display the information they
contain using a network protocol called
HYPERTEXT TRANSFER PROTOCOL
(HTTP). Web browsers also allow users
to interact and exchange data with
these resources. Your computer or
device must also have an active
Internet connection for a web browser
to work. 7
Most web browsers are available for use for free.
Operating systems have their built-in browsers. Windows
has Microsoft edge. Apple's macOs and iOs have safari.
Android has google chrome. Web browsers can also be
cross-platform, meaning they may have versions
available for use in diff erent operating systems.
Here is a list of the popular
web browsers in use today:
• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Apple Safari
• Opera 8
WEB BROWSERS
SHARE SIMILAR
FEATURES AND
FUNCTIONALITIES.
AMONG THE
COMMON USER
INTERFACE (UI)
ELEMENTS ARE:
9
Address Bar - Where you type the URL
address that you want to visit. It will also
suggest sites you have previously visited.
10
Back Button- Used to go back to
previous page.
11
Back Button- Used to go back to
previous page.
12
Forward Button - Used to
go to the next page.
13
Refresh Button - Reloads
the current page.
14
Scroll Bars - Move the screen up and down
if the contents go beyond the screen.
15
Tabs - Each webpage opened by the browser can
be loaded in its own separate tab. This helps
keep the browser organized. Otherwise, you
would need to have multiple browser windows to
keep web pages simultaneously loaded.
16
Add Tab Button - Clicking the
button creates a new tab.
17
Tab Close Button - Clicking the X
button closes a tab.
18
Bookmark - You can keep track of the web pages that you
want to revisit by using bookmarks. Clicking on the star
icon next to the URL in the address bar adds the page to
your bookmarks. Bookmarks record the page's name and
URL. Most browsers have a bookmark bar that appears just
below the address bar, allowing you to access your
bookmarked pages quickly.
19
History - Keeps track of all the websites
you have visited. To go to history, click
the settings button, then click history.
20
Minimize, Maximize, and Close
- Minimizes, resizes, or closes the
browser.
21
WEBSITE
S
A website is a
collection of web
pages under a
single domain.
To access a
website, you
enter its domain
name in the
browser's
address bar.
23
This request is relayed from your computer to the internet
through your internet service provider (ISP). A domain
name server (DNS) then "resolves" the domain name and
points your request to the appropriate web host server. The
web host server contains the resources for that website
and is responsible for sending back the web page and other
resource data. Your computer receives this information,
allowing it to be rendered and displayed on your web
browser.
24
Websites can be static or dynamic. The
content of static websites rarely changes.
Dynamic websites can change based on
the behaviors of the server application
that generates the web pages.
To navigate or browse the website's
contents, you have to click on links. Links
are often designed to be noticeable. They
may be colored diff erently compared to
regular text and are underlined. Your
mouse cursor will also change into a finger
icon to indicate that a link is clickable.
25
Links that load pages from the same website are
called internal links. Those that load pages from
another website are called external links.
26
DOMAINS
AND URLS
27
Websites are usually identified by the
domain name. Domain names are
responsible for directing traffi c to web
host servers. Servers are identified by
their Internet Protocol (IP)
address, which is composed of
numbers. Domain names are more
human-friendly and are easy to
remember.
28
Domain names are composed of the second-
level domain and the top-level domain, for
example, google.com or wikipedia.org.
Web pages are identified by their specific
urls. A URL is composed of the following
parts:
• https:// - the protocol (https is secure http)
en. - The subdomain
wikipedia - the second-level domain
.Org -the top-level domain
/wiki/main_page - path
29
30
TYPES OF
WEBSITES
Websites can have different
purposes. Here are the
common types of websites.
31
Blogs are dynamic websites that feature posts or
articles displayed in reverse chronological order
based on their date of publication. The most
recent posts are often found at the top of the
page. They are updated regularly. They can be
about diff erent topics. They can be about a person
or a special interest like food, lifestyle, or
entertainment.
32
Corporate
A corporate website showcases a company. It
contains information about the organization
and its products and services. They may also
feature links to their applications and
services.
33
Web App
Web apps function similarly to conventional
desktop applications; only they are accessed
using a web browser. Web apps can perform a
wide range of functions, including
communications, productivity, and finance.
34
Ecommerce
Ecommerce websites are also known as an online store.
They show products that customers can browse and add
to their online shopping carts. To purchase, custome
have to check out, pay for the items in their carts, and
have them delivered to their homes or offi ces.
35
News or Magazine
News or magazine websites contain
information on current events, expert
opinion, and features.
36
Social Networks
Social networks allow people to connect with
peers and share content.
37
Media Streaming
These websites allow users to stream audio and
video. Visitors can listen to songs and podcasts
and watch video clips, movies, and shows without
downloading the entire files first.
38
Educational
Educational websites are designed to facilitate e-
learning for their users. Many of the popular educational
websites today off er Massive Open Online Courses
(MOOCS) designed to be accessible to anyone
interested.
39
Wiki
Wikis allow for collaborative information sharing
and editing. Users are allowed to write and edit
the site's content.
40
Communities and Forums
Online communities cater to visitors who
share common interests. Users can start
conversation threads to which others can
reply.
41
WEB
TECHNOLOG
IES AND
STANDARDS
42
Separation of Concerns
What web pages contain and how they look
are determined by code. Three key
technologies power modern web pages.
Hypertext markup language (html)
handles the content and structure.
Cascading style sheets (css) is
responsible for styling and aesthetics,
javascript (js) takes care of behavior and
functionalities.
43
Previously, HTML, was able to handle
both content and styles. However, this
proved ineffi cient. Modifying how
elements looked meant needing to edit
each of the elements code. This is why
developers eventually separated these
concerns, letting the three technologies
handle each domain. With CSS
separated from HTML, designers can
create templates and themes to change
a site's look without affecting content.
44
45
Web Standards
In the earlier days of the web, web browsers
rendered web pages diff erently. Web
developers often had to prescribe a web
browser that visitors should use to ensure
that their websites can be viewed properly.
At times, they even had to create several
versions of web pages for use in diff erent
browsers.
46
This problem was eventually addressed
by promoting web standards. These are
a set of specifications followed by
developers to ensure that websites and
web pages display and perform
consistently regardless of the browser or
device being used. Currently, HTML is at
HTML5. CSS is at version 2.1.
47
developed by the World Wide Web
Consortium (W3C), which is the
international organization tasked to help the
web grow and develop. The W3C is led by the
inventor of the web itself, Sir Tim Berners-
Lee. For JavaScript, the standards are
published by Ecma International.
As a web developer, it is important that you
are aware of these standards so that you can
abide by them and improve the
interoperability and usability of the website
or web pages that you create.
48
ANY
QUESTIONS?
49
(Get ½
lengthwise)
lengthwise sir?
OO.
LENGTHWISE
50
I. GIVE THE CORRECT NAME OF THE
FOLLOWING ABBREVIATIONS:
1. CSS
2. WWW
3. URL
4. HTTP
5. LINK THAT CONNECTS
WEBSITES AND WEB
PAGES
51
6-10. GIVE THE 5
FAMOUS WEB
BROWSERS.
(IN ANY ORDER)
52
II. Identify the parts of web
browser.
6 7 9
5 8
1 2 3 4
1
0
53
1. COMPUTER SYSTEM SERVICING
2. WORLD WIDE WEB
3. UNIFORM RESOURCE LOCATOR
4. HYPERTEXT TRANSFER PROTOCOL
5. HYPERLINKS
6. GOOGLE CHROME
7. MOZILLA FIREFOX
8. MICROSOFT EDGE
9. APPLE SAFARI
10. OPERA
54
1. BACK BUTTON
2. FORWARD BUTTON
3. REFRESH BUTTON
4. ADDRESS BAR
5. TAB/TABS
6. TAB CLOSE BUTTON
7. ADD TAB BUTTON
8. BOOKMARK
9. MINIMIZE, MAXIMIZE AND CLOSE
10. SCROLL BAR
55
SURPRISE!
SURPRISE
QUIZ!!
56
II. Identify the parts of URL.
1 2 3 4 5
57
III. Tell the types of the following
1. websites
Microsoft
2. Udemy
58
3. Gmail
4.
Awesome.blog
59
5. Netfl ix
6. Shopee
60
7. Spotify
8. Popular
Mechanics
61
9. Inquirer.net
10. Wikipedia
62
11. Behance
12. Joe McNallly
Photography
63
13. Twitter
14. Lazada
64
15. Facebook
16. Stack Overfl ow
65
17. LinkedIn
18. Zoho
66
19. Oracle
20. Amazon
67
