REVIEW REQUEST: Frank's Music Lessons

Ooops! Sorry, I forgot to put the link.CLICK HERE

Not quiet there. Have you read the NYPL Style Guide yet?

If not, that is a good place to start to learn what all an XHTML doc needs. It gives information on XHTML Guidelines, What is XML?, XHTML Benefits, Authoring Tips & Tools, Accessibility Tips and Validation.

These are also good articles:

Better Living Through XHTML
XHTML Tutorial
XHTML Overview
XHTML 1.0: Where XML and HTML meet

Instead of using style="font ... in every td cell, use one td {font ...} in the style sheet
using border="20" is really bad, even using a border at 1 is hardy ever used on professional/business web pages.
You also wanted feedback on your XHTML, don't use the tag, if you don't want to use CSS use but keep it lower case, you have and . also dont use the tag, use CSS or . Don't use the tag, use CSS (text-align:center;) or .
You have an image at the bottom, your counter, XHTML requires an alt tag, even if its empty you must have one (alt="") and add width and height for good measure.
Also don't use RGB color names, they aren't well support and XHTML doesnt allow them, use the RGB code (example #FFF000)

Not sure if we are meant to click any links but two of them, the bottom two would be errors, you havent used the http:// so you end up with a double link http://www.yoursite.zz/thefolder/page/www.yoursite ... either use http://... or just the page name (perfer method) and dont just start with www.

OMG the above was viewed from IE, I just took a look in mozilla and wow, flashing changing backgrounds and colors and stuff, thought I was back in the 60's. Th eonly things that look the same in IE5 and mozilla is the font color (white) link color (red) and big table borders but they are different colors.

Sorry dude, has a way to go to be compatible

instead of using:

style="font-family: verdana,sans-serif; font-size: 10px;"

all the time for some tds,

y not put it into a class?

i.e
.some_class {
font-family: verdana,sans-serif;
font-size: 10px;
}

just to save u some typing
and if u want to change something u can just change ONE thing not a whole lot of them

...btw try to keep all ur tags lowercase u have ur body tags in uppercase

You should really look an using an external style sheet so that you link to it on each page of your site and that way if you need to change anything further down the line you make one change rather than having to do the changes on every single page. By just using css isn't going to make your site cross-browser compatible.

Okay (pause for screaming).

Anyway, I changed the border="20" to border="5", although I thought the "20" looked better on my screen. I haven't changed my colors to hex codes yet, and I understand that. But some of the things said above did not even sound like this site (???). For example, the 2 bottom links ("Contact" and "Links") work fine for me, and I did have the http:// in the tag. Also, to Renegade, I agree that a class (meaning global?) would have been easier, but this is really my first "shot" at this. Also, my tags are all in lower case (I never put them in uppercase).

Oh well, here's a copy of the code for the home page, just to make sure your seeing the same thing:

Frank's Music Lessons:

Frank's Music Lessons

Guitar

Bass

Mandolin

Contact

Links

When I click the "Contact" link, this is the URL that it goes to:
http://www.angelfire.com/tn2/dawnmc01/www.angelfire.com/tn2/dawnmc01/ajob1.html

When I click the "Links" link, this is the URL that it goes to:
http://www.angelfire.com/tn2/dawnmc01/www.angelfire.com/tn2/dawnmc01/ajob5.html

They may work for you but they will not work for anyone else because there are errors in your URLs.

Man you will argue with a brick wall won't you?

If you will look at this bit of your code, the part that you have left out is in red. *just like busy said*

Contact

Links

Quote: Originally posted by disaster-master
Man you will argue with a brick wall won't you?

hehe seems like it

Forgive me if this has been mentioned already but you also need to have a doctype in there and charcter encoding. The w3schools tutorial does a decent job of explaining this, and if you look in a thread in Concept, Layout & Graphic Design we've linked to some articles that talk more about doctype.

Here's what the w3c came up with when I sepecified an xhtml doctype:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.angelfire.com%2Ftn2%2Fdawnmc01%2Fajob.html&charset=us-ascii+%28basic+English%29&doctype=XHTML+1.0+Transitional

Wow, that's a lot of work to do. Make sure all images have alt tags, all tags are closed etc. etc. Also put your link definitions and table backgrounds in the stylesheet.

THe pages look very different in varoius browsers. Mozilla shows the black/grey stripey background and the contact/links tables have a black background as opposed to the blue that shows up in IE and Opera. To further complicate things, in IE that blue is very pale, while in Opera it's the same as the page background. I don't see anything in the code that would be causing this.

Sonia, you & Busy were right about the http:// thing being left out. Wonder how that happened (duh! for me, but I probably rushed through it a bit too much)?

I do NOT understand why the thing shows my tags as , though. Why is that happening?
Plus, I will only argue with a brick wall if it is productive.

Megan: I wish I knew about the validator page before doing this, but I will work on the parts from the validator that I can understand, and maybe we can go over it again later to find out if anything else is missing. Also, can you give an example of how to use an "alt..." tag. I've never used them before (I don't think?). What is their purpose?

