Re: Massive HTML coding errors
- From: frederick@xxxxxxxxxxxxxxxxxxx
- Date: 14 Apr 2006 12:47:30 -0700
Robert Baer wrote:
The homepage i have had up and seemingly working is:It does need quite a bit of work!
http://oil4lessllc.com/
However, the validator has so many complaints, and being so
incompetent, i have no clue as to how to fix it all.
The layout that you have is extremely simple, and the code should
reflect that; at present, it doesn't. It also has quite a bit going on
that a validator wouldn't comment on, but that needs looking at.
Would the use of Dreamweaver be of great help?Forking out for Dreamweaver would be a complete waste of money for such
a small site; you'll find your time/money much better spent using
something as simple as Notepad.
Anyway, here's some tips that should help:
1. The DTD at the top of your HTML code is invalid! It's supposed to
tell browsers (and validators) what "flavour" of HTML you're using;
because it's invalid, they have to guess and make kludges. Get rid of
the one you've got, and replace it with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
You will find initially that this increases the number of errors that a
validator finds, but that's a good thing; if you don't know there's a
problem, you can't fix it!
2. When I access your site using Firefox it tells me that I need to
have Quicktime installed. I can't imagine what the Quicktime file adds
to your site, but you need to seriously consider a different approach.
Relatively few PCs have Quicktime installed, and it's a fairly safe bet
that most of the ones that don't are used by people who won't know how
to install it, or won't be interested in doing so. Don't create
barriers for your customers!
3. Your HTML is littered with absolute positioning, and width and
height dimensions measured in pixels, all of which should be got rid
of. You have no real control over what browser your customer uses,
what size screen they have, what size they have their browser window
at, or what size font they prefer to read things at; all of these will
conspire to make your site look ugly or even unusable (with one block
of text overlaying another). About the only dimensions you need are
those for your images, and a width of, say, 50% for the div that starts
on screen with "PRODUCTS:".
4. As someone else has commented on, you have three div tags without a
closing ">".
5. As has also been commented on by someone else, you've declared the
same id attribute in more than one place. If you need to have two
different HTML elements with the same CSS, then you need to use a
class, not an id. In crude terms the only practical difference between
the two is that when you define the style in the CSS, you precede the
class name with a period rather than a pound sign.
6. You've also got way too many divs and ids, and also a number of
wholly redundant span tags; these are one reason why the code looks so
complicated to you, and also means that there's more places for you to
make mistakes. You really need very few divs for such a simple design;
here's what I'd do:
a. Everything from "Oil 4 Less LLC" to "drowning." would be one div.
b. "PRODUCTS" to "Temperature chart" would be the next div.
c. The next div would contain the volcano picture, the ROHS logo, and
the text from "It gets" to "Corotron(TM)".
d. The fourth and final div would contain the "O4Lstamp.gif" image and
the e-mail link.
As simple as that! You'll need "float: left" as part of the style for
the middle two divs so that they don't stack up one on top of the
other. You'll find that almost all of the necessary styling can then
be done by simply defining styles for generic HTML tags; starting with
wrapping the company name with an <h1> tag at the very top. And keep
all of the CSS definitions within the <style> element in the document
head; at the moment, you've got some up there and a great deal more
buried within the HTML itself. It'll make life a lot easier for you if
you only have to make changes in one place!
7. The two lists of links should really be coded as unordered lists.
8. You need to be more careful when defining "font-family". Google
for "web-safe fonts" and you'll realise that there are only a very few
fonts that you can be certain that all or most of your customers will
have. You also need to provide a list of "fallback" fonts, so that
your definition would look something like this:
font-family: "Times New Roman", Times, serif;
9. Your e-mail link is invalid. You need to change the HTML from
this:
href="sales@xxxxxxxxxxxxxxx"
to this:
href="mailto:sales@xxxxxxxxxxxxxxx";
In addition to all of the above regarding your coding, as a matter of
good netiquette you should explicitly state that most of your links are
to PDF documents, and ideally should provide a link to the relevant
page on Adobe's website so that Acrobat Reader can be installed if
necessary. Similarly, one link is to an external website, and should
be identified as such.
I ended up writing rather more than I'd intended! Hope it's of use...
--
AGw.
.
- Follow-Ups:
- Re: Massive HTML coding errors
- From: Robert Baer
- Re: Massive HTML coding errors
- From: frederick
- Re: Massive HTML coding errors
- References:
- Massive HTML coding errors
- From: Robert Baer
- Massive HTML coding errors
- Prev by Date: Re: CSS Question
- Next by Date: Re: Massive HTML coding errors
- Previous by thread: Re: Massive HTML coding errors
- Next by thread: Re: Massive HTML coding errors
- Index(es):
Relevant Pages
|
