Chapter 1

The World Wide Web

1. Introduction

A website is a collection of publicly accessible, interlinked Web pages that share a single domain
name. Websites have many functions and can be used in various fashions; a website can be a
personal website, a corporate website for a company, a government website, an organization
website, etc. Websites are typically dedicated to a particular topic or purpose, ranging from
entertainment and social networking to providing news and education. All publicly accessible
websites collectively constitute the World Wide Web. Websites can be accessed via a public
Internet Protocol (IP) network, such as the Internet, or a private local area network (LAN), by a
uniform resource locator (URL) that identifies the site.

Web pages, which are the building blocks of websites and contain information, are documents,
typically composed in plain text interspersed with formatting instructions of Hypertext Markup
Language (HTML). They may incorporate elements from other websites with suitable markup
anchors. Web pages are accessed and transported with the Hypertext Transfer Protocol (HTTP).
The user's application, often a web browser, renders the page content according to its HTML
markup instructions onto a display terminal. Hyperlinking between web pages conveys to the
reader the site structure and guides the navigation of the site, which often starts with a home page
containing a directory of the site web content. There are billions of websites on the Internet today
that can be broken into one of the following types of website categories.

 Business website and corporate  Government website

website  Media sharing website
 Community website  Social networking website
 Content website and information  News website
website  Personal website
 School website  Weblog
 E-commerce website  Wiki website etc.

Compiled By Jemal Zuber (MSc) 1

 2. The Internet and World Wide Web

Internet

The Internet is a global network comprised of smaller networks that are interconnected using
standardized communication protocols. The Internet standards describe a framework known as the
Internet protocol suite. This model divides methods into a layered system of protocols.

These layers are as follows:

1. Application layer (highest) – concerned with the data (URL, type, etc.). This is where
HTTP, HTTPS, etc., comes in.
2. Transport layer – responsible for end-to-end communication over a network.
3. Network layer – provides data route.

The Internet provides a variety of information and communication facilities; contains forums,
databases, email, hypertext, etc. It consists of private, public, academic, business, and government
networks of local to global scope, linked by a broad array of electronic, wireless, and optical
networking technologies.

The World Wide Web

The Web is the only way to access information through the Internet. It’s a system of Internet
servers that support specially formatted documents. The documents are formatted in a markup
language called HTML, or “HyperText Markup Language”, which supports a number of features
including links and multimedia. These documents are interlinked using hypertext links and are
accessible via the Internet. We access the Web using Web browsers.

To link hypertext to the Internet, we need:

1. The markup language, i.e., HTML.

2. The transfer protocol, e.g., HTTP.
3. Uniform Resource Locator (URL), the address of the resource.

Compiled By Jemal Zuber (MSc) 2

 Difference between Web and Internet

Internet Web
The Internet is the network of networks and the The Web is a way to access information
network allows to exchange of data between through the Internet.
two or more computers.
It is also known as the Network of Networks. The Web is a model for sharing information
using the Internet.
The Internet is a way of transporting The protocol used by the web is HTTP.
information between devices.
Accessible in a variety of ways. The Web is accessed by the Web Browser.
Network protocols are used to transport data. Accesses documents and online sites through
browsers.

Introduction to URLs (Uniform Resource Locators)

