XHTML 1.1 Lecture 1 Examples and Exercises

Lecture 1 Examples

• first.html
• structure.html
• links.html
• images.html
• imageLinks.html
• text.html

Exercises

Make sure that you have completed the exercises from last week before you go any further today.

These required you to configure your two most important tools; Firefox and EditPlus, to allow you to create and edit simple XHTML pages on the web servers that are provided for you. It is essential that you know at this stage how to access these web servers.

Exercise 1.1

Using the W3C validation service

Copy the above examples from the lecture into EditPlus and save them to a suitable place on one of your web servers. How you do this is up to you. One possibility is to...

1. Click one of the above links
2. When the page appears in Firefox press Cntrl-U, Cntrl-A, Cntrl-C
3. In EditPlus click the icon for a new file and select Normal Text
4. Press Cntrl-V
5. Now save the file on a web server with a .html file extension

Edit these files to alter their content and submit the result to the W3C validation service.

The primary learning outcome for today is that you learn to use the validation service to help you to create valid XHTML 1.1 documents. This means that your XHTML documents must have the correct DOCTYPE.

Exercise 1.2

Configuring your XHTML template

EditPlus is configured by default to support HTML4 (at least it was last time I looked). In the labs EditPlus should be configured to support XHTML 1.0 Transitional (if you are lucky). The EditPlus website provides user files to support just about every conceivable computer language. Make sure that your EditPlus (both in the labs and at home) has an XHTML toolbar (user programmable) and an XHTML 1.1 template to support your development work. The configurations provided by Scyth are recommended although his template is 1.0 strict so you must tailor it to suit your own purposes. Copy the first few lines from this page to pick up the correct XHTML1.1 doctype. Save your configs in the J:\Editplus folder so they follow you in our labs.

1. In EditPlus click the icon for a new file and select HTML Page. If your EditPlus is configured correctly for XHTML you will see a reasonable XHTML template.
2. Edit this template to be a better template with an XHTML 1.1 DOCTYPE. You could use the source of this page or the above examples as a guide.
3. Save your new template to your EditPlus folder on your J: drive (or wherever your INI file lives at home) with a .html filename.
4. In EditPlus select Tools -> Preferences -> Templates -> Add and use the navigator button to select the template that you have just created and stored. Make sure that you give it a sensible name such as 'XHTML-1.1'.
5. Close the dialogue and click the icon for a new file. Your new template will now be in the list of available templates.

Exercise 1.3

Creating a semantic XHTML document

Create a XHTML 1.1 web page that advertises a movie.

• What content would you want?
• How should this be represented using XHTML?
  • think about the semantic structure of the document
• Include some images.
• Include links to other resources.
• Include a link to take you to the W3C validation service.
• Include a list.
  • if you are feeling ambitious include a nested list

Your pages must include an XHTML 1.1 DOCTYPE and your pages must pass validation using the W3C validation service. Do not worry about styling, that comes later.

Footnote

If you want to learn more XHTML tricks visit the W3Schools XHTML tutorial. Be advised that W3Schools are not strict about their XHTML and you will find things that are deprecated in the 1.1 doctype.

. .