Tutorial: XHTML part 1

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

Note: references to a Web browser refer to either Firefox or Internet Explorer.

XHTML Tags covered in this lesson:

HTML Tag Purpose
<html></html>

define the beginning and end of the HTML code

<head></head>

defines the head of the document which contains content not shown in the browser window like the title

<title></title> defines what is displayed in the title bar of the browser window
<body></body>

defines what is displayed in the main browser window

<h1></h1>, <h2></h2>, <h3></h3>

font heading sizes from largest to smallest

<strong></strong> bold font
<em></em> italicized font
<p></p>

beginning and end of paragraph

<br /> line break
<hr /> horizontal line
<ol><li></li></ol> ordered (bulleted) list with list item
<ul><li></li></ul> unordered (numbered) list with list item
<a></a> hyperlink - to other Web sites

Web pages are created using HTML tags (like those listed above). HTML tags typically have an opening tag in angle brackets and a closing tag in angle brackets with a forward slash. What ever is between the opening and closing tag is effected by the command. For example <b>Hello!</b> would be interpreted by the Web browser which would display Hello! in a bold font. Some tags (like <br /> above) do not operate on text and therefore combine the opening and closing tags into one.

XHTML extends HTML to be compliant with new Web development standards and technologies. Most of what you will learn in this tutorial is compliant with both HTML and XHTML standards, thus (X)HTML is used to represent this. Notes are provided in blue regarding XHTML-specific rules.

Web pages are stored in plain text files that can be created and edited edited in a text editor such as Windows notepad of Apple's TextEdit. Later we will learn other tools that can more conveniently create Web pages. Web page files use either .htm or .html for the file name extension. If you are using Microsoft Windows, you should open "My Documents" click the Tools menu then Folder Options. Click the View tab and check to make sure that there is no checkmark by "Hide extensions for known file types". This will make it easy to confirm that your files are named correctly.

You can view the (X)HTML code of Web pages by clicking View > Source in the browser menu. Try viewing the source of this page. Observe how the (X)HTML tags are used to effect the formatting of this page.

