homepage Welcome to WebmasterWorld Guest from 54.167.171.186
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 33 message thread spans 2 pages: 33 ( [1] 2 > >     
Validation Problems
Simon




msg:4312341
 10:08 am on May 14, 2011 (gmt 0)

Hi,

Just wondering if anyone can help, I'm stuck on an assignment. I have created a website and when I validate I'm still getting 2 errors, which from Googling seem quite common. I've tried a few different things but the errors are still there.

The webpage has to be created solely in HTML and the webpage has to be created as a table...25% nav bar and 75% rest of webpage. The webpage is working fine, it just won't validate.

Here are the errors:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<title>Produce</title>

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<meta name="description" content="Joe's fruit and vegetables online">

<meta name="keywords" content="Joe's, fruit, vegetable, online">

</head>

<body bgcolor="#99FF99">
<font face="Verdana, Arial, Helvetica, Sans">
<font color="#66FF00">
<H1 align="center">All produce at Joe's</H1>
</font>
<br>
<br>
<table border="0" width="100%">
<tr>
<td valign="top" width="25%">
<a href="index.htm"target="_blank"><IMG SRC="carrothome.JPG"alt="Home"height="100" width="100"> </a>
<br>
<br>
<br>
<a href="produce.htm"target="_blank"><IMG SRC="carrotproduce.JPG"alt="Produce"height="100" width="100"> </a>
<br>
<br>
<br>
<a href="history.htm"target="_blank"><IMG SRC="carrothistory.JPG"alt="History"height="100" width="100"></a>
<br>
<br>
<br>
</td>
<td valign="top" width="75%">
<h4 align="center">Benefits of shopping at Joe's online:</h4>
<ul>
<li>It's convenient because the website is available 24 hours per day</li>
<li>You don't have to leave home to have the best produce available</li>
<li>Your phone call to order produce is free</li>
</ul>
<br>
<hr>
<br>
<center>
<table border="2">
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Alfalfa sprouts</td>
<td>$1.50 per punnet
</td>
</tr>
<tr>
<td>Apples, Bonza</td>
<td>$5.99 per kg </td>
</tr>
<tr>
<td>Apples Golden Delicious</td>
<td>$4.99 per kg</td>
</tr>
<tr>
<td>Artichoke hearts, pickled</td>
<td>$17.99 per kg</td>
</tr>
<tr>
<td>Avocados, dark, large</td>
<td>2 for $3.50</td>
</tr>
</table>
<br/>
<a href="mailto:info@joes.com.au?subject=More Information">info@joes.com.au</a>
<br/>
<br/>
<img src="map1.JPG" width="500" height="90" alt="imagemap" usemap="#map1">
<map name="map1">
<area shape="rect" coords="20,31,140,53" href="index.htm" target="_blank" alt="Home">
<area shape="rect" coords="178,30,301,52" href="produce.htm" target="_blank" alt="Produce">
<area shape="rect" coords="335,30,456,51" href="history.htm" target="_blank" alt="History">
</map>
</center>
</table>
</font>
</body>
</html>

Validation Output: 2 Errors
Line 19, Column 19: document type does not allow element "H1" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
<H1 align="center">All produce at Joe's</H1>&#9993;
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Line 24, Column 31: document type does not allow element "TABLE" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag
<table border="0" width="100%"> &#9993;
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Thanks in advance
Simon

 

g1smd




msg:4312344
 10:26 am on May 14, 2011 (gmt 0)

You do not need the keywords element. Searchengines don't use it.

Title element should be after the character set definition.

<font face...> and <font color...> is 1990s coding. You should be using CSS to set the style for the H1 element. The immediate problem is you open two of those <font> tags and only close one of them. You must close BOTH before you start the table.

Never link to "index.html". The canonical URL for the site root is "/".

You must have a space after an attribute; a="b"c="d"e="f" should be a="b" c="d" e="f" here.

Don't use <br> tags for creating space. Enclose the content in a heading, paragraph, list, table, form, or image tag and use CSS to set the paddding and margins.

You have a H1 element. The next one should be H2, not H4. Don't use the numbers to set the visible size. The numbers relate to IMPORTANCE. Use CSS to set the size of the H2 element.

Don't use XHTML style <br/> tags (those with the / in) in an HTML document; but do see the earlier note that says to not use <br> at all.

The <center> tag is in the wrong place. However, you should use CSS to style this. I haven't used a center tag since about 1998.

You are using a "partial DOCTYPE". Change the DOCTYPE to include the DTD URL, and browsers will render the page properly.

Put all your images in an /images/ folder then link to them using href="/images/image.png" with a leading slash in the link so that it counts from root.

Your coding style is more than 10 years out of date. I hope this isn't what someone is still teaching. They need a kick up the backside.

pageoneresults




msg:4312361
 11:57 am on May 14, 2011 (gmt 0)

You do not need the keywords element. Search engines don't use it.


According to Yahoo!, they still do and, they recommend its use in the Small Business Promotion documents.

What are meta tags?
[Help.Yahoo.com...]

Keywords:
Though the keywords tag isn't as important as it once was, effective keywords can still influence your search engine rankings. Your visitors won't see your keyword meta tags (which will be hidden in your site code), but search engines may use them to help index your site.


How should I write my keywords?
[Help.Yahoo.com...]

Maybe someone should tell Yahoo! that their documentation is outdated?

Simon




msg:4312363
 12:04 pm on May 14, 2011 (gmt 0)

Thanks for your speedy reply, much appreciated. I'm not allowed to use CSS at all, it all has to be HTML, and yes this coding style is still be taught, however the whole point of the exercise is so we have a basic understanding of how to create a webpage in HTML before using programs that do a lot of the coding for you such as Dreamweaver. We have to link to "index.html" and we were told not to make an image folder, although we were told this wasn't good practice.

I've taken out the keyword elements, added spaces to attributes, etc.

The whole document has to be set to Verdana, so if I use the </font> tag before the table anything within the table will not be Verdana.

I've tried including the H1 within the table and using colspan across the 2 column, but I'm still getting the validation error about H1 not be allowed.

<table border="0" width="100%">, any ideas about this error?

Many thanks

Simon




msg:4312365
 12:06 pm on May 14, 2011 (gmt 0)

pageoneresults....might put the keyword elements back in then :-)

