LESSON 1 INTRODUCTION TO THE WORLDWIDE WEB AND ITS

STRUCTURE

Internet

The internet is a worldwide collection of computer networks that link together millions of
computers used by businesses, the government, educational institutions, organizations and
individuals using modems, telephone lines, televisions cables and other communications devices
and media.

Internet Timeline

1960 - The USA creates the Advanced Research Projects Agency (ARPA)
with the mission of becoming the leading force in science and new
technologies.

1962 - J.C.R. Licklider of MIT proposes the concept of a “Galactic Network.

For the first time ideas about a global network of computers are introduced.
J.C.R. Licklider is later chosen to head ARPA’s research efforts.

1962 – Paul Baran, a member of the RAND Corporation, determines a way

for the Air Force to control bombers and missiles in case of a nuclear event.
His results call for a decentralized network comprised of packet switches.

1967 – Donald Davies first demonstrated packet switching in 1967 at

the National Physics Laboratory (NPL) in the UK, which became a testbed
for UK research for almost two decades. ARPA contracts out work to BBN.
BBN is called upon to build the first switch.

1969 - ARPANET created – BBN creates the first switched network by

linking four different nodes in California and Utah; one at the University of
Utah, one at the University of California at Santa Barbara, one at Stanford
and one at the University of California at Los Angeles.
1972 – ARPA officially changes its name to DARPA Defense Advanced
Research Projects Agency.

1972 – Network Control Protocol is introduced to allow computers running

on the same network to communicate with each other.

1973 – Vinton Cerf working from Stanford and Bob Kahn from DARPA
begin work developing TCP/IP to allow computers on different networks to
communicate with each other.

1974 – Kahn and Cerf refer to the system as the Internet for the first time.

1976 - Elizabeth II, Queen of the United Kingdom, sends out an email on 26
March from the Royal Signals and Radar Establishment (RSRE) in Malvern.

1979 – IBM introduces BITNET to work on emails and listserv systems.

1981 – The National Science Foundation releases CSNET 56 to allow

computers to network without being connected to the government networks.

1983 – TCP/IP becomes the standard for internet protocol.

 1983 – Domain Name System introduced to allow domain names to
automatically be assigned an IP number.

1989- Arpanet ceases to exist

1990 – A hypertext system is created and implemented by Tim Berners-Lee

while working for CERN.

1991 – The National Science Foundation (NSF) creates the National

Research and Education Network (NREN).

1993- The first web browser, Mosaic (created by NCSA), is released.

Mosaic later becomes the Netscape browser which was the most popular
browser in the mid 1990’s.

1994 – First internet ordering system created by Pizza Hut.

1994 – First internet bank opened: First Virtual.

1995- Release of the web browser, Internet Explorer, Netscape Navigator

and Opera.

1996 – Internet Service Providers begin appearing such as Sprint and MCI.

1996 – Nokia releases first cell phone with internet access.

2001 – Blackberry releases first internet cell phone in the United States.

2002 – Release of Mozilla Firefox as web browser

2003- Release of Safari as web browser

2005-Youtube launches

2008 – Google Chrome as web browser was first release by the google.

Intranet

A computer network for sharing information, collaboration tools, operational systems and other
computing services within an organization, usually to the exclusion of access by outsiders. The
term is used in contrast to public networks, such as the Internet, but uses most of the same
technology based on the Internet Protocol Suite

World Wide Web

World Wide Web or (www or w3) or simply the “WEB”, is one of the services that use the internet.
It is a collection of interlinked information that is stored on the computers all around the world. It
is the part of the internet that supports multimedia and consists of a collection of linked documents.
To support multimedia, the Web relies on the Hypertext Transfer Protocol (http), which is a set of
rules for exchanging text, graphic, sound, video and other multimedia files. The linked documents
or pages of information on the web are known as Web Pages.

Tim-Berners Lee – Director of the WWW Consortium (W3C). The web uses the client(s)
server concepts.
 Client – is a software program of computer that request information from another software
program on another computer.

Server – is a software program that interacts with the client software in a client(s) server
environment. It is also referred to as a computer running the server software and responds
to the requests for information from client computers.

Web Technologies

Web technologies are the various tools and techniques that are utilized in the process of
communication between different types of devices over the internet. Some of the web
technologies used most often by both beginners and experts in the industry.

1. The basics, which will cover web browsers and some web app development fundamentals.

