Chapter 1

HOW THE WEB WORKS
BY: MA. ALIZA S. LOMUGDANG

OUTLINE
 Basic Concepts and History of Internet
 Internet vs the Web
 Web Browser
 Web Server
 Web Page Addresses (URL’s)
 Anatomy of Web Page
 Website Storyboarding
 Web Standards and standard bodies including the World Wide Web
Consurtium.

OBJECTIVES
 Identify the basic concepts about website development
 Understand the fundamentals of how the web works
 Differentiate between a web server, a website, a web page, and a home
page. Plan and design a website.
 Describe the structure of the World Wide Web as interconnected hypertext
documents.
 Discuss Web standards and standard bodies including the World Wide Web
Consortium. (W3C).

Lesson 1
BASIC CONCEPTS AND HISTORY OF INTERNET

WHAT IS INTERNET?
The internet is made up of millions of
computers linked together around the world
in such a way that information can be sent
from any computer to any other 24 hours a
day. These computers can be in homes,
schools, universities, government
departments, or businesses small and large.
They can be any type of computer and be
single personal computers or workstations on
a school or a company network. The
internet is often described as 'a network of
networks' because all the smaller networks
of organizations are linked together into the
one giant network called the internet. All
computers are pretty much equal once
connected to the internet; the only
difference will be the speed of the
connection which is dependent on your
Internet Service Provider and your own
modem.

WHAT DO YOU USE FOR INTERNET?
There are so many things you can do and participate in once connected
to the internet. They include using a range of services to communicate
and share information and things quickly and inexpensively with tens of
millions of people, both young and old and from diverse cultures around
the world. For example:
 You'll be able to keep in touch and send things to colleagues and
friends using electronic mail, internet telephone, keyboard
chat and video conferencing.
 You can also tap into thousands
of databases, libraries and newsgroups around the world to gather
information on any topics of interest for work or recreation. The
information can be in the form of text, pictures or even video
material.
 This means you can stay up to date with news, sports, weather and
any current affairs around the world with information updated daily,
hourly or instantly.
 You can also locate and download computer software and other
products that are available in cyberspace
 You can listen to sounds and music, and watch digital movies
 There are also a growing number of interactive multimedia
games and educational tools.
And as well as using the Internet for receiving things you will be able
to publish information about your development work experiences,
community, school, hobbies or interests.

HISTORY OF INTERNET
The Internet started in the 1960’s as a way for government researchers to share information.
Computers in the '60s were large and immobile and in order to make use of information stored in any
one computer, one had to either travel to the site of the computer or have magnetic computer
tapes sent through the conventional postal system.
Another catalyst in the formation of the Internet was the heating up of the Cold War. The Soviet
Union's launch of the Sputnik satellite spurred the U.S. Defense Department to consider ways
information could still be disseminated even after a nuclear attack. This eventually led to the
formation of the ARPANET (Advanced Research Projects Agency Network), the network that
ultimately evolved into what we now know as the Internet. ARPANET was a great success but
membership was limited to certain academic and research organizations who had contracts with
the Defense Department. In response to this, other networks were created to provide information
sharing.
January 1, 1983 is considered the official birthday of the Internet. Prior to this, the various computer
networks did not have a standard way to communicate with each other. A new communications
protocol was established called Transfer Control Protocol/Internetwork Protocol (TCP/IP). This allowed
different kinds of computers on different networks to "talk" to each other. ARPANET and the Defense
Data Network officially changed to the TCP/IP standard on January 1, 1983, hence the birth of the
Internet. All networks could now be connected by a universal language.

The image from the left side is a scale model of
the UNIVAC I (the name stood for Universal
Automatic Computer) which was delivered to
the Census Bureau in 1951. It weighed some
16,000 pounds, used 5,000 vacuum tubes, and
could perform about 1,000 calculations per
second. It was the first American commercial
computer, as well as the first computer
designed for business use. (Business computers
like the UNIVAC processed data more slowly
than the IAS-type machines, but were designed
for fast input and output.) The first few sales
were to government agencies, the A.C. Nielsen
Company, and the Prudential Insurance
Company. The first UNIVAC for business
applications was installed at the General
Electric Appliance Division, to do payroll, in
1954. By 1957 Remington-Rand (which had
purchased the Eckert-Mauchly Computer
Corporation in 1950) had sold forty-six
machines.

WHAT IS INTERNET?
The Internet — the name we often
use interchangeably with World
Wide Web — is a massive public
network of networks, a labyrinth of
hardwired and wireless connections
between disparate drives on
countless devices scattered around
the world. In a sense, it is like a global
computer, wherein each individual
computer or server becomes just
another node in one massive,
distributed system.