Quote: Originally posted by fiesty_01
Also, can you give an example of how to use an "alt..." tag. I've never used them before (I don't think?). What is their purpose?

Example:
<img src="image.gif" alt="Description Here">'It's that simple. ALT tags are important in terms of accessibility to people who may be blind and also to search engines who use them like keywords.

One thing to keep in mind is having a constant/consistent navigation scheme throughout your site. This means if you use one background color on your main page, apply it to all your pages, and so forth.

Quote: I do NOT understand why the thing shows my tags as , though. Why is that happening?

If you aren't typing it in that way then it is probably whatever kind of editor that you are using making the letters upper case.

Info on alt tags:
http://jeffglover.com/ss/savvy04.php

Feisty, most anything that you have a question about can be found by doing a search at http://www.google.com . You can also search this forum for relevant info as well. Lots of good stuff stored away in this forum. I am not trying to discourage you from asking here....just making sure you are aware that there are unlimited sources of information out there.

For example:
alt tags at google

As well as the links offered so far, take a look at the site in my signature (ezhtml)

Thanks Marc. So, I guess I just put something like alt="Count" or alt="Counter" in there? Also, I did not put the same background/layout on the link pages because this is just basically a trial site for practice (On the link pages, I just typed in what would normally go there, if this were an actual site for someone).

Sonia: I have searched and will continue to search for all relevant information. However, some of the pages you search for do not explain things as well as others, making it very tedious and frustrating trying to find that "one good explanation." Example: It COULD take several hours to find a straight-forward, no-nonsense explanation of just ONE element. Some of these pages even incorporate other things that I'm not interested in (or would have no use for) along with their explanations, making it even more cumbersome.

Can someone tell me why the following is wrong according to the validator (other than not using hex codes for the colors)?

Some things the validator checked for, such as "End tag for 'tr' omitted" (another "duh" mistake for me), made sense. Others did not. One that I did not understand was for line 18 and it said something like "No attributes 'height' or 'background' for this element."

Maybe I should write a book called "XHTML Validators for Dummies: How to Make Them Speak to the Rest of Us!?!?!" It does seem to be a useful tool, though, so long as you don't do an entire site before checking it.

things like height in tables are not allowed in xhtml, also, link, alink, vlink .. use CSS instead

height shouldnt be used unless fixed cell, but is just this in CSS:

table {height:100%;} or used in a floated section. (not the 100% is the percentage of the item, not the page.

links are:
a:link {color:#???;}
a:visited {color:#???;}
a:hover {color:#???;} /*doesnt work in NS4 */
a:active {color:#???;}

Note the background-color:???; should be used with the color in CSS, it wont cause an error but will give a warning.

when you use the validator and get confused on stuff it usually means the validator is confused, start from the top, find the first error (they give line numbers and pointers), then try find the second one, if successful try the thrid and fourth, when you get to one you can't find, save your work and revalidate it. the most common reason its confused is if you miss a tag it claims the next tag as the one you missed which throws the rest of the page out. same as missing an end tag in your code, ie: this isn't bold yet this is bold, this shouldn't be bold, uh oh, this is bold this is bold this shouldnt be bold. in the above it has two start tags but only one end tag so it will remain bold until it reaches the end tag, same thing the validaters does.

Well, most of that made sense . . . thanks Busy.

However, I'm afraid the a:hover{color:#???;} and the table{height:100%;} didn't make too much sense, though. What exactly does "100%" tell the thing to do (i.e., 100% of what)?

Also, are the a:hover{color:#???;} and the table{height:100%;} part of CSS? They look like JavaScript to me for some reason (?).

By the way, I have corrected SOME of the things that the validator said was wrong. CLICK HERE if you want to see how I'm doing now (I'm sure there's quite a bit more to do).

Also, since only the margins (20px 10px 20px 10px) were specified in the CSS stuff, how do the margins look in the different browsers you are using?

best to forget the height:100% thing, it's not an ideal way and the height isn't valid in XHTML for certain things.

the a:link {color:#???;} belongs in your style sheet, if your using on on everypage then its like this:

the ??? is the RGB color, which is 6 digits (numbers or letters) but can be shortened to 3 - stick to the basics and use all 6 for now.
The '#' must be used before the RGB color code.

If I was you, I'd take a step backwards, learn HTML first, once you know the workings of HTML then start learning CSS then advance forward to XHTML using CSS. No offense but I believe you're biting off more than you can chew at present.

If you want to carry on with XHTML, here is a run down of your errors you still have:

1/ no character tag, put between your head tags
2/ you can't use background= in XHTML (you can in HTML, use css instead. in your CSS add .bg1 {background-image: url(filename);} and where the background image is, put class="bg1"
3/ the height tag is not allowed in XHTML (is in HTML) add a class in div tags in the actual table for the height (not 100% compatible)
4/ another background image, do the same as #2 above but name it bg2
5/ you have a center tag opened before a table but not closed after it, the close is further down, dont use the tag, use CSS ...
6/ this is one the validator didnt pick up but should of next time round, you have in capitals

Again I'd suggest you learn HTML first as you're having trouble with a simple XHTML layout so once you get into a more advance layout you'll find yourself way over your head.

Quote: Originally posted by Megan
Forgive me if this has been mentioned already but you also need to have a doctype in there and charcter encoding. The w3schools tutorial does a decent job of explaining this, and if you look in a thread in Concept, Layout & Graphic Design we've linked to some articles that talk more about doctype.

Here's what the w3c came up with when I sepecified an xhtml doctype:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.angelfire.com%2Ftn2%2Fdawnmc01%2Fajob.html&charset=us-ascii+%28basic+English%29&doctype=XHTML+1.0+Transitional

Wow, that's a lot of work to do. Make sure all images have alt tags, all tags are closed etc. etc. Also put your link definitions and table backgrounds in the stylesheet.

THe pages look very different in varoius browsers. Mozilla shows the black/grey stripey background and the contact/links tables have a black background as opposed to the blue that shows up in IE and Opera. To further complicate things, in IE that blue is very pale, while in Opera it's the same as the page background. I don't see anything in the code that would be causing this.

lol engough sed in this post and the link with it

o yeah and btw i found

bgcolor="#191970" text="#ffffff" link="#ff0000" alink="#800080" vlink="#008b8b">
and

83:

i told u the body tags were in uppercase! if u don't believe me still then click on the link and scroll down a bit

Thanks again Busy. I actually know quite a bit of HTML, but I have skipped over some of the stuff in it (stuff I never used). Any suggestions on what parts of HTML I might need to go over, or even re-aquaint myself with?

Renegade: I do believe you and I see that the validator is showing and , but what I typed in on the Angelfire editor (even when just starting this site) is and . . . I rarely ever use uppercase letters when doing HTML stuff (because it's easier since you don't have to keep hitting the "caps lock" or "shift" key). I really don't know why it's showing up as all caps on the validator. Either Megan or Sonia suggested that it might have something to do with the editor I'm using (?).

Look at some of the errors the validater has showen, and work on them, it's real easy to miss tags and get them out of order, but you should know why the errors are happening.

Change your DOC tag to HTML and should work fine, then when your ready use HTML strict, then learn CSS and start replacing things like font tags, bold tag, center tags etc with CSS, then when you can get it validating without to many errors and looking similar in a few browsers go up to XHTML transitional, use more and more CSS and go to XHTML Strict (if your on XHTML Strict you can use xhtml1.1 - very similar).
but for now, go back to the basics, know why the tags are being used, since you wont have much idea of the effects (you not using a pc) you should really know how tags work and what effects they have.

Don't be in a hurry to learn it all, it all takes time and above all practice, testing and more testing, then practice some more. You aren't expected to know eveything, but you should know what, where, why and sometimes how.

Tables are something that will continue through XHTML (but for data) so knowing tables well is a bonus, knowing what goes with what and why ... italicbold things like this are wrong, you should know why,

• list

is wrong, is wrong, is wrong ...

If you don't understand the errors or reasons you wont understand the tags.

Well, now I'm only getting two errors on the validator. Plus, now the background images are not showing up and the font color "white" (now a hex value) is showing up as "black" (?). Here are the errors showing on the validator now:

(1). Line 30 Element not defined in this HTML version.
Note: is how I typed it, so I don't see why this is happening.

(2). Line 100 Missing a required sub-element of "html."
Note: No clue as to what the required sub-element of html is (?).

I will likely be taking a week off from work (Nov. 1 - 7) with which I will have more time for in-depth studying of CSS and XHTML things. However, as stated before, I am quite familiar with HTML and why what goes where and when.

Another question is, if I were to do all of this in the same manner (exact same codes, etc.) on an actual PC, would the results still be the same?

Hey Busy: "Involve me and I learn."
FRANK'S MUSIC LESSONS (Click Here)

Quote: Originally posted by fiesty_01
Can someone tell me why the following is wrong according to the validator (other than not using hex codes for the colors)?

Some things the validator checked for, such as "End tag for 'tr' omitted" (another "duh" mistake for me), made sense. Others did not. One that I did not understand was for line 18 and it said something like "No attributes 'height' or 'background' for this element."

xhtml:

css:
element {
attribute: value;
}

Got that part straight? Okay, here's the rest of it.

Some attributes in an xhtml element are valid (part of xhtml) and some are invalid (must be specified in the CSS only).

So what it means is, you cannot use these particular attributes in the xhtml, they are invalid. Which means you should use them, if necessary, in the CSS, if they belong there.

In this case, they do, and you can.

xhtml:

CSS:
body {
background-color: midnightblue;
color: white;
}

a:link {
color: red;
}

a:active {
color: darkcyan;
}

a:visited {
color: purple;
}

See?

And no. the results would not be the same. Why? because a) you'd probably be able to see that it doesn't look good and b) you'd be able to avoid the html editor screwing with your code.

Thanks Suzanne. Good explanation (now you're talking in "my" language!).

I do wonder why the Angelfire editor is screwing with my code anyway, and how I would avoid this using the same Angelfire editor (or different editors) on an actual PC (?).

I have also run XHTML validation checks of other sites on the net (nobody's site on here) and the validator has come up with even more errors than what I had to begin with on these sites. How are these sites getting by with this?

Correction: I'm gonna try to take off work from Dec. 1 - 7 (not Nov., hehe).

Anyone care to comment on my last question about some popular websites on the net coming up with a lot of XHTML errors in the validator?

Busy: What does the following do?

The reason why other sites will come up with errors may be that the person who build the site didn't check for errors! Pages will still display but they may not be 'correct' by the current standards or they may not have been coded to XHTML standards.

Most of the web is a mess, codewise. Use anything other than IE (and heck, even in IE of any flavour) and at least 40% of the sites you visit will be broken in some way, from just presentation (Microsoft doesn't render properly in Netscape 7 at all, because the people who coded it don't know what they are doing), to serious display errors that render the site unusable.

The point of standards is a) less work for the developer to make it work everywhere, b) more consistent display in a wider variety of browsers, c) future-proofing (to some extent) so we can finally move forward instead of endlessly revising the old content for design issues only (revisions will clearly be needed if the content changes, or needs updating, but it's ridiculous to endlessly revise the content because you change your company colours).

And if you had a pc, you could use a better system -- even without using a WYSIWYG HTML editor, you can write the code in a text editor (there are several that are free or inexpensive, and a number that cost a bit but are bloody marvelous), and ftp the files to the server (send the files directly, without them being parsed or interpreted).

Quote: Originally posted by fiesty_01
I have also run XHTML validation checks of other sites on the net (nobody's site on here) and the validator has come up with even more errors than what I had to begin with on these sites. How are these sites getting by with this?

It's suprising how many people out there develop websites for a living and have no clue about standards. A lot of people seem to think that HTML is something you learn once and never have to think about again. Some of them may not even know how to code at all, so they use a non-standard supporting visual editor. Some of these editors have improved a lot in terms of standards support (and one of them is excellent in that regard), but if people don't know what the code is doing, or even look at what it's doing, they're gong to have a hard time writing valid code. A lot of these HTML editors need to be doing more to promote standards and help people write better code.

This matter is complicated when you get into big sites that use a lot of server-side scripting and different people working on the same project. You may have a backend programmer and a content editor working on the site that know very little about HTML. Do they need to become HTML experts? No, that wouldn't be the most efficient way to operate. Certainly they should have some sort of understanding of standards though. One solution is to rethink the way the development process works. Another possibility is a new tool from Macromedia, which is specifically designed for these types of situations.

I honestly think that the key to keeping current in the web industry is to hang out at a place like this. There is no other way to find out what the new technologies are and how to use them practically (unless you really want to read through all that technical stuff on the w3c site and figure it out for yourself - I'm sorry, I don't have that kind of time). Here you'll find out what kind of standards people use, and what techniques they use to make their sites look good *and* validate.

Quote: Originally posted by fiesty_01
Busy: What does the following do?

Tells the browsers what version of doc it is (text/html) and lanuage (iso-8859-1) english or in proper terms the character encoding used.

Are there any CSS, XML, XHTML, JavaScript, etc., codes (other than the CSS you have all been talking about) that are written like the following to tell the web page how to fit in whichever browsers you want it to "fit" it?

In other words, some such code might look something like the following (this is just made-up):

fit=IE 2, 3, 4, 5; NS 1-3>

So, the above made-up code would tell the website you've created to adjust to look good in the 2-5 versions of IE (Internet Explorer) and the 1-3 versions of NS (Netscape).

There probably isn't any such coding, but I just wanted to make sure.

LOL! Don't we wish it was that simple! See, this is what authoring in standards is all about. Theoretically, if you write your code properly, your page should look the same in all browsers. Of course, if you had a computer you'd have all the different browsers available, so you could take a quick look and make sure things look right before going back to the code.

you can use javascript to "try" pick the version that works most of the time (opera can appear as ie ...) and if the person has javascript turned off (as many do these days to avoid pop ups) it wont work.
so goes back to Megans comment above.

Some people have 3, 4 or 5+ browsers on their computer and still have problems in others, I have 6 browsers but dont have IE6 or NS6 which can be troublesome.

"Troublesome" is a word I would choose also. Hey, it was worth a shot wasn't it?

By the way, I like that {echo ("it wasn't me ;)} thing in your signature. Ever seen the Disney movie "Rocketman" starring Harland Williams?