introduction to web development - docpiperdocpiper.com/bhcc_cmt111/murach/murachchapter01.pdf ·...

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.


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.


The components of a web application


The architecture of the Internet

LAN LANLAN LAN

LAN

LAN

LANLANLANLAN

LAN

LANWAN WAN

WAN WAN

IXPIXP

IXP

` `

`

`

` `

`

`

`

` ` ` ` ` `

`

`

``

` `

`

`

```` ` `


A static web page


How a web server processes a static web page


A dynamic web page


How a web server processes a dynamic web page


A web page with image swaps and rollovers


How JavaScript fits into this architecture

Application ServerWeb Server

Application script

Database Server

HTTP request

HTTP response

JavaScript

`

Web Browser


Three of the common uses of JavaScript Data validation Image swaps and rollovers Slide shows


Web browsers Internet Explorer

Firefox

Safari

Opera

Chrome

Web servers Apache

IIS


Server-side scripting languages ASP.NET

JSP

PHP

ColdFusion

Ruby

Perl

Python


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>


The HTML in a web browser


The HTML element that links it to a CSS file <link rel="stylesheet" type="text/css" href="book.css" />


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


The code for book.css (continued) img { float: left; margin: 0 1em; } p { margin: 0; padding-bottom: .5em; }


The web page in a web browser


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.


Notepad++ with open HTML and CSS files


Popular text editors that are free Editor Runs on Notepad++ Windows TextWrangler Macintosh Komodo Edit Windows, Macintosh, and Linux/UNIX


Adobe DreamWeaver


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


FTP program that uploads files to the web server


Popular FTP programs FileZilla

FTP Voyager

CuteFTP

Fetch


The components of an HTTP URL


http://www.riverparkway.org/default.asp


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.


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.


The HTML source code for a page


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.

introduction to web development - docpiperdocpiper.com/bhcc_cmt111/murach/murachchapter01.pdf ·...

Documents