PDA

Click to See Complete Forum and Search --> : HTML 4.0 and XHTML validation

Dark Dragon
08-22-2003, 07:58 AM
I made a test page using XHTML but after using W3schools validation tool, it said it wasn't valid XHTML Transitional or HTML 4.0! Why is this a problem, you ask?

Because the code I used came from their site! I copied and pasted their code directly into my web page and simply alterd the text and its color and after I used their validation tool..it kept making a reference to the HTML tag at the very beginning of the document; that something was missing or invlid even though it is their own code!!!!....I will paste the code and I'd appreciate it if any of you could help me to see the problem because I really don't readily detect it....thanks

<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body background="pics/grid2.gif">
<head>
<style>
body{font-family:arial;}

table{font-size:80%;background:black}

a{color:black;text-decoration:none;font:bold}

a:hover{color:#606060}

td.menu{background:indigo}

table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}

function hidemenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script></head>

<h3><img src="pics/wlcome.gif" alt="Welcome to Mish-Mosh" width="359" height="31"></h3>

<table width="76%" align="center">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')" bgcolor="#330000" width="305">
<div align="center"><a href="/default.asp"><font face="Comic Sans MS" color="#FFFFFF">Game
Tips</font></a><br />
</div>
<table class="menu" id="tutorials" width="100%">
<tr>
<td class="menu"><a href="/spyro2.xhtml" target="_self"><font color="#FFFFFF">Spyro
the Dragon: Ripto's Rage </font></a></td>
</tr>
<tr>
<td class="menu"><a href="/spyro3.xhtml" target="_self"><font color="#FFFFFF">Spyro
the Dragon: Year of the Dragon</font></a></td>
</tr>
<tr>
<td class="menu"><a href="/spyro4.xhtml" target="_self"><font color="#FFFFFF">Spyro
the Dragon: Enter the Dragonfly</font></a></td>
</tr>
<tr>
<td class="menu"><a href="/ratchet.xhtml" target="_self"><font color="#FFFFFF">Ratchet
and Clank</font></a></td>
</tr>
<tr>
<td class="menu"><a href="/jak.xhtml" target="_self"><font color="#FFFFFF">Jak
and Daxter</font></a></td>
</tr>
</table>
</td>
<td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')" bgcolor="#330000" width="226">
<div align="center"><a href="/default.asp"><font color="#FFFFFF" face="Comic Sans MS">Artwork</font></a><br />
</div>
<table class="menu" id="scripting" width="100%">
<tr>
<td class="menu"><a href="/js/default.asp"><font color="#FFFFFF">Pencil
Pics</font></a></td>
</tr>
<tr>
<td class="menu"><a href="/vbscript/default.asp"><font color="#FFFFFF">Photoshop
Pics</font></a></td>
</tr>
<tr>
<td class="menu"><a href="default.asp"><font color="#FFFFFF">Digital
Tablet Pics</font></a></td>
</tr>
<tr>
<td class="menu"><a href="/ado/default.asp"><font color="#FFFFFF">ADO</font></a></td>
</tr>
</table>
</td>
<td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')" bgcolor="#330000" width="218">
<div align="center"><a href="/site/site_validate.asp"><font color="#FFFFFF" face="Comic Sans MS">Other
Stuff </font></a><br />
</div>
<table class="menu" id="validation" width="100%">
<tr>
<td class="menu"><a href="/site/site_validate.asp"><font color="#FFFFFF">Web
Tutorial 1</font></a></td>
</tr>
<tr>
<td class="menu"><a href="/site/site_validate.asp"><font color="#FFFFFF">Web
Tutorial 2</font></a></td>
</tr>
<tr>
<td class="menu"><a href="/site/site_validate.asp"><font color="#FFFFFF">About
Me, this site etc. </font></a></td>
</tr>
<tr>
<td class="menu"><a href="index.xhtml" target="_self">Home</a></td>
</tr>
</table>
</td>
</tr>
</table>

<p><font color="#FFFFFF" face="Comic Sans MS" size="2"><b>Mouse over these options
to see the drop down menus</b></font></p>
<p>&nbsp;
<p>&nbsp;</p>
</body>
</html>
pyro
08-22-2003, 08:28 AM
First of all, the only way that code will possibly validate is using the Transitional DTD -- you really should try to make it with the Strict DTD.

Anyway, here are the problems with that code:

1: The doctype is incomplete, try this, for a XTHML Transitional document:

<?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">

2: What's this doing on line 8? <head>

3: You must move your stylesheet to an external file

4: What's this doing on line 27? </head>
Dark Dragon
08-22-2003, 09:59 AM
Thanks Pyro but umm...external file?? What do you mean by that?

2: What's this doing on line 8? <head

It shouldn't be there then? I shall delete it.


4: What's this doing on line 27? </head>

I shall remove that too.

Thanks Pyro..I will go and fix them. :)
pyro
08-22-2003, 11:08 AM
Copy all your css into a file and name it styles.css, and then add this the <head> of your document.

<link rel="stylesheet" type="text/css" href="styles.css">

Note that external style sheets should not contain opening and closing <style> tags.
Dark Dragon
08-22-2003, 11:56 AM
Well..I just copied and pasted the code from W3schools site..I din't use any CSS....I am confuzzled now!

