Chapter 1

Chapter 1
Introduction to
web development
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 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.
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.
The components of a web application
Client Web Server

The Internet
Tablet Smart Phone
The architecture of the Internet
` ` ` ` ` ` ` `
` LAN LAN LAN LAN `
LAN LAN
` WAN WAN `
IXP
` ` ` `
IXP IXP
` ` `
WAN WAN
` LAN LAN `
LAN LAN LAN LAN
` `
` ` ` ` ` `
A static web page
How a web server processes a static web page
HTTP request
HTML
` HTTP response file
(with HTML)
Client Web Server

(web browser)
A dynamic web page at amazon.com
How a web server processes a dynamic web page
HTTP request
` HTTP response
(with HTML)
Client Web Server Application Server Database Server

(web browser)
Application
script
Web browsers
 Internet Explorer
 Firefox
 Chrome
 Safari
 Opera
Server-side scripting languages
 ASP.NET
 JSP
 PHP
 ColdFusion
 Ruby
 Perl
 Python
A web page with image swaps and rollovers
Image Image
rollove swap
r
How JavaScript fits into this architecture
HTTP request
HTML
HTTP response file
` (with HTML and JavaScript
JavaScript) file
Client Web Server

(web browser)
Three of the common uses of JavaScript
 Data validation
 Image swaps and rollovers
 Slide shows
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>
The HTML displayed in a web browser
The link element for a style sheet
<link rel="stylesheet" href="book.css" >
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; }
The web page displayed in a web browser
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
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
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.
Aptana Studio 3 with open HTML and CSS files
Three free text editors
 Aptana Studio 3
 Notepad++
 TextWrangler
Adobe Dreamweaver
Popular IDEs for web development
 Adobe Dreamweaver
 Microsoft Expression Web
Popular suites for web development
 Adobe Creative Suite
 Microsoft Expression Studio
FileZilla as it is used to upload files
Some popular FTP programs
 FileZilla
 FTP Voyager
 CuteFTP
 Fetch
The components of an HTTP URL
http://www.modulemedia.com/ourwork/index.html
protocol domain name path filename
The web page at www.modulemedia.com
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.
Two ways to access a web page on the Internet
 Enter the URL of a web page into the browser’s address bar.
 Click on a link in the current web page to load the next web page.
Two ways to access a web page
on your own server or computer
 Use the FileOpen command with Internet Explorer or the
FileFile Open command with Firefox.
 Use the features of your text editor or IDE.
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.
The HTML source code for modulemedia page
How to view the source code for a web page
 Use the ViewSource or ViewPage 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.
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
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.
How to test your web pages in older browsers
 Use programs or web sites that offer this type of testing.
 To find out what’s available, try searching for “browser testing
software” or “cross browser testing”.
The Articles tab of the WebAIM site
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.
Types of disabilities
 Visual
 Hearing
 Motor
 Cognitive
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 Initiative—Accessible Rich Internet Applications):
http://www.w3.org/TR/wai-aria.
The search results for “HTML5 documentation”
The most popular search engines
 Google
 Yahoo
 Bing

Chapter 1

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Chapter 1

Hochgeladen von

Copyright:

Verfügbare Formate

Chapter 1

Client Web Server

Tablet Smart Phone

` LAN LAN LAN LAN `

Client Web Server

Client Web Server Application Server Database Server

Client Web Server

The web site for these ratings

Das könnte Ihnen auch gefallen