Feedback on XHTML code

AlleyCat

AlleyCat

Well-Known Member
Joined
Jun 18, 2005
Messages
18,779
Reaction score
2,287
Hey .. for homework, I had to create some XHTML code. I've validated it and it comes back with no errors, but when I try to view it, nothing shows up ... Here's the first part I had to create:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Animals</title>
<base target="CONTENT" />
</head>
<frameset cols="20%,*">
<frame src="Ch02XHTMLEX03b.html" />
<frame src="elephant.jpg" name="animal_picture" />
</frameset>
</html>


Then, for part 2, I had to do:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Animals</title>
<base target="rightframe" />
</head>
<frameset cols="20%,*">
<p><a href="Elephant.jpg">Elephant</a><br />
<a href="gazelle.jpg">Gazelle</a><br />
<a href="giraffe.jpg">Giraffe</a><br />
<a href="lion.jpg">Lion</a><br />
<a href="polarbear.jpg">Polar Bear</a><br />
<a href="rhino.jpg">Rhino</a><br />
<a href="tiger.jpg">Tiger</a><br />
<a href="zebra.jpg">Zebra</a></p>
</frameset>
</html>

Then, I'm told to "open" (in a web browser) the first part, and I'm supposed to see a list of links on the left side (as typed in part 2). However, my screen's blank.

My teacher warned us that the book was full of typos that weren't caught before it went to print. However, she hasn't clued us in on the typos. I've done research online and corrected things, and now when I validate it, it comes back with no errors (it came back with like 15 errors when I typed it in exactly as is from the book, so apparently I am correcting the errors), however, I'm still not seeing the links as I should. Any ideas why?

Thanks! :)
 
I've redone the coding, fixed some general typos, this is what I'm thinking the book example is telling you to copy (although it doesn't seem correct):

Make sure that all the pictures are saved in the same directory as the .html files (elephant.jpg, giraffe.jpg, gazelle.jpg, etc)

the frame index.html
Code: 
<html>
<head>
<title>Animals</title>
<base target="CONTENT">
</head>
<frameset cols="20%,*">
<frame src="Ch02XHTMLEX03b.html">
<frame src="elephant.jpg" name="animal_picture">
</frameset>
</html>
Ch02XHTMLEX03b.html (left frame)
Code: 
<html>
<head>
<title>Animals</title>
<base target="rightframe">
</head>
<p>
<a href="elephant.jpg">Elephant</a><br>
<a href="gazelle.jpg">Gazelle</a><br>
<a href="giraffe.jpg">Giraffe</a><br>
<a href="lion.jpg">Lion</a><br>
(etc)
</p>
</html>
It is missing a right frames page, to explain this what's going on is think of a hardcover book. The Frames index page is the outside hardcover binding. then you open a random page. The left page is written, but when you click a link on it, it opens in the same left side.

What I'm thinking the chapter is telling you to do is have the link on the left page, and once clicked its supposed to show on the right page.

This is how I would do it in my coding, which may or may not use methods that your book uses, but it is basic html:

The Frame index.html, added a few things such as a name for both displayed frames pages.
Code: 
<html>
<head>
<title>Animals</title>
<base target="_self">
</head>
<frameset cols="20%,*">
<frame name=leftpage src="Ch02XHTMLEX03b.html">
<frame name=rightpage src="rightpage.html">
</frameset>
</html>
The left frame (Ch02XHTMLEX03b.html), added "target" definition so when clicked, it goes to the right side frame.
Code: 
<html>
<head>
<title>Animals</title>
<base target="leftpage">
</head>
<p>
<a href="elephant.jpg" target="rightpage">Elephant</a><br>
<a href="gazelle.jpg" target="rightpage">Gazelle</a><br>
<a href="giraffe.jpg" target="rightpage">Giraffe</a><br>
<a href="lion.jpg" target="rightpage">Lion</a><br>
</p>
</html>
The right frame (created a rightpage.html), nothing here except for the introductory hi
Code: 
<html>
<head>
<title>Right frame</title>
<base target="rightpage">
</head>
Hi</html>
That's how I would do it in my own methods, but I don't know what your book intends for you to do.

PS. as rule of thumb, html among webmasters generally are accepted as in lowercase. But if you feel the need for proper cases, by all means go for it.
 
Naisho,
Did you mean to eliminate the DOCTYPE definition? Our teacher says it MUST be in. I copied and pasted yours and then "validated" it (we are supposed to use The W3C Markup Validation Service.) Yesterday I was able to get mine to validate with no errors, but when I made the changes you suggested, it came back with 9 errors....
 
oh, I didn't write it for you in xhtml, I just went through basic html and checked it on my PC before pasting the code, figuring you'd be in for re-handling the XHTML syntax.

In strict XHTML format, this is how it should probably go. I went ahead and had it checked at the w3 validation, it seems to have passed.

I removed the right frames introductory page, I didn't check it, but it should be just blank and clicking the left links should open in the right.

Index page:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Animals</title>
<base target="_self"></base>
</head>
<frameset cols="20%,*">
<frame name="leftpage" src="Ch02XHTMLEX03b.html"></frame>
<frame name="rightpage"></frame>
</frameset>
</html>
left frames page:
Code: 
    <!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>Animals</title>
<base target="leftpage" />
</head>
<body>
<p><a href="elephant.jpg" target="rightpage">Elephant</a></p>
<p><a href="gazelle.jpg" target="rightpage">Gazelle</a></p>
<p><a href="giraffe.jpg" target="rightpage">Giraffe</a></p>
<p><a href="lion.jpg" target="rightpage">Lion</a></p>
</body>
</html>
 
Naisho, thanks so much. I will re-tackle this when I get home from work. This is going to suck if the book has so many errors. The book doesn't even mention the base target and my teacher had to tell the class to put that in, but she didn't even explain how so I was taking a shot in the dark LOL. Seems I had most the rest figured right. Thanks! :)
 
