Web Programming

1
Objectives
Applied
1. Load a web page from the Internet or an intranet into a web
browser.
2. View the source code for a web page in a web browser.
Knowledge
1. Describe the components of a web application.
2. Distinguish between the Internet and an intranet.
3. Describe HTTP requests and responses.
4. Distinguish between the way a web server processes static web
pages and dynamic web pages.
5. Name the five major web browsers.
6. Describe the use of JavaScript.
7. Distinguish between HTML and CSS.

2
Objectives (cont.)
8. Explain how you deploy a website on the Internet.
9. Describe the components of an HTTP URL.
10. Describe these five web development issues: usability, cross-
browser compatibility, user accessibility, search engine
optimization, and Responsive Web Design.

3
The components of a web application

Desktop Web Server

Computer
The
Internet

Tablet Smart Phone

4
The architecture of the Internet

LAN LAN LAN LAN

LAN LAN
WAN WAN
IXP

IXP IXP

WAN WAN
LAN LAN

LAN LAN LAN LAN

5
A static web page

6
How a web server processes a static web page

HTTP request
HTML
file
HTTP response
(with HTML)

Client
Web Server
(web browser)

7
A dynamic web page at amazon.com

8
How a web server processes a dynamic web page
HTTP request

HTTP response
(with HTML)

Client
Web Server Application Server Database Server
(web browser)

9
Web browsers
 Chrome
 Internet Explorer
 Firefox
 Safari
 Opera

10
Server-side scripting languages
 ASP.NET
 JSP
 PHP
 ColdFusion
 Ruby
 Perl
 Python

11
A web page with image swaps and rollovers

12
How JavaScript fits into this architecture

HTTP request
JavaScript
HTTP response HTML Files
files
(with HTML and
JavaScript)

Client
Web Server
(web browser)

13
Three of the common uses of JavaScript
 Data validation
 Image swaps and rollovers
 Accordions

14
Notable releases of the HTML standards
 HTML 1.0 (1993)
 HTML 2.0 (1995)
 HTML 4.0 (1997)
 HTML 4.01 (1999-2001)
 XHTML 1.0 (2000-2002)
 XHTML 1.1 (2001)
 HTML 5 (2008)
 HTML 5.1 (2013)

15
Two websites to become familiar with
 World Wide Web Consortium (W3C):
www.w3.org
 Web Hypertext Application Technology Working Group
(WHATWG):
www.whatwg.org

16
Four free text editors
 Aptana Studio 3 (Cross-Platform)
 Brackets 1.0 (Cross-Platform)
 Notepad++ (Windows)
 TextMate (Mac)

17
Adobe Dreamweaver CC

18
Popular IDEs for web development
 Adobe Dreamweaver CC
 Microsoft Visual Studio
 JetBrains
 Eclipse
 NetBeans

19
FileZilla as it is used to upload files

20
Some popular FTP programs
 FileZilla
 FTP Voyager
 CuteFTP
 Fetch

21
The components of an HTTP URL
http://www.modulemedia.com/ourwork/index.html
protocol domain name path filename

22
The components of an HTTP URL
http://www.modulemedia.com/ourwork/index.html
protocol domain name path filename

• Protocols determine network language

• Usually http or https for web browsers

• Other Common Protocols:

• https:// (secure)
• ftp:// (file transfer)
• mailto:// (e-mail address)
• file:// (local files)

23
The components of an HTTP URL
http://www.modulemedia.com/ourwork/index.html
protocol domain name path filename

Subdomain Top-Level Domain

• Subdomains
• www (web server, sometimes optional)
• ftp (file server)
• en (“English” on Wikipedia)
• www.cs (“Computer Science”, “web” at Pitt)

• Top-Level Domains (TLD)

• .com, .org, .net, .gov, .mil
• .us, .ca, .uk, .jp
• newer ones: .biz, .info, …
24
The components of an HTTP URL
http://www.modulemedia.com/ourwork/index.html
protocol domain name path filename

• Machines (servers)
• com > modulemedia > www
• fixed by webserver

• Files (path)
• / > ourwork > index.html

25
The web page at www.modulemedia.com

26