Lesson 7
Introduction XHTML
<?xml version = “1.0” encoding = “utf-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!– File name is welcome.html-->
<!– our first XHTML example-->
<html xmlns = “http://www.w3.org/1999/xhtml”>
<head>
<title>Welcome XHTML</title>
</head>
<body>
<p>Welcome to the world of XHTML</p>
</body>
</html>
Headings
<?xml version = “1.0” encoding = “utf-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!– File name is heading.html-->
<!– different heading levels h1 through h6-->
<html xmlns = “http://www.w3.org/1999/xhtml”>
<head>
<title>XHTML Headings</title>
</head>
<body>
<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
</body>
</html>
Linking / Hypertext
<html>
<head>
<title>Linking to other web pages</title>
</head>
<body>
<h1>Some of my favourite sites</h1>
<p> <strong> Click a name to go to that page</strong></p>
<!– Create four text hyperlinks -->
<p><a href = “http://www.yahoo.com”>Yahoo</a></p>
<p><a href = “http://www.facebook.com”>Facebook</a></p>
<p><a href = “http://www.google.com”>Google</a></p>
<p><a href = “http://www.mucg.edu.gh”>Methodist
University</a></p>
</body>
</html>
Hyperlinking to email
<html>
<head>
<title>Address page</title>
</head>
<body>
<p>My email address is
<a href = mailto:
[email protected]> Send me mail </a>
</p>
<!– Create four text hyperlinks -->
<p>When you click on the blue link the default email program
will be opened</p>
</body>
</html>
Adding Images
<html xmlns = “http://www.w3.org/1999/xhtml”>
<head>
<title>Using Images in Web Pages</title>
</head>
<body>
<p>Some Images to see
<img src =
“file:///c:/web/someImage.jpg” alt = “My image” > Image </img>
</p>
</body>
</html>
Images as hyperlinks
<html xmlns = “http://www.w3.org/1999/xhtml”>
<head>
<title>Using Images in Web Pages</title>
</head>
<body>
<p>Some Images can be used as hyperlinks
<a href = “Another WebPage”>
<img src = “file:///c:/web/Image.jpg” width = “45” height = “40” alt “ImageLink
”></img>
</a>
<a href = “SomeOtherPage2”>
<img src = “file:///c:/web/Image.jpg” width = “45” height = “40” alt “ImageLink”></
img>
</a>
</p>
<!– Create four text hyperlinks -->
<p>
When you click on the blue link the default email program will be opened
</p>
</body>
</html>
Some special characters
<html xmlns = “http://www.w3.org/1999/xhtml”>
<head> <title>Using Special Characters</title> </head>
<body>
<p>Some special symbols and tags include the following
<p> <strong>for bold emphasis</strong> </p>
<p> <hr /> for horizontal rule or a line with blank line above and below it </p>
<p> <del>for a strike through texts</del> </p>
<p> <sup>for superscript</sup> </p>
<p> <sub>for subscript</sub> </p>
<p> <em>for italicised emphasis </em></p>
<p> < for less than sign </p>
<p> > for greater than sign </p>
<p> © for copyright symbol </p>
<p> &fracXY; for a fraction of X divided by Y </p>
<p> <i> for italics </i> <b> for bold </b> <u> for underline </u>; </p>
</p>
</body>
</html>
Making Lists of items
<html xmlns = “http://www.w3.org/1999/xhtml”>
<head>
<title> Listing Items </title> </head>
<body>
<h3> A few universities in Ghana </h3>
<!– Creating an unordered list of universities-->
<ul> <li> <a href = “http://www.mucg.edu.gh” >
Methodist</a></li>
<li> <a href = “http://www.knust.edu.gh” > KNUST </a> </li>
<li> <a href = “http://www.ug.edu.gh” > Legon </a> </li>
<li> <a href = “http://www.ucc.edu.gh” > UCC </a> </li>
<li> <a href = “http://www.ashesi.edu.gh” > Ashesi </a> </li>
</ul>
</body>
</html>
<html>
<head><title>Colours</title></head>
<body>
<p>Fonts can be formatted by the <font color = red>Font tag</font></p>
<p>
<font size = 3>This font <font color = "#44ff22">size can </font> be changed</font>
</br>
<font size = 5 color = pink> Resizing the text</font>
</br>
</p>
<p>
<font size = 3 color = blue> Resizing the text again</font>
</p>
<p>
<font size = 3 color = yellow> Resizing the text again</font>
</p>
</body>
</html>
Making a List
<html>
<head><title>Colours</title></head>
<body>
<p>Fonts can be formatted by the <font color = red>Font tag</font></p>
<p>
<font size = 3>This font <font color = "#44ff22">size can </font> be changed</font>
</br>
<font size = 5 color = pink> Resizing the text</font>
</br>
</p>
<p>
<font size = 3 color = blue> Resizing the text again</font>
</p>
<p>
<font size = 3 color = yellow> Resizing the text again</font>
</p>
</body>
</html>
Nested Listing
<html xmlns = “http://www.w3.org/1999/xhtml”>
<head> <title> Listing Items </title> </head>
<body>
<h3> A list of courses in Universities </h3>
<!– Creating and nesting ordered and unordered lists of item-->
<ul>
<li> University Courses</li>
<ul> <li> Sciences </li>
<li> Business </li>
<li> Arts </li>
</ul>
<li>Professional studies</li>
<ul> <li> ACCA </li>
<li> IMIS </li>
</ul>
</ul>
</body>
</html>
<html>
<head> <title>Listing Items</title> </head>
<body>
<h3>List of University Courses</h3>
<hr>
<ul>
<li>The University Programs available</li>
<ul>
<li>Sciences</li>
<li>Business</li>
<li>Engineering</li>
<li>Technology</li>
</ul>
<li>Professional Programs</li>
<ul>
<li>ACCA</li>
<li>Acturial Sciences</li>
<li>Banking And Finance</li>
</ul>
<li>Academic Programs</li>
<ul>
<li>Maths</li>
<li>Economics</li>
<li>Computer Science</li>
</ul>
</ul>
</body>
</html>
Creating Tables
• Tables are defined with the table element with different
attributes
• A typical table has a head, body and the footer
• The table’s border attribute specifies the border with in pixels
• The width attribute in percentage specifies the percentage of
the browser’s width the table occupies
• The head section is defined by the thead element
• The table body is defined by the tbody element with each table
row defined by tr element and each data defined by td element
• Unlike the tbody cells or elements, each column data or cell in
thead and tfoot elements are defined by th element
• Please note that the tfoot section must be defined before the
tbody section, yet the tfoot section will be displayed at the
bottom of the table
Creating Tables
<table border = “1” width = “45%” summary = “prices of books”>
<caption><strong>Prices of Text Books</strong></caption>
<thead> <!-- <thead> first in a table to format the table header -->
<tr> <!-- <tr> will insert a row in the table -->
<th>Book</th>
<th>Price</th>
<tr>
</thead>
<tfoot> <!-- <tfoot> last in a table to format the table footer -->
<tr> <!-- <tr> will insert a row in the table -->
<th>Total</th>
<th>125</th>
<tr>
</tfoot>
<!– all the content of a table are enclosed within the <tbody> tag -->
<tbody>
<tr> <!-- <tr> will insert a row in the table -->
<td>Web design with XHTML</td>
<td>25</td>
</tr>
<tr> <!-- <tr> will insert a row in the table -->
<td>Programming the www with XHTML</td>
<td>35</td>
</tr>
<tr> <!-- <tr> will insert a row in the table -->
<td>XHTML Made Simple</td>
<td>55</td>
</tr>
<tbody>
</table>
