You are on page 1of 45

Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 1
Chapter 1
Introduction to
web development
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 2
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.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 3
Objectives (cont.)
7. Distinguish between HTML and CSS.
8. Explain how you deploy a web site on the Internet.
9. Describe the components of an HTTP URL.
10. Distinguish between cross-browser compatibility, user
accessibility, and search engine optimization.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 4
The components of a web application
Web Server
The Internet
`
Client
Tablet Smart Phone
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 5
The architecture of the Internet
LAN LAN LAN LAN
LAN
LAN
LAN LAN LAN
LAN
LAN
LAN
WAN WAN
WAN WAN
IXP IXP
IXP
` `
`
`
` `
`
`
`
` ` ` ` ` `
`
`
` `
` `
`
`
` ` ` ` ` `
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 6
A static web page
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 7
How a web server processes a static web page
HTTP request
HTTP response
(with HTML)
HTML
file
Web Server
`
Client
(web browser)
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 8
A dynamic web page at amazon.com
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 9
How a web server processes a dynamic web page
Application Server Web Server
Application
script
Database Server
HTTP request
HTTP response
(with HTML)
`
Client
(web browser)
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 10
Web browsers
Internet Explorer
Firefox
Chrome
Safari
Opera
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 11
Server-side scripting languages
ASP.NET
JSP
PHP
ColdFusion
Ruby
Perl
Python
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 12
A web page with image swaps and rollovers
Image
rollove
r
Image
swap
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 13
How JavaScript fits into this architecture
HTTP request
HTTP response
(with HTML and
JavaScript)
HTML
file
Web Server
`
Client
(web browser)
JavaScript
file
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 14
Three of the common uses of JavaScript
Data validation
Image swaps and rollovers
Slide shows
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 15
The code for an HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript book</title>
</head>
<body>
<h1>JavaScript and DOM Scripting</h1>
<img src="javascriptbook.jpg"
alt="JavaScript Book">
<p>Today, web users expect web sites to provide
advanced features, dynamic user interfaces,
...
</p>
<p>Now, at last, your trainees can learn both
JavaScript and DOM scripting in this one great
book. To find out how this book does it,
<a href="">read more...</a>
</p><br><br><br>
</body>
</html>
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 16
The HTML displayed in a web browser
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 17
The link element for a style sheet
<link rel="stylesheet" href="book.css" >
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 18
The code for the CSS file named book.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 82.5%;
width: 500px;
margin: 0 auto;
padding: 1em;
border: 1px solid navy; }
h1 {
margin: 0;
padding: .25em;
font-size: 250%;
color: navy; }
img {
float: left;
margin: 0 1em; }
p {
margin: 0;
padding-bottom: .5em; }
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 19
The web page displayed in a web browser
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 20
Notable releases of the HTML standards
1993 HTML 1.0 Never adopted
1995 HTML 2.0 Adopted in November 1995
1997 HTML 4.0 New features
1999 HTML 4.01
2000 XHTML 1.0 Reformulates HTML with XML
2001 XHTML 1.1 Content presentation done with CSS
2008 HTML 5 Replaces both HTML 4 and XHTML 1
Still a working draft
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 21
Notable releases of the CSS standards
1996 1.0 Adopted in December 1996
1998 2.0 Adopted in May 1998
2004 2.1 A candidate standard in February 2004
Returned to working draft status in 2005
Became a candidate standard again in 2007
1999 3.0 A modularized version of CSS
Earliest drafts in June 1999
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 22
Two web sites to become familiar with
World Wide Web Consortium (W3C):
www.w3.org.
Web Hypertext Application Technology Working Group
(WHATWG):
www.whatwg.org.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 23
Aptana Studio 3 with open HTML and CSS files
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 24
Three free text editors
Aptana Studio 3
Notepad++
TextWrangler
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 25
Adobe Dreamweaver
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 26
Popular IDEs for web development
Adobe Dreamweaver
Microsoft Expression Web
Popular suites for web development
Adobe Creative Suite
Microsoft Expression Studio
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 27
FileZilla as it is used to upload files
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 28
Some popular FTP programs
FileZilla
FTP Voyager
CuteFTP
Fetch
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 29
The components of an HTTP URL
http://www.modulemedia.com/ourwork/index.html
protocol domain name path filename
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 30
The web page at www.modulemedia.com
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 31
What happens if you omit parts of a URL
If you omit the protocol, the default of http:// will be used.
If you omit the filename, the default document name for the web
server will be used. This is typically index.html, default.htm, or
some variation.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 32
Two ways to access a web page on the Internet
Enter the URL of a web page into the browsers address bar.
Click on a link in the current web page to load the next web page.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 33
Two ways to access a web page
on your own server or computer
Use the FileOpen command with Internet Explorer or the
FileFile Open command with Firefox.
Use the features of your text editor or IDE.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 34
Naming recommendations for folders and files
Create names for folders and files that consist of lowercase letters,
numbers, underscores or hyphens, and the period.
Use filenames that clearly indicate what a page contains. This is
good for search engine optimization.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 35
The HTML source code for modulemedia page
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 36
How to view the source code for a web page
Use the ViewSource or ViewPage Source command.
Right-click on the page and select the Source, View Source, or
View Page Source command.
How to view the CSS code in an external CSS file
In Firefox, click on the link in the link element that refers to it.
In Internet Explorer, enter the URL for the CSS file in the address
bar of your web browser.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 37
The current browsers (perfect score is 450)
Browser Release HTML5 Test Rating
Google Chrome 12 343
Opera 11 286
Mozilla Firefox 8 313
Apple Safari 5 293
Internet Explorer 9 141
The web site for these ratings
http://www.html5test.com
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 38
Guidelines for cross-browser compatibility
Test your web pages on all of the major browsers, including the
older versions of these browsers.
Use the HTML5 and CSS3 features that are supported by all of
the modern browsers.
But use the workarounds so the HTML5 and CSS3 features will
work in the older browsers too.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 39
How to test your web pages in older browsers
Use programs or web sites that offer this type of testing.
To find out whats available, try searching for browser testing
software or cross browser testing.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 40
The Articles tab of the WebAIM site
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 41
Accessibility laws that you should be aware of
The Americans with Disabilities Act (ADA).
Sections 504 and 508 of the federal Rehabilitation Act.
Section 255 of the Telecommunications Act of 1996.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 42
Types of disabilities
Visual
Hearing
Motor
Cognitive
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 43
Information sources
The WebAIM web site:
http://www.webaim.org.
The World Wide Web Consortium (W3C):
http://www.w3.org/TR/WCAG.
W3C also provides a specification called WAI-ARIA (Web
Accessibility InitiativeAccessible Rich Internet Applications):
http://www.w3.org/TR/wai-aria.
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 44
The search results for HTML5 documentation
Murach's HTML5 and CSS3, C1 2012, Mike Murach & Associates, Inc.

Slide 45
The most popular search engines
Google
Yahoo
Bing

You might also like