Chapter 1

Introduction to Web Development

2

Introduction to Web Development

• In 1990 and 1991,Tim Berners-Lee created the World Wide Web at the European Laboratory for Particle Physics (CERN) in Geneva, Switzerland

• The original purpose of the World Wide Web (WWW) was to provide easy access to cross-referenced documents that existed on the CERN computer network

• Hypertext linking allows you to quickly open other Web pages

3

Introduction to Web Development (continued)

• A document on the Web is called a Web page• A Web page is identified by a unique address

called the Uniform Resource Locator (URL)• A URL is also commonly referred to as a Web

address• A URL is a type of Uniform Resource Identifier

(URI)• A Web site refers to the location on the Internet

of the Web pages and related files

4

Introduction to Web Development (continued)

• Web pages are displayed using a program called a Web browser

• A Web server is a computer that delivers Web pages

• The most popular Web server software is Apache HTTP Server (Apache)

• The second most popular Web server is Microsoft Internet Information Services (IIS) for Windows

5

HTML Documents

• Web pages are created using Hypertext Markup Language (HTML)

• Web pages are commonly referred to as HTML pages or documents

• A markup language is a set of characters or symbols that define a document’s logical structure

• HTML is based on an older language called Standard Generalized Markup Language (SGML)

6

HTML Documents (continued)

• Like SGML, HTML was originally designed as a way of defining the elements in a document independent of how they would appear

• HTML has evolved into a language that defines how elements should appear in a Web browser

• Understanding HTML is critical in learning how to write a web application along with the server programming

7

Basic HTML Syntax

• HTML documents are text documents that contain formatting instructions called tags

• HTML tags include:– Formatting commands (boldface or italic)– Controls that allow user input (option buttons or check

boxes)• Tags are enclosed in brackets (< >) and consist of

an opening tag and a closing tag• Tutorial for learning HTML

– http://www.htmldog.com/– http://www.w3schools.com/html/DEFAULT.asp

8

Web Communication Protocols

• A Web page is identified by a unique address called the URL

• Each URL consists of two basic parts:– A protocol (usually HTTP) and

– Either the domain name for a Web server or a Web server’s Internet Protocol address

• Hypertext Transfer Protocol (HTTP) manages the hypertext links that are used to navigate the Web

9

Web Communication Protocols (continued)

• A host refers to a computer system that is being accessed by a remote computer

• A domain name is a unique address used for identifying a computer such as a Web server on the Internet

• The domain identifier identifies the type of institution or organization (.biz, .com, .edu, .org)

• An Internet Protocol, or IP address, is another way to identify computers or devices connected to the Internet

10

Web Communication Protocols (continued)

• An IP address consists of a series of four groups of numbers separated by periods

• Each Internet domain name is associated with a unique IP address

• HTTP is a component of Transmission Control Protocol/Internet Protocol (TCP/IP)

• Hypertext Transfer Protocol Secure (HTTPS) provides secure Internet connections for transactions that require security and privacy

11

Web Communication Protocols (continued)

http://www.google.com/help/index.html

Protocol Domain name Directory Filename

Figure 1-4 Sample URL

12

Publishing Your Web Site

• Web Hosting:– The publication of a Web site for public access

– Internet access (cable modem, DSL, satellite, dial-up modem, ISP)

• Internet Service Provider (ISP):– Provides access to the Internet along with other

types of services such as e-mail

13

Publishing Your Web Site (continued)

• ISP advantages to hosting a Web site:– Extremely fast Internet connections using

advanced fiber-optic connections

– Large and powerful Web servers and the expertise and manpower to maintain and manage them

• A domain name is a unique address used for identifying a computer, such as a Web server on the Internet

14

Publishing Your Web Site(continued)

• Domain name registration– Pick a domain name that is similar to your

business name or that describes your Web site

– You cannot use a domain name that is already in use or a trademarked name

– Contact a domain name registrar to find out the availability of a domain name and register it

– Domain names are stored in a master database that is maintained by the InterNIC