g1smd




msg:4312370
 12:12 pm on May 14, 2011 (gmt 0)

<font> is an inline element.

<table> is a block element.

You cannot have a block element inside an inline element.

You can have multiple inline elements inside a block element.

Your font tags should be inside the <h1> ... </h1> pair and again inside the <h2> ... </h2> pair and again inside each <td> ... </td> pair.

Within each <td> ... </td> pair each chuck of text (that is "text", not headings, not images) should really be marked up as a paragraph.

[edited by: g1smd at 12:49 pm (utc) on May 14, 2011]

pageoneresults




msg:4312379
 12:43 pm on May 14, 2011 (gmt 0)

I'm not allowed to use CSS at all, it all has to be HTML, and yes this coding style is still be taught, however the whole point of the exercise is so we have a basic understanding of how to create a webpage in HTML before using programs that do a lot of the coding for you such as Dreamweaver.


Maybe we can get your instructor over here so I can put my <footer> upside their <header>?! You've been sent on a mission. I'm not sure what you're learning, but this is not the way to learn. Not unless you're designing email templates. And even then, you can use CSS.

So, who sent you on this mission?

By the way, Welcome to WebmasterWorld Simon!

lucy24




msg:4312507
 8:53 pm on May 14, 2011 (gmt 0)

Does your instructor realize that the H1 text color is only barely visible against the background color-- and that both would make some users (me, f'rinstance) recoil in horror and flee to another page?

I hope your instructor hasn't forbidden you to express the font as "Verdana, sans-serif" so it looks approximately as intended if the user happens not to have Verdana installed-- a group which includes approximately 30% of Linux users, according to page which I don't know if I'm allowed to link to. But then, I'm not that big on mandated fonts for body text at any time. And then there's that "target = '_blank'" in the page links. That's, ahem, open to discussion.

Unlike some of the folks above, I think this is a useful exercise, so long as it's crystal clear that you would never really do things this way :) One of the things it does is help you understand exactly why CSS is such a good thing ;) Matter of fact, there's one real-life situation where I have to put everything in HTML without recourse to CSS. It feels gloriously retro.

Validator errors in the form "You are not allowed to use element such-and-such here" ALWAYS mean that the mistake is in some immediately preceding line. Remember this when you get out into real life and start getting hundreds of errors; usually it means you did one or two things wrong, and once you've fixed them, the other errors will disappear by magic.

Now go in and change all your upper-case tags like <H1> to lower-case. (Odd. I thought the validator yapped at those, even though it isn't part of the html standard. Can't test it here, because something about the links sends the validator into a tizzy.) Good habit for all circumstances. And if the charset is explicitly declared as UTF-8, why on earth doesn't it use proper utf-8 characters like "Joe’s"? As written, it could go into ASCII without loss.

Oh, and get rid of that visible-to-the-naked-eye e-mail address. Dedicated spambots will find the address anyway, but putting your address in plain sight is the #1 most successful way to get spam. (This was exhaustively studied a few years back. Great article, if only I could find it.)

Simon




msg:4312563
 1:26 am on May 15, 2011 (gmt 0)

Many thanks guys for all the replies!

The course I'm doing is Cert 4 Web Design, this particular topic is funnily called "Create a Simple Markup Language Document to specifications". Maybe I'm making it too hard? Is there another way in HTML whilst designing the whole webpage as a table I could set the font of the whole document, or do I need to place <font> in every <tr>? It seems to be the <fontface> that is causing the problem.

Lucy, I know about the color issue, it looks terrible, and others on the course have made the same comment, but its definitely the correct color we have been told to use.

I'm happy I'm down to just 2 errors and no warning, amazing. Now if only I can get that magic green light saying successful

lucy24




msg:4312569
 2:10 am on May 15, 2011 (gmt 0)

Does it have to both work and validate? If you say this

<body bgcolor="#99FF99" text="Verdana, Arial, Helvetica, Sans">

it validates-- which strikes me as a bug in the validator-- but, er, doesn't work :) Opera and Mozilla-based browsers each interpret the text as some shade of blue-green (not the same shade), since they're expecting a number after "text". MSIE would probably just crash.

I'm pretty sure it's genuinely impossible to do it without a separate <font> statement inside of each block-level element, which in your case means every single header, paragraph or (assuming it doesn't contain p's or h's) table cell. As a small consolation, note that the color and face can go inside the same <font> tag. And they'll all get closed off together at the end of each cell.

Just think how good it will feel next week when you're allowed to say once and for all

body
{color: something-or-other;
background-color: anything but that green!;
font-family: Verdana, Arial, Helvetica, sans-serif;}

tangor




msg:4312608
 6:47 am on May 15, 2011 (gmt 0)

You have three <br/> at the end of your code. This is not consistent with the Doctype.

Simon




msg:4312610
 7:17 am on May 15, 2011 (gmt 0)

Yes it has to both work and validate. I've taken the <h1> out, the <font face> and the <table border="0" width="100%"> and it validates and still works, but obviously there is no heading. I can set the font to Verdana individually. I will play around with it again tonight, I won't rest until it works.

Tangor...thanks for that, I noticed that after a previous poster mentioned it and have fixed it. In the learning guide we were given it told us to use <br/> for line breaks, but when I went to validate the webpage every one came up with a warning so I thought I had altered them all.

Thanks again

Simon




msg:4312627
 11:00 am on May 15, 2011 (gmt 0)

Still not figured it out, I've given in and emailed my lecturer. Hopefully there is an easy answer :-)

pageoneresults




msg:4312650
 1:10 pm on May 15, 2011 (gmt 0)

In the learning guide we were given it told us to use <br/> for line breaks.


I'd really like to see this course you are taking. Why? Because it sounds like some sort of bogus online course. The instructions you're being given just don't jive with the real world.

Also, this <br/> is not correct. This <br /> is. Notice the space before the trailing forward slash?

Since you are using an HTML 4 Transitional DOCTYPE, the <br /> is invalid, you should be using <br> and not <br />. Did the instructor tell you to use the DOCTYPE you are now using?

Would this happen to be the TAFE NSW courses?

Simon




msg:4312786
 9:07 pm on May 15, 2011 (gmt 0)

It is a Tafe QLD online course,

Instructions: "All pages correctly validated against W3C HTML 4.01 Transitional standard"

and the <br /> does have a space sorry.

No reply yet from my tafe contact.

This is the second (of about 18 units)I've struggled with and it turns out either the instructions are wrong or the marking guide is wrong.

pageoneresults




msg:4312789
 9:17 pm on May 15, 2011 (gmt 0)

That's just NOT right!

Information Technology (Websites) (Design)
https://www.TAFENSW.edu.au/howex/servlet/Course?Command=GetCourse&CourseNo=19007

That page on their site has 1,170 Errors and 558 Warnings. Apparently they don't practice that which they teach.

g1smd




msg:4312793
 9:26 pm on May 15, 2011 (gmt 0)

<br /> is XHTML markup.

HTML would use <br>.

However, that's how web design was done in, err, 1997.

Their own website is an object lesson in how not to do the web. They link to "index.html". The code is full of errors. There are session IDS in the URLs. You're half way down the page code before you hit the content, and its in a PRE tag. The whole thing is a mess.

[edited by: g1smd at 9:33 pm (utc) on May 15, 2011]

Leosghost




msg:4312794
 9:32 pm on May 15, 2011 (gmt 0)

Those who can, do, those who cant, teach.

Simon




msg:4312795
 9:33 pm on May 15, 2011 (gmt 0)

I wonder why I'm the only one who has found the error? Plenty of other people do the course!

Unless they have used <p> to create line break, then they wouldn't notice.

My tafe contact is usually really good and helpful, so hopefully I'll get him to fix it up so future students don't have the same trouble.

g1smd




msg:4312796
 9:42 pm on May 15, 2011 (gmt 0)

You don't use a <p> to create a line break, you wrap a paragraph of content inside <p> ... </p> tags.

pageoneresults




msg:4312797
 9:43 pm on May 15, 2011 (gmt 0)

It's a Diploma Mill. Do employers actually look for that TAFE NSW Certification?

Simon




msg:4312798
 9:52 pm on May 15, 2011 (gmt 0)

g1smd, I know <p> is for paragraph, wouldn't a line break appear after the text before the next paragraph starts?

g1smd




msg:4312801
 9:58 pm on May 15, 2011 (gmt 0)

A paragraph is a box with padding and margins on all four sites.

lucy24




msg:4312829
 11:43 pm on May 15, 2011 (gmt 0)

I know <p> is for paragraph, wouldn't a line break appear after the text before the next paragraph starts?

Yes, but the point is that <br> and <p>...</p> are different things serving different purposes. If, as in your present assignment, you've got a bunch of table cells containing very short bits of text, <br> has one huge selling point. You don't have to open and close all the <font> blahblah* with every line, because <br> doesn't create a new element, it's essentially just another kind of format.

When I've been working too long, my fingers start typing </br> and then the validator objects that I have closed an element <br> which is not open. Cracks me up every time.

Their own website is an object lesson in how not to do the web. They link to "index.html". The code is full of errors. There are session IDS in the URLs. You're half way down the page code before you hit the content, and its in a PRE tag. The whole thing is a mess.

WYSIWYG editor. No human indents their code like that. And when you start hitting things like element "TR" undefined you know that somewhere there's an extraneous ampersand or missing close-quote.


* Ooh! That reminds me! My favorite antiquated site (different thread) also uses <font...> throughout, even though the creators knew what a CSS is for. Doesn't everyone love finding Bad Stuff onother people's pages?

rocknbil




msg:4314855
 6:10 pm on May 19, 2011 (gmt 0)


-In the learning guide we were given it told us to use <br/> for line breaks.
-XHTML style markup for HTML
-Tabled layout
-Deprecated markup
-Someone is teaching people this in 2011


<Drives pencil into his ear>

Demand a refund, these people are teaching you history, not good development practices.

Simon




msg:4314930
 9:12 pm on May 19, 2011 (gmt 0)

Hey,

Well I finally passed the assignment, I ended up using:

<body style="font-family:Verdana, Arial, Helvetica, Sans" bgcolor="#99FF99"><!--font and background colour of whole document-->
<H1 align="center"><font color="#66FF00">All produce at Joe's</font></H1>

Another student said this was how they had set the font for the whole page, the lecturer didn't respond to my font query.

Thanks for all your help, it was a very interesting exercise.

Next topic, designing a website using a CSS program such as Dreamweaver :-) should be much easier!

rocknbil




msg:4315461
 6:42 pm on May 20, 2011 (gmt 0)

LOL . . . .

Dreamweaver is an HTML editor. But good luck with all of this.

lucy24




msg:4315517
 9:26 pm on May 20, 2011 (gmt 0)

<body style="font-family:Verdana, Arial, Helvetica, Sans" bgcolor="#99FF99">

But, but, but, that's CHEATING! :) Didn't it say at the outset "HTML only, no CSS"? You've sneaked around the rule by using inline CSS, which strongly suggests your instructor isn't paying attention.

Simon




msg:4315528
 9:45 pm on May 20, 2011 (gmt 0)

Yep I know :-) I could have saved myself about a week of work if I had just used <body style> to start with. I thought since the other student had used it and passed, and I couldn't find any way of doing it in HTML other than putting <font></font> on every single text line which looked really bad, it was worth using.

Vladimir




msg:4316009
 8:14 pm on May 22, 2011 (gmt 0)

Horrible code. CSS is the way to go. It's pretty simple. Just declare tags selectors and thei styles like this:
h1{
color: #66FF00
font-family: Verdana, Arial, Helvetica, Sans;
text-alignment: center;
}
Get rid of the code tags, they are outdated and may not be supported in the properly in the future.

This 33 message thread spans 2 pages: 33 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved