Transcript PPT

Chapter 1
Introduction to 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 crossreferenced documents that existed on the CERN
computer network
• Hypertext linking allows you to quickly open
other Web pages
2
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
3
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
4
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)
5
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
6
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
7
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
8
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
9
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
10
Web Communication Protocols
(continued)
http://www.google.com/help/index.html
Protocol
Domain name
Directory
Filename
Figure 1-4 Sample URL
11
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
12
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
13
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
14
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
15
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
16
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
17
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
18
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
19
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
20
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
21
XHTML Document Type Definitions
(DTDs) (continued)
Table 1-2 HTML elements that are deprecated in XHTML 1.0
22
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
23
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
24
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
25
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
26
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
27
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
28
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 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
29
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
30
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
31
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
32
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
33
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
34
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
35
Client/Server Architecture
(continued)
Figure 1-16 The design of a three-tier client/server system
36
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)
37
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
38
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)
39
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
40
Server-Side Scripting and PHP
(continued)
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
41
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
42
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
43
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
44