8/2/2023
CSC15M2/ CL15M2B Web application
UNIT 1
Introduction to web
development
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 1
Learning Objectives
•Analyze Web Pages: Load, examine, and understand the source code of
web pages from the Internet and intranet.
•Understand Web Application Components: Grasp the components of a
web application, differentiate between the Internet and an intranet, and
explain HTTP communication.
•Distinguish Web Page Types: Understand the differences in processing
between static and dynamic web pages.
•Utilize Web Development Languages: Distinguish and apply HTML, CSS,
and JavaScript in web development.
•Address Web Development Issues: Understand key web development
issues, including Responsive Web Design, cross-browser compatibility, web
accessibility, and SEO, and demonstrate proficiency in website deployment.
1. .
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 2
Learing 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.
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 3
1
8/2/2023
Objectives (cont.)
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. Describe the use of JavaScript.
6. Distinguish between HTML and CSS.
7. Explain how you deploy a website on the Internet.
8. Describe the components of an HTTP URL.
9. Describe these four web development issues: Responsive Web
Design, cross-browser compatibility, web accessibility, and
search engine optimization (SEO).
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 4
The components of a web application
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 5
The architecture of the Internet
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 6
2
8/2/2023
A static web page
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 7
How a web server processes a static web page
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 8
A dynamic web page at amazon.com
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 9
3
8/2/2023
How a web server processes a dynamic web page
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 10
10
A web page with image swaps and rollovers
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 11
11
How JavaScript fits into this architecture
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 12
12
4
8/2/2023
Some common uses of JavaScript
Data validation
Image swaps and rollovers
Carousels and accordions
Slide shows
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 13
13
The code for an HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript and jQuery book</title>
</head>
<body>
<h1>JavaScript and jQuery (4th Edition)</h1>
<img src="javascript_jquery.jpg"
alt="JavaScript and jQuery Book">
<p>Today, ... does best.</p>
<p>Now, ... <a href="">read more...</a></p>
</body>
</html>
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 14
14
The HTML displayed in a web browser
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 15
15
5
8/2/2023
The link element for a CSS file
<link rel="stylesheet" href="book.css">
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 16
16
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; }
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 17
17
The web page displayed in a web browser
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 18
18
6
8/2/2023
Two websites to become familiar with
World Wide Web Consortium (W3C)
Web Hypertext Application Technology Working Group
(WHATWG)
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 19
19
Four free text editors
VS Code
Notepad++
TextMate
Codepen
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 20
20
VS Code and its auto-completion feature
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 21
21
7
8/2/2023
Two of the IDEs for web development
Adobe Dreamweaver
AWS Cloud9
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 22
22
Some free FTP clients
FileZilla
FireFTP
Classic FTP
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 23
23
FileZilla as it’s used to upload files
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 24
24
8
8/2/2023
The components of an HTTP URL
protocol://domain-name/path/filename
A URL with an omitted filename
http://www.murach.com/courseware-for-trainers
/what-our-courseware-includes
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.
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 25
25
How to access a web page on the Internet
Enter the URL of a web page into the browser’s address bar.
How to access a web page
on your own server or computer
Use the features of your text editor or IDE.
Find the file in File Explorer or Finder. Then, double-click on it
to open it in your default browser. Or, right-click on it and use
the Open With command to select the browser.
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 26
26
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.
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 27
27
9
8/2/2023
How to view the HTML for a web page
Right-click the page and select View Source or View Page
Source from the popup menu.
In Chrome, the source code is displayed in a new browser tab or
a separate window.
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 28
28
How to view the CSS code in an external CSS file
Click on the link that refers to the CSS file.
How to view the CSS if it’s in the HTML file
Look in the head element of the file.
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 29
29
Four issues for web developers
Responsive web design
Cross-browser compatibility
Web accessibility
Search engine optimization (SEO)
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 30
30
10
8/2/2023
The issue of Responsive Web Design
Responsive Web Design means that a website should adapt to the
screen size of the device that’s accessing it, whether it’s a desktop
computer, a tablet, or a mobile phone.
Typically, the overall look-and-feel of the website will be
consistent from one screen size to the next.
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 31
31
The Lands’ End home page in desktop and mobile
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 32
32
Four of the statistics that prove the need
for Responsive Web Design
In a global survey of 87,000 users, 95% used mobile phones to
access the Internet, 93% used desktops, and 73% used tablets.
57% of all web traffic comes from mobile devices.
50% of all web shoppers in the United States buy from mobile
devices.
40% of the mobile users will go to a different site if the first one
isn’t mobile friendly.
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 33
33
11
8/2/2023
Guidelines for cross-browser compatibility
Code with the latest versions of HTML and CSS.
Test your web pages on all of the major browser as well as table
and mobile phones.
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 34
34
Web browsers
Chrome
Edge
Safari
Firefox
Opera
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 35
35
Web accessibility
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
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 36
36
12
8/2/2023
The WebAIM website
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 37
37
Search engine optimization
The results of a Google search for “murach”
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 38
38
The most popular search engines
Google
Bing
© 2022, Mike Murach & Associates, Inc.
Murach's HTML and CSS, 5th Edition C1, Slide 39
39
13
