Tutorial: XHTML part 2

These skills are covered in chapters 4 and 5 of Deitel's "Internet & WWW How to Program".

This tutorial assumes that you have already completed XHTML Part 1.

XHTML Tags covered in this lesson:

HTML Tag Purpose
<!-- comment --> insert comments into HTML code that are ignored by the Web browser
<table><tr><td></td></tr></table>

creates a table

<img />

inserts an image

<a></a> hyperlinks to other documents in your Web site

In this tutorial we begin working with multiple page Web sites. It is VERY important when working with multiple page Web sites that all files used in the Web site are located in a common folder.

Step 1. Begin by creating a folder on your PC named xhtml2. All files that you create in this tutorial should be placed in this folder.

All XHTML Web sites contain the following common elements:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
</title>
</head>
<body>
</body>
</html>

It is useful to keep a template file with only these commands in it from which to start all of your new .html files.

Step 2. Copy the above code into a text file for use in this tutorial. Save the file in your xhtml2 folder as username-xhtml2.html (using your own FSU username).

I. (X)HTML Comments

Programmers and coders find it useful to add comments to code that explains what it is and does. Such comments must be delineated in a manner that makes them invisible to the interpreter, in our case the Web browser.

Step 3. Try adding the following code to your .html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
XHTML Tutorial 2
</title>
</head>
<body>
<!-- This file contains practice XHTML code for images, links, and tables -->
<p>XHTML PRACTICE PART 2</p>
<p><em>by (enter your name here)</em></p>

</body>
</html>

Step 4. Save your file, then view it using a Web browser (File/Open/Browse).

  • Observe that the comment is not displayed in the browser window.

II. Tables

HTML tables are useful for presenting data in a grid made up or rows and column (see table at top of page). There are three tags associated with tables:

  • <table></table> indicates the beginning and end of the table
  • <tr></tr> (for table row) indicates the beginning and end of a table row
  • <td></td> (for table data) indicates cells within a row

Step 5. Try editing your .html file as follows to insert a table with four columns and six rows. Note, some typing time can be saved by cutting and pasting code from this document into your .html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
XHTML Tutorial 2
</title>
</head>
<body>
<!-- This file contains practice XHTML code for images, links, and tables -->
<p>XHTML PRACTICE PART 2</p>
<p><em>by (enter your name here)</em></p>

<table width="600" border="1" cellspacing="0" cellpadding="6">
<!-- ROW 1 -->
<tr align="center">
<td></td>
<td>MON</td>
<td>TUE</td>
<td>WED</td>
</tr>
<!-- ROW 2 -->
<tr>
<td>8:00-9:00</td>
<td>Gym</td>
<td></td>
<td>Gym</td>
</tr>
<!-- ROW 3 -->
<tr>
<td>9:00-10:00</td>
<td>Calc</td>
<td>Calc</td>
<td>Calc</td>
</tr>
<!-- ROW 4 -->

<tr>
<td>10:00-11:00</td>
<td></td>
<td>Chem</td>
<td></td>
</tr>
<!-- ROW 5 -->
<tr>
<td>11:00-Noon</td>
<td>Spanish</td>
<td></td>
<td>Spanish</td>
</tr>
<!-- ROW 6 -->

<tr>
<td>Noon-1:00</td>
<td>lunch</td>
<td>lunch</td>
<td>lunch</td>
</tr>
</table>

</body>
</html>

Step 6. Save your file, then view it using a Web browser (File/Open/Browse).

