Figure 1.4 Unformatted Text Document
Course Name: Introduction to XHTML
Course Number: CS 112
Instructor: T. Perdue
Meeting Time: Wednesday, 5:30pm-7:30pm
Course Description: This course covers the basics of how to write XHTML Web documents.
Prerequsites: CS 101—Introduction to Computers, CS 103—Introduction to Web Site Design, CS 110—Designing Web Pages with HTML
Figure 1.6 HTML Document
<HTML>
<HEAD>
<TITLE>Introduction to XHTML</TITLE>
</HEAD>
<BODY>
<STRONG>Course Name:</STRONG> Introduction to XHTML <BR>
<STRONG>Course Number:</STRONG> CS 112 <BR>
<STRONG>Instructor: </STRONG> T. Perdue </BR>
<STRONG>Meeting Time: </STRONG> Wednesday, 5:30pm-7:30pm <BR>
<P>
<STRONG>Course Description: </STRONG> This course covers the
basics of how to write XHTML Web documents.
<P>
<STRONG>Prerequsites: </STRONG>
<UL>
<LI>CS 101-Introduction to Computers
<LI>CS 103-Introduction to Web Site Design
<LI>CS 110-Designing Web Pages with HTML
</UL>
</BODY>
</HTML>
Figure 1.8 XHTML Document
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Introduction to XHTML</title>
</head>
<body>
<strong>Course Name:</strong> Introduction to XHTML <br />
<strong>Course Number: </strong> CS 112 <br />
<strong>Instructor: </strong> Tabitha Perdue <br />
<strong>Meeting Time: </strong> Wednesday, 5:30pm-7:30pm <br />
<p />
<strong>Course Description: </strong> This course covers the
basics of how to write XHTML Web documents.
<p />
<strong>Prerequsites: </strong>
<ul>
<li>CS 101-Introduction to Computers </li>
<li>CS 103-Introduction to Web Site Design </li>
<li>CS 110-Designing Web Pages with HTML </li>
</ul>
</body>
</html>
Figure 1.11 Course Description Document with Errors
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Introduction to XHTML
</head>
<body>
<strong>Course Name:</strong> Introduction to XHTML <br>
<strong>Course Number: </strong> CS 112 <br />
<strong>Instructor: </strong> Tabitha Perdue <br />
<strong>Meeting Time: </strong> Wednesday, 5:30pm-7:30pm <br />
<p />
<strong>Course Description: </strong> This course covers the
basics of how to write XHTML Web documents.
<p />
<strong attribute="yes">Prerequistes: </strong>
<ul>
<li>CS 101-Introduction to Computers </li>
<li>CS 103-Introduction to Web Site Design </li>
<li>CS 110-Designing Web Pages with HTML </li>
</ul>
</body>
</html>
Figure 2.1 XHTML Strict Document Framework
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Strict XHTML Document</title>
</head>
<body>
<!-- Body of document goes here -->
</body>
</html>
Figure 2.4 Block-level Elements Example
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>XHTML Block-level Elements</title>
</head>
<body>
<p> This is a paragraph about African Gray
parrots. The African Gray is one of the most
popular pet birds of the parrot family. It is known for its intellegence and is one of the best talkers of all domesticated birds. This parrot is native to Africa and can live to be almost 70 years old.</p>
<div> This is also a paragraph about African Gray parrots. Here is some additional information about the African Gray parrot separated by line breaks: (break here) <br />The African Gray parrot is about 15 inches long and (break here) <br />has a wing span of about 20 inches.</div>
<hr />
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
<hr />
</body>
</html>
Figure 2.7 Presentational Text Formatting Elements
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>XHTML Presentational Text Formatting Elements</title>
</head>
<body>
<p>
This text is formatted in <b>bold</b>.
</p>
<p>
This text is formatted in <i>italics</i>.
</p>
<p>
See how <big>the big element</big> increases the current font size and how <small>the small
element</small>decreases it.
</p>
<p>
This is how the <sup>superscript element</sup> and the element <sub>subscript element</sub> format text.
</p>
</body>
</html>
Figure 2.10 Logical Text Formatting Elements
<?xml version="1.0"?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>XHTML Logical Text Formatting Elements</title>
</head>
<body>
<p>
Following is a citation: <br />
<cite>
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
</cite>
</p>
<p>
Following is a block of code: <br />
<code>
while ($x < 10) { <br />
$var = $x + 1; <br />
$count++; <br />
} <br />
</code>
</p>
<p>
This text is formatted using the <strong>strong
element</strong>
</p>
<p>
This text is formatted using the <em>em element</em>
</p>
</body>
</html>
Figure 2.13 XHTML Lists
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>XHTML List Examples</title>
</head>
<body>
<h2>Ordered List Example</h2>
<!-- Ordered List Example -->
<h2>The Lord of the Rings Trilogy</h2>
<ol>
<li>The Fellowship of the Rings</li>
<li>The Two Towers</li>
<li>The Return of the King</li>
</ol>
<!-- Unordered List Example -->
<h2>Subway Lines in Boston</h2>
<ul>
<li>Blue Line</li>
<li>Green Line</li>
<li>Orange Line</li>
<li>Red Line</li>
</ul>
<!-- Definition List Example -->
<h2>Web Protocol Definitions</h2>
<dl>
<dt>HTTP</dt>
<dd>HyperText Transfer Protocol</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
<dt>XML</dt>
<dd>Extensible Markup Language</dd>
</dl>
<!-- Nested List Example -->
<h2>Football Favorites</h2>
<ul>
<li>Favorite Football Teams
<ul>
<li>New England Patriots</li>
<li>Tennessee Titans</li>
<li>Dallas Cowboys</li>
</ul>
</li>
<li>Favorite Players
<ol>
<li>Tom Brady - Patriots</li>
<li>Steve McNair - Titans</li>
<li>Adam Vinitari - Patriots</li>
<li>Eddie George - Titans</li>
</ol>
</li>
</ul>
</body>
</html>
Figure 2.15 Links Using the <a> Element
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Link Examples in XHTML</title>
</head>
<body>
<p> Here are some examples of links in XHTML:</p>
<p>
<a href="http://chughes.com/newpage.html"> This is an absolute link to a new page.</a>
</p>
<p>
<a href="newpage.html"This is a relative link to a new page.</a>
</p>
<p>
<a href="newpage.html"<img src="button.gif" alt="This image is a clickable button."> </a>
</p>
<p>
<a href="mailto:"This is link that launches an email message.</a>
</p>
</body>
</html>
Figure 3.1 XHTML Document course-descriptions.html with Linked Style Sheet
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Introduction to XHTML</title>
<link rel="stylesheet" href="mystyles.css" type="text/css" />
</head>
<body>
<strong>Course Name:</strong> Introduction to XHTML <br />
<strong>Course Number: </strong> CS 112 <br />
<strong>Instructor: </strong> T. Perdue <br />
<strong>Meeting Time: </strong> Wednesday,
5:30pm - 7:30pm <br />
<p>
<strong>Course Description: </strong> This course covers the
basics of how to write XHTML Web documents.
</p>
<strong>Prerequisites: </strong>
<ul>
<li>CS 101 - Introduction to Computers </li>
<li>CS 103 - Introduction to Web Site Design </li>
<li>CS 110 - Designing Web Pages with HTML </li>
</ul>
</body>
</html>
Figure 3.2 CSS mystyles.css
strong {
font-weight:bold;
text-align:left;
background-color:yellow;
text-decoration:underline
}
li {
font-style:italic;
color:purple
}
Figure 3.5 XHTML Document course-descriptions_2.html with Global Style Sheet
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Introduction to XHTML</title>
<style type="text/css"
<!--
strong {
font-weight:bold;
text-align:left;
background-color:yellow;
text-decoration:underline
}
li {
font-style:italic;
color:purple
}
-->
</style>
</head>
<body>
<strong>Course Name:</strong> Introduction to XHTML <br />
<strong>Course Number: </strong> CS 112 <br />
<strong>Instructor: </strong> T. Perdue <br />
<strong>Meeting Time: </strong> Wednesday, 5:30pm-7:30pm <br />
<p>
<strong>Course Description: </strong> This course covers
the basics of how to write XHTML Web documents.
</p>
<strong>Prerequisites: </strong>
<ul>
<li>CS 101 - Introduction to Computers </li>
<li>CS 103 - Introduction to Web Site Design </li>
<li>CS 110 - Designing Web Pages with HTML </li>
</ul>
</body>
</html>
Figure 3.6 CSS mystyles2.css
strong {
font-weight:bold;
text-align:left;
background-color:yellow;
text-decoration:underline
}
li {
font-style:italic;
color:purple
}
* {
color:green
}
Figure 3.8 CSS mystyles3.css
body {
color:green;
font-style:normal;
font-size:12
}
strong {
color:white;
background-color:blue
}
p {
margin-top:50px;
color:blue;
background-color:yellow;
font-size:20pt;
font-style:italic;
border-style:double
}
Figure 3.10 CSS mystyles4.css (continues)
/* Defines a class called underline */
div.box {
margin-top:50px;
background-color:yellow;
color:#000090;
border-style:double;
padding: 10px;
border-color: #000090
}
/* Defines styles for the <p> element */
p {
font-size:16pt
}
/* Defines specific properties for the <p> element with
the class name of description */
p.description {
color: #000099;
background-color:#cccccc;
font-style:italic;
}
/* Defines a unique id selector that will be applied
to one element within the document */
#identifier {
color: red
}
/* Defines class to align text to the right */
.right {
text-align: right
}
/* Defines universal element formatting styles */
* {
color: #333333;
font-family: arial;
font-size: 10pt
}
Figure 3.11 XHTML Document with Linked and Global Style Sheets and Inline Styles
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Introduction to XHTML</title>
<link rel="stylesheet" href="mystyles4.css"
type="text/css" />
<style type="text/css"
<!--
h1 {
font-size: 20;
text-align:center;
font-style:italic;
}
h2 {
font-size: 18;
text-align:left;
font-style:italic;
}
h3 {
font-size: 16;
text-align:left;
font-style:italic;
}
-->
</style>
</head>
<body>
<h1> Course Description </h1>
<div class="box">
<div class="right"<strong>Course Name:
</strong>Introduction to XHTML <br /</div>
<strong>Course Number: </strong> CS 112 <br />
<strong>Instructor: </strong> T. Perdue <br />
<strong>Meeting Time: </strong>
Wednesday, 5:30pm - 7:30pm <br />
</div>
<h2 id="identifier">Course Description: </h2>
<p class="description">This course covers the
basics of how to write XHTML Web documents.
</p>
<h3>Prerequisites: </h3>
<ul>
<li>CS 101 - Introduction to Computers </li>
<li>CS 103 - Introduction to Web Site Design </li>
<li>CS 110 - Designing Web Pages with HTML </li>
</ul>
</body>
</html>
Figure 4.1 XHTML Document with myimage.html
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Sample Image</title>
</head>
<body>
<p>
This Web page contains our first image file:
</p>
<p>
<img src="myimage.gif" alt="Alternate text for my image" />
</p>
<p>
Isn’t this fun?
</p>
</body>
</html>
Figure 4.7 XHTML myimagelink.html Document
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Sample Image as a Link</title>
</head>
<body>
<p>
This Web page contains a linked image file:
</p>
<p>
<a href="newpage.html"<img src="myimage.gif"
alt="Click here" /</a>
</p>
<p>
Isn’t this fun?
</p>
</body>
</html>
Figure 4.12 Shapes for Clickable Areas in Image Maps
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Sample Image</title>
<style type="text/css"
img { border: none; }
</style>
</head>
<body>
<p>
This Web page contains our first image file:
</p>
<p>
<img src="balloons.gif" alt="Click on this image"
usemap="#myimage" />
</p>
<p>
Isn’t this fun?
<map name="myimage" id="myimage"
<area shape="circle" alt="Red Balloon" coords="155,123,34" href="red.html"
title="Red Balloon" />
<area shape="rect" alt="Blue Balloon"
coords="68,185,130,242" href="blue.html"
title="Blue Balloon" />
<area shape="poly" alt="Yellow Balloon"
coords="227,114,227,114,227,113,171,224,
208,267,264,209,264,209,267,141" href="yellow.html" title="Yellow Balloon" />
<area shape="rect" alt="Default Area"
href="default.html" coords="0,0,307,411" />
</map>
</p>
</body>
</html>
Figure 4.14 XHTML multmed.html File with Links to Audio and Video Files
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Sample Image</title>
</head>
<body>
<div class="center">
<h2>My first Christmas</h2>
<br />
<img src="baby.jpg" alt="Baby Picture" />
<br />
Click on one of the links below to see a video of
my first Christmas:<br />
<ul>
<li<a href="christmas.qt"QuickTime format</a</li>
<li<a href="christmas.avi"AVI format</a</li>
<li<a href="christmas.mpeg"MPEG format</a</li>
</ul>
<br />
</div>
</body>
</html>
Figure 5.1 Simple Table Example
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Table Example in XHTML</title>
</head>
<body>
<div style="align:center"<h1>Our First Table</h1</div>
<!-- Begin Table -->
<table border="1"
<caption>A Simple Table of Columns and Rows</caption>
<!-- Begin First Row -->
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<!-- End First Row -->
<!-- Begin Second Row -->
<tr>
<td>Column 1 <br /> Row 2</td>
<td>Column 2 <br /> Row 2</td>
<td>Column 3 <br /> Row 2</td>
</tr>
<!-- End Second Row -->
<!-- Begin Third Row -->
<tr>
<td>Column 1 <br /> Row 3</td>
<td>Column 2 <br /> Row 3</td>
<td>Column 3 <br /> Row 3</td>
</tr>
<!-- End Third Row -->
</table>
<!-- End Table -->
</body>
</html>
Figure 5.4 Row and Column Span Table Example
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Spanning Multiple Table Rows and Columns
with XHTML Tables</title>
<style type="text/css"
.teal_bg {
background-color: "#669999"
}
.green_bg {
background-color: "#cccc66"
}
caption {
font-weight: bold;
font-size: 14pt;
text-align: center;
color: "#000099"
}
</style>
</head>
<body>
<!-- Begin Table -->
<table border="1" cellpadding="5" class="teal_bg"
<caption>Saltwater Aquarium Invoice</caption>
<thead>
<!-- Begin Header Row -->
<tr>
<th rowspan="2"Item</th>
<th colspan="2"Purchase Details</th>
<th rowspan="2"Total Price</th>
</tr>
<tr>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tfoot
<tr align="center"
<td colspan="4"<small>Thank you for
shopping with us.</small</td>
</tr>
<!-- End First Row -->
</tfoot>
<tbody>
<!-- Begin First Item -->
<tr>
<th>Blue Angel Fish</th>
<td align="center"$19.95</td>
<td align="center"2</td>
<td align="center"$39.90</td>
</tr>
<!-- End First Item -->
<!-- Begin Second Item -->
<tr>
<th>Sailfin Tang Fish</th>
<td align="center"$34.95</td>
<td align="center"1</td>
<td align="center"$34.95</td>
</tr>
<!-- End Second Item -->
<!-- Begin Third Item -->
<tr>
<th>Clown Fish</th>
<td align="center"$3.95</td>
<td align="center"4</td>
<td align="center"$15.80</td>
</tr>
<!-- End Third Item -->
<!-- Begin Invoice Total -->
<tr class="green_bg"
<td colspan="3"<b>TOTAL</b</td>
<td align="center"<b>$89.75</b</td>
</tr>
<!-- End Invoice Total -->
</tbody>
</table>
</body>
</html>
Figure 5.6 Nested Table Example
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<head>
<title>Spanning Multiple Table Rows and Columns
with XHTML Tables</title>
<style type="text/css"
.outer {
background-color: "#999999"
}
.inner {
background-color: "#ff9999"
}
</head>
<body>
<!-- Begin Outer Table -->
<table border="1" cellpadding="5" class="outer"
<caption<strong>Phone Book</strong</caption>
<!-- Begin Header Row -->
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone Number</th>
</tr>
<!-- End Header Row -->
<!-- Begin First Row -->
<tr>
<td>Wendy Lee Rogell</td>
<td>
<!-- Begin Inner Table -->
<table border="1" class="inner"