WHAT IS WORLD WIDE WEB?
The World Wide Web, or just “the
Web” for short, is a standardized
system for accessing and navigating
the Internet. It isn’t the only one
(email and mobile apps, for
instance, do not make use of the
Web to connect you to the Internet),
but it is by far the most common.

WEB BROWSER
A web browser, or browser for
short, is a computer software
application that enables a person to
locate, retrieve and display content
such as webpages, images, video,
as well as other files on the World
Wide Web.

EXAMPLE OF WEB BROWSER
Chrome, created by internet giant
Google, is the most popular browser
in the USA, perceived by its
computer and smartphone users as
fast, secure, and reliable.
 Google Chrome

Safari is the default on Apple
computers and phones, as well as
other Apple devices. It's generally
considered to be an efficient
browser, its slick design being in
keeping with the ethos of Apple..
 Apple safari

 Microsoft internet explorer and
edge
Although it has been discontinued,
Internet Explorer is worthy of a
mention as it was the go-to browser
in the early days of the internet
revolution with usage share rising to
95% in 2003. However, its relatively
slow start-up speed meant that
many users turned to Chrome and
Firefox in the years that followed.

 Mozilla Firefox
Unlike Chrome, Safari, Internet
Explorer, and Microsoft Edge, Firefox
is an open-source browser, created
by community members of the
Mozilla Foundation. It is perhaps the
most customizable of the main
browsers with many add-ons and
extensions to choose from.

 Opera
Another web browser worthy of
mention is Opera, which is designed
for Microsoft Windows, Android, iOS,
macOS, and Linux operating systems.
It has some interesting features and is
generally considered to be a reliable
option by many users.

WEB SERVER
A web server is a computer that runs
websites. It's a computer program that
distributes web pages as they are
requisitioned. The basic objective of
the web server is to store, process and
deliver web pages to the users. This
intercommunication is done using
Hypertext Transfer Protocol (HTTP).
These web pages are mostly static
content that includes HTML
documents, images, style sheets, test
etc. Apart from HTTP, a web server also
supports SMTP (Simple Mail transfer
Protocol) and FTP (File Transfer
Protocol) protocol for emailing and for
file transfer and storage.

The main job of a web server is to
display the website content. If a web
server is not exposed to the public and
is used internally, then it is called
Intranet Server. When anyone requests
for a website by adding the URL or web
address on a web browsers (like
Chrome or Firefox) address bar (like
www.economictimes.com), the
browser sends a request to the Internet
for viewing the corresponding web
page for that address. A Domain
Name Server (DNS) converts this URL to
an IP Address (For example
192.168.216.345), which in turn points to
a Web Server.

The Web Server is requested to present the
content website to the user’s browser. All
websites on the Internet have a unique
identifier in terms of an IP address. This
Internet Protocol address is used to
communicate between different servers
across the Internet. These days, Apache
server is the most common web server
available in the market. Apache is an open
source software that handles almost 70
percent of all websites available today.
Most of the web-based applications use
Apache as their default Web Server
environment. Another web server that is
generally available is Internet Information
Service (IIS). IIS is owned by Microsoft.

EXAMPLE OF WEB BROWSER
 Apache Web Server
Apache is currently the most
used web server in the world.
Founded in 1996, it’s now
maintained by the Apache
Foundation. Its freeware, and
compatible with Linux, Windows,
FreeBSD, Mac and several other
platforms.

 IIS
Also one of the most popular web
server examples. IIS belongs to
Microsoft. IIS stands for Microsoft
Internet Information Services. It
comes with the Windows Server
operating system. It’s configurable
through a graphical interface.

 NGINX
It’s one of the most popular web
server software. NGINX was
developed by Igor Sysoev in 2002.
Also, it is not a standalone web
server example. NGINX is a different
example because it works as a proxy
server, together with another web
server application like Apache.

 APACHE TOMCAT
Tomcat is a free web server,
specialized in Java Servlets. In other
words, it’s a Java container. Apache
Tomcat was initially developed by
Sun Microsystems, and then it was
transferred to the Apache Software
Foundation in 1999. By the way,
Tomcat usually works under port 8080
and supports PHP, ASP.net, Perl,
Python, etc.

 LIGHTHTTPD
Lighthttpd was initially developed in
2003. Basically, it’s not a very
common web server software
example for public web sites on the
internet. It has a big advantage: as
the name says, it’s the lighter HTTP
server available. It uses a very low
memory, CPU and disk space.

Lesson 5
WEB PAGE ADDRESSES (URL’S)

WHAT IS WEB ADDRESSES?
 The web address contains information about the location of the webpage.
 It is also known as the URL (uniform resource locator).
 Like the address for your home, a web address organizes information about
a webpage's location in a predictable way.
 This is how to break down the information using the following URL as an
