Web Design and Programming

Chapter One
Overview of the Internet and WWW

By Tesfahun N.
Outline
➢Over view of computer language and internet

➢To understand the importance of standards .

➢Describe the purpose of an ISP

➢Describe the hierarchical structure of the Internet.

➢Universal Addressing (TCP/IP, DNS), Universal

➢Protocols (HTTP, URLs, HTML, FTP)

Introduction
❖Computer program:- is the procedure for solving
a problem with a computer.

❖ programming language:- programmers use to

develop software programs, scripts, or other sets
of instructions for computers to execute.
➢It is a set of instructions written in any particular
language (C, C++, Java, and Python) to implement a
definite task
3
Introduction
❖A programming language can create
✓ desktop applications
✓ websites
✓ mobile applications.

4
Introduction
❖What is programming?

➢ Programming refers to a technological process for

telling a computer which tasks to perform in order to
solve problems.

➢ Programming is writing computer code to create a

program, in order to solve a problem.

➢Programs consist of a series of instructions to tell a

computer exactly what to do and how to do it.

5
Introduction
• Programming enables to

✓ allows you to interact with the site’s

✓In mobile app programming can make it possible for you

to order food, book a rideshare service etc.

✓operate businesses more efficiently

✓Space exploration is made possible through programming

6
What is web
❖Web:- is a hypermedia-based structure which provides a
source of browsing information over the internet in a non-
sequential format .

❖Why we use web?

✓provides a communication platform for users to retrieve

and exchange

7
Mark up Language
❖Markup Language:- standard text-encoding system
consisting of a set of symbols inserted in a text document
to control its structure, formatting, or the relationship
between its parts.

❖ The most widely used markup languages are

✓ SGML (Standard Generalized Markup Language),

✓HTML (Hypertext Markup Language), and

✓XML (Extensible Markup Language).

8
Cont.…
❖ The markup symbols can be interpreted by a device
✓ Computer

✓ printer

✓ browser, etc .

❖A marked-up document thus contains two types of text:

1. text to be displayed

2. markup language on how to display it.

9
HTML
HTML:-

❖S tands for HyperText Markup Language.

❖It is a standard markup language for web page

creation.

❖ It allows the creation and structure of sections,

paragraphs, and links .

10
Cont..
We use HTML For

❖Web development:- to design how a browser displays

web page elements, such as text, hyperlinks, and media
files.

❖Internet navigation:- Users can easily navigate and

insert links between related pages and websites as

❖Web documentation:- possible to organize and

format documents

11
Programming Vs Scripting
✓ Compilation is necessary. ✓ No need for compilation

✓ Not interpreted. . ✓ Interpretation is required.

✓ Full- length code. ✓ Small chunks of code.

✓ Self-executable, no host is ✓ Dependent on some other

required. platform, host is required.

✓ Used in Application/Software ✓ Used in web development.

development.

12
Internet and Its Uses

❖It is an international network of networks that

links together billions of computers.

❖It is commonly referred to as the 'Net’.

❖It helps individuals and businesses sectors to

share information, resources, and services.

13
Cont..
❖Internet used for:-
✓E-Commerce
✓Advertise
✓Research against the competitor
✓Training: interactive medium and long
distance learning
✓Communications
The Internet and Standards
❖Nowadays increasing number of new devices and
technologies coming online.

❖Internet standards.

✓Is a set of rules for how something must be done.

✓ensure that all devices connecting to the network

use the same set of rules.

✓Internet Standards are created and published by

the Internet Engineering Task Force (IETF).

15
Cont..
❖There are many of Internet standards that help define
the rules for how devices communicate on networks.
Examples
✓Hypertext Transfer Protocol (HTTP) ...
✓Long Range Wide Area Network (LoRaWAN) ...
✓Bluetooth. ...
✓File transfer protocol (FTP)
✓Etc.

16
Delivering Internet services to end-users

❖ Internet service provider (ISP)

✓is an organization that provides a myriad of services.

✓ISP can be organized in various forms, such as commercial,

community-owned, non-profit etc.

✓ISPs provided Internet access, domain name registration, web

hosting etc. .

✓To gain Internet access, it is first necessary to have a

