RCS 123: WEB DESIGN &

PROGRAMMING I

1
 Learning Outcomes
 Describe the evolution of the Internet and the Web
 Explain the need for web standards
 Describe universal design
 Identify benefits of accessible web design
 Identify reliable resources of information on the Web
 Identify ethical use of the Web
 Describe the purpose of web browsers and web servers
 Identify Internet protocols
 Define URIs and domain names
 Describe XHTML and HTML
 Create your first web page
 Use the body, head, title and meta elements
 Name, save, and test a web page

2
 The Evolution of the Internet
 Internet
Interconnected network of computer networks
ARPAnet
○ Advanced Research Project Agency
○ 1969 – four computers connected
NSFnet
○ National Science Foundation

Use of the Internet was originally limited to

government, research and academic use

1991 Commercial ban lifted

3
 Growth of the Internet

 
Figure 1.1 Growth of Internet Usage

4
 Reasons for
Internet Growth in the 1990s
 Removal of the ban on commercial activity

 Development of the World Wide Web by Tim Berners-

Lee at CERN

 Development of Mosaic, the first graphics-based web

browser at NCSA
 Convergence of technologies:
 Affordable personal computers with GUI Operating Systems
 Affordable Internet service providers

5
 The World Wide Web
The graphical user interface to information
stored on some of the computers
connected to the Internet.

6
 Web Standards and the W3C
Consortium
W3C – World Wide Web Consortium
 Develops recommendations and prototype
technologies related to the Web

 Produces specifications, called Recommendations,

in an effort to standardize web technologies

 WAI – Web Accessibility Initiative

7
Web Accessibility
“The power of the Web is in its universality. Access by
everyone regardless of disability is an essential
aspect.” – Tim Berners-Lee

Accessible Websites
provide accommodations that help individuals
to individuals with visual, auditory, physical,
and neurological disabilities overcome barriers

WAI – Web Accessibility Initiative

 Develops accessibility recommendations
 WCAG 2.0

8
 Web Accessibility
Section 508 of the Rehabilitation Act
Requires that government agencies must give
individuals with disabilities access to information
technology that is comparable to the access
available to others

9
Universal Design
“The design of products and
environments to be usable by all people,
to the greatest extent possible, without
the need for adaptation or specialized
design.”

10
 Information on the Web
 Reliability and information
Evaluate the credibility of the site

 Ethical use of information

11
 Network Overview

Network
Two or more computers connected together for the
purpose of communicating and sharing resources

12
 The Client/Server Model
 Client/Server can describe a relationship between
two computer programs – the "client" and the
"server".
 Client
requests some type of service (such as a file or
database access) from the server.
 Server
fulfills the request and transmits the results to the client
over a network

13
 The Client/Server Model
 The Internet
Client/Server Model
Client: Web Browser
Server: Web Server

14
 Internet Protocols
 Protocols
› Rules that describe the methods used for
clients and servers to communicate with
each other over a network.

 There is no single protocol that makes the

Internet and Web work.

 A number of protocols with specific

functions are needed.

15
 Common Internet Protocols
 Official Communication Protocol: TCP/IP

 Specialized Protocols:
File Transfer: FTP
E-mail: SMTP, POP3, IMAP
Websites: HTTP

16
 HTTP-Hypertext Transfer Protocol
A set of rules for exchanging files such as text,
graphic images, sound, video, and other
multimedia files on the Web.
HTTP Request

HTTP Response

 Web browsers send HTTP requests for web pages and

their associated files.

 Webservers send HTTP responses back to the web

browsers.

17
 IP Address
 Each device connected to the Internet has a
unique numeric IP address.

 These addresses consist of a set of four groups

of numbers, called octets.
74.125.73.106 will get you Google!
 An IP address may correspond to a domain
name.

18
 Domain Name
Locates an organization or other entity on the
Internet

Domain Name System

◦ Divides the Internet into logical groups and
understandable names
◦ Associates unique computer IP Addresses with the
text-based domain names you type into a web
browser
◦ Browser: http://google.com
◦ IP Address: 74.125.73.106

19
URI-Uniform Resource
Indicator
URL
Uniform
Resource
Locator
Represents

the address
of a resource
on the
Internet.

20
 Top-Level Domain Name(TLD)
 A top-level domain (TLD) identifies the right-
most part of the domain name.

 Some generic TLDs:

.com, .org, .net, .mil, .gov, .edu, .int, .aero,
.asia, .cat, .jobs, .name, .biz, .museum, .info,
.coop, .pro, .travel

21
 County Code TLDs
 Two character codes originally intended to indicate
the geographical location (country) of the web site.

 In practice, it is fairly easy to obtain a domain

name with a country code TLD that is not local to
the registrant.

 Examples:
.tv, .ws, .au, .jp, .uk

22
 Domain Name System
 The Domain Name System (DNS) associates
Domain Names with IP addresses.
Domain Name
IP Address DNS
Web Browser Web
requests web page Use TPC/IP
to send HTTP Request Server

Use TCP/IP
to send HTTP Responses
with web page files & images
Web Browser
displays web page
23 23
 Markup Languages
 SGML – Standard Generalized Markup
Language
› A standard for specifying a markup language or
tag set

 HTML – Hypertext Markup Language

› The set of markup symbols or codes placed in a
file intended for display on a web browser.
 Element or tag – individual markup code
 Attribute – modifies the purpose of a tag

24
 Markup Languages (2)
 XML – eXtensible Markup Language

A text-based language designed to describe, deliver,

and exchange structured information.

It is not intended to replace HTML –

it is intended to extend the power of HTML by
separating data from presentation.

25
 Markup Languages (3)
 XHTML – eXtensible Hypertext Markup Language

Developed by the W3C as the reformulation of HTML 4.0

as an application of XML.

It combines the formatting strengths of HTML 4.0 and the

data structure and extensibility strengths of XML.

26
 Markup Languages (4)
 HTML 5

› The next version of HTML 4 and XHTML 1

 Currently in draft status
 Incorporates features of both HTML and XHTML
 Adds new elements
 Eliminates some elements
 Intended to be backward compatible

27
 Your First HTML5 Web Page:
index.html
<!DOCTYPE html">
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>
... body text and more HTML tags go here ...
</body>
</html>

28
 Under the Hood of
a Web Page

DTD – describes the markup language syntax

HTML element– contains the web page document
Head element – contains the head section
The head section contains information that describes the
web page document
Title element– Text displays in title bar of window
Meta element – describes the character encoding
Body element – contains the body section
The body section contains the text and elements that
display in the browser viewport.
29
Assignment1
 How do you make sure that the developers
understand your designs and implement them
correctly? What formats do you typically use
for handing files off for development?
 Design a web page that should provide
information about your career plan and with an
image at a bottom of the page. An image
should enable for navigation to any other two
pages you have created.

30