Note: You must have the same amount of cells (td's) in each row. Here are some explanations of the tag attributes:

  • width="600" sets the width of the table to 600 pixels. This value could also be set to a percentage of the window size. For example width="100%" would create a table the width of the window that expands and contracts when the window is sized.
  • border="1" sets the width of the table border to 1 pixel
  • cellspacing="0" sets the width between the cells
  • cellpadding="6" sets the margin size around the cell contents

More about table attributes at http://www.w3schools.com/html/html_tables.asp

III. Adding Images

(X)HTML files treat images differently than word processing documents. When you insert a picture into a word processing document the bits in the digital image file are copied into the bits of the binary word processing file --the picture is merged into the document. In (X)HTML, an image file is referenced from the .html file and the browser puts the files together. In this way, a Web page with pictures is actually a collection of multiple file: the .html file and the image files.

It is common practice for Web developers to store all of their image files in one folder named images.

Step 7. Create a folder named images inside your xhtml2 folder.

Step 8. Use your browser to save the photo at http://service.cs.fsu.edu/CGS3066/images/steve.jpg to your images folder.

Step 9. Edit your .html file as follows (note the table has been removed from this code, you can delete it from your html file or leave it)...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
XHTML Tutorial 2
</title>
</head>
<body>
<!-- This file contains practice XHTML code for images, links, and tables -->
<p>XHTML PRACTICE PART 2</p>
<p><em>by (enter your name here)</em></p>
<img src="images/steve.jpg" width="" height="" alt="Steve Jobs holding iPhone" />

</body>
</html>

Step 10. Save your file, then view it using a Web browser.

Explanation:

  • Notice that the image source (img src=) specifies where the image file is located in relation to the .html file. If it was in the same folder as the .html folder you would just use the image file name. Since it is in the images folder we specify images/steve.jpg.
  • File formats on the Web are typically .gif (for drawings) and .jpg (for photos).
  • We could have specified srv="http://service.cs.fsu.edu/CGS3066/images/steve.jpg" but then we would be dependant on the owner of the file to never move or delete it.
  • Speaking of ownership, watch out for copyrights. Get permission from the owners of graphics files prior to using them on your own Web site.
  • Since width and height were not specified in the html tag, the browser uses the original size of the file.
  • Always include a description of the image file in the alt attribute of the tag. This is used by blind users and their special software to enjoy your Web page.

Step 11. Try changing the width and height attributes in the img tag to alter the size of the photo. View the effects in the browser.

IV. Adding Local Links

Recall from the previous tutorial that links to Web pages can be created with the <a> command as follows:

<a href="http://www.fsu.edu">FSU</a>

Most Web sites are made up of several html files with links between them. In order to learn how that works, you will need to create a second html file.

Step 11. Create a new html file using the below code. Save the file as page2.html in your xhtml2 folder.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
Page 2
</title>
</head>
<body>
PAGE 2
</body>
</html>

Step 12, Open your original html file, xhtml2.html, and edit it as follows.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
XHTML Tutorial 2
</title>
</head>
<body>
<!-- This file contains practice XHTML code for images, links, and tables -->
<p>XHTML PRACTICE PART 2</p>
<p><em>by (enter your name here)</em></p>
<p><a href="http://en.wikipedia.org/wiki/Steve_Jobs">
<img src="images/steve.jpg" width="" height="" alt="Steve Jobs holding iPhone" />
</a></p>
<p><a href="page2.html">Click here for page two!</a></p>
</body>
</html>

Step 13. Save your file, then view it using a Web browser.

Explanation:

  • The <a> tags that surround the <img> tag have made the image into a hyperlink to an external page --Wikipedia. Click it to find out about Steve Jobs.
  • The second link is to the local Web page, page2.html. It opens in the current browser window.

Step 14. Validation

It is important that you check your code using http://validator.w3.org/ to make sure that it is fully compliant with XHTML 1.1. This can be challenging. A common error is to leave some tags outside of paragraph tags. Make sure all your images, text, and links in the body of the document are enclosed in paragraph tags <p></p>. Also make sure that you are not using any tags or tag attributes that haven't been covered in these two tutorials. Many tags that you may have used in previous HTML development are not valid in XHTML. When it comes exam time, only XHTML validated code will pass. Click here to view an HTML file that passes as valid XHTML 1.1 code. Click View Source to learn from the code.

 

There are many more tags and attributes to learn. For more on HTML and XHTML visit www.w3c.org and www.w3schools.com/html/

We will be using Cascading Style Sheets (css) to add color and style to our Web sites. That is covered in the next tutorial and assignment.

There is an excellent guide (and cheat sheet) at www.modularmedia.com/xhtml_standards