The concept now works with the left and right frames. And validating the right frame comes back perfect. The left (index) still comes back with 7 errors when validating it. It doesn't like the cols line. But at least it works. I wish I knew why it didn't like that line so I don't repeat that problem in upcoming homework. Thanks again, Naisho!
 
New question:

I had to create a "survey". The book I'm using for class is useless! Not only are there so many errors in it, it also tells me to do this and that and doesn't give any explanation on how to do this or that. I am not a mind reader! :lol:

Anyhow, according to what the book wants me to do, there's 6 questions as part of a survey. I was told to use a radio button (but no instruction how! lol) so that only one choice could be chosen for each of the 6 questions. I have it all set up, but when I validate it, it comes back with 14 errors, and the radio buttons have a mind of their own. They do only let me pick one choice as I was instructed to do so, but if I move on to the next question and pick a choice, the previous question's choice disappears! What am I doing wrong here? Here's the code (and we also had to include a reset/submit button at the end which seems to be working):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Airline Survey</title>
</head>
<body>
<h1>Airline Survey</h1>
<form action="mailto:xxx@gmail.com" method="post" enctype="text/plain">
<table width="650" border="1">
<tr><td>Wait time for check-in?</td><td><input type="radio" name="wait time" value="Excellent" />Excellent</td><td><input type="radio" name="wait time" value="Good" />Good</td><td><input type="radio" name="wait time" value="Fair" />Fair</td><td><input type="radio" name="wait time" value="Poor" />Poor</td><td><input type="radio" name="wait time" value="No Opinion" />No Opinion</td></tr>

<tr><td>Friendliness of customer staff?</td><td><input type="radio" name="friendliness" value="Excellent" />Excellent</td><td><input type="radio" name="wait time" value="Good" />Good</td><td><input type="radio" name="wait time" value="Fair" />Fair</td><td><input type="radio" name="wait time" value="Poor" />Poor</td><td><input type="radio" name="wait time" value="No Opinion" />No Opinion</td></tr>

<tr><td>Space for luggage storage?</td><td><input type="radio" name="luggage space" value="Excellent" />Excellent</td><td><input type="radio" name="wait time" value="Good" />Good</td><td><input type="radio" name="wait time" value="Fair" />Fair</td><td><input type="radio" name="wait time" value="Poor" />Poor</td><td><input type="radio" name="wait time" value="No Opinion" />No Opinion</td></tr>

<tr><td>Comfort of seating?</td><td><input type="radio" name="seat comfort" value="Excellent" />Excellent</td><td><input type="radio" name="wait time" value="Good" />Good</td><td><input type="radio" name="wait time" value="Fair" />Fair</td><td><input type="radio" name="wait time" value="Poor" />Poor</td><td><input type="radio" name="wait time" value="No Opinion" />No Opinion</td></tr>

