Unit 1 - Introduction To Web Development

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

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.

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

The components of a web application

The architecture of the Internet

2
8/2/2023
A static web page

How a web server processes a static web page

A dynamic web page at amazon.com

3
8/2/2023
How a web server processes a dynamic web page

10
A web page with image swaps and rollovers

11
How JavaScript fits into this architecture

12
4
8/2/2023
Some common uses of JavaScript

 Data validation
 Image swaps and rollovers
 Carousels and accordions
 Slide shows

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>

14
The HTML displayed in a web browser

15
5
8/2/2023
The link element for a CSS file

<link rel="stylesheet" href="book.css">

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; }

17
The web page displayed in a web browser

18
6
8/2/2023
Two websites to become familiar with

 World Wide Web Consortium (W3C)
 Web Hypertext Application Technology Working Group
(WHATWG)

19
Four free text editors

 VS Code
 Notepad++
 TextMate
 Codepen

20
VS Code and its auto-completion feature

21
7
8/2/2023
Two of the IDEs for web development

 Adobe Dreamweaver
 AWS Cloud9

22
Some free FTP clients

 FileZilla
 FireFTP
 Classic FTP

23
FileZilla as it’s used to upload files

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.

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.

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.

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.

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.

29
Four issues for web developers

 Responsive web design
 Cross-browser compatibility
 Web accessibility
 Search engine optimization (SEO)

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.

31
The Lands’ End home page in desktop and mobile

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.

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.

34
Web browsers
 Chrome
 Edge
 Safari
 Firefox
 Opera

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

36
12
8/2/2023
The WebAIM website

37
Search engine optimization

The results of a Google search for “murach”

38
The most popular search engines

 Google
 Bing

39
13

Unit 1 - Introduction To Web Development

Uploaded by

Copyright:

Available Formats

You might also like

Unit 1 - Introduction To Web Development

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 1 - Introduction To Web Development

Uploaded by

Copyright:

Available Formats

8/2/2023

CSC15M2/ CL15M2B Web application

© 2022, Mike Murach & Associates, Inc.

© 2022, Mike Murach & Associates, Inc.

© 2022, Mike Murach & Associates, Inc.

© 2022, Mike Murach & Associates, Inc.

The components of a web application

© 2022, Mike Murach & Associates, Inc.

The architecture of the Internet

© 2022, Mike Murach & Associates, Inc.

A static web page

© 2022, Mike Murach & Associates, Inc.

How a web server processes a static web page

© 2022, Mike Murach & Associates, Inc.

A dynamic web page at amazon.com

© 2022, Mike Murach & Associates, Inc.

How a web server processes a dynamic web page

© 2022, Mike Murach & Associates, Inc.

A web page with image swaps and rollovers

© 2022, Mike Murach & Associates, Inc.

How JavaScript fits into this architecture

© 2022, Mike Murach & Associates, Inc.

Some common uses of JavaScript

© 2022, Mike Murach & Associates, Inc.

The code for an HTML file

© 2022, Mike Murach & Associates, Inc.

The HTML displayed in a web browser

© 2022, Mike Murach & Associates, Inc.

The link element for a CSS file

© 2022, Mike Murach & Associates, Inc.

The code for the CSS file named book.css

© 2022, Mike Murach & Associates, Inc.

The web page displayed in a web browser

© 2022, Mike Murach & Associates, Inc.

Two websites to become familiar with

© 2022, Mike Murach & Associates, Inc.

Four free text editors

© 2022, Mike Murach & Associates, Inc.

VS Code and its auto-completion feature

© 2022, Mike Murach & Associates, Inc.

Two of the IDEs for web development

© 2022, Mike Murach & Associates, Inc.

Some free FTP clients

© 2022, Mike Murach & Associates, Inc.

FileZilla as it’s used to upload files

© 2022, Mike Murach & Associates, Inc.

The components of an HTTP URL

A URL with an omitted filename

What happens if you omit parts of a URL

© 2022, Mike Murach & Associates, Inc.

How to access a web page on the Internet

How to access a web page

© 2022, Mike Murach & Associates, Inc.

Naming recommendations for folders and files

© 2022, Mike Murach & Associates, Inc.

How to view the HTML for a web page

© 2022, Mike Murach & Associates, Inc.