xhtml - Computer Science@IUPUI
Download
Report
Transcript xhtml - Computer Science@IUPUI
Introduction to Web Pages
N100
Building a Simple Web Page
XHTML
1
Objectives
In this chapter, you will:
• Learn about the World Wide Web (WWW)
• Create simple Hypertext Markup Language (HTML)
documents
• Learn about the World Wide Web Consortium (W3C)
• Learn about Web browsers
XHTML
2
Objectives
• Study how Extensible Hypertext Markup Language
(XHTML) evolved
• Learn about the basics of Extensible Markup
Language (XML)
• Learn why XML and HTML were combined to create
XHTML
XHTML
3
The World Wide Web
• The Internet is a vast network connecting computers
all over the world
• The original plans for the Internet grew out of a series
of memos written by J.C.R. Licklider of the
Massachusetts Institute of Technology (MIT) in
August 1962 discussing his concept of a “Galactic
Network”
• Licklider envisioned a global computer network
through which users could access data and programs
from any site on the network
XHTML
4
The World Wide Web
• Internet developed in the 1960s by the Advanced
Research Projects Agency (ARPA) of the U.S. Department
of Defense to connect the main computer systems of
various universities and research institutions that were
funded by ARPA
• In 1990 and 1991, Tim Berners-Lee created what would
become the World Wide Web (WWW), or the Web, at the
European Laboratory for Particle Physics (CERN) in
Geneva, Switzerland, as a way to easily access crossreferenced documents that existed on the CERN
computer network
XHTML
5
The World Wide Web
• Accessing cross-referenced documents, known
as hypertext linking, is probably the most
important aspect of the Web because it allows
you to quickly open other Web pages
• A hypertext link, or hyperlink, contains a
reference to a specific Web page that you can
click to quickly open that Web page
XHTML
6
The World Wide Web
• A document on the Web is called a Web page, identified
by a unique address called the Uniform Resource
Locator, or URL
• URL commonly referred to as a Web address
• A URL is a type of Uniform Resource Identifier (URI),
which is a generic term for many types of names and
addresses on the World Wide Web
• A Web site refers to the location on the Internet of the
Web pages and related files (such as graphic files) that
belong to a company, organization, or individual
XHTML
7
The World Wide Web
• You display a
Web page on
your computer
screen using a
program called
a Web
browser
• A home page
is the primary
Web page for
any given Web
site
XHTML
8
HTML Documents
• Originally, people created Web pages using
Hypertext Markup Language
• Hypertext Markup Language (HTML) is a simple
language used to create the Web pages that appear
on the World Wide Web
• A markup language is a set of characters or
symbols that define a document’s logical structure or
how a document should be printed or displayed
XHTML
9
HTML Documents
• HTML is based on an older language called
Standard Generalized Markup Language, or
SGML, which defines the data in a document
independently of how the data will be displayed
• A target output format refers to the medium in
which a document will be displayed, such as a
Web page or an online help system
XHTML
10
Basic HTML Syntax
• HTML documents are text documents that contain:
– formatting instructions, called tags
– the text that is to be displayed on a Web page
• HTML tags range from formatting commands to controls
that allow user input
• Tags are enclosed in brackets (< >), and most consist of a
starting tag and an ending tag that surround the text or
other items they are formatting or controlling
XHTML
11
Common Structure and
Formatting HTML Tags
XHTML
12
Basic HTML Syntax
• All HTML documents begin with <html> and end
with </html>
• Two other important HTML tags are the <head> tag
and the <body> tag
• The <head> tag contains information that is used by
the Web browser, and you place it at the start of an
HTML document, after the opening <html> tag
XHTML
13
Basic HTML Syntax
• The <head> tag pair and the tags it contains are
referred to as the document head
• Following the document head is the <body> tag,
which contains the document body
• The <body> tag pair and the text and tags it contains
are referred to as the document body
• A Web browser’s process of assembling and
formatting an HTML document is called parsing or
rendering
XHTML
14
Basic HTML Syntax
•
You use various parameters, called attributes, to configure many
HTML tags
•
You place an attribute before the closing bracket of the starting tag, and
separate it from the tag name or other attributes with a space
XHTML
15
Web Page Design and
Authoring
• Web page design, or Web design, refers to the visual design
and creation of the documents that appear on the World Wide
Web
• Web page authoring refers to the creation and assembly of the
tags, attributes, and data that make up a Web page
• This is a subtle, but important distinction:
– A book on Web design teaches the visual and graphical design
aspects of creating Web pages
– A book on XHTML teaches the more basic concepts that you need
to get started, such as how to work with tags and attributes
XHTML
16
The W3C
• Web page authors began to find it necessary to write
slightly different HTML code for each Web browser in
which they anticipated their Web page would be
opened
• To address the growing need for standards, Tim
Berners-Lee established the World Wide Web
Consortium, or W3C, in 1994 at MIT to oversee the
development of Web technology standards
XHTML
17
The W3C
• The W3C does not release a version of a
particular technology
– Instead, it issues a formal recommendation for a
technology, which essentially means that the
technology is (or will be) a recognized industry
standard
XHTML
18
Web Browsers
• At the time of this writing, Internet Explorer browsers are
being used by more than 85% of the market
– For this reason alone, the majority of the Web page
examples in this book are presented in the latest release of
Internet Explorer 6
• NCSA Mosaic was created in 1993 at the University of
Illinois and was the first program to allow users to navigate
the Web using a Graphical User Interface (GUI)
• In 1994, Netscape released Navigator, which soon
controlled 75% of the market
XHTML
19
Web Browsers
• Three additional browsers that are worth noting are:
– Amaya (http://w3.org/amaya)
– Mozilla (http://www.mozilla.org)
– Opera (http://www.opera.com)
• You must test your Web pages in every browser and
browser version in which you anticipate they will be
opened
XHTML
20
Web Browsers
• Most professional Web page authors and developers
ensure that their Web pages will function with Internet
Explorer version 4 and higher and Netscape browsers
higher than version 4
• Each Web browser may render the parts of a Web page
slightly differently from other browsers
• In addition to testing whether the technology on your Web
pages works as intended, you should also test to ensure
that your Web pages display properly across different
browsers and browser versions
XHTML
21
Web Browsers
• Another factor you must consider is monitor
resolution
• Resolution refers to the number of pixels that
can be displayed on a monitor
• A pixel (short for picture element) represents a
single point on a computer screen
• The number of pixels available depends on a
computer monitor’s resolution
XHTML
22
Web Browsers
• A VGA monitor contains 640 columns by 480 rows of
pixels, or about 300,000 pixels
• A Super VGA monitor contains 1024 columns by 768
rows of pixels, approximately 800,000 pixels
• If you use a high resolution of 1024 x 768 when
creating a Web page, the Web page will appear
much larger in monitors set to a resolution of 800 x
600 or 640 x 480
XHTML
23
The Evolution of XHTML
• The Web is expanding to other media, called user
agents, which are devices that are capable of
retrieving and processing HTML and XHTML
documents
• A user agent can be a traditional Web browser or a
device such as a mobile phone or PDA, or even an
application that simply collects and processes data
instead of displaying it
• HTML is not suitable for user agents other than Web
browsers
XHTML
24
The Evolution of XHTML
• HTML has evolved into a markup language that is more
concerned with how data appears than with the data itself
• Current and older versions of Web browsers allow you to
write sloppy HTML code
• Languages based on SGML use a Document Type
Definition, or DTD, to define the tags and attributes that
you can use in a document, and the rules the document
must follow when it includes them
XHTML
25
The Evolution of XHTML
• When a document conforms to an associated
DTD, it is said to be valid
• When a document does not conform to an
associated DTD, it is said to be invalid
• You can check whether a document conforms to
an associated DTD by using a program called a
validating parser
XHTML
26
The Evolution of XHTML
• Because HTML is based on SGML, it requires a DTD,
and the HTML DTD is built directly into Web browsers
• When a Web browser opens an HTML document, it
first compares the document to the DTD
• If an HTML document is missing any required tags,
the HTML DTD supplies them, allowing the Web
browser to render the page correctly
XHTML
27
The Basics of XML
• Extensible Markup Language, or XML, is used for creating
Web pages and defining and transmitting data between
applications
• Like HTML, XML is based on SGML
• Version 1.0 of XML achieved recommendation status by
the W3C in 1998 and was still current at the time of this
writing
XHTML
28
The Basics of XML
• In XML you refer to a tag pair and the data it
contains as an element
• All elements must have an opening and a closing
tag
• The data contained within an element’s opening
and closing tags is referred to as its content
XHTML
29
XML is Case Sensitive
• Unlike HTML tags, XML tags are case
sensitive
• With XML, you cannot mix the case of
elements
• If you use a different case for an opening and
closing tag, they will be treated as completely
separate tags, resulting in a document that is
not well formed
XHTML
30
XML Elements Must Be
Properly Nested
• Nesting refers to how elements are placed
inside other elements
<p><b><i>This paragraph is bold and italicized. </i></b></p>
• In an HTML document, it makes no difference
how the elements are nested
XHTML
31
Empty Elements Must Be
Closed
• Several elements in HTML do not have
corresponding ending tags, including the <hr>
element, which inserts a horizontal rule into the
document, and the <br> element, which inserts a
line break
• Elements that do not require an ending tag are called
empty elements because you cannot use them as a
tag pair to enclose text or other elements
XHTML
32
Empty Elements Must Be
Closed
• You can create an empty element in an XML
document by adding a single slash (/) before
the tag’s closing bracket to close the element
• Most often, you use an empty element for an
element that does not require content, such
as an image
XHTML
33
Combining XML and HTML
• Although XML was designed primarily to define
data, this does not mean that you cannot use it to
create Web pages
• You can create formatted Web pages using XML
and Extensible Stylesheet Language, or XSL,
which is a specification for formatting XML in a
Web browser
XHTML
34
Combining XML and HTML
• To make the transition to XML-based Web pages
easier, the W3C combined XML and HTML to create
Extensible Hypertext Markup Language (XHTML)
– Combination of XML and HTML that is used to author Web
pages
• XHTML is almost identical to HTML, except that it
uses strict XML syntax to describe the parts of a
document
XHTML
35