So let me get this straight..I take the codes I want..paste it into a file then name it as styles css then add it to the head of my document..umm, okay, I will try that.

Thanks Pyro...I never learned this stuff in College so now I have to learn it here and on W3schools.com

Sad isn't it? :(
pyro
08-22-2003, 12:01 PM
Did you go to college to learn all this? I personally (at least for the time-being) am just teaching myself. It seems to be working pretty well, so I don't see any reason to change how I do it (ok, I can see a few, but... :D). Anyway, just stick with it, and keep hanging out on these forums.... :)
Dark Dragon
08-22-2003, 12:21 PM
Well, realistically I should've learned some of the basics of JavaScript and the newer forms of HTML and XHTML in our web and Advanced Web Design but we were taught little in the basics and nothing in advanced because the lame brained putz that taught the course knew nothing..and hat is exactly what he taught too.

Anyways, thanks for the help Pyro, it is appreciated....:D
spufi
08-22-2003, 12:34 PM
<link rel="stylesheet" type="text/css" href="styles.css" />
If you are validating against XHTML, that's the correct version of the <link> tag.
pyro
08-22-2003, 12:35 PM
Spufi is correct, my apologies. I general use HTML 4.01 Strict when validating my pages, and I forgot you were using XHTML. Use the tag the spufi provided.
Dark Dragon
08-22-2003, 12:46 PM
Umm..now you guys really got me confused..what am I supposed to do...leave my code the way it is but without the <head> and </head> tags like Pyro recommended or put the codes for the drop down menu and all into a CSS Style file and insert it into the head tag?

I am not too good with this stuff..in fact I recently decided to try out HTML 4.0 and XHTML so I can be current in the coding
Dark Dragon
08-22-2003, 12:53 PM
Okay..here is a better question..which would be easier and less of a pain in the spleen..HTML 4.0 or XHTML??? Because XHTML seems to be more and more of a mind detonating experience than anything.
pyro
08-22-2003, 01:03 PM
HTML 4.01 would be easier. XHTML is based on XML and thus, has a stricter set of rules that one must follow.

Also, I didn't tell you to remove your <head> tags, just the redundant <head> tags.... (you had <head> and </head> tags on lines 3 and 6)
Dark Dragon
08-22-2003, 01:13 PM
Also, I didn't tell you to remove your <head> tags, just the redundant <head> tags.... (you had <head> and </head> tags on lines 3 and 6)

Redundant, eh? Well..doesn't that translate into "may as well remove them"? But for XHTML I am led to believe all I need is the

<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

to preceed the document and the rest is HTML..am I wrong in this assumption?
Charles
08-22-2003, 01:20 PM
Originally posted by Dark Dragon
...am I wrong in this assumption? Yes, you are wrong.

1) You've omitted the XML declaration from the prolog.

2) You've omitted most all of the DOCTYPE.

3) In XHTML all tags that are optional in HTML are required.From the XHTML 1.1 Specification:
Here is an example of an XHTML 1.1 document.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://vlib.org/">vlib.org</a>.</p>
</body>
</html>
http://www.w3.org/TR/xhtml11/conformance.html#s_conform
spufi
08-22-2003, 01:23 PM
Click on the Doctype link in my sig. to see what Doctype you need for XHTML. Besides the inital code being different, XHTML adds more rules like having an opening tag, and closing tag, unless the tag is empty, ie a <img> tag. This where the end part like this " />" comes into play. I actually like using XHTML better because it creates cleaner code, and it pretty much forces you to use CSS since so much stuff is deprecated in it. Look can do a view source on my site to look at a site done in XHTML 1.1. I think there's a funky link on my home page that throws off the validator, but I'm going to fix that.
spufi
08-22-2003, 01:30 PM
Technically, I can validate a XHTML page without <?xml version="1.0" encoding="UTF-8"?>
spufi
08-22-2003, 01:35 PM
To catch myself here, without the <xml> tag for the first line, a <meta> tag within the <head> tag would be used to declare the proper encoding.
Dark Dragon
08-22-2003, 01:48 PM
WOW!!! This is getting way more complex than I thought...I read on thing one place but I get a different story here....maybe I will just stick to HTML 4.0...it should be around for awhile, right? Thanks for the information everyone..I didn't think XHTML would be such a pain in the kidneys! :D
Charles
08-22-2003, 01:59 PM
Originally posted by Dark Dragon
WOW!!! This is getting way more complex than I thought...I read on thing one place but I get a different story here....maybe I will just stick to HTML 4.0...it should be around for awhile, right? Thanks for the information everyone..I didn't think XHTML would be such a pain in the kidneys! :D Actually, HTML 4.0 was replaced by HTML 4.01 back in 1999. But HTML 4.01 will be around for a very long while. XHTML 1.0 is simply an XML version of HTML 4.01 and XHTML 1.1 is simply an XML version of HTML 4.01 Strict. Read, mark, learn and inwardly digest the HTML 4.01 Specification. (http://www.w3.org/TR/html4/)
Dark Dragon
08-22-2003, 02:16 PM
Well, I downloaded one of those HTML archive thingees..I will have to find out what it is ....but thanks for the help everyone!