XHTML Basics - Academic Web Pages
Download
Report
Transcript XHTML Basics - Academic Web Pages
Web Developer Foundations:
Using XHTML
Chapter 2
Key Concepts
1
Learning
Outcomes
In this chapter, you will learn about:
The development of HTML
The transition from HTML to XHTML
XHTML syntax, tags, and document type
definitions
The anatomy of a web page
Formatting the body of a web page
Formatting the text on a web page
Physical and logical style tags
Special Characters
2
What is
HTML?
The World Wide Web Consortium (http://w3c.org)
sets the standards for HTML and its related
languages.
The set of markup symbols or codes placed in a file
intended for display on a Web browser page.
Each individual markup code is referred to as an
element or tag. Each tag has a purpose.
Tags are enclosed in angle brackets, "<" and ">"
symbols.
Most tags come in pairs; an opening tag and a
closing tag.
3
What is
XHTML?
The newest version of HTML is actually XHTML
– eXtensible HyperText Markup Language.
XHTML uses the tags and attributes of HTML
along with the syntax of XML (eXtensible
Markup Language).
While many web pages and web authoring tools
still use HTML, as a web developer you need to
learn about XHTML – you will be seeing a lot of
it in the future.
4
What’s wrong
with HTML?
The Web has changed from a medium used to
display electronic versions of paper documents to a
medium that provides diverse information for a
variety of devices.
HTML does not fit this need.
HTML is a structural language – it was originally
intended to markup printed documents for online
viewing.
With the expansion of the Web to include devices
other than personal computers, the need for a
descriptive rather than structural language became
evident and XHTML was created.
5
XHTML
XHTML was developed by the W3C to be
the reformulation of HTML as an application
of XML.
XHTML combines the formatting strengths
of HTML and the data structure and
extensibility strengths of XML.
6
XML
An XML document must be well-formed.
Use lowercase
Use opening and closing tags
<body>
</body>
Close stand-alone tag with special syntax
<hr />
XML documents begin with an XML directive.
The basic form of this directive is:
<?xml version="1.0" encoding="UTF-8"?>
7
Document
Type Definition (DTD)
W3C Recommendation: Use a Document Type
Definition to identify the type of markup language
used in a web page.
XTML 1.0 Transitional
This is the least strict specification for XHTML 1.0. It allows the use of both
Cascading Style Sheets and traditional formatting instructions such as fonts.
We will use this for most of our coding in this text
XHTML 1.0 Strict
Requires exclusive use of Cascading Style Sheets. We will not use this.
XHTML 1.0 Frameset
Required for pages using XHTML frames. We will use this with our frames
pages later in the text.
8
XHTML 1.0 Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
9
First Web Page
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> an opening tag
.... page info goes here
</html> a closing tag
10
Head & Body Sections
Head Section -- Contains information that
describes the web page document.
<head>
…head section info goes here
</head>
Body Section -- Used for text and tags
that do show directly on the web page.
<body>
…body section info goes here
</body>
11
XHTML
<head> and <body> tags
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
.... Header info goes here
</head>
<body>
.... Body info goes here
</body>
</html>
12
XHTML
<body> tag attributes
bgcolor
Configures the background color of a web page
<body bgcolor=“#000066”>
<body bgcolor=“white”>
text
Configures the color of the text on the web page
<body bgcolor=“#000066” text=“#CCCCCC”>
<body bgcolor=“white” text=“red”>
Check the XHTML Reference in the Web Developers
Handbook for more body tag attributes
13
XHTML
<hx> tag attributes
Heading tag
Adds a heading
<h1>Largest</h1>
Largest
<h2>next largest</h2> next largest
<h3>large</h3>
large
<h4>small</h4>
small
<h5>smaller</h5>
smaller
<h6>smallest</h6>
smallest
Check the XHTML Reference in the Web Developers
Handbook for header tag attributes
14
XHTML
<p> tag
Paragraph tag
<p> …paragraph goes here </p>
Used to group sentences and sections of
text together.
Text that is contained by <p> and </p> tags
will have a blank line above and below it.
15
XHTML
<br /> tag
Line Break tag
Stand alone tag
…text goes here<br />
This starts on a new line….
Used to force a new line when the text on
the web page document is displayed by a
browser.
16
XHTML
Definition List
Useful to display a list of terms and
definitions or a list of FAQ and answers
<dl> tag
Contains the definition list
<dt> tag
Contains a defined term
<dd> tag
Contains a data definition
17
XHTML
Definition List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control
Protocol</dd>
</dl>
18
XHTML
Ordered List
Used to convey information in an
ordered fashion
<ol>
Contains the ordered list
type attribute determines numbering scheme
of list, default is numerals
<li>
Contains an item in the list
19
XHTML
Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
20
XHTML
Unordered List
Used to display information in bullet
points
<ul>
Contains the unordered list
type attribute determines the type of bullet
point, default is disc
<li>
Contains an item in the list
21
XHTML
Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
22
XHTML
<pre> tag
Preformatted Text tag
The preformatted text tag preserves your
formatting and displays the text in a fixedwidth or monospace font.
<pre>
…text goes here
Line breaks and formatting are preserved
</pre>
23
XHTML
<blockquote> tag
Blockquote tag
Used to indent a block of text for special
emphasis.
<blockquote>
…text goes here
</blockquote>
24
XHTML
<font> tag
Font tag
Used to format text
Deprecated – will be dropped in future versions of
XHTML
Common attributes
face -- configure the typeface or font name to be used
to display the text.
size – sets the size of the text
color – configures the color of the textindent a block of
<font face=“Arial” size=“6” color=“#000099”>This is
large blue text.</font>
25
XHTML
<font> tag attributes
Font size:
<font size="1">Size 1</font>
<font size="2">Size 2</font>
<font size="3">Size 3</font>
<font size="4">Size 4</font>
<font size="5">Size 5</font>
<font size="6">Size 6</font>
<font size="7">Size 7</font>
Font face:
Size 1
Size 2
Size 3
Size 4
Size 5
Size 6
Size 7
<font face="Jokerman">Jokerman</font> Jokerman
26
XHTML
Logical Style Tags
Indicate the logical style used to display the text
in between the container tags.
Common Logical Style Tags
<strong></strong>
To cause text to be emphasized or to "stand out"
from surrounding text. Usually displayed in bold.
<strong>This is important</strong>
<em></em>
To cause text to be emphasized in relation to other
text on the page. Usually displayed in italics.
<em>Please note</em>
27
XHTML
Physical Style Tags
provide specific font instructions for the browser
Logical Style tags are preferred by the W3C
Physical Style tags are discussed because some web
developers still use them
Common Physical Style Tags
<b></b>
To display as bold text
<b>This is important</b>
<i></i>
To display text in italics
<i>Please note</i>
28
XHTML
Special Characters
Used to display special characters such as quotes,
copyright symbol, etc.
Character
©
<
>
Code
©
<
>
See the Special Characters section in the Web
Developer’s Handbook for a detailed list
(Page H-31)
29
Summary
This chapter provided an introduction to
XHTML.
It began with an introduction to the
HTML, discussed the transition to
XHTML, continued with the anatomy of
a web page, and introduced text and
block-level formatting.
30