1. Introduction to web development
Chapter 1

2. Learning Outcomes
Load a web page from the Internet or an intranet into a web browser.
View the source code for a web page in a web browser.
Describe the components of a web application.
Describe HTTP requests and responses.
Distinguish between the way a web server processes static web pages and dynamic web pages.
Name the five major web browsers.
Describe the use of JavaScript.
Distinguish between HTML and CSS.
Explain how you deploy a website on the Internet.
Describe the components of an HTTP URL.

3. The Evolution of the 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

4. Growth of the Internet

5. Internet Usage-June 2016

6. Top 10 Internet (usage in millions June 2016)
China, 721.4
India, 462.1
United States, 286.9
Brazil, 139.1
Indonesia, 132.7
Japan, 115.1
Russia, 103.1
Nigeria, 97.2
Germany, 71.7
Mexico, 69.0

7. Reasons for Internet Growth that began in the 1990s
Removal of the ban on commercial activity
Development of the World Wide Web by Tim Berners-Lee at CERN (physics lab in Geneva, Switzerland) beginning in 1989
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

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

9. 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

10. Web Accessibility WCAG 2.0
“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
Web Content Accessibility Guidelines

11. 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

12. 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.” – The Center for Universal Design

13. Components of a Web Application
The Client is anywhere your users are viewing your site: mobile devices, laptops, or desktop computers. 

14. Architecture of the Internet

15. Static versus Dynamic Web Pages
content changes only when web developer uploads new content
consists of a series of HTML files, each one representing a physical page of a website
each page is a separate HTML file
Dynamic
content changes dynamically, sometimes based on user input
uses server technologies to dynamically build a webpage right when a user visits the page
the server finds a bunch of different pieces of information that it writes into a single cohesive web page, which is what you see

16. Web server delivering static web page
Web server delivering dynamic web page

17. Web Browsers: software used to view web content
Firefox
Chrome
Internet Explorer
Opera
Safari

18. File Transfer Programs: software used to upload (or download) content to a web server
FileZilla
WS_FTP
SmartFTP (Windows only)
CoreFTP
FireFTP
CyberDuck
Fetch (Mac only)

19. FileZilla
Web Programmer’s Computer
Web Server Computer

20. Web Programming Languages
Server-side: executed on the server side by the web server
Client-Side: executed on the client side by web browser
ASP.NET
PHP
JSP
ColdFusion
Ruby
Perl
Python
JavaScript
JavaScript Frameworks
Ajax
jQuery
Node.js
Bootstrap

21. How JavaScript is implemented
Common uses of JavaScript
Form Data Validation
Image swaps and image rollovers
Accordions
Dropdown menus

22. 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.

23. Common Internet Protocols
Official Communication Protocol: TCP/IP
Specialized Protocols:
File Transfer: FTP
SMTP, POP3, IMAP
Websites: HTTP

24. 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.
Web browsers send HTTP requests for web pages and their associated files.
Web servers send HTTP responses back to the web browsers.
HTTP Request
HTTP Response

25. 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 will get you Google!
An IP address may correspond to a domain name.

26. 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:
IP Address:

27. What happens if the user omits part of the URL
URL: Uniform Resource Locator Represents the address of a resource on the Internet.
What happens if the user omits part of the URL
If you omit the protocol, the default of will be used
If you omit the filename, the default document name for the web server will be used
This is typically index.html (or default.html)
This is why we ALWAYS name our website’s Home Page index.html in CPT 162

28. TLD: Top-Level Domain Name
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
Country Code TLDs are 2 character codes intended to indicate the geographical location (country) of the web site: .tv, .ws, .au, .jp, .uk

29. Domain Name System
The Domain Name System (DNS) associates Domain Names with IP addresses.
How does it work?
End User types domain name into Web Browser address bar
DNS returns ip address of that domain
Web Browser sends HTTP request to that ip address
HTTP request is received by Web Server (whose ip address matches) where content is stored
Web Server sends file(s) back to Web Browser using HTTP response 29

30. Page Requests Page Request Page Response Domain Name DNS IP Address
Web Browser requests web page
Use TPC/IP to send HTTP Request
Web Server
Page
Response
Use TCP/IP to send HTTP Responses with web page files & images
Web Browser displays web page 30

31. HTML – Hypertext Markup Language
Used to identify/describe the structure of the content in the web page
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
Examples
<head></head>
<body></body>
<h1></h1>
<p></p>

32. CSS – Cascading Style Sheets
Used to describe how the HTML elements are to be displayed (formatted) on screen, paper, or in other media
A CSS rule-set consists of a selector and a declaration block
Declaration blocks are made up of property value pairs
Examples
h1 {color:blue;margin-top:10px}
p {text-align:left; line-height:1.25}

33. 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> <p>Hello World!</p> </body> </html>

34. 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.

35. Name, Save and Test Your Web Page
Create a root folder for your website
Create your file in a text editor and save as index.html, if it is the home page for the website
Text Editors Windows: Notepad, Notepad++
Text Editors Mac: TextEdit, TextMate, BBEdit
Launch a web browser and open your file
Web Browsers: Internet Explorer, FireFox, Chrome, Opera, Safari

36. Cross Browser Compatibility
“Compatibility” is not a term which means “looks and behaves identically” — instead, it may be better described as “performs equivalently under alternative conditions.” 
Test your web pages on all of the major browsers, including older versions of Internet Explorer that are still in common use.
Use the HTML5 and CSS3 features that are supported by most modern browsers, which are the features that are presented in this book. But use the workarounds so those features will work in all browsers still in use.

37. Responsive Web Design (RWD)
RWD refers to websites that are designed to adapt gracefully to the screen size.
Typically, the overall look-and-feel of a website will remain consistent from one screen size to the next.
Media queries, scalable images, and flexible layouts are the backbone of RWD.