The special link addresses are a very important part of the Web. You probably already type Web
addresses into the address bar of your browser (http://www.google.com), but you may not be
completely aware of how they work. Web addresses are technically URLs (Uniform Resource
Locators), and they have a very specific format.

Sometimes, you’ll see the term URI (Uniform Resource Identifier) instead of URL. URI is
technically a more correct name for Web addresses, but the term URL has caught on. The two
terms are close enough to be interchangeable.

A URL usually contains the following parts:

 Protocol: A Web protocol is a standardized agreement on how communication occurs. The

Web primarily uses HTTP (hypertext transfer protocol), but occasionally, you encounter
others. Most addresses begin with http:// because this is the standard on the Web. Protocols
usually end with a colon and two slashes (://).
 Host name: It is traditional to name your primary Web server www. There is no
requirement for this, but it is common enough that users expect to type www right after the

Compiled By Jemal Zuber (MSc) 3

 http:// stuff. Regardless, the text right after http:// (and up to the first period) is the name of
the actual computer you are linking to.
 Domain name: The last two or three characters indicate a particular type of Web server.
These letters can indicate useful information about the type of organization that houses the
page. Three-letter domains usually indicate the type of organization, and two-letter
domains indicate a country. Sometimes, you will even see a combination of the two. See
the following table for a list of common domain names.

 Subdomain: Everything between the host name (usually www) and the domain name
(often .com) is the subdomain. This is used so that large organizations can have multiple
servers on the same domain. For example, my department Web page is
http://www.cs.wru.edu.et. www is the name of the primary server, and this is the computer
science department at wru (Werabe university),which is an educational organization.
 Page name: Sometimes, an address specifies a particular document on the Web. This page
name follows the address and usually ends with .html. Sometimes, the page name includes
subdirectories and username information, as well. The page name is sometimes optional.
Many servers have a special name set up as the default page, which appears if no other
name is specified. This name is usually index.html but sometimes home.htm. On my server,
index.html is the default name, so I usually just point to www.cs.wru.edu.et /, and the index
page appears.
4. Designing a good website

The success of any website entirely depends on how its web design is. Nicely-designed site which
includes usability and utility determines the success and not the visual design. A website design
does not necessarily mean how it looks like and feels like, but is how it works. Good website

Compiled By Jemal Zuber (MSc) 4

design needs a wide range of professionals having expertise in different areas. Their collective
efforts need to put in when there is a critical decision to take place.

A number of good website designing principles are proposed by different web experts. These
design principles will definitely help web designers to develop awe-inspiring designs and to
enhance the usability of a website. We describe the most widely used web designing principles as
follow.

 Simple is the best

o Keep your design as simple as possible so that the visitors can feel it easy-to-use
and can find their ways easily
o Putting too many elements on the page may lead to distract visitors from the main
purpose of a website
o Clean and fresh design of a website makes the website appealing and help user to
navigate from one page to another seamlessly
 Consistency
o Match design elements throughout each of the pages
o Colors, fonts, sizes, headings, sub-headings, and button styles must be the same
throughout the website
 Typography and Readability
o Keep your typography visually appealing and readable for visitors
o Consider using fonts that are easier to read
o Make proper combinations of typefaces for each and every design elements such
as headlines, body texts, buttons etc.
 Mobile compatibility
o Keeping in mind the ever-growing usage of smartphones and tablets a web design
must be effective for various screens
 Color palette and imagery
o A perfect color combination attracts users
o Pick a perfect color palette for your website which can create a pleasing
atmosphere, thus leaving a good impact on visitors
 Easy loading

Compiled By Jemal Zuber (MSc) 5

 o No one likes the website that takes too much time to load.
o So take care of it by optimizing image sizes, combing code into a central CSS or
JavaScript file as it reduces HTTP requests.
 Easy Navigation
o For effective navigation, you may consider creating a logical page hierarchy, using
bread scrums, and designing clickable buttons.
 Communication
o The ultimate purpose of the visitors is to get information, and if your website is
able to communicate your visitors efficiently, most probably they would spend
more time on your website
o Tricks that may work to establish effortless communication with the visitors are
 Organizing information by making good use of headlines and sub-
headlines
 Cutting the waffle, and using bullet points, rather than long gusty sentences

5. Types of web pages (static vs. dynamic)

There are basically two main types of website - static and dynamic.

Static website

A static website is one that has web pages stored on the server in the format that is sent to a client
web browser. It is primarily coded in HTML and CSS are used to control appearance beyond basic
HTML. This type of website usually displays the same information to all visitors.
Static website provide consistent, standard information for an extended period of time. The website
owner may make updates periodically, it is a manual process to edit the text, photos and other
content and may require basic website design skills and software. This may include information
about a company and its products and services through text, photos, animations, audio/video, and
navigation menus.
 Advantages of static sites
 They are flexibility, every page can be different if desired, to match the layout to
different content, and the designer is free to put in any special effects that a client
may ask for in a unique way on different pages.

Compiled By Jemal Zuber (MSc) 6

  Cost is generally lower up-front than a dynamic site.
 Disadvantages of static sites
 Content updating is trouble for both client and designer. Unless they are conversant
with HTML and the design methods used in the site
 There are ongoing costs for updating the content and scale up the site

Dynamic websites

A dynamic website is one that changes itself frequently and automatically. It display the current
state of a dialogue between users, or provide information in some way personalized to the
requirements of the individual user. Dynamic sites can be interactive by using HTML forms,
storing and reading back browser cookies.
 Advantages of dynamic sites
 By connecting dynamic sites to a databases you can easily pull in information in an
organized and structured way depending on how the user wants to view them.
 This ability to connect to a database means that you can also create a content
management system - an interface which allows the client to input and manage data
via a web-based series of administration pages.
 Disadvantages of dynamic sites
 The design of a dynamic site is more fixed than a static one because many of the
pages are essentially a template into which data and content is poured to create
multiple pages of a similar type
 Costs are higher initially than for a static site, and additional functionality may also
cost more
6. Web page development tools

Web developers create the program codes to manipulate the supplied content, based on the site
design. A web programmer should use a set of programing languages to compile specific functions
that the webpages should do in the background. Here is a set of important programing languages
that a web programmer must be good at.

A. Client side scripting languages

I. HTML

Compiled By Jemal Zuber (MSc) 7

  Hypertext Markup Language is the most widely used language to write
Web Pages
 It is widely used to format web pages with the help of different tags
available in HTML language.
 Using html you can simply mark-up a text document with tags that tell
a Web browser how to structure it to display
II. CSS
 Cascading style sheet give beauty for HTML web pages
 It allows you to change the color of any image on the page, add
backgrounds and borders, change the visual appearance of elements, as
well as customize the entire layout of a page.
III. JavaScript
 JavaScript is included in an HTML document for the code to be
interpreted by the browser
 JavaScript code is executed when the user submits a form and when user-
initiated events such as button clicks, link navigation, and other actions
happened
 It interact with the user, control the browser, and dynamically create
HTML content.
B. Server side scripting languages
I. PHP
 PHP is a server side scripting language that is embedded in HTML
 It is used to manage dynamic content, databases and session tracking
 It is integrated with a number of popular databases such as MySQL,
Oracle, Microsoft SQL Server and others
7. Web Hosting and Domain Name Registration

Web Hosting

Web Hosting is a service that allows hosting/post web-server applications (website or web page)
on a computer system through which web-browser client can have easy access to electronic content
on the Internet.

Compiled By Jemal Zuber (MSc) 8

Web Server or Web Host is a computer system that provide web hosting. When Internet users want
to view your website, all they need to do is type your website address or domain into their browser.
The user’s computer will then connect to your server and your web pages will be delivered to them
through the browser. Basically, the web hosts allows the customers to place documents, such as
html pages, graphics, and other multimedia files etc. onto a special type of computer called a web
server. It provides constant and high speed connection to the backbone of Internet. Different types
of Web hosting services are explained bellow.

1. Free Hosting

This is a free non-paid web hosting service. This type of hosting is available with many prominent
sites that offer to host some web pages for no cost.

Advantages

 Free of cost
 Use websites to place advertisements. banners and other forms of advertising media

Disadvantages:

 Customer support is missing

 Low bandwidth and lesser data transfer
 No control over your website
2. Shared/Virtual Hosting

It is a web hosting service where many website reside on one web server connected to the internet.
This type of hosting is provided under one’s own domain name, www.yourname.com. With a
hosting plan with the wed b hosting company, one can present oneself as a fully independent
identity to his/her web audience.

Advantages

 Easy and affordable

 Secured by hosting provider
 24/7 Technical support

Disadvantages

Compiled By Jemal Zuber (MSc) 9

  Shared resources can slow down the whole server
 Less flexible than dedicated hosting
3. Dedicated Hosting

Hosted on a dedicated server, this type of hosting is best suited for large websites with high traffic.
In this, the company wishing to go online, rents an entire web server from a hosting company. This
is suitable for companies hosting larger websites, maintaining other’s sites or managing a big
online mall etc.

Advantages

 Ideal for large business

 Strong database support
 Unlimited software support
 Powerful e-mail solutions
 Complete root access to your servers

Disadvantages:

 It is very expensive
 Requires superior skill sets
4. Co-located Hosting

This hosting lets you place your own web server on the premises of a service provider. It is similar
to that of dedicated hosting except for the fact that the server is now provided by the user-company
it self and its physical needs are met by the hosting company.

Advantages

 Greater Bandwidth High Up-Time

 Unlimited Software Options
 High Security

Disadvantages

 Difficult to configure and debug

 It is expensive

Compiled By Jemal Zuber (MSc) 10

  Require high skills

Domain Name Registration

Domain name, often referred to as “web address”, is the address that people type into a browser
address bar to find your website. A registered domain name is unique to you and cannot be used
by anyone else, as it functions on the Internet in a similar way like a street address in the physical
world.

Every computer on the Internet has an address which is unique in nature. It is a string of numbers
and is referred to as IP address. To communicate with each other, computers identify another
computer via its IP address. It is represented in either dotted decimal notation or in binary decimal
notation. Example: The address 172.16.122.204 when represented like these in dotted-decimal
notation and it can be converted into binary notation. After conversion, it becomes 10101100
00010000 01111010 11001100.

But it is difficult for humans to remember this IP address. Thus to find the location on the Internet
easily, DNS was invented. DNS stands for Domain Name Server. It implements a distributed
database which translates IP address into a unique alphanumeric address which is referred to as
Domain Names. Basically, a domain name is the sequence of letters and or numbers separated by
one or more period (“.”). It is just like a pointer to a unique IP address on the computer network.
As an analogy one can consider Domain name as address and DNS as address book of the Internet.

Example 1

Let us consider the following domain name

www.yahoo.com

Compiled By Jemal Zuber (MSc) 11

  In this “yahoo.com” is called domain name.
 “www.” tells the browser to look for World Wide Web Interface for that domain.
 As from the above example, it is clear that domain names are easy to remember than an IP
address.

As from the above example, it is clear that domain names are easy to remember than an IP address.

Example 2

Assume that the IP address of www.yahoo.com is 69.147.76.15. It is easy to remember

www.yahoo.com as compared to IP address 69.147.76.15.

Thus, we can say like these; domain name refers to the string of letters associated with an IP
address and DNS is a mechanism used to convert an IP address to the domain name.

Types of Domain Names

DNS has organized all the domain names in a hierarchical structure. At the top of this hierarchy
come various Top-level domains followed by second and third-level domains and sub-domains.
All these types of domain names are described as follows.

Top Level Domains (TLD)

The Top Level Domains are at the highest level in DNS structure of the Internet. It is sometimes
also referred to as an extension. It is further categorized into- country code TLDs and generic
TLDs which Country is described as follows

 Country code Top Level Domain (ccDLDs)

It consists of two-letter domains that include one entry for every country. Example – .us for United
Nations, .jp for Japan etc. To target the local audience it is used by companies and organizations.
Only the residents of the country are allowed to be their specified ccTLD but now some countries
allowed the users outside their country to register their corresponding ccTLDs.

 Generic Top Level Domains (gTLDs)

Compiled By Jemal Zuber (MSc) 12

These are open for registration to all the users regardless of their citizenship, residence or age.
Some of the gTLD s are .com for commercial sites, .net for network companies, .biz for business,
.org for organizations, .edu for education.

Advantages of Domain Name

 User not need to remember the IP address.

 More reliable and secure.

Disadvantages of Domain Name

 IP address changes due to several reasons, due to this IP address of the computer get
changed but DNS may have cached previous IP which will lead to give us wrong
information.

Compiled By Jemal Zuber (MSc) 13