Web Browsers

Web browsers, often just called browsers, make it possible for us to view all the resources
that are part of the World Wide Web. They are based on a client-server architecture. The
client is the browser in this scenario. You can think of the server as a combination of
software and hardware that receives the client’s requests and then sends the requested
resource to the client.

Whenever you enter a URL into a browser’s address bar, it relays your request to the
server and then fetches and displays whatever the user requested for.

A view of a web browser

Some popular web browsers are Opera, Mozilla Firefox, Google Chrome, and Safari.

2. Programming languages and frameworks which are used in the development of websites.

Programming languages are the most basic component of website creation. In order to
code a website, you need to be familiar with a few programming concepts, some
languages and their syntax, and a good development IDE. Some of these languages may
be general-purpose, but others are specifically created for the purpose of web
development.
 Popular programming Languages and Frameworks

3. Databases that are used at the backend to store data required or collected by websites.

Databases

All the data that is exchanged on the web needs to be stored somewhere. For this purpose,
most websites have their own databases associated with them.

Sample Diagram of a Database

4. Some protocols, that is, rules for communicating on the web.

Protocols

Web protocols are some predefined rules that must be followed by everyone
communicating over the web.

HTTP

HyperText Transfer Protocol, better known as HTTP, is a web protocol that defines two
concepts:

1. How client requests are relayed to servers

 2. How servers respond to client requests

How the HTTP request-response cycle works

Below is a list of other common web protocols and their uses.

Protocol Stands for Usage

Transmission Control For establishing a connection between two devices on the
TCP
Protocol web and managing the delivery of data packets
For transferring data packets between two devices on the
IP Internet Protocol
web
TCP/IP These two web technologies often work together.
User Datagram For establishing a connection between two devices on the
UDP
Protocol web
FTP File Transfer Protocol For transferring files between the client and the server
Simple Mail Transfer
SMTP For sending email messages to the server
Protocol
POP Post Office Protocol For fetching email messages from the server
Simple Object Access
SOAP For sending XML messages via HTTP
Protocol

5. Graphic, audiovisual, and other multimedia elements

Graphics

Graphical elements are a key feature of any webpage. They not only contribute to the
beautification of a page but can also be used to convey important points in a better manner
than text does.

Some popular graphic elements are canvas, svg and webGL.

Principles of Effective Web Design

Building a successful website always requires you to get the basics right in the first instance.
Everyone will have a different opinion of your site, and sometimes those opinions could be polar
opposites from one another. There are four (4) Key Principles in Web Design:

1. Color and Imagery

 The guiding principle in use of color is: don’t overuse it. Don’t get carried with sporadic
splashes of color and in most cases, 2 or 3 color safe sufficient for the one site. Stick
to known complimentary color schemes to avoid creating eyesores. If you are
designing a website for a company, the colors you choose should match that of the
company branding.

Images aren’t space fillers. If you’re using an image with the sole purpose of bulking
out a piece of content, your audience will see straight through your intentions which
will likely result in a higher bounce rate. All the images you use should provide value
and offer a greater insight into the written content.

And if you must use images, make sure not to over-do it and that they are correctly
sized for the web (internet resolution is 72 ppi). Images, animations and videos
account for up to 60% of the loading time for a page.

2. Fonts to use

Early web content producers were restricted to just a few fonts, as venturing outside
of “web-safe fonts” would result in collection of random symbols and gibberish. There
are three (3) considerations that should be adhered to when selecting font.

 Keep the end user experience in mind. Large fonts could result in increased
loading times which is a sure way to aggravate your visitors.
 The body text should usually be sans serif and headlines should also be
reserved to serif fonts as otherwise they can be difficult to read.
 As with color, keep the number of different fonts to a minimum. Three different
fonts on the one site should be the maximum.

3. Don’t break the Grid

Human beings are creatures of habit. Since the invention of codex, we have used the
same grid system for all of our written language due to one simple fact: it works. Don’t
try to fix or improve on something that isn’t broken. The grid system is familiar and
comfortable and there is no need to rearrange the layout of text on a page. Save your
creative efforts for the other onscreen elements.

4. The F Pattern

The last principle is often overlooked by beginning website developers. Research has
shown that we read a piece of content in an F pattern. This simply means that we read
left-to-right and from the top down (in most cultures anyway).

