Web Design and Graphics Room. Thread, Its Time To Update Your Code

CPS · #1 7th-October-2007, 03:53 PM

First off, yes your page will still work in the old html 4.1.
But as you know things change in computing at a fast rate.

In my other post about html, xml and xhtml I gave an overview of them.
The old html is to forgiving if mistakes were made, this had to change.

Forget about xml that's for the real code buffs, the one to use is xhtml.
This is html and xml combined hence xhtml, so use the xhtml DTD (document type definition).
Replace the old DTD with the xhtml one shown below to every page.

W3Schools XHTML 1.0 Transitional

Use this when you need to take advantage of HTML's presentational features and
when you want to support browsers that don't understand Cascading Style Sheets.

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html 
          PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>

    <title>Every document must have a title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  </head>

  <body>
    ...your content goes here...

  </body>

</html>

Use this free program to validate your code
http://www.htmlvalidator.com/lite/

This is very good takes a little time to do, but means your website will work OK in new future browser versions.

Main point is as I have said all along is USE LOWER CASE FOR YOUR CODE WORK.
This is now a must for xhtml coded web pages

CPS · #2 7th-October-2007, 06:02 PM

Most of the errors you will find are tags in uppercase, change them to lowercase.
The next you will find is adding closing tags to some of your code.

Here are a couple of common ones.

Code:

 is now 
 and <hr> is now <hr /> thats all you need to do to those, 
note the space before the forward slash.

If you have used the 

 tag this now has to have a closing tag.
<p "content" />

Once again note the space

There are others errors like nesting tags, they must be closed in the order they were opened.

Simple example
In html order did not matter 1342 "content" 3214 would work.
In xhtml the order must be like this 1234 "content" 4321 ok.

The html validator posted above will clearly mark these errors for you
Be sure to remove the old DTD and add the new DTD
before validating to the top of every page.

I am actually converting mine at the moment from html to xhtml.
Once you get the hang of it, after a few attempts its easy.

CPS · #3 8th-October-2007, 05:11 PM

Ok I have now updated the code in my website to conform to xhtml.

It looks the same but the code will now conform to future browser development.

The only change I made was to enlarge the background images to fit a resolution of 1024x768.

CPS · #4 13th-October-2007, 06:00 PM

Now fully compliant, I found a few pages I had missed in the two albums I have.
Air pictures and flood pictures on my Kedington site.

As I posted above use "html validator lite" its free and very easy to use.
It also has a button to convert any and all tags you have in uppercase to lowercase automatically.

Add the new DTD and validate, should you get stuck I will try and assist you.

CPS · #5 20th-October-2007, 11:00 AM

This link gives a clear explanation about xhtml and why its now time to use it.

http://www.yourhtmlsource.com/access...explained.html

Skyrunner · #6 20th-October-2007, 12:30 PM

Before you publish your updated code, check it with THE validator, W3C's own. Find it HERE

You can check either by file upload or pages already online.
It's Free. :wink:
When your page validates, you can add one of their little icons to it.

CPS · #7 20th-October-2007, 06:55 PM

I have done it, I passed, I now have a nice w3 xhtml icon on my home page.

Just have to recheck my other pages for any errors I have missed.
I wont stick an icon on all pages though, just on the index files for my 3 sites.

Skyrunner · #8 20th-October-2007, 08:57 PM

You can do your CSS too

Clicky Linky

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode