Chapter 1
Introduction to web
development
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, 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.
7. Distinguish between HTML and CSS.
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 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.
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 3
The components of a web application
Desktop Web Server
Computer
The
Internet
Tablet Smart Phone
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 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
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 5
A static web page
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 6
How a web server processes a static web page
HTTP request
HTML
file
HTTP response
(with HTML)
Client
Web Server
(web browser)
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 7
A dynamic web page at amazon.com
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 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)
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 9
Web browsers
Chrome
Internet Explorer
Firefox
Safari
Opera
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 10
Server-side scripting languages
ASP.NET
JSP
PHP
ColdFusion
Ruby
Perl
Python
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 11
A web page with image swaps and rollovers
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 12
How JavaScript fits into this architecture
HTTP request
JavaScript
HTTP response HTML Files
files
(with HTML and
JavaScript)
Client
Web Server
(web browser)
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 13
Three of the common uses of JavaScript
Data validation
Image swaps and rollovers
Accordions
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 14
The code for an HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dreamweaver book</title>
</head>
<body>
<h1>Dreamweaver CC 2014</h1>
<img src="dreamweaverbook.jpg" alt="Dreamweaver Book">
<p>Since 1996, Dreamweaver has been the leading product for web
developers who want to build web pages by using a visual
interface. Now, Dreamweaver CC 2014 takes that to a new level,
with tools that make it easier than ever to take advantage of
today's best web design practices.</p>
<p>The trick to mastering Dreamweaver is learning how to use all of
its windows, panels, toolbars, and web technologies. To find
out how this book teaches you the skills you need, <a href="">
read more...</a></p>
</body>
</html>
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 15
The HTML displayed in a web browser
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 16
The link element for a style
<link rel="stylesheet" href="book.css">
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 17
The code for the CSS file named book.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
width: 550px;
margin: 0 auto;
padding: 1em;
border: 1px solid navy;
}
h1 {
margin: 0;
padding: .25em;
font-size: 200%;
color: navy;
}
img {
float: left;
margin: 0 1em 1 em 1em;
}
p {
margin: 0;
padding-bottom: .5em;
}
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 18
The web page displayed in a web browser
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 19
Notable releases of the HTML standards
HTML 1.0
HTML 2.0
HTML 4.0
HTML 4.01
XHTML 1.0
XHTML 1.1
HTML 5
HTML 5.1
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 20
Notable releases of the CSS standards
1.0
2.0
2.1
3.0
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 21
Two websites 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 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 22
Aptana Studio 3 with open HTML and CSS files
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 23
Four free text editors
Aptana Studio 3
Brackets 1.0
Notepad++
TextMate
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 24
Adobe Dreamweaver CC
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 25
Popular IDEs for web development
Adobe Dreamweaver CC
Microsoft Visual Studio
JetBrains
Eclipse
NetBeans
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 26
FileZilla as it is used to upload files
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 27
Some popular FTP programs
FileZilla
FTP Voyager
CuteFTP
Fetch
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 28
The components of an HTTP URL
http://www.modulemedia.com/ourwork/index.html
protocol domain name path filename
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 29
The web page at www.modulemedia.com
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 30
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 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 31
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.
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 32
Two ways to access a web page
on your own server or computer
Use the FileOpen command with Internet Explorer or the
FileOpen File command with Firefox. With Chrome, use your
file explorer to locate the file and then drag it into the browser
window.
Use the features of your text editor or IDE.
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 33
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 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 34
The HTML source code for modulemedia page
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 35
How to view the source code for a web page
In Chrome, click the Menu icon to the right of the address bar and
select the More ToolsView Source command.
In Firefox, choose ToolsWeb DeveloperPage Source or click
the Menu icon to the right of the address bar, click the Developer
icon, and select the Page Source command.
In Internet Explorer, choose the ViewSource command.
You can also display the source code by right-clicking on the page
and selecting the View Source or View Page Source command.
How to view the CSS code in an external CSS file
In Chrome or Firefox, click on the link 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 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 36
A website that is easy to use
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 37
What website users want
To find what they’re looking for as quickly and easily as possible
To get information or do a task as quickly and easily as possible
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 38
Four guidelines for improving usability
Present as much critical information as possible “above the fold”.
Group related items and limit the number of groups on each page.
Include a header that identifies the site and provides a navigation
bar and links to utilities.
Use current navigation conventions, like including a logo that
goes to your home page when clicked and a cart icon that goes to
your shopping cart when clicked.
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 39
The current browsers (perfect score is 555)
Browser Release HTML5 Test Rating
Google Chrome 39 501
Opera 26 497
Mozilla Firefox 35 449
Apple Safari 8 396
Internet Explorer 11 336
The website for these ratings
http://www.html5test.com
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 40
Guidelines for cross-browser compatibility
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.
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 41
How to test your web pages in older browsers
One of the problems in testing different versions of Internet
Explorer is that you can’t install more than one version on a
system at the same time.
The solution is to use the emulation tools that became available
with Internet Explorer 9. These tools let you emulate several older
versions of Internet Explorer.
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 42
Articles on Web accessibility on the WebAIM site
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 43
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 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 44
Types of disabilities
Visual
Hearing
Motor
Cognitive
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 45
Information sources
The WebAIM website provides a good starting point for learning
about accessibility at http://www.webaim.org.
The World Wide Web Consortium (W3C) provides a full set of
accessibility guidelines at http://www.w3.org/TR/WCAG.
W3C also provides a specification called WAI-ARIA (Web
Accessibility Initiative—Accessible Rich Internet Applications)
that shows how to make rich internet applications more accessible
to the disabled at http://www.w3.org/TR/wai-aria.
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 46
The Google search results
for “HTML5.1 documentation”
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 47
The most popular search engines
Google
Yahoo
Bing
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 48
The Murach Books website on different devices
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 49
What is Responsive Web Design?
Responsive Web Design 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 Responsive Web Design.
Murach's HTML5 and CSS3 (3rd Ed.), C1 © 2015, Mike Murach & Associates, Inc. Slide 50
