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.
Basics
- 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.
- 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.
- Images
Now that we know how to put text on our page let's spice things up a bit by adding some pictures.
- Simple Lists
A lot of what goes on web pages are actually lists of things. Here is how to define them as actual lists.
- Links
A web page without links is like a house without walls.
- 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.
- 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.
- 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.
- Quotes
When you mention something from another source you should indicate this by defining it as a quote.
- Emphasis and Strong Emphasis
Emphesis on the screen is usually indicated by italic or bold text but need not be and certainly isn't in web readers.
- Anchors
You can link to points within a page by defining where you want to be able to link to.
- Styles
By identifying and classifying our content we will be able to apply styles that position it and define its appearance.
- Styles (continued)
To define the appearance of your page you need to attach stylesheet definitions.
- 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.
- Superscripts and Subscripts
Not all text belongs on the baseline. Here's how to move it up or down.
- Comments
On those rare occasions you need something in the HTML to identify what part of the code is for you can insert a comment.
- Deleted and Inserted Text
Let people see exactly what changes you have made to the page by marking the added and deleted content
- Address
Identify your contact details to make them easier for people to find.
- Meta Data
Provide information about your page using meta data in the head of the page.
Forms
- 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.
- Buttons
- Input Fields
Text input fields are the most common type of field that gets added to forms.
- Password Fields
Password input fields are the like text fields but display asterisks instead of what was typed.
- Hidden Fields
Sometimes you need fields passed with the form that you don't want displaying on the screen.
- Textarea Fields
Textareas are different from other form fields because they allow multiple lines of text to be entered.
- Checkbox Fields
Checkboxes are ideal for those situations where you require a yes/no or tru/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.
- Passing Checkboxes With Forms
- Radio Button Fields
Where you have two or more mutually exclusive choices then radio buttons may be just what you are looking for.
- 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.
- Optgroups
- Image Buttons
You can use an image in place of a submit button to submit your form.
- Tabindex
Change the tab ordering of your form fields with this attribute.
- Disabled and Readonly
These two attributes will stop a field from being user enterable but they have different uses.
- Files
This form field works much differently from the others even though it is coded similarly.
- Fieldset and Legend
The way to group your form fields on larger forms.
Tables
Introducing the top level tags within a table.
Headings to display at the top of your table and at the top of each page when the table is split across multiple pages.
Footers to display at the bottom of your table and at the bottom of each page when the table is split across multiple pages.
The place to put your main table content.
Identifying the headings for each row.
Combining two or more cells together in the same row.
Combining two or more cells together in the same column.
Applying the same style to all the cells in a column.
What it looks like when we put a complete table together.
More
- Attaching Styles
How to attach the stylesheets that define how your web page should look.
- Attaching JavaScript
How to attach the JavaScript that defines how your web page should behave.
- 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..
- 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..
Don't forget to come back here as there are still lots more tutorials in this series still to come.
We now have Package Deals to create and maintain your website for you.
(includes special prices for community groups and hobby clubs)
