CHAPTER 1
Introduction to Web
Development
PHP Programming with MySQL
Slide 1-1
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
PHP Programming with MySQL
Slide 1-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 crossreferenced documents that existed on the CERN
computer network
Hypertext linking allows you to quickly open other
Web pages
PHP Programming with MySQL
Slide 1-3
Introduction to Web Development
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
PHP Programming with MySQL
Slide 1-4
Introduction to Web Development
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
PHP Programming with MySQL
Slide 1-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)
PHP Programming with MySQL
Slide 1-6
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
PHP Programming with MySQL
Slide 1-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
PHP Programming with MySQL
Slide 1-8
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
PHP Programming with MySQL
Slide 1-9
Basic HTML Syntax
Table 1-1 Common HTML elements
PHP Programming with MySQL
Slide 1-10
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
PHP Programming with MySQL
Slide 1-11
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
PHP Programming with MySQL
Slide 1-12
Basic HTML Syntax
Example:
<p><b>This paragraph will appear in boldface in
a Web browser</b></p>
Parameters used to configure many HTML elements
are called attributes
Insert line breaks using the paragraph <p> and line
break <br> elements
PHP Programming with MySQL
Slide 1-13
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">
<p><b>Model #</b>:LEX 1382100<br>
<b>Compatibility</b>: Optra 4049/3112/3116<br>
<b>Price</b>: $189.99</p>
<p><b>Model #</b>:LEX 1380520<br>
<b>Compatibility</b>:Lexmark 4019/4028/4029<br>
<b>Price</b>:$209.00</p>
</body>
</html>
PHP Programming with MySQL
Slide 1-14
Basic HTML Syntax
Figure 1-1 A simple HTML document in a Web browser
PHP Programming with MySQL
Slide 1-15
Creating an HTML Document
HTML editors Macromedia Dreamweaver and
Microsoft FrontPage are popular graphical interfaces
that create WYSIWYG (what-you-see-is-what-youget) Web pages
You cannot use a Web browser to create an HTML
document
PHP Programming with MySQL
Slide 1-16
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
PHP Programming with MySQL
Slide 1-17
Web Communication Protocols
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
PHP Programming with MySQL
Slide 1-18
Web Communication Protocols
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
PHP Programming with MySQL
Slide 1-19
Web Communication Protocols
http://www.google.com/help/index.html
Protocol
Domain name
Directory
Filename
Figure 1-4 Sample URL
PHP Programming with MySQL
Slide 1-20
Publishing Your Web Site
Web Hosting:
The publication of a Web site for public access
Internet access (cable modem, DSL, satellite, dialup 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
PHP Programming with MySQL
Slide 1-21
Publishing Your Web Site
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
PHP Programming with MySQL
Slide 1-22
Publishing Your Web Site
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
PHP Programming with MySQL
Slide 1-23
Publishing Your Web Site
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
PHP Programming with MySQL
Slide 1-24
Publishing Your Web Site
Figure 1-5 Network Solutions Web page
PHP Programming with MySQL
Slide 1-25
Publishing Your Web Site
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
PHP Programming with MySQL
Slide 1-26
Publishing Your Web Site
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
PHP Programming with MySQL
Slide 1-27
Publishing Your Web Site
Figure 1-6 FTP Web site example
PHP Programming with MySQL
Slide 1-28
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
PHP Programming with MySQL
Slide 1-29
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
PHP Programming with MySQL
Slide 1-30
XHTML Document Type Definitions (DTDs)
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
PHP Programming with MySQL
Slide 1-31
XHTML Document Type Definitions (DTDs)
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
PHP Programming with MySQL
Slide 1-32
XHTML Document Type Definitions (DTDs)
Table 1-2 HTML elements that are deprecated in XHTML 1.0
PHP Programming with MySQL
Slide 1-33
XHTML Document Type Definitions (DTDs)
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
PHP Programming with MySQL
Slide 1-34
XHTML Document Type Definitions (DTDs)
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
PHP Programming with MySQL
Slide 1-35
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
PHP Programming with MySQL
Slide 1-36
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
PHP Programming with MySQL
Slide 1-37
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
PHP Programming with MySQL
Slide 1-38
Cascading Style Sheets
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
PHP Programming with MySQL
Slide 1-39
Cascading Style Sheets
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
PHP Programming with MySQL
Slide 1-40
Publishing Your 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
PHP Programming with MySQL
Slide 1-41
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
PHP Programming with MySQL
Slide 1-42
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
PHP Programming with MySQL
Slide 1-43
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
PHP Programming with MySQL
Slide 1-44
Client/Server Architecture
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
PHP Programming with MySQL
Slide 1-45
Client/Server Architecture
Figure 1-16 The design of a three-tier client/server system
PHP Programming with MySQL
Slide 1-46
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)
PHP Programming with MySQL
Slide 1-47
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
PHP Programming with MySQL
Slide 1-48
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 Programming with MySQL
Slide 1-49
Server-Side Scripting and PHP
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
PHP Programming with MySQL
Slide 1-50
Server-Side Scripting and PHP
Figure 1-17 How a Web server processes a PHP script
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
PHP Programming with MySQL
Slide 1-51
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
PHP Programming with MySQL
Slide 1-52
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
PHP Programming with MySQL
Slide 1-53
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
PHP Programming with MySQL
Slide 1-54
