Chapter 1. Introduction to web development

(1)

Chapter 1

Introduction to

web development

(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.

(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.

(4)

(5)

The architecture of the Internet

LAN

WAN

IXP

`

(6)

(7)

(8)

(9)

(10)

(11)

How JavaScript fits into this architecture

Application Server

Web Server

Application script

Database Server

HTTP request HTTP response JavaScript

`

Web Browser

(12)

Three of the common uses of JavaScript

 Data validation

 Image swaps and rollovers

 Slide shows

(13)

Web browsers

Internet Explorer

Firefox

Safari

Opera

Chrome

Web servers

Apache

IIS

(14)

Server-side scripting languages

ASP.NET

JSP

PHP

ColdFusion

Ruby

Perl

Python

(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>

(16)

(17)

The HTML element that links it to a CSS file

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

}

(19)

The code for book.css (continued)

img {

float: left;

margin: 0 1em;

}

p {

margin: 0;

padding-bottom: .5em;

}

(20)

(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.

(22)

(23)

Popular text editors that are free

Editor Runs

on

Notepad++ Windows

TextWrangler Macintosh

(24)

(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

(26)

(27)

Popular FTP programs

FileZilla

FTP Voyager

CuteFTP

Fetch

(28)

(29)

(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.

(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 FileOpen.

(32)

(33)

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.