php programming with mysql slide 1-1 chapter 1 introduction to web development

PHP Programming with MySQL Slide 1-1

CHAPTER 1Introduction to Web

Development


Objectives

Study the history of the World Wide Web Review the basics of how to create Web pages Work with structured Web pages Study Web development


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



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



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


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)


HTML Documents

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

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


Basic HTML Syntax

The closing tag must include a forward slash ( / ) immediately after the opening bracket

A tag pair and the data it contains are referred to as an element

The information contained within an element’s opening and closing tags is referred to as its content

Elements that do not require a closing tag are called empty elements


Basic HTML Syntax

Table 1-1 Common HTML elements

Basic HTML Syntax

HTML documents must have a file extension of .html or .htm

All HTML documents must use the <html> element as the root element

A root element contains all the other elements in a document

The <head> element contains information that is used by the Web browser

Basic HTML Syntax

A <head> element must contain a <title> element The <head> element and the elements it contains

are referred to as the document head The <body> element and the text and elements it

contains are referred to as the document body The process by which a Web browser assembles or

formats an HTML document is called parsing or rendering

Basic HTML Syntax

Example:

This paragraph will appear in boldface in a Web browser

Parameters used to configure many HTML elements are called attributes

Insert line breaks using the paragraph and line break elements

Basic HTML Syntax

Sample HTML Code

<html><head><title>Toner Cartridge Sales</title></head><body><h1>Toner Cartridge Sales</h1><hr><h2>Lexmark Toner Cartridges</h2><img src="lexmark_logo.gif">Model #:LEX 1382100 Compatibility: Optra 4049/3112/3116 Price: $189.99Model #:LEX 1380520 Compatibility:Lexmark 4019/4028/4029 Price:$209.00</body></html>


Basic HTML Syntax

Figure 1-1 A simple HTML document in a Web browser


Creating an HTML Document

HTML editors Macromedia Dreamweaver and Microsoft FrontPage are popular graphical interfaces that create WYSIWYG (what-you-see-is-what-you-get) Web pages

You cannot use a Web browser to create an HTML document


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



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



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



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

Protocol Domain name Directory Filename

Figure 1-4 Sample URL


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

America Online, CompuServe, and EarthLink



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



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



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

specified period of time A popular domain name registrar is Network

Solutions After you register your domain name, notify your

ISP of your domain information



Figure 1-5 Network Solutions Web page



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



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

Allows you to use your browser to log on to an FTP server and upload your files



Figure 1-6 FTP Web site example


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

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



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



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



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

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

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

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


Writing Well-Formed Documents

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

other elements


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



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



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 document

P { 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

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


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


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


Client/Server Architecture

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



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



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


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)


JavaScript and Client-Side Scripting

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


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)



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



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


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


Summary

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


Summary

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