Scribd
Upload
61 views

Unit 1 - Introduction To Web Development

The document outlines the learning objectives and topics that will be covered in an introduction to web development course. The objectives include analyzing web pages, understanding web application components, distinguishing page types, utilizing languages like HTML and CSS, and addressing issues like responsive design. The topics to be covered are the components of web applications, static and dynamic pages, JavaScript, HTML vs CSS, and deployment.

Uploaded by

Nasiphi Phaliso
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

Unit 1 - Introduction To Web Development

The document outlines the learning objectives and topics that will be covered in an introduction to web development course. The objectives include analyzing web pages, understanding web application components, distinguishing page types, utilizing languages like HTML and CSS, and addressing issues like responsive design. The topics to be covered are the components of web applications, static and dynamic pages, JavaScript, HTML vs CSS, and deployment.

Uploaded by

Nasiphi Phaliso
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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

You might also like