connection to ISP
17
Delivering Internet services to end-users
❖ISPs offer various connection options.

1.Dialup access

❖an inexpensive option that uses any phone line and a

modem.
2.Digital subscriber line (DSL)
➢more expensive than dialup, but provides a faster connection.
➢DSL also uses telephone lines, but unlike dialup access,
DSL provides a continuous connection to the Internet.
➢Needs a special high speed modem to connect the host
18
Delivering Internet services to end-users
3.Cable modem

➢A cable modem is a connection option offered by ISP

➢The Internet signal is carried on the same coaxial cable that

delivers cable television to homes and businesses.

4. Satellite

➢Satellite connection is an option offered by satellite service

providers.

➢The user's computer connects through Ethernet to a satellite

modem that transmits radio signals to the nearest point of
presence (POP) within the satellite network. 19
Internet Hierarchy
❖ The Internet has a hierarchical structure.

❖ At the top of this hierarchy are the ISP organizations.

❖ The ISP point of presence (POPs) connect to an Internet Exchange Point (IXP)
also called a Network Access Point (NAP).

❖ A point of presence was a location where a long-distance carrier could terminate

services and provide connections into a local telephone network.

❖ An IXP or NAP is where multiple ISPs join together to gain access to each
other's networks and exchange information.

❖ Internet backbone is like an information super highway that provides high-speed

data links to interconnect the POPs and IXPs in major metropolitan areas around
the world.

20
Overview of Internet
❖Web server –
❖It is a piece of computer software that can respond
to a browser's request for a page, and deliver the
page to the Web browser through the Internet
❖Hypertext –
❖ Machine-readable text
❖It is not sequential but is organized
❖Internet Service Provider (ISP)
❖A company that provides Internet service
21
Terms
❖Uniform Resource Locator (URL)

✓It is an address on the Internet, such as

http://www.Bit.edu.et, which enable es computers and
other devices to visit it.

❖Web Address: the address of information and/or resources

available on the internet.

❖http: http stands for hypertext transfer protocol.

❖ftp: ftp stands for File Transfer Protocol. It is used to upload

or download various files. 22
How does internet is work?
A server
machine running
A machine running a a web server
browser Browser connects
and requests a page

Server sends back

the requested page

23
Overview of Internet
❖How does it work?
❖ Requesting the page http://www.yahoo.com
❖ The browser broke the URL into 3 parts:
✓ The protocol ("http")

✓ The server name ("www.yahoo.com")

✓ The file name ("index.html")

❖ Browser ➔ DNS ……Name to IP translations

❖ Browser➔ Server …..Creation of connection

24
Lecture II
.
.
Overview of Internet
❖Top Level Domain (TLD) names
❖.com - Originally for commercial organizations
✓ www.google.com
❖.Net - Internet service providers and other network-
related companies
✓ www.ethio.net
❖.org - Noncommercial (often nonprofit) organizations
✓ www.sourceforge.org
❖.gov - government agencies
✓ www.ena.gov.et
❖.mil - military
❖.edu - Educational domains
✓ www.Bit.edu.et
26
Overview of Internet
Three-or-more-letter TLDs are coming into use,

such as these:

➢ .aero - Airlines

➢ .coop - Cooperatives

➢ .info - Anyone

➢ .name – Individuals
27
TCP/IP, DNS
Internet Address/internet protocol (IP)

❖ IP stands for "Internet Protocol,"

❖An IP address is a unique address that identifies a

device on the network.

❖Each computer connected to the Internet must have a

unique address, known as IP address

28
Cont..
❖ Used as identifier or ID to sheer information

between devices on a network.

❖Internet addresses are in the form xxx.xxx.xxx.xxx

where xxx must be a number from 0 – 255.

29
Cont..
What is TCP/IP(Transmission Control Protocol/IP)?

❖ TCP/IP stands for Transmission Control

Protocol/Internet Protocol.

❖TCP/IP is a set of standardized rules that allow

computers to communicate on a network

30
How do TCP and IP differ?
❖TCP and IP are two separate computer network
protocols.
✓ IP is the part that obtains the address to which data is sent.

✓ TCP is responsible for data delivery once that IP address has

been found.

