introduction to web development · html 4.01. this works for all browsers including internet...
Post on 25-Jul-2020
9 Views
Preview:
TRANSCRIPT
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 1© 2010, Mike Murach & Associates, Inc. Slide 1
Chapter 1
Introduction to web development
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 2
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.
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 3
Objectives (continued)
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. Name the two major web browsers for Windows systems. 7. Distinguish between HTML and CSS. 8. Distinguish between HTML and XHTML. 9. Explain how you deploy a web site on the Internet. 10. Describe the components of an HTTP URL.
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 4
The components of a web application
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 5
The architecture of the Internet
LAN LANLAN LAN
LAN
LAN
LANLANLANLAN
LAN
LANWAN WAN
WAN WAN
IXPIXP
IXP
` `
`
`
` `
`
`
`
` ` ` ` ` `
`
`
``
` `
`
`
```` ` `
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 6
A static web page
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 7
How a web server processes a static web page
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 8
A dynamic web page
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 9
How a web server processes a dynamic web page
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 10
A web page with image swaps and rollovers
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 11
How JavaScript fits into this architecture
Application ServerWeb Server
Application script
Database Server
HTTP request
HTTP response
JavaScript
`
Web Browser
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 12
Three of the common uses of JavaScript Data validation Image swaps and rollovers Slide shows
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 13
Web browsers Internet Explorer
Firefox
Safari
Opera
Chrome
Web servers Apache
IIS
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 14
Server-side scripting languages ASP.NET
JSP
PHP
ColdFusion
Ruby
Perl
Python
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 15
The code for an HTML file named book.html <head> <title>JavaScript book</title> </head> <body> <div id="page"> <h1>JavaScript and DOM Scripting</h1> <img src="javascriptbook.jpg" alt="JavaScriptBook" /> <p>Today, web users expect web sites to provide advanced features, dynamic user interfaces, and fast response times. To deliver that, web developers need to know the JavaScript language. Beyond that, though, they need to know how to use JavaScript to script the Document Object Model (or DOM).</p> <p>Now, at last, your trainees can learn both JavaScript and DOM scripting in this one great book. To find out how this book does it, <a href="">read more...</a></p><br /><br /> </div> </body>
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 16
The HTML in a web browser
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 17
The HTML element that links it to a CSS file <link rel="stylesheet" type="text/css" href="book.css" />
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 18
The code for the CSS file named book.css body { margin: 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 82.5%; } #page { width: 500px; margin: 0 auto; padding: 1em; border: 1px solid navy; } h1 { margin: 0; padding: .25em; font-size: 250%; color: navy; }
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 19
The code for book.css (continued) img { float: left; margin: 0 1em; } p { margin: 0; padding-bottom: .5em; }
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 20
The web page in a web browser
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 21
HTML vs. XHTML By default, all pages are sent to the browser, or served, as HTML. Because the syntax of XHTML is stricter than the syntax of HTML,
XHTML encourages good coding practices.
What version of HTML we use in this book In this book, we use a form of XHTML 1.0 that is compatible with
HTML 4.01. This works for all browsers including Internet Explorer because
XHTML 1.0 is backward-compatible with HTML 4.01.
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 22
Notepad++ with open HTML and CSS files
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 23
Popular text editors that are free Editor Runs on Notepad++ Windows TextWrangler Macintosh Komodo Edit Windows, Macintosh, and Linux/UNIX
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 24
Adobe DreamWeaver
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 25
Popular IDEs for web development IDE Runs on Adobe DreamWeaver Windows and Macintosh Komodo IDE Windows, Macintosh, and Linux/UNIX Microsoft Expression Web Windows
Popular suites for web development IDE Runs on Adobe Creative Suite Windows and Macintosh Microsoft Expression Studio Windows
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 26
FTP program that uploads files to the web server
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 27
Popular FTP programs FileZilla
FTP Voyager
CuteFTP
Fetch
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 28
The components of an HTTP URL
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 29
http://www.riverparkway.org/default.asp
HTML, XHTML, and CSS, C1 © 2010, 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. If you omit the path, you must also omit the filename. Then, the home
page for the site will be requested.
HTML, XHTML, and CSS, C1 © 2010, 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.
How to access a web page on your own computer With IE, use FileOpen. With Firefox, use FileFile Open.
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 32
The HTML source code for a page
HTML, XHTML, and CSS, C1 © 2010, Mike Murach & Associates, Inc. Slide 33
How to view the HTML source code for a page In Firefox, use the ViewPage Source command. In Internet Explorer, use the ViewSource command.
How to view the CSS code in an external CSS file In Firefox, click on the link in the link element that refers to it. In Internet Explorer, enter the URL for the CSS file in your web
browser.
top related