15
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc. Slide 1 C hapter1 Introduction to w eb developm ent
| Date post: | 14-Jan-2016 |
| Category: |
Documents |
| Upload: | nathan-barrett |
| View: | 223 times |
| Download: | 9 times |
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 1
Chapter 1
Introduction to web development
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 2
Chapter 1 Objectives 1. Describe the components of a web application.
2. Describe the architecture of the Internet.
3. Describe the components of an HTTP URL.
4. Describe HTTP requests and responses.
5. Distinguish between the way a web server processes static web pages and dynamic web pages.
6. Name the five major web browsers.
7. Distinguish between server side and client side scripting.
8. Distinguish between HTML and CSS.
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 3
The components of a web application
Web Server
The Internet
`
Client
Tablet Smart Phone
Computer Client
Tablet Client Smart Phone Client
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 4
The architecture of the Internet
LAN LANLAN LAN
LAN
LAN
LANLANLANLAN
LAN
LANWAN WAN
WAN WAN
IXPIXP
IXP
` `
`
`
` `
`
`
`
` ` ` ` ` `
`
`
``
` `
`
`
```` ` `
Components of a URL (uniform resource locator)
http://www.modulemedia.com/ourwork/index.html
1. http:// HyperText Transfter Protocol - this is the default protocol if not specified
2. www.modulemedia.com domain name – often www. can be omitted
3. /ourwork/ path / folder name
4. Index.html filename – this or default.htm is the default if not specified
Recommended Naming Conventions
• Create names of folders and files that consist of lowercase letters, numbers, underscores or hyphens and the period (dot)
• Do not leave spaces in filenames!• Use filename that clearly indicate what a page contains
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 6
A static web page
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 7
How a web server processes a static web page
HTTP request
HTTP response(with HTML)
HTMLfile
Web Server
`
Client(web browser)
• Client requests a web page using a browser.• Web server receives the request and gets the
appropriate HTML (HyperText Markup Language) file.• Server sends it back to the client and the page is
displayed in the browser.
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 8
A dynamic web page at amazon.com
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 9
How a web server processes a dynamic web page
Application ServerWeb Server
Application script
Database Server
HTTP request
HTTP response(with HTML)
`
Client(web browser)
• Client requests a web page using a browser.• Web server receives the request and contacts the appropriate
Application server. • The Application server processes a script (program) that builds the
web page (written using HTML, of course). It may need to access data from a Database server.
• The web page is returned to the client by the Web server to be displayed in the browser.
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 10
Web browsers Internet Explorer (Microsoft) – Windows
Firefox (Mozilla Corp.) – All major OS
Chrome (Google) – All major OS
Safari (Apple) – Mac OS (& Windows?)
Opera (Opera Software) – All major OS
Server-side scripting languages ASP.NET
JSP
PHP
ColdFusion
Ruby
Perl
Python
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 11
A web page with image swaps and rollovers
Imagerollover
Imageswap
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 12
How JavaScript fits into this architecture
HTTP request
HTTP response(with HTML and
JavaScript)
HTMLfile
Web Server
`
Client(web browser)
JavaScriptfile
Three of the common uses of JavaScript Data validation
Image swaps and rollovers
Slide shows
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 13
The code for an HTML file <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My First Web Page</title> </head> <body> <h1>This is the Heading of the page</h1> <img src="textbook.jpg" alt="Our textbook"> <p>This is the first paragraph. It can be as
long as you want it to be. Spacing can be very random also. No matter how many spaces or how I wrap the lines, everything between the paragraph tags becomes a nice paragraph!
</p> <p>This is the second paragraph and within this paragraph, is a link. See this… <a href="">read more...</a> Of course my link goes nowhere at this point! </p><br><br><br> </body> </html>
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 14
The link element for a style sheet <link rel="stylesheet" href="myfirst.css" >
Add this line to the <head> section of your html document.
Murach's HTML5 and CSS3, C1 © 2012, Mike Murach & Associates, Inc.Slide 15
The code for the CSS file named myfirst.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; }