✓ It's possible to separate them, but there isn’t really a point in

making a difference between TCP and IP. Because they're so
often used together.

31
Domain name system (DNS)
❖ it is a collection of databases that translate
hostnames to IP
✓E.g. www.Google.Com, to 216.58.217.46.

❖Without DNS ( especially search engines like google),

navigating the internet wouldn't be easy since we'd have
to enter the Ip address of each website we want to visit.

32
Firewall

❖A firewall is a network security system.

❖It is used to monitor and filter network traffic

❖If an incoming packet of information is flagged by

the filters, it is not allowed to pass through

33
Cont..
Methods/Types of Firewalls
❖Packet filtering:-
➢ controls the network access by analyzing the outgoing and
incoming packets.
➢ It lets a packet pass or block by comparing with pre-established
criteria like allowed IP addresses, packet type, port number,
❖Proxy service:-
➢ it is the most secured type of firewalls
➢ filtering messages at the application layer.
❖Stateful inspection:-
➢ active connections and uses this information to determine
which network packets to allow through the firewall.
34
World Wide Web
❖ it is a collection of websites or web pages document
stored in web servers

❖ These websites contain text pages, digital images, audios,

videos, etc.

❖Users can access the content of these sites from any part
of the world

❖ WWW is a distributed client-server service,

35
World Wide Web
❖ The building blocks of the Web are web pages which are
formatted in HTML and connected by links called
"hypertext" or hyperlinks and accessed by HTTP.

36
World Wide Web
❖The documents in the WWW can be grouped into
❖ Statice Documents :- a document with a fixed content
❖ Dynamic Documents (server Sidé):-
✓ content of the document is created when the browser
accesses the server.
✓ When the browser request arrives, the server runs an
application that creates dynamic documents.
❖ Active Documents (client side):-
✓ provide a continuous update of the screen content
37
World Wide Web
❖Web applications functionality

✓web mail

✓online retail sales

✓wikis, weblogs

✓online news, radio, tv, etc….

✓multi-player online role-playing games, etc…

38
World Wide Web
❖components of a web app

➢Databases
✓ possibly distributed or mirrored

➢session information
✓ stateful servers hold session information

✓ may persevere in a database

➢global information
• shared by all or many web app processes

• e.g. number of hits on the site, user profiles 39

Client-Server Architecture
❖A network architecture in which each computer or
process on the network is either a client or a server

❖Components of client/server architecture:

✓Communication network
✓Clients

✓Servers

40
HTTP

❖Hypertext Transfer Protocol (HTTP):

application-level protocol for distributed,

collaborative, hypermedia information systems

➢ It is generic used for

✓ as well using extensions of its request methods,

✓ error codes

✓ headers. 41
HTTP versions
❖ HTTP/1.0 allowed only connectionless message passing

➢ each request/response required a new connection

➢ to download a page there is overload the server, require

lots of overhead

❖HTTP/1.1 provides persistent connection by default

➢ once client & server connect, remains open until told to close it (or
timeout)

➢ reduces number of connections, saves overhead

➢ client can send multiple requests without waiting for responses

42
HTTP Request Types
❖GET and POST used to send data from the client-server.
❖ GET
➢ Appends visible data directly to the end of the URL
➢ Limited to 1024 characters for the entire URL
➢ Result page can be bookmarked and cached

❖ POST
➢ Sends form data in the HTTP request—invisible to users
➢ Virtually no limit
➢ Results are not cacheable or bookmarkable
43
HTTP Request Types

44
HTTP Requests header fields

❖ The client can specify additional

information in the request
✓ User-Agent - specifies the browser version
✓ Location
✓ email address of user
✓ If-Modified-Since -only send document if
newer than specified date used for caching
45
HTTP response from a Web server
HTTP/1.1 200 OK ]- Response Status
Date: Mon 06 Aug 2001 17:35:46 GMT ]- Date
Server: NCSA/1.3 ]- Web server
Location: http:// www.kelley.indiana.edu/adennis/home.htm ]- URL
Content-type: text/html ]- Type of file Respons
e Header
<html>
<head>
<title>Allen R. Dennis</title>
</head> Response
<body> Body

<H2> well came to web design and programming </H2>

