XHTML: Basics plus- more Extensible Hypertext Markup Language tutorials

Previous

CSS: Basics Next

1.

Hyperlinks. Standard text link using the <a></a> element.

How to create a link using:

1. a full absolute path

2. an absolute path if the resource is on the same domain

3. with a relative path

4. example of use of '../' to access a resource in a higher directory (folder).

2.

Hyperlinks and anchors.

Internal link to an anchor or jump point within a web page using the <a></a> element.

Incorporate both the 'name' and 'id' attributes.

3.

Hyperlinks using images.

Create a link incorporating an image.

4.

Hyperlinks and the target attribute.

Create a link that opens a web page in a new window with the use of 'target="_blank"' attribute. (Careful consideration before using this: can cause disorientation for the user of the website.)

5.

Hyperlink to an email application.

Create a link to open an email application with the email subject line added.

This short introduction page to XHTML cannot possibly give you examples of the use of all the elements and their attributes. What this page does do however is give you an idea of how the elements are used and the format of the syntax for their use.

For the full set of elements available in XHTML 1.0 see the XHTML 1.0 element and attribute reference.

Utilizing a hyperlink to pass data values by appending the values to the link text with a question mark (?) followed by the name and value pair: a query string.

A practical demonstration. Make a search on a third-party website (Google) by passing a search parameter in the URI link text. Following this link will take you to Google.co.uk and carry out a search with the words 'JavaScript code snippets'.

http://www.google.co.uk/search?q=JavaScript+code+snippets

6.

Appending multiple data values to a hyperlink. Using a hyperlink to pass multiple data values by appending the values to the link text with a question mark (?) followed by the name and value pairs: a query string.

To pass multiple data parameters in the query string separate the multiple data value pairs with either the special character ampersand (&) numeric entity value: &#38; or the character entity equivalent : &amp;.

Utilizing a hyperlink to pass multiple data values.

A practical demonstration. Define the latitude and longitude coordinates to Google Maps by passing a values in the URI link text. Following this link will take you to Google Maps and centralize the map on the coordinate parameters of latitude 51.45 and longitude -0.255 with a zoom level of 7.

http://maps.google.com/maps?ll=51.45,-0.255&z=7

Use the Google Maps API to create a local or world interactive map for your website: learn how to Embed Google Maps in a web page.

View a table of special characters for (X)HTML code markup.

These values must be used for displaying special characters when writing XHTML (HTML) code markup. Example of special characters include: & " < > © ® ½.

For example if I wish to place in a web page the words: 'lost & found' which includes the use of the special character '&' then I will need to write that character with its equivalent numeric entity value: &#38; in the source code of the document.

Table includes entities 34, 38, 60, 62 and entity references for ISO 8859-1 characters: 160 to 255 inclusive. Selection of other special characters from utf-8.

7.

A simple form. Text fields, text area, a hidden field and a Submit button.

Appending the form data to the URI using the 'get' method attribute.

The hidden field can be utilized to control the access to a subsequent web page by including PHP: Hypertext Preprocessor (PHP) server-side functionality. See how to add server-side functionality to XHTML forms using PHP in PHP: Intro - Process data from website forms.

Add client-side functionality to XHTML forms using JavaScript in JavaScript: Forms.

Learn how to store form data in cookies using JavaScript in JavaScript: Cookies.

8.

A comprehensive form. Text fields, drop down list, menus, radio buttons, checkboxes, ability to select the label text, text area.

Submit and Reset buttons.

Appending the form data to the URI using the 'get' method attribute.

9.

A template for a login form. Contains a password field.

Keeping the passed information 'secret' by using the 'post' method attribute.

10.

More forms and button types.

A form using an image for the button.

A form using the <button> element to create a button.

XHTML can respond to many different events through event handlers. See full list of events handlers available in Event handlers.

11.

Controlling the appearance and emphasis of text.

Use of the <strong> element for bold style text: strong.

Use of the <em> element for italic style text: emphasis.

Build on the above and combine XHTML with CSS (Cascading Style Sheet) language to control presentation and add styles to a web page.

View CSS examples on CSS: Basics.