Chapter 1

Introduction to the
world wide web(www)
 What is WWW?
 The WWW or sometimes called the Web is a global
interconnection of millions of special hypertexted
documents , websites and web pages stored in
different web servers that are connected through
Internet.

 These websites contain text pages, digital images,

audios, videos, etc.

 Users can access the content of these sites from any

part of the world over the internet using their devices
such as computers, laptops, cell phones, etc
 What is WWW?
 The WWW, along with internet, enables the retrieval
and display of text and media to your device.

 The building blocks of the Web are web pages which

are formatted in HTML and connected by links
called hyperlinks and accessed by HTTP.

 Links are electronic connections that link related

pieces of information so that users can navigate and
access the desired information quickly.
 What is WWW?
 Hyperlink to a page is a connecting string of text
that takes you to that page when you click on it.
Hyperlinks are often highlighted, by underlining,
displaying them in a special color, or both.

 The mouse pointer changes when you hover over a

hyperlink on web page to indicate that the text or
image is clickable and will take you to another page
or website.
 What is WWW?
 The www is very popular service of the Internet and its
enormous popularity stems from the fact that.

 It has a colorful graphical user interface

 It is easy for beginners to use

 It provides a large amount of information on almost every

conceivable subject.
 It is platform for accessing and sharing information globally.
 WWW Vs Internet
 The terms World Wide Web (WWW) and the Internet are so often
used interchangeably that the fundamental difference between the
two is easily forgotten.
 Internet is a global network of networks. It is the network of
interconnected computers. And provides services such us: browsing
the World Wide Web (WWW),Email Services, file sharing,
communicating with friends and family using voice and video.
 Internet is primarily hardware-based infrastructure for different
services and uses IP address as means of communication .
 WWW Vs Internet
 WWW is one of the services that operates over the Internet, as e-mail
and voice over IP (VoIP) does.

 WWW is more software-oriented as compared to the Internet. It uses

Hypertext Transfer Protocol (HTTP) as a means of communication.

 We can consider the difference between Internet and WWW as

difference between road and vehicle with passengers in real-world
scenarios.
 Web Terminologies
 Webpage: is a single document or content on the World
Wide Web. It is typically written in HTML and can
include text, images, multimedia, and hyperlinks.

 Home page/Welcome Page: is the first, introductory

page of a website. typically accessible through the
website's root URL. It serves as the entry point for
visitors and provides an overview of the site's content
and navigation options.
 Web
Terminologies(Continued…)
 Web host: is a machine / computer that stores and
delivers web pages and content to be accessed over the
Internet. It serves as the storage and processing facility
for websites, making them accessible to users
worldwide. Web hosts ensure websites are available
24/7 by maintaining the necessary hardware and
software infrastructure.

 Web server: A web server is a software program that

operates on web hosts and handles incoming requests
from web browsers.
 Web
Terminologies(Continued…)
Web server is responsible for delivering web content,
such as web pages, images, and files, to users when
requested. Examples:
 Apache web server

 Nginx,

 Microsoft Internet Information Services (IIS)

 Tomcat (for running Java-based web applications).

 Web Terminologies(Continued…)
 Web browser: is an application program that enables
a client or user of www to request and view web pages.
Internet Explorer, Mozilla Firefox, Google Chrome
and Netscape Navigator are popular Web browsers.

 Web surfing/web browsing: refers to the activity of

navigating through the World Wide Web by moving
from one website to another. It typically involves
exploring different web pages, links, and content on
the internet.
 Web Terminologies(Continued…)
 Web master: is a professional who develops and
maintains web sites. Their role includes overseeing site
design, content updates, technical aspects, and
ensuring the website's functionality and performance.

 Web hosting: is putting/publishing web sites on the

web host and making it accessible to the public. Web
hosting providers offer storage space, bandwidth, and
server resources for individuals and organizations to
publish their websites online.
 Web Terminologies(Continued…)
 Hypertext markup language (HTML): is a standard
hypertext language used to develop web sites.

 Hypertext Transfer Protocol (HTTP): is a standard

protocol which is used to transfer pages across the Internet.
Or it is the language which is used by web browsers and
web servers to communicate with each other.

 Uniform Resource Locator (URL): is an “address” of a

specific resource on the web. Sometimes it is informally
referred to as the web address.
 Web Terminologies(Continued…)
 URL contains 3 basic parts:
 Protocol (http, https, ftp)

 Fully qualified domain name

 Path

 Example: from the URL

http://www.mitethiopia.edu.et/departments/it
 Protocol :http

 Fully qualified domain

name :www.mitethiopia.edu.et
 Path :departments/it
 Web Terminologies(Continued…)
 URL extensions and their meaning :
 Brief History of the WWW
 In 1980, Tim Berners-Lee, an independent contractor
at the European Centre for Nuclear Research (CERN),
Switzerland, built ENQUIRE.
 ENQUIRE was built as a personal database of people
and software models, but also as a way to play with
hypertext; each new page of information in ENQUIRE
had to be linked to an existing page.
 CERN has several accelerators at which large teams of
scientists from the participating European countries
carry out research in particle physics.
 Brief History of the WWW
(Continued…)
 In March 1989, Tim Berners-Lee wrote a proposal for "a
large hypertext database with typed links", but it generated
little interest.
 But by Christmas 1990, Berners-Lee had built all the tools
necessary for a working Web:
o HTTP and HTML
o The first Web browser and web server
o The first HTTP Server software (later known as CERN
httpd),
o The first Web pages that described the project itself
Brief History of the WWW
(Continued…)
 In 1994, CERN and M.I.T. signed an agreement setting
up the World Wide Web Consortium (sometimes
abbreviated as W3C)
 W3C is an organization devoted to further developing