This tutorial walks you through the steps of creating a simple Web page and publishing it to the Web for the world to see. You will incrementally add (X)HTML tags to an .html file using Notepad, and view the results of each tag using a Web Browser

  1. Open Notepad and save the new file as username-xhtml1.html (use your FSU username for the file name). Make sure that your text editor does not add a .txt extension to the file. It should only have the .html extension.
  2. Type the following in the html file:

    <html>
    <head>
    <title>
    XHTML Tutorial 1
    </title>
    </head>
    <body>
    <p>
    My name is (insert your name here).
    Welcome to my Web page.
    </p>
    </body>
    </html>


    XHTML Note: XHTML requires that all tags use lower case letters.

    XHTML Note: that when tags are nested one inside another, XHTML requires you to close the tags in reverse order of the order that they were opened. For example in the cased of
    <head><title>...</title></head> the title tag must be closed prior to closing the head tag. <head><title>...</head></title> would be incorrect.
  3. Save your file, then view it using a Web browser (File/Open/Browse).
    • Observe the Title bar and Body of the Web browser window.
    • Note that Web Browsers ignore line breaks multiple spaces and tabs.
    • For the remaining steps you should leave both the Web Browser and Notepad windows open. You will edit your (X)HTML code in Notepad, and view the results of your edits by clicking the "Refresh" button in your browser.
  4. Change your (X)HTML code in Notepad as indicated below, save the file, and view the results in IE (red font used to indicate new tags).

    <html>
    <head><title>
    My Practice Web Page
    </title></head>
    <body>
    <h1>Hi there!</h1>
    <h2>Hi there!</h2>
    <h3>Hi there!</h3>

    <hr />

    <p>My name is (insert your name here).<br />
    Welcome to my Web page.</p>
    </body>
    </html>

    XHTML Note: While HTML used <hr> and <br> XHTML requires that all tags include a close tag, so <hr> and <br> become <hr /> and <br /> -- make sure to include a space prior to the slash. Any HTML tag that doesn't use a closing tag should be treated this way.

  5. Save your work and view the results in your Web browser by clicking the Refresh button, then try the following...

    <html>
    <head><title>
    My Practice Web Page
    </title></head>
    <body>
    <h1>Hi there!</h1>
    <hr />
    <p>My name is (insert your name here).</p>
    <p><strong><em>Welcome to my Web page.</em></strong></p>
    <p>I am creating this Web page as an exercise at FSU.</p>
    </body>
    </html>
    • Note the order of the opening tags and closing tags in line 9 <p><strong><em>...</em></strong></p>.
  6. Save your work and view the results in your Web browser by clicking the Refresh button, then try the following...

    <!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>
    My Practice Web Page
    </title>
    </head>
    <body>
    <h1>Hi there!</h1>
    <hr />
    <p>My name is (insert your name here).</p>
    <p><b><em>Welcome to my Web page.</em></b></p>
    <p>
    I am creating this Web page as an in-class exercise at <a href="http://www.fsu.edu">FSU</a>.
    </p>
    <p>My favorite foods are:</p>
    <ul>
    <li>Bananas</li>
    <li>Chocolate</li>
    <li>Pizza</li>
    </ul>
    <p>My daily routine includes:</p>
    <ol>
    <li>Wake Up</li>
    <li>Go to classes</li>
    <li>Go to sleep</li>
    </ol>
    <hr />

    </body>
    </html>


    Note that many (X)HTML tags may include attributes such as the <html> and <a> tags above. Attributes provide details for the command to follow. For example, in the <a> tag, href defines what Web page should be opened when the hyperlink "FSU" is clicked.

    XML Note: (X)HTML tag attributes must be in quotes and lower case letters. ie. <a href="http://www.fsu.edu">.


    XHTML Notes: The complicated code that you added at the beginning of the .html file, and the attributes you added to the <html> tag are necessary in order to define this .html file as being
    compliant with the XHTML Transitional standard. You can read more about this standard at http://www.w3.org/TR/xhtml1/.
  7. Creating a sublist in a list can be confusing. Try the following...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><title>
    My Practice Web Page
    </title></head>
    <body>
    <h1>Hi there!</h1>
    <hr />
    <p>My name is (insert your name here).</p>
    <p><b><em>Welcome to my Web page.</em></b></p>
    <p>
    I am creating this Web page as an in-class exercise at <a href="http://www.fsu.edu">FSU</a>.
    </p>
    <p>My favorite foods are:</p>
    <ul>
    <li>Bananas</li>
    <li>Chocolate</li>
    <li>Pizza</li>
    </ul>
    <p>My daily routine includes:</p>
    <ol>
    <li>Wake Up</li>
    <li>Go to classes
    <ol>
    <li>Calculus</li>
    <li>Chemistry</li>
    <li>Spanish II</li>
    </ol>

    </li>
    <li>Go to sleep</li>
    </ol>
    <hr />
    </body>
    </html>

    Notice how the sublist is inserted between the <li> and </li> tags of the main list. Save the file and view it with your Web browser.
  8. Save your work and view the results in your Web browser by clicking the Refresh button.

Publishing your Web page for the world to see

  • Use SSH Secure File Transfer to copy your .html file to your class directory in your public_html directory on garnet (this file will not be graded, it's just for practice). Change the permissions on the file to 755 (right-click and view properties). Now try accessing the file from http://garnet.acns.fsu.edu/~your_username.

Checking the validity of your XHTML code.

  • Once you have found your Web page on the Web, copy the URL by selecting it and typing CTRL+C (the Keyboard shortcut for the copy command). Now go to http://validator.w3.org/ and Paste CTRL+V into the "Validate by URL" box then click Check.

For more on HTML and XHTML visit www.w3c.org and www.w3schools.com/html/

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