Chapter 1 Introduction to web development HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 1
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 2
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 3
The components of a web application HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 4
The architecture of the Internet LAN LAN LAN LAN LAN WAN IXP WAN LAN LAN WAN IXP IXP WAN LAN LAN LAN LAN LAN HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 5
A static web page HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 6
How a web server processes a static web page HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 7
A dynamic web page HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 8
How a web server processes a dynamic web page HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 9
A web page with image swaps and rollovers HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 10
How JavaScript fits into this architecture HTTP request HTTP response Web Browser Web Server Application Server Database Server JavaScript Application script HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 11
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 12
Web browsers Internet Explorer Firefox Safari Opera Chrome Web servers Apache IIS HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 13
Server-side scripting languages ASP.NET JSP PHP ColdFusion Ruby Perl Python HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 14
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 15
The HTML in a web browser HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 16
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 17
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 18
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 19
The web page in a web browser HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 20
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 21
Notepad++ with open HTML and CSS files HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 22
Popular text editors that are free Editor Notepad++ TextWrangler Komodo Edit Runs on Windows Macintosh Windows, Macintosh, and Linux/UNIX HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 23
Adobe DreamWeaver HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 24
Popular IDEs for web development IDE Adobe DreamWeaver Komodo IDE Microsoft Expression Web Runs on Windows and Macintosh Windows, Macintosh, and Linux/UNIX 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 25
FTP program that uploads files to the web server HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 26
Popular FTP programs FileZilla FTP Voyager CuteFTP Fetch HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 27
The components of an HTTP URL HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 28
http://www.riverparkway.org/default.asp HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 29
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 30
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 File Open. With Firefox, use File File Open. HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 31
The HTML source code for a page HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 32
How to view the HTML source code for a page In Firefox, use the View Page Source command. In Internet Explorer, use the View Source 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. HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 33