<P>Welcome to the home page of Allen R. Dennis</P>
</body>
</html>

46
HTTP Response header fields
❖The first line of the server’s response contains a
status code 200 OK

200 OK request was processed successfully

301 Moved permanently document has been moved
304 Not modified if cached version is up-to-date
400 Bad request syntax error in client’s request
403 Forbidden client is not allowed access e.g., protected
404 Not found file could not be found
500 Internal server error server failed
503 Service unavailable server is overloaded

47
HTTP Response header fields
❖In addition to the status code, the server’s response
may include
✓ Date,
✓ Server info,
✓ Last-modified,
✓ Content-length,
✓ Content-type , Expires

48
https (Hyper Text Transfer Protocol Secure)

❖ is a secure version of the Hyper (http).

❖ Used to better in online banking.
❖ Web browsers such as Internet Explorer and Firefox
display a padlock icon to indicate that the website is
secure,

❖ When a user connects to a website via HTTPS, the

website encrypts the session with a digital certificate.
49
Static vs. dynamic pages
❖Static Web Pages

➢ Contents (text/links/images) are the same each time it is

accessed

e.g., online documents, most homepages

❖Dynamic Web Pages

➢Web pages must also provide dynamic content

➢pages must be fluid, changeable (e.g., rotating banners)

➢must be able to react to the user's actions, request and

process info, tailor services e.g., amazon.com, www.yahoo.com
50
Caching
Browsers cache pages temporary recent pages
➢ when a page is requested, check to see if already in
cache if not in the cache, used GET/POST request
when response message arrives,
➢ display page and store in cache (along with header info)
➢ if already stored in the cache, send GET request with
If-Modified-Since header set to the data of the
cached page
51
Cookies
❖ cookie is a collection of information about the user
❖server can download a cookie to the client’s machine
using the “Set-cookie” header in a response
❖many e-commerce apps require persistent memory of
customer interactions
e.g., amazon.com

remembers your name, credit card, past

purchases, interests
52
Client-Side Scripting versus Server-Side Scripting
❖ Client-side scripts
➢ Validate Reduce requests needed to be passed to
server
➢ Access browser
Eg. Java script, vb script etc
❖ Server-side scripts
➢ Executed on server
➢ Generate custom response for clients
➢ Wide range of programmatic capabilities
➢ Access to server-side software that extends server
functionality
➢ Eg ASP, PHP,prl,jsp 53
Designing Web Applications
Page Structure and Site Design

54
Designing Web Applications
To design web sites:-

(A) Gather information

1. Purpose of the web site/application.
2.from where the information comes from?

55
Designing Web Applications
(B) Organize the information:-
1. Alphabetical order
2. Chronological order- associated with date.
3. Geographical
4. Topical- by using topics.
5. etc.

56
Designing Web Applications

(C) Structure

1. Hierarchical:-takes a top down approach (from high

level categories to logical sub categories) and helps
to visualize the structure of the web site.

2. Hypertext structure-text or an image linked to

another page.

3. Database structure-used for easily to maintain and

updated outside of the web site itself.
57
Designing Web Applications
(D) Develop a navigation schema:-user moves around the
site and finds the information.

These include…..

✓ Forward and backward arrows.

✓ Bookmarks or favorites lists

✓ Standard display for visited/unvisited lists

✓ Status bar

✓ Page URLs
58
Cont..
(E) Layout the web pages:-it is the way pages are arranged.

A few things should be remember to lay out a web site….

✓ Use industry standard HTML tags and test in

different browsers browser versions.

✓ Monitor resolution- can also affect the width and

the height of the page so fix the computer resolution
before.

✓ Data transfer-file size:-try not to put unnecessary

images because it will slow down 59
Cont..
(F) Web accessibility:-

1. Hypertext links should be descriptive.

2. Provide alternative text descriptions for all

graphics.

60
Web site evaluation
❖Accuracy

✓ How reliable is the information provided at the site?

❖Authority

✓ Is the author or editor of the Web page qualified to write on the

stated

❖Currency

✓ Is the information provided at the site up-to-date or out-of-date?

❖Coverage

✓ What topics (subjects) are covered by the Web site?

61
Thanks
?