In the modern world, where we are consistently bombarded with new content, readers
use a quickened version of the F pattern to scan titles, headlines and images to
determine if it’s worth their time to read the whole piece. If you want to stand out
amongst the ocean of articles and blog posts produced every day on the internet, you
need to ensure that the layout of your sites content pays attention to the F pattern.

Things to consider in Web Designing

1. Create the goal or purpose of the web site.

Determining what you hope to achieve with your web site should be the first to a good
web design. Do you want to sell a product, educate your audience, and entertain them
 or all of the above? Listening all down all the objectives you want to accomplish help
you focus on the total design of the site.

2. Identify the primary target audience.

Everyone with internet access is a potential viewer of your website, however for many
specific web sites it is practical to target a certain focus audience to be successful. If
you plan to educate, then your audience would be students. Furthermore you continue
to ask the question, will the students be in elementary, high school of college?

3. Plan the content of the web site.

After Identifying your goals and target audience, it is now clear what kind of materials
the site will contain; text, pictures, videos, music and multimedia. If your objective is
to educate and the target audience is high school students, then decide on what
resources do you want to share with them. At this time of the planning, you should
discern what would be the best contents to attract the target audience to your site.
The Materials of the site should be useful, of high quality, accurate, timely and
dynamic for the audience to return to your site for more.

4. Plan and organize the site structure.

Planning the site structure carefully with the given the gals Above will save you
precious time and avoid confusion later on. Organizing your information in a structured
way will help you attain the objectives of the web site. There are several structures in
designing a web site. There are several structures in designing a web site that you
can use:

Linear structure – this structure is designed to present the web site one at a time
especially useful for tutorial sites as well as historical information that presents
information in chronological order.

Hierarchical structure – this structure uses a tree like presentation where in several
categories are connected to the home page and under each category may contain
other subcategories.

Random structure – this structure presents its resources and information in any
order. The audience may go to any web page as they please. An example of a
web site that could employ this structure could be, places to go in a province, food
selection in a restaurant, and so on. This kind of structure is usually employed by
small web sites or sites containing few web pages because designing big web sites
like could be cumbersome and confusing for visitors.

5. Plan the web pages details.

Careful planning of the details of the splash page or home page and other pages of
the web site will capture the attention of the visitor and draw him to the other pages
of your web site. Your decision of the page layout, color scheme, styles, grids, tables
and other elements of the web pages will help facilitate creation of the whole site.
Templates help facilitate the creation of like web pages.
 6. Planning and designing the navigation scheme.
This step in the planning of the web site involves how visitors go from the home page
to the other pages of the web site. They should be able to navigate the web site to go
back and forth. They should be to search using the hyperlinks to easily move to topics
within the web site, employment of buttons, index, menus and other navigational
elements to help them navigate between pages of the web site.

7. Planning and gathering your resources.

The final step in the web design process is the planning and gathering of the web
resources or assets that you would need. The graphics and images, animations,
multimedia, audio, video and even text should be organized and placed in a folder so
that when you start in the development process.

Support Tools for Web Creation

Web designers use a wide range of tools to design, build, and maintain websites.

Interface design apps and prototyping tools help designers envision and communicate how
websites will look and behave before they’re launched. Photo-editing and graphic design tools
allow designers to manipulate images and create graphics. Code libraries, development
environments, and hosting services allow developers to launch their websites and share them
with the world.

Some popular web design software are WordPress, Bootstrap, Wix, Dreamweaver, Squarespace,
Figma, Sketch 3 and AdobeXD.

Importance of Website

Today, many people from different fields (family, friends and businessmen) exchanges different
data on the net. The Internet and Web have significantly impacted the way the world
communicates, educates, entertains and conduct businesses. These changes in human
interaction an implication for designing web pages and web sites and will be discussed in this
section.

Communication – Businesses and individuals rely heavily on email messages; web pages
can communicate positively or negatively. If your website communicates trustworthiness,
currency and value, visitors will bookmark it for future references.

Entertainment – Millions of people turn to the web daily for entertainment purposes
because of its unique capability of offering an interactive and multimedia experience. Popular
entertainment websites offer music, videos, sports, games, ongoing web episodes, chats and
more.

Business – Conducting business online offers range possibilities. Electronic commerce or

e-commerce is the conducting of business activities online including shopping. If you want to
promote a product or service creating a website must be considered.

Education – The web offers and exciting and challenging new avenues for formal and
informal teaching and learning. It will also enhance traditional teaching methods.