example:
www.supremecourt.gov/opinions/12pdf/11-697_d1o2.pdf

Parts of Web Address or URL Structure

NETWORK
This is a set of connected webpages.
The address for the network is
typically the same as the homepage
of a website. Under that website will
be a variety of webpages. The last
part of the network address is the top
level domain name.
From the
example: www.supremecourt.gov is
the network section of the URL, and
the top level domain is .gov.

TOP LEVEL DOMAIN
This indicates the type of network,
and can give you clues about the
purpose/owners of a website.
Websites based outside of the United
States will often include a country
code as part of the domain (e.g. .uk,
.ca, .ng, etc.)

COMMON DOMAIN NAMES
.com (business) .org (organization)

COMMON DOMAIN NAMES
.edu (education) .gov (government)

FOLDERS & SUBFOLDERS
Just like on your personal computer,
a website may have a variety of
folders and subfolders to organize all
of the content on the website.
The example on the left side has a
folder called opinions that contains a
subfolder of PDF documents from
2012 called 12pdf.

FILE NAME
The last part of a web address gives
the name of the individual file that
displays when you go to that
address. Web address often end with
the file name .htm or .html, which
indicates that you are looking at a
regular webpage.
The example address from the left
side has the file name 11-
697_d1o2.pdf. Because the file name
ends with .pdf, it will display a PDF
document.

Lesson 6
ANATOMY OF A WEB PAGE

ANATOMY OF A WEB PAGE
The Anatomy of a Web Page covers
the individual elements on a page,
what they're for and why you need
them. To see what page formats are
commonly used and to learn about
responsive designs.

PAGE HEADER
The area at the top of the page is
usually referred to as the page
header. On a typical page such
as Microsoft or eBay, this area is
between 50 and 100 pixels high. It
features the company logo, perhaps
a strap line and main navigation. It
often includes key information or
calls to action, such as a phone
number, contact button or search
box. This is the first thing that your
visitors will see, and will be a
common theme throughout your
site.

SITE STRUCTURE
You can think of a site structure as a
tree diagram or a directory with
nested sub folders. At the top of the
structure is home, immediately below
that the most important sections or
topics and inside those, further sub-
sections

MAIN NAVIGATION
The main navigation is usually a
horizontal row of 5-8 page links, which
are either at the top of the site
structure, or are the most important
pages on the website. These are
clearly visible and obvious, and are
often highlighted when the visitor is in
that section of the site. The first item is
usually a link back to the Home page,
although if you want to squeeze in
more navigation tabs this can be
removed as it's standard practice for
the logo in the page header to also be
a link back to the home page. With
more than 8 main navigation links, a
website can look cluttered.

SECONDARY NAVIGATION
Secondary navigation refers to pages
below the top level of the website, the
second tier of the site structure. Unlike
the main navigation, the secondary
navigation changes depending on
which area of the site the visitor is
browsing. Secondary navigation is
usually either placed directly under the
main navigation, or on the left side of
the screen (for larger screen sizes).
When placed on the left side of the
screen, secondary navigation allows
the tertiary navigation to be displayed
as well. Tertiary (third tier) navigation is
a useful navigational aid for larger sites.

META TAGS
Meta tags are fields which aren't
displayed on the screen to visitors
but are used by search engines. You
can read more about meta tags
and other behind-the-scenes
features of websites in our blog
about SEO (search engine
optimisation).

PAGE TITLE
The heading at the top your page is
crucial to attract a visitor's interest.
Studies have found that the vast
majority of visitors will look at a web
page for less than 30 seconds, so
your page needs a snappy (and
relevant) title to draw them in. The
page title should use the HTML H1
tag because it has special
significance to search engines
indexing your page.

BREADCRUMB TRAIL
A useful navigational aid, the
breadcrumb trail is usually placed
just below the page header and
shows at a glance where the visitor is
located in the site structure,
e.g. Home > Blog > Anatomy of a
web page. The breadcrumb trail
begins at the home page and each
link except the last should be
clickable to take the visitor up to that
section.

HERO IMAGES OR BANNER IMAGES
These terms refer to the large images
at the top of the page that grabs
the visitor's attention. If you have a
number of them that fade in and out
automatically or that visitors can
click through, this is often referred to
as a carousel. Its use should be
restricted to key pages such as the
home page in order to maximise the
effect.

FULL-SCREEN AND EMBEDDED VIDEOS
If you have a video you want to
include in a web page, the best way
is to upload it to a platform like
YouTube or Vimeo, then embed it in
your content (YouTube and Vimeo
give you the code to do this). Videos
take up a lot of disk space (physical
space on your website server) and
bandwidth (download traffic), so
you probably want to avoid hosting
them on your own website. In
addition, embedded videos come
with players so visitors can play,
pause, jump back and forward etc.