<tr><td>Cleanliness of aircraft?</td><td><input type="radio" name="aircraft cleanliness" value="Excellent" />Excellent</td><td><input type="radio" name="wait time" value="Good" />Good</td><td><input type="radio" name="wait time" value="Fair" />Fair</td><td><input type="radio" name="wait time" value="Poor" />Poor</td><td><input type="radio" name="wait time" value="No Opinion" />No Opinion</td></tr>

<tr><td>Noise level of aircraft?</td><td><input type="radio" name="noise level" value="Excellent" />Excellent</td><td><input type="radio" name="wait time" value="Good" />Good</td><td><input type="radio" name="wait time" value="Fair" />Fair</td><td><input type="radio" name="wait time" value="Poor" />Poor</td><td><input type="radio" name="wait time" value="No Opinion" />No Opinion</td></tr>
</table>
<p><input type="reset" />
<input type="submit" /><p>
</form>
</body>
</html>
 
rookie mistake - because you need to make different group name for radio buttons. Right now - there's only one group name.. which is why you can select only 1. Since you have 6 questions - that means 6 group radio names.

NAME = checkin
VALUE = Excellent/Good/Fair/Poor/No Opinion

NAME = friendliness
VALUE = Excellent/Good............

so on.....
 
and the code, as I have noticed is modified to the one similar from www.w3.org.... suggest to remove the URL if you don't want the teacher to know where it came from. LOL
 
JClarke said:
and the code, as I have noticed is modified to the one similar from www.w3.org.... suggest to remove the URL if you don't want the teacher to know where it came from. LOL
Click to expand...

what URL? she put xxxxx (in non-dirty way)
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Click to expand...

and I noticed when I tested AG's code --- each row gets selected twice, and Jiro -- is that what you were referring to get each option to be one on each row?
 
JClarke said:
and I noticed when I tested AG's code --- each row gets selected twice, and Jiro -- is that what you were referring to get each option to be one on each row?
Click to expand...

that w3 code is fine. here's what's wrong with AG's form code -

WRONG
<tr><td>Friendliness of customer staff?</td><td><input type="radio" name="friendliness" value="Excellent" />Excellent</td><td><input type="radio" name="wait time" value="Good" />Good</td><td><input type="radio" name="wait time" value="Fair" />Fair</td><td><input type="radio" name="wait time" value="Poor" />Poor</td><td><input type="radio" name="wait time" value="No Opinion" />No Opinion</td></tr>

<tr><td>Space for luggage storage?</td><td><input type="radio" name="luggage space" value="Excellent" />Excellent</td><td><input type="radio" name="wait time" value="Good" />Good</td><td><input type="radio" name="wait time" value="Fair" />Fair</td><td><input type="radio" name="wait time" value="Poor" />Poor</td><td><input type="radio" name="wait time" value="No Opinion" />No Opinion</td></tr>
Click to expand...

CORRECT
<tr><td>Friendliness of customer staff?</td><td><input type="radio" name="friendliness" value="Excellent" />Excellent</td><td><input type="radio" name="friendliness" value="Good" />Good</td><td><input type="radio" name="friendliness" value="Fair" />Fair</td><td><input type="radio" name="friendliness" value="Poor" />Poor</td><td><input type="radio" name="friendliness" value="No Opinion" />No Opinion</td></tr>

<tr><td>Space for luggage storage?</td><td><input type="radio" name="luggage space" value="Excellent" />Excellent</td><td><input type="radio" name="luggage space" value="Good" />Good</td><td><input type="radio" name="luggage space" value="Fair" />Fair</td><td><input type="radio" name="luggage space" value="Poor" />Poor</td><td><input type="radio" name="luggage space" value="No Opinion" />No Opinion</td></tr>
Click to expand...
 
