XHTML 1.0 Tutorials

The following series of tutorials will introduce you to coding web pages from scratch using XHTML 1.0. If you are already familiar with HTML then you may find much of the code presented to be somewhat familiar. Note however that XHTML differs from HTML in several ways so watch out for those differences.

The latest web design methodologies put the content in the HTML and define the appearance and layout of the page using stylesheets. These tutorials follow this thinking.


  1. Hello World
    Let's start with a programming tradition (even though XHTML isn't a programming language) and introduce our initial page template which displays "Hello World" in a paragraph on an otherwise empty web page.
  2. Headings
    We can add a heading at the top of our page to let people know what the page is about as well section headings to subdivide our page and make it easier for people (and search engines) to pick up on the key points.
  3. Images
    Now that we know how to put text on our page let's spice things up a bit by adding some pictures.
  4. Simple Lists
    A lot of what goes on web pages are actually lists of things. Here is how to define them as actual lists.
  5. Links
    A web page without links is like a house without walls.
  6. Divs and Spans
    Even though XHTML doesn't allow you to create your own tags to identify types of content using divs and spans with the id and class attributes can achieve the same result.
  7. Line Breaks
    Most of your content doesn't require line breaks in specific locations. When it does require it a simple tag will provide the break.
  8. Entities
    Not every character can be entered directly from the keyboard and some characters have special meanings in XHTML. Entities allow you to use these in your page.
    When you mention something from another source you should indicate this by defining it as a quote.
  10. Emphasis and Strong Emphasis
    Emphasis on the screen is usually indicated by italic or bold text but need not be, and certainly isn't in web readers.
  11. Anchors
    You can link to points within a page by defining where you want to be able to link to.
  12. Styles
    By identifying and classifying our content we will be able to apply styles that position it and define its appearance.
  13. Styles (continued)
    To define the appearance of your page you need to attach stylesheet definitions.
  14. Definition Lists
    As well as ordered and unordered lists you can also set up lists that have two parts to each entry by using a definition list.
  15. Superscripts and Subscripts
    Not all text belongs on the baseline. Here's how to move it up or down.
    On those rare occasions you need something in the HTML to identify what part of the code is for you can insert a comment.
  17. Deleted and Inserted Text
    Let people see exactly what changes you have made to the page by marking the added and deleted content
  18. Address
    Identify your contact details to make them easier for people to find.
  19. Meta Data
    Provide information about your page using meta data in the head of the page.
  20. Absolute and Relative
    When should you use absolute references and how do relative references work.


  1. Forms
    Selling up forms on web pages are complicated enough to need their own tutorial series.
    • Buttons
      Possibly one of the most misunderstood form tags.
  2. Input Fields
    Text input fields are the most common type of field that gets added to forms.
  3. Password Fields
    Password input fields are the like text fields but display asterisks instead of what was typed.
  4. Hidden Fields
    Sometimes you need fields passed with the form that you don't want displaying on the screen.
  5. Textarea Fields
    Textareas are different from other form fields because they allow multiple lines of text to be entered.
  6. Checkbox Fields
    Checkboxes are ideal for those situations where you require a yes/no or true/false type answer.
    • Passing Checkboxes With Forms
      Checkboxes usually only get passed to the script that will process the form when the checkbox is selected. Here's how to code it so that one of two values is passed instead.
  7. Radio Button Fields
    Where you have two or more mutually exclusive choices then radio buttons may be just what you are looking for.
  8. Selection Lists
    When there are too many mutually exclusive choices for radio buttons then a selection list is what you need.
    • Optgroups
      You can group your options together in longer lists to make it easier to work out which is which.
  9. Image Buttons
    You can use an image in place of a submit button to submit your form.
  10. Tabindex
    Change the tab ordering of your form fields with this attribute.
  11. Disabled and Readonly
    These two attributes will stop a field from being user enterable but they have different uses.
  12. Files
    This form field works much differently from the others even though it is coded similarly.
  13. Fieldset and Legend
    The way to group your form fields on larger forms.


  1. Tables
    Introducing the top level tags within a table.
  2. Column Headings - thead
    Headings to display at the top of your table and at the top of each page when the table is split across multiple pages.
  3. Column Footers - tfoot
    Footers to display at the bottom of your table and at the bottom of each page when the table is split across multiple pages.
  4. Table Content - tbody
    The place to put your main table content.
  5. Row Headings
    Identifying the headings for each row.
  6. Merging Columns
    Combining two or more cells together in the same row.
  7. Merging Rows
    Combining two or more cells together in the same column.
  8. Styling Columns
    Applying the same style to all the cells in a column.
  9. A Complete Table
    What it looks like when we put a complete table together.


  1. Attaching Styles
    How to attach the stylesheets that define how your web page should look.
  2. Attaching JavaScript
    How to attach the JavaScript that defines how your web page should behave.
  3. JavaScript and XHTML
    The way you use JavaScript with XHTML is different from how it works with HTML.
  4. The Object Tag
    The standard way to embed content into your web page is via the object tag. Unfortunately Internet Explorer doesn't support this tag as fully as it ought to.
  5. Flash and the Object Tag
    HTML isn't the only thing that can be attached using object tags. Here we look at how to use it to attach Flash.
  6. Tags to Avoid
    Proprietary tags and deprecated tags should never be used as there are always better ways to achieve the same result. There are even some valid tags that are never required.

We now have Package Deals to create and maintain your website for you.
(includes special prices for community groups and hobby clubs)

Validate your HTML and CSS

go to top

FaceBook Follow
Twitter Follow