15

Publishing Your Web Site(continued)

• Domain name registration (continued)– For a fee, domain names can be registered for a

specified period of time

– Most hosting sites provide registration service for you

– After you register your domain name, notify your ISP of your domain information

16

Publishing Your Web Site(continued)

• File Transfer Protocol (FTP)– Is a TCP/IP protocol used for transferring files

across the Internet

– Transfers files between an FTP client (your computer) and an FTP server (a server capable of running FTP)

– The vehicle that allows you to get your Web page files to the Web server

17

Publishing Your Web Site(continued)

• File Transfer Protocol (continued)– Your ISP provides a username and password to

log on to the FTP site and upload files to the FTP server

– Examples of FTP clients include Firefox and Internet Explorer and WinScp

• Use your browser to log on to an FTP server and upload your files

18

Working with Well-Formed Web Pages

• HTML became an Internet standard in 1993 with the release of version 1.0

• The current version of HTML (4.01) was released in 1999

• HTML 4.01 is the last version of the HTML language and is being replaced with extensible hypertext markup language (XHTML)

• HTML is not suitable for user agents other than Web browsers

19

XHTML Document Type Definitions (DTDs)

• A well-formed document must include:– <!DOCTYPE> declaration

– <html>, <head>, and <body> elements

• A document type definition (DTD) defines:– The elements and attributes that can be used in

a document

– The rules that a document must follow when it includes them

20

XHTML Document Type Definitions (DTDs) (continued)

• There are three types of DTDs with XHTML documents:– transitional

– strict

– frameset

• The World Wide Web Consortium (W3C) was established in 1994 at MIT to oversee the development of Web technology standards

21

XHTML Document Type Definitions (DTDs) (continued)

• The W3C:– Decided some common HTML elements and

attributes for display and formatting would not be used in XHTML 1.0

– Recommended using Cascading Style Sheets (CSS) instead of HTML elements and attributes for displaying and formatting Web pages

• Elements and attributes that are considered obsolete and will eventually be eliminated are said to be deprecated

22

XHTML Document Type Definitions (DTDs) (continued)

Table 1-2 HTML elements that are deprecated in XHTML 1.0

23

XHTML Document Type Definitions (DTDs) (continued)

• Transitional DTD:– Allows you to use deprecated style elements in

your XHTML documents

– Use only if you need to create Web pages that use the deprecated elements

• Frameset DTD:– Identical to the transitional DTD, except that it

includes the <frameset> and <frame> elements

– Allows you to split the browser window into two or more frames

24

XHTML Document Type Definitions (DTDs) (continued)

• Strict DTD: – Eliminates the elements that were deprecated in

the transitional DTD and frameset DTD

– The <!DOCTYPE> declaration for the strict DTD is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

– Always try to use the strict DTD

25

Writing Well-Formed Documents

• Include a <!DOCTYPE> declaration and the <html>, <head>, and <body> elements

• All XHTML documents must use <html> as the root element

• XHTML is case sensitive• All XHTML elements must have a closing tag• Attribute values must appear within quotation

marks

26

Writing Well-Formed Documents (continued)

• Empty elements must be closed• XHTML elements must be properly nested• Nesting refers to how elements are placed

inside other elements

27

Cascading Style Sheets

• A single piece of CSS formatting information, such as text alignment, is referred to as a style

• The term cascading refers to the ability for Web pages to use CSS information from more than one source

28

Cascading Style Sheets (continued)

• CSS properties:– CSS styles are created with two parts separated

by a colon

– The property refers to a specific CSS style

– The value assigned to it determines the style’s visual characteristics

– Together, a CSS property and the value assigned to it are referred to as a declaration or style declaration

29

Cascading Style Sheets (continued)

• Inline Styles– Allow you to add style information to a single

element in a document• Internal Style Sheets

– Create styles that apply to the entire documentP { color : blue }selector property value

• External Style Sheets– A separate text document containing style

declarations that are used by multiple documents on a Web site

30

The Content-Type <meta> Element