<tr><td>Wait time for check-in?</td><td><input type="radio" name="wait time" value="Excellent" />Excellent</td><td><input type="radio" name="wait time" value="Good" />Good</td><td><input type="radio" name="wait time" value="Fair" />Fair</td><td><input type="radio" name="wait time" value="Poor" />Poor</td><td><input type="radio" name="wait time" value="No Opinion" />No Opinion</td></tr>
<tr><td>Friendliness of customer staff?</td><td><input type="radio" name="friendliness" value="Excellent" />Excellent</td><td><input type="radio" name="friendliness" value="Good" />Good</td><td><input type="radio" name="friendliness" value="Fair" />Fair</td><td><input type="radio" name="friendliness" value="Poor" />Poor</td><td><input type="radio" name="friendliness" value="No Opinion" />No Opinion</td></tr>
<tr><td>Space for luggage storage?</td><td><input type="radio" name="luggage space" value="Excellent" />Excellent</td><td><input type="radio" name="luggage space" value="Good" />Good</td><td><input type="radio" name="luggage space" value="Fair" />Fair</td><td><input type="radio" name="luggage space" value="Poor" />Poor</td><td><input type="radio" name="luggage space" value="No Opinion" />No Opinion</td></tr>
<tr><td>Comfort of seating?</td><td><input type="radio" name="seat comfort" value="Excellent" />Excellent</td><td><input type="radio" name="seat comfort" value="Good" />Good</td><td><input type="radio" name="seat comfort" value="Fair" />Fair</td><td><input type="radio" name="seat comfort" value="Poor" />Poor</td><td><input type="radio" name="seat comfort" value="No Opinion" />No Opinion</td></tr>
<tr><td>Cleanliness of aircraft?</td><td><input type="radio" name="aircraft cleanliness" value="Excellent" />Excellent</td><td><input type="radio" name="aircraft cleanliness" value="Good" />Good</td><td><input type="radio" name="aircraft cleanliness" value="Fair" />Fair</td><td><input type="radio" name="aircraft cleanliness" value="Poor" />Poor</td><td><input type="radio" name="aircraft cleanliness" value="No Opinion" />No Opinion</td></tr>
<tr><td>Noise level of aircraft?</td><td><input type="radio" name="noise level" value="Excellent" />Excellent</td><td><input type="radio" name="noise level" value="Good" />Good</td><td><input type="radio" name="noise level" value="Fair" />Fair</td><td><input type="radio" name="noise level" value="Poor" />Poor</td><td><input type="radio" name="noise level" value="No Opinion" />No Opinion</td></tr>
</table>
Click to expand...


Please note -- the codes are all work fine (I edited the wrong codes though), but did you know that if you insert the right email address that vailates, it doesn't work.
 
That totally makes sense -- that I was using the same group name for all the buttons. I'll go change that and see how that works!

JClarke - our teacher told us we HAD to use World Wide Web Consortium - Web Standards, especially for validating. So it's ok to leave that in there. All the code I typed in came either from my class book or what I put in myself, I didn't know you can get code from that site. That's the problem I'm having -- the book is so full of errors AND without explanations so I'm kind of "guessing" at a lot of stuff. But considering I'm guessing at a lot of this I'm not doing TOO bad! :)
 
Did it, and I caught another error at the end that I made and now that I've validated it, it works perfect and NO errors :) Thank you guys for pointing out what I was doing wrong. I'm definitely a novice at this but picking up fast. :)
 
and you can use notepad++ it will help you detect errors quickily. Just ensure the language is set to HTML
 
Coool ..

This blew me over my head but I get the idea of it. :ugh:

:topic:

Books from school are always wrong. I've had that before in Electronics class and my Instructor had to remind us that book isn't perfect and we have to figure it out on our own. If one of us got it working then everyone are allowed to copy data from one person. It always me getting it working and everyone lined up to get data from my project :roll:

Math class too had same issue.

Alleycat, glad you got some help from AD members!!

I'm stumped on that but I did modify Firefox script in Linux last year to get the media player to "merge" and work with MSplayer format. I just follow instruction from website and got it workiing :lol:

I am currently learning to installing program under Linux.. I just started to learn how to unpack tar.gz2 then ./configure, make, make install in Terminal. I finally got it.

I really want to learn how to build program in Linux using Perl and other programming language. I finally able to carry laptop running on Linux now. So that I can practice on it.

Catty
 
On the XHTML code, where do you copy and paste to? Email or Browser?

Just out of curiosity

Catty
 
Code gets copied to the notepad or any HTML version software such as Dreamweaver or microsoft Visual Stuido.
 
Back
Top