CONTENT WIDTH
An important consideration for
readability is the width of the main
content of a page. Text that spans
the whole page can be hard to
follow, which is why newspapers use
a series of narrow columns. On a
web page, content wider than
around 30 words can be hard for the
visitor's eye to track, so we
recommend breaking wide sites up
into columns to make them easier to
read.

SITE MAP
A site map is a text-only list of all the
pages on the website with links to each
page. All our sites come with a sitemap
that's automatically generated so that
it's updated every time a page is
added, edited or deleted through the
Content Management System. Your
navigation and site structure should be
clear enough for visitors to easily find
what they're looking for, but a site map
is a good way to list everything on your
website in case they're confused. You
can create sitemaps in a variety of
formats to submit to Google.

Lesson 7
WEBSITE STORYBOARDING

WEBSITE STORYBOARDING
A storyboard is the blueprint for a
web project. It is a simple, flexible
tool which can be used to display
the elements on a single Web page
such as images, banners, navigation,
graphic elements and text. It is also
an excellent tool for presenting a
project to clients

Lesson 8
WEB STANDARDS AND STANDARD BODIES INCLUDING THE WORLD WIDE
WEB CONSORTIUM

WEB STANDARDS AND STANDARD BODIES
INCLUDING THE WORLD WIDE WEB
CONSORTIUM
W3C standards define an Open Web
Platform for application development
that has the unprecedented potential
to enable developers to build rich
interactive experiences, powered by
vast data stores that are available on
any device. Although the boundaries
of the platform continue to evolve,
industry leaders speak nearly in unison
about how HTML5 will be the
cornerstone for this platform. But the full
strength of the platform relies on many
more technologies that W3C and its
partners are creating, including CSS,
SVG, WOFF, the Semantic Web stack,
XML, and a variety of APIs.

EXAMPLE OF OPEN WEB PLATFORMS
Web Design and Applications
involve the standards for building
and Rendering Web pages,
including HTML, CSS, SVG, Ajax, and
other technologies for Web
Applications (“WebApps”). This
section also includes information on
how to make pages accessible to
people with disabilities (WCAG), to
internationalize them, and make
them work on mobile devices.
 Web Design and Applications

W3C is focusing on technologies to
enable Web access anywhere,
anytime, using any device. This
includes Web access from mobile
phones and other mobile devices as
well as use of Web technology in
consumer electronics, printers,
interactive television, and even
automobiles.
 Web of Devices

 Web Architecture
Web Architecture focuses on the
foundation technologies and
principles which sustain the Web,
including URIs and HTTP.

 Semantic Web In addition to the classic “Web of
documents” W3C is helping to build a
technology stack to support a “Web of
data,” the sort of data you find in
databases. The ultimate goal of the
Web of data is to enable computers to
do more useful work and to develop
systems that can support trusted
interactions over the network. The term
“Semantic Web” refers to W3C’s vision
of the Web of linked data. Semantic
Web technologies enable people to
create data stores on the Web, build
vocabularies, and write rules for
handling data. Linked data are
empowered by technologies such as
RDF, SPARQL, OWL, and SKOS.

 XML Technology
XML Technologies including XML,
XML Namespaces, XML Schema,
XSLT, Efficient XML Interchange (EXI),
and other related standards.

 Web of Services
Web of Services refers to message-
based design frequently found on
the Web and in enterprise software.
The Web of Services is based on
technologies such as HTTP, XML,
SOAP, WSDL, SPARQL, and others.

BROWSERS AND AUTHORING TOOLS
The web's usefulness and growth
depends on its universality. We
should be able to publish regardless
of the software we use, the
computer we have, the language
we speak, whether we are wired or
wireless, regardless of our sensory or
interaction modes.

BROWSERS
There are many types of tools that
allow us to read the Web, including
browsers, media players, publishing
platforms, social networks, bots,
aggregators, forums, and media-
sharing sites.

AUTHORING TOOLS
The Web is not a read-only medium.
There are many types of tools for
publishing content, including
authoring tools and environments,
content management systems
(CMSs), social media profile pages
and apps, blogging tools and sites,
microblogging tools, social
bookmarks, forums, and video and
photo sharing and more.

REFERENCES
 Harris, Andy (2011). HTML, XHTML, & CSS ALL-IN-ONE FOR DUMmIES 2nd
Edition. Wiley Publishing, Inc.
 Robins, Jennifer N.(2007). Learning Web Design 3rd Edition. O’Reilly Media,
Inc.
 http://www.w3schools.com
 http://www.w3c.org

Chapter 1

More Related Content

What's hot

Similar to Chapter 1

More from AliiyLomugdang

Recently uploaded

Chapter 1