XHTML Tutorial

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    XHTML Tutorial

    Part 1 - Introduction
    Part 2 - XHTML Tags
    Part 3 - Attributes


    PART 1

    Introduction

    Although many people have never heard of it, XHTML is really the future of the internet. It is the newest generation of HTML (comming after HTML 4) but has many new features which mean that it is, in some ways, like XML. In this tutorial I will explain how XHTML differs from HTML and how you can update your pages to support it.

    Note: It is necessary to already have a basic understanding of HTML before reading this tutorial as it deals with the differences between XHTML and HTML.

    What is XHTML

    XHTML stands for eXtensable HyperText Markup Language and is a cross between HTML and XML. XHTML was created for two main reasons:


    To create a stricter standard for making web pages, reducing incompatibilities between browsers

    To create a standard that can be used on a variety of different devices without changes

    The great thing about XHTML, though, is that it is almost the same as HTML, although it is much more important that you create your code correctly. You cannot make badly formed code to be XHTML compatible. Unlike with HTML (where simple errors (like missing out a closing tag) are ignored by the browser), XHTML code must be exactly how it is specified to be. This is due to the fact that browsers in handheld devices etc. don't have the power to show badly formatted pages so XHTML makes sure that the code is correct so that it can be used on any type of browser.

    XHTML is a web standard which has been agreed by the W3C and, as it is backwards compatible, you can start using it in your webpages now. Also, even if you don't think its really necessary to update to XHTML yet, there are three very good reasons to do so:


    It will help you to create better formatted code on your site

    It will make your site more accessable (both in the future and now due to the fact that it will also mean you have correct HTML and most browsers will show your page better)

    XHTML is planned to replace HTML 4 in the future

    There is really no excuse not to start writing your web pages using XHTML as it is so easy to pick up and will bring many benefits to your site.

    The Main Changes

    There are several main changes in XHTML from HTML:


    All tags must be in lower case

    All documents must have a doctype

    All documents must be properly formed

    All tags must be closed

    All attributes must be added properly

    The name attribute has changed

    Attributes cannot be shortened

    All tags must be properly nested

    At a glance, this seems like a huge amount of changes but once you start checking though the list you will find that very little on your site actually needs to be changed. In this tutorial I will go though each of these changes explaining exactly what is different.

    The Doctype

    The first change which will appear on your page is the Doctype. When using HTML it is considered good practice to add a Doctype to the beginning of the page like this.

    Allthough this was optional in HTML, XHTML requires you to add a Doctype. There are three available for use.

    Strict - This is used mainly when the markup is very clean and there is no 'extra' markup to aid the presentation of the document. This is best used if you are using Cascading Style Sheets for presentation.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Transitional - This should be used if you want to use presentational features of HTML in your page.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
    3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Frameset - This should be used if you want to have frames on your page.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

    The doctype should be the very first line of your document and should be the only thing on that line. You don&#39;t need to worry about this confusing older browsers because the Doctype is actually a comment tag. It is used to find out the code which the page is written in, but only by browsers/validators which support it, so this will cause no problems.

    ocument Formation

    After the Doctype line, the actual XHTML content can be placed. As with HTML, XHTML has <html> <head> <title> and <body> tags but, unlike with HTML, they must all be included in a valid XHTML document. The correct setup of your file is as follows:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Page Title</title>
    OTHER HEAD DATA
    </head>
    <body>
    CONTENT
    </body>
    </html>

    It is important that your document follows this basic pattern. This example uses the transitional Doctype but you can use either of the others (although frames pages are not structured in the same way).

    PART 2

    Introduction

    One of the major changes to HTML which was introduced to XHTML is that tags must always be properly formed. With the old HTML specification you could be very sloppy in your coding, with missing tags and incorrect formation without many problems but in XHTML this is very important.

    Lower Case

    Probably the biggest changes in XHTML is that now not only the tags you use but, the way in which you write them must be correct. Luckily the major change can be easily implemented into a normal HTML document without much problem.

    In XHTML, tags must always be lower case. This means that:

    <FONT>
    <Font>
    <FoNT>

    are all incorrect tags and must not be used. The font tag must now be used as follows:

    <font>

    If you are not writing your code, but instead use a WYSIWYG editor, you can still begin to migrate your documents to XHTML by setting the editor to output all code in lower case. For example, in Dreamweaver 4 you can do this by going to:

    Edit -> Preferences -> Code Format

    and making sure that Case For Tags is set to:

    <lowercase>

    and also that Case For Attributes is set to:

    lowercase="value"

    Nesting

    The second change to the HTML tags in XHTML is that they must all be properly nested. This means that if you have multiple tags applying to something on your page you must make sure you open and close them in the correct order. For example if you have some bold red text in a paragraph, the correct nesting would be one of the following:



    <font color="#FF0000">Your Text</font></p>


    <font color="#FF0000">Your Text</font></p>


    <font color="#FF0000">[b]Your Text[b]</font></p>

    These are only examples, though, and there are other possibilities for these tags. What you must not do, though, is to close tags in the wrong order, for example:



    <font color="#FF0000">Your Text</p></font>

    Although code in this form would be shown correctly using HTML, this is incorrect in the XHTML specification and you must be very careful to nest your tags correctly.

    Closing Tags

    The previous two changes to HTML should not be a particular problem to you if your HTML code is already well formed. The final change to HTML tags probably will require quite a lot of changes to your HTML documents to make them XHTML compliant.

    All tags in XHTML must be closed. Most tags in HTML are already closed (for example

    </p>, <font></font>, ) but there are several which are standalone tags which do not get closed. The main three are:



    <img>
    <hr>

    There are two ways in which you can deal with the change in specification. The first way is quite obvious if you know HTML. You can just add a closing tag to each one, e.g.


    </br>
    <img></img>
    <hr></hr>

    Although you must be careful that you do not accidentally place anything between the opening and closing tags as this would be incorrect coding. The second way is slightly different but will be familiar to anyone who has written WML. You can include the closing in the actual tag:



    <img />
    <hr />

    This is probably the best way to close your tags, as it is the recommended way by the W3C who set the XHTML standard. You should notice that, in these examples, there is a space before the />. This is not actually necessary in the XHTML specification (you could have
    ) but the reason why I have included it is that, as well as being correct XHTML, it will also make the tag compatible with past browsers. As every other XHTML change is backwards compatible, it would not be very good to have a simple missed out space causing problems with site compatibility.

    In case you are wonder
    ing how the <img> tag works if it has all the normal attributes included, here is an example:

    [img]myimage.gif[/img]

    Again, notice the space before the />


    PART3

    Introduction

    In this part of the XHTML tutorial, I will show you the changes to HTML attributes in XHTML. HTML attributes are the extra parts you can add onto tags (such as src in the img tag) to change the way in which they are shown. There are four changes to the way in which attributes are changed.

    Lowercase

    As with XHTML tags, the attributes for them must be in lowercase. This means that, although in the past, code like:

    <table Width="100%">

    would have worked, this must now be given as:

    <table width="100%">

    Although this is quite a minor issue, it is important to check your code for this mistake as it is quite a common one.

    Correct Quotation

    Another change in the HTML syntax is that all attributes in XHTML must be quoted. In HTML you could have used the following:

    <table width=100%>

    with absolutely no compatibility problems. This all changes in XHTML. If you use code in this format with XHTML it will be incorrect and must be changed. In future, all attributes must be surrounded by quotes (") so the correct format of this code would be:

    <table width="100%">

    Attribute Shortening

    It has become common practice in HTML to shorten a few of the attributes to save on typing and on transfer times. This method has become almost a standard. As with other common practices in HTML, this has been removed from the XHTML specification as it causes incompatibilities between browsers and other devices.

    An example of a commonly shortened tag is:

    <input type="checkbox" value="yes" name="agree" checked>

    In this, it is the:

    checked

    part which is incorrect. In XHTML all shortened attributes must be given in their &#39;long&#39; format. For example:

    checked="checked"

    so the checkbox code earlier would now need to be written as:

    <input type="checkbox" value="yes" name="agree" checked="checked">

    There are other attributes (such as noresize) which also must be given in full. There is a full list at W3Schools.

    The ID Attribute

    Probably the biggest change from HTML to XHTML is the one tag attribute change. All other differences have been just making tags more compatible. This is the only full change.

    In HTML, the <img> tag has an attribute &#39;name&#39;. This is usually used to refer to the image in javascript for doing actions like image rollovers. This attribute has now been changed to the &#39;id&#39; attribute. So, the HTML code:

    [img]myimage.gif[/img]

    would need to be written in XHTML as:

    [img]myimage.gif[/img]

    Of course, this would not be backward compatible with older browsers, so if you still want your site to work fully in all old browsers (as XHTML is intended to do), you will need to include both id and name attributes (this would also be correct XHTML):

    [img]myimage.gif[/img]

    Conclusion

    This tutorial has shown you most of the changes between HTML and XHTML. As you will have seen, there are actually very few changes and, the next time you update your site, I recommend changing your code to make it XHTML compatible. It will not only make your site &#39;future-proof&#39; but will also mean that you will have more correct code and should have fewer browser incompatibility problems.

    Color codes:

    Black = "#000000" Green = "#008000"

    Silver = "#C0C0C0" Lime = "#00FF00"

    Gray = "#808080" Olive = "#808000"

    White = "#FFFFFF" Yellow = "#FFFF00"

    Maroon = "#800000" Navy = "#000080"

    Red = "#FF0000" Blue = "#0000FF"

    Purple = "#800080" Teal = "#008080"

    Fuchsia = "#FF00FF" Aqua = "#00FFFF"
    Advertise your mobile site for FREE with AdTwirl

    Tags: None
    #2
    User selectable color themes on your wapsite (xhtml+php)

    Code:
    if (isset($_POST[&#39;options&#39;][&#39;theme_color&#39;]))
   {
      $_SESSION[&#39;theme_color&#39;] = $_POST[&#39;options&#39;][&#39;theme_color&#39;];
      $options[&#39;theme_color&#39;] = $_SESSION[&#39;theme_color&#39;];
   }
   elseif (isset($_SESSION[&#39;theme_color&#39;]))
      $options[&#39;theme_color&#39;] = $_SESSION[&#39;theme_color&#39;];
if (isset($options[&#39;theme_color&#39;]))
    $mycolor = $options[&#39;theme_color&#39;];
else
// Set default color theme
    $options[&#39;theme_color&#39;] = isset($settings[&#39;default_theme_color&#39;]) ? $settings[&#39;default_theme_color&#39;] : &#39;red&#39;;

// Add the following in your <head>
<link rel="stylesheet" href="&#39;,$options[&#39;theme_color&#39;], &#39;.css" type="text/css" />&#39;;

// Now create a select box:
<form action="&#39;.$_SERVER[&#39;PHP_SELF&#39;]. &#39;" method="post"class="smalltext"><select name="options[theme_color]" onchange="this.form.submit();">
            <option selected="selected" value="&#39;, $options[&#39;theme_color&#39;], &#39;">Current Theme</option>
            <option value="style1">Style1</option>
            <option value="style2">Style2</option>
            <option value="style3">Style3</option>
        </select>
<input type="submit" alt="submit" value="Change" /></form>&#39;;

    Comment

    Previous template Next
    Working...
    X