• Create a content-type <meta> element to specify a content type that the document uses– The <meta> element provides information about

the information in a Web page

– The <meta> element is nested within the <head> section of the Web page

– The three primary attributes in the <meta> element are: name, content, and http-equiv

31

Validating Web Pages

• A validating parser is a program that checks whether an XHTML document is well-formed and conforms to a specific DTD

• Validation verifies that your XHTML document is well formed and that the elements in your document are correctly written

• Validation can help you spot errors in your code• XHTML validating services can be found online

32

Understanding Web Development

• Web development, or Web programming, refers to the design of software applications for a Web site

• The Webmaster is responsible for:– The day-to-day maintenance of a Web site

– Monitoring Web site traffic and ensuring that the Web site’s hardware and software are running properly

– Knowledge of Web page design, authoring, and development

33

Client/Server Architecture

• Server (“back end”):– A database from which a client requests

information

– Fulfills a request for information by managing the request or serving the requested information to the client

– Responsible for data storage and management

• A system consisting of a client and a server is known as a two-tier system

34

Client/Server Architecture (continued)

• Client (“front end”):– Presents an interface to the user

– Gathers information from the user, submits it to a server, then receives, formats, and presents the results returned from the server

35

Client/Server Architecture (continued)

• A three-tier, or multi-tier, client/server system consists of three distinct pieces:– Client tier, or user interface tier, is the Web

browser – Processing tier, or middle tier, handles the

interaction between the Web browser client and the data storage tier

• Performs necessary processing or calculations based on the request from the client tier

• Handles the return of any information to the client tier

36

Client/Server Architecture (continued)

Figure 1-16 The design of a three-tier client/server system

37

JavaScript and Client-Side Scripting

• JavaScript is:– A client-side scripting language that allows Web

page authors to develop interactive Web pages and sites

– Used in most Web browsers including Firefox and Internet Explorer

• Client-side scripting is a language that runs on a local browser (on the client tier) instead of on a Web server (on the processing tier)

38

JavaScript and Client-Side Scripting (continued)

• JavaScript allows you to:– Turn static Web pages into applications such as

games or calculators

– Change the contents of a Web page after a browser has rendered it

– Create visual effects such as animation

– Control the Web browser window itself

39

Server-Side Scripting and PHP

• Server-side scripting refers to a scripting language that is executed from a Web server

• Hypertext Preprocessor (PHP) is a server-side scripting language that is used to develop interactive Web sites– Is easy to learn

– Includes object-oriented programming capabilities

– Supports many types of databases (MySQL, Oracle, Sybase, ODBC-compliant)

40

Server-Side Scripting and PHP (continued)

• PHP (continued):– PHP is an open source programming language

• Open source refers to software where source code can be freely used and modified

– Can’t access or manipulate a Web browser like JavaScript

– Exists and executes solely on a Web server, where it performs various types of processing or accesses databases

41

Server-Side Scripting and PHP (continued)

• General rule: Use client-side scripting to handle user interface processing and light processing, such as validation; use server-side scripting for intensive calculations and data storage

Figure 1-17 How a Web server processes a PHP script

42

Summary

• In 1990 and 1991,Tim Berners-Lee created the World Wide Web at the European Laboratory for Particle Physics (CERN)

• Transmission Control Protocol/Internet Protocol (TCP/IP) is a large collection of communication protocols used on the Internet

• A Document Type Definition (DTD) defines the elements and attributes that can be used in a document

43

Summary (continued)

• Cascading Style Sheets (CSS) are a standard set by the W3C for managing the design and formatting of Web pages in a Web browser

• A system that consists of a client and a server is known as a two-tier system

• A three-tier client/server system consists of the client tier, the processing tier, and the data storage tier

44

Summary (continued)

• JavaScript is a client-side scripting language that allows Web page authors to develop interactive Web pages and sites

• Hypertext Preprocessor (PHP) is a server-side scripting language that is used for developing interactive Web sites

• Open source refers to software for which the source code can be freely used and modified