the Web, standardizing protocols, and encouraging
interoperability between sites
 Tim Berners-Lee became the director of the W3C.
Since then, several hundred universities and companies
have joined the consortium
How the web works?

 The Web works on a client / server model, in which

client software (Browser) runs on a local computer.
The Server software runs on a web host.
 When a user clicks on a hyperlink, the browser carries
out a series of steps in order to fetch the page pointed
to.
 What happens when you click a hyperlink like: http://
www.mitethiopia.edu.et/departments/it.html
 What happen on the client side?
 What happens on the server side?
 How the web works?(continued…)
 What happens on the Client-side?

1. The browser determines the URL (by seeing what was selected).
2. The browser asks DNS for the IP address of www.mitethiopia.edu.et.
3. DNS replies with 10.0.0.2
4. The browser makes a TCP connection to port 80 on 10.0.0.2
5. It then sends over a request asking for file /departments/it.html
6. The www.mitethiopia.edt.et server sends the file /departments/it.html
7. The TCP connection is released.
8. The browser displays all the text in /departments/it.html
9. The browser fetches and displays all images in this file.
How the web works?(continued…)

 What happens on the Server-side?

1. Accept a TCP connection from a client (a
browser).
2. Get the name of the file requested.
3. Get the file (from disk).
4. Return the file to the client.
5. Release the TCP connection.
 General Guidelines for a Good Web
Design
 What is web design?

 Web design in general, refers to an approach to the

solution, ‘how to create the website’.
 It is a highly creative activity that involves the
transformation of web requirements into tangible end
products.
 It concentrates on the proper solution to realize those
requirements.
 General Guidelines for a Good Web
Design
 There might not be a wrong or right way to design a web
site.
 Your design decision may depend on the type of the
website you are trying to develop.
 Personal sites, entertainment sites, educational sites,
corporate e-commerce sites all have different priorities and
abide by different guidelines both in terms of content and
how the content is presented.
 In addition to this it also depends on your audience and
their reason to visit your web site.
 General Guidelines for a Good Web
Design(continued…)
1. Loading time :
Users of your site may connect to your site at a range of speeds.
It is important to consider the slower speeds.
Graphics and multimedia are slow to load. So try to minimize
the size of the pages, graphics and multimedia in your website to
improve the loading time of your website.
In general, users get frustrated if it takes more than 5-10
seconds for a page to load.
 General Guidelines for a Good Web
Design(continued…)
2. Resolution :
The resolution of your hardware is the maximum number of pixel that can be displayed
on a monitor, expressed as (number of horizontal pixels) x (number of vertical pixels),
i.e., 1024×768.

Since you are not aware what screen resolution will your audience use to view your web
site, use standard resolutions like 800x600 pixels.

But if your audience use old and smaller monitors you risk parts of your web pages not
visible.
 General Guidelines for a Good Web
Design(continued…)
3. Important Messages:
Put your most important messages (who you are, what you do, etc.) it the first
screenful (in the first 350 pixels of the page).

This is because most users make judgement based on that first impression without
taking time to scroll down for important information.
 General Guidelines for a Good Web
Design(continued…)
4. Limit your page size :
Longer pages that require a lot of scrolling are unmanageable for online reading and make
it more difficult for readers to find their place.

Forunknown reasons users like to move forward. So it is better to break longer pages into
smaller manageable pages with a clean navigation system.
 General Guidelines for a Good Web
Design(continued…)
5. Design your web site in such a way that it runs in multiple browsers
and platforms:

Some old browsers, mobile browsers might not support all functionalities of your
website. So your website should behave the same way in different browsers and
platforms.
 General Guidelines for a Good Web
Design(continued…)
6. Avoid too many animations, especially in pages that you want people
to read:

Although animations are effective in drawing attention, users find them annoying and
distracting when they are trying to read a text on a page.
 General Guidelines for a Good Web
Design(continued…)
7. Don’t use “Under construction” signs :

Don’t include “under construction” signs that appear when a user clicks a link. If any section of your
website is not complete, don’t post it as part of your web site.

Providing links that go nowhere is just a waste of your visitors’ time and patience.
 General Guidelines for a Good Web
Design(continued…)
8.Aim to keep graphics files under 30KB:
Yourgraphics should be clean and well structured. A 30KB graphics may take 30 seconds to download over a
modem internet connection and that is a long time to wait for something to appear on the screen.

Sotry to keep your graphics files as small as possible Ideally, the total of all the graphics on the page should be
under 30KB.
 General Guidelines for a Good Web
Design(continued…)
9.Provide alternative text for every graphics:

The alternative graphics will appear when the graphics doesn’t.

This is very important for audiences who use text only browsers and those who turned off their graphics for a fast access.
 General Guidelines for a Good Web
Design(continued…)
10. Provide consistent Navigation:
Your website might be well designed, but if it doesn’t provide the required navigation to
its major sections it is quite useless.
Some of your users might be less expertise in web surfing and they may not be able to
navigate easily from one section to another. So try to provide consistent navigation system
in all major sections of your website.
If your navigation system is not consistent and it changes from page to page, It is
confusing to the visitor and they will get frustrated and leave.
 General Guidelines for a Good Web
Design(continued…)
11.Don’t use too many colors:

So It’s visually chaotic and makes it difficult to prioritize the information.

Itis better to choose one or two dominant colors and one highlight color and stick with
them throughout the site.
 General Guidelines for a Good Web
Design(continued…)
To have a website viewable in any browser and at any screen resolution:
1.Determine the website’s target audience and their expectations.
2.Decide on a web page width (either fixed of fluid) to suit the target audience’s most common
screen resolution.
3.Use only standards compliant valid coding.
4.Test the website in different browsers.
5.Test the website at different screen resolutions.
 End of Slides
 Thank You!
 If you have any question?