|
Posted by Corey Walker on October 21, 2007, 4:26 pm
Please log in for more thread options
Hello:
I developed a nice looking web page which provided people with a brief
overview of our society's publications (our different newsletters).
However, while I'm by no means an expert or professional website
designer, I know enough about XHTML 1.0 to know that the best way to
guarantee interoperability on all, or at least most browsers, including
lynx is to make sure my site complies with the w3 standards. So, I ran
my site through the XHTML 1.0 Transitional validator, and it didn't
pass, so I had it clean up my markup using Tidy. I then copy and pasted
that markup into the validator, and it validated. However, when I viewed
the valid page online, it looked funny.
This is the page: http://www.reaps.org/walker_html/publications.html .
I'm not sure why the different paragraphs all have different fonts, when
I can't even see a <font> tag. My challenge is that a bunch of pages
on our site were recently redesigned by a professional website designer,
and now every time I create a new page, I try to use other pages he's
done as a template. But I'm not familiar with all his code (for example,
I have no idea what the <span> tag does). And since I can't find our
O'Reilly HTML book around here, I'm hoping somebody can take a look at
the source code, and let me know what I've done wrong, and how I can fix it.
Also, if I want to make each paragraph a different colour, what is the
valid way of doing that in XHTML 1.0 Transitional. I will eventually use
CSS for my formatting, but I want to wait until my paid time is does,
and I'm volunteering again. Then, I can take as much time as I need to
figure out the CSS code, without worrying about how well I'm using my time.
Thanks for your help; I look forward to learning from your feedback.
Corey Walker
Webmaster, Recycling and Environmental Action Planning Society
|
|
Posted by André Gillibert on October 21, 2007, 5:33 pm
Please log in for more thread options
Corey Walker wrote:
> Hello:
>
> I developed a nice looking web page which provided people with a brief
> overview of our society's publications (our different newsletters).
> However, while I'm by no means an expert or professional website
> designer, I know enough about XHTML 1.0 to know that the best way to
> guarantee interoperability on all, or at least most browsers, including
> lynx is to make sure my site complies with the w3 standards.
Yes, but, to guarantee interoperability, HTML 4.01 is better than XHTML
1.0.
XHTML 1.0 served as text/html relies on user agent parsing bugs.
XHTML 1.0 served as application/xhtml+xml isn't supported by IE.
>
> This is the page: http://www.reaps.org/walker_html/publications.html .
> I'm not sure why the different paragraphs all have different fonts, when
> I can't even see a <font> tag.
There're no font elements, but there're CSS styles.
For example, the site contains:
> p.c3 {font-family: Arial, Helvetica, sans-serif; font-size: 80%}
This says that paragraphs with the class attribute set to "c3" will be
displayed with 80% of the user-chosen font size, and will use the Arial,
Helvetica or default sans-serif font face, from the highest priority to
the lowest priority, if available.
> My challenge is that a bunch of pages on our site were recently
> redesigned by a professional website designer, and now every time I
> create a new page, I try to use other pages he's done as a template. But
> I'm not familiar with all his code (for example, I have no idea what the
> <span> tag does).
The span element has absolutely no semantic meaning.
It's a generic inline element, used only for styling purposes. Its overuse
is sign of bad design.
Unfortunately, his design is not good.
1) He uses many SPAN elements. They shouldn't appear in a normal POSH
(Plain Old Semantic HTML or XHTML) and are the mark of CSS designer whose
target is a specific visual presentation, not HTML or XHTML.
2) He uses ridiculous non-semantic class names: c1, c2, c3, c4 and c5.
This produces illegible code.
3) He atrociously combines these styles in a way that make them worst than
the FONT element.
For example, he used c1 for a 80% font-size style with a green color.
He uses this style for the left column menu, and for the "Home >REAPS
Publications" location link line.
But, he also uses this style, combined with the style c4 (font-size: 70%,
color: #33CCFF) for the copyright.
The menu items and copyrights ought to have two distinct styles. Mixing
these styles is awful. Modifying the style of one item of the page would
become a nightmare as it would affects other parts of the page.
4) This copyright statement is tiny. My browser has an option to set a
lower limit to the font size. Without it, it's hard to read the text
without a 230% zoom!
Moreover, the main text body has size 80%. The text body ought to have
size 100% as this is the prefered user value.
Most probably, this web designer didn't knew that users were able to
change their font size, had a very good eye sight, and thought that 80% is
"better for me".
5) He uses CSS, and yet, he uses a table layout.
6) He uses BR to form menu lists rather than UL. He uses SPAN and BR
rather than P for paragraphs. The only P element he uses is for something
that's not a paragraph!
It's hard to believe, but this page contains almost only SPAN elements!
> And since I can't find our O'Reilly HTML book around here,
An HTML book wouldn't help. This page isn't written in XHTML or HTML. It's
written in CSS + tag soup. You cannot learn anything from the tags. Only
the style says something.
> I'm hoping somebody can take a look at the source code, and let me know
> what I've done wrong, and how I can fix it.
To fix it: Replace all those span with standard paragraphs.
For the menu, use an unordered list (UL) of anchors.
>
> Also, if I want to make each paragraph a different colour, what is the
> valid way of doing that in XHTML 1.0 Transitional.
HTML and XHTML aren't designed for styling.
To style your document, you can use the most popular renderer technology:
CSS.
You must keep in mind that HTML can be viewed with different tools. CSS is
only one view of the HTML document.
You can learn CSS with tutorials linked from
http://www.w3.org/2002/03/tutorials.
--
If you've a question that doesn't belong to Usenet, contact me at
|
|
Posted by Jonathan N. Little on October 21, 2007, 5:35 pm
Please log in for more thread options Corey Walker wrote:
> Hello:
>
> I developed a nice looking web page which provided people with a brief
> overview of our society's publications (our different newsletters).
> However, while I'm by no means an expert or professional website
> designer, I know enough about XHTML 1.0 to know that the best way to
> guarantee interoperability on all, or at least most browsers, including
> lynx is to make sure my site complies with the w3 standards.
Not enough, you know wrong. Been discussed at great length here and alt.html
See:
http://www.google.com/search?hl=en&q=xhtml+browser+support&btnG=Search
xhtml browser support - Google Search
HTML 4.01 Strict is what you want
> So, I ran
> my site through the XHTML 1.0 Transitional validator, and it didn't
> pass, so I had it clean up my markup using Tidy. I then copy and pasted
> that markup into the validator, and it validated. However, when I viewed
> the valid page online, it looked funny.
>
> This is the page: http://www.reaps.org/walker_html/publications.html .
> I'm not sure why the different paragraphs all have different fonts, when
> I can't even see a <font> tag.
Oi vai! Because they are styled differently with different classes. You
have paragraphs? Funny you didn't markup up that way! Paragraphs are
defined with <p></p> not using multiple line breaks <br>.
> My challenge is that a bunch of pages on
> our site were recently redesigned by a professional website designer,
> and now every time I create a new page, I try to use other pages he's
> done as a template. But I'm not familiar with all his code (for example,
> I have no idea what the <span> tag does). And since I can't find our
> O'Reilly HTML book around here, I'm hoping somebody can take a look at
> the source code, and let me know what I've done wrong, and how I can fix
> it.
Best advice is stop. Learn a bit about proper markup. Use HTML 4.01
strict and lose the XHTML
Try the tutorials at www.htmldog.com
>
> Also, if I want to make each paragraph a different colour, what is the
> valid way of doing that in XHTML 1.0 Transitional. I will eventually use
> CSS for my formatting, but I want to wait until my paid time is does,
> and I'm volunteering again. Then, I can take as much time as I need to
> figure out the CSS code, without worrying about how well I'm using my time.
>
> Thanks for your help; I look forward to learning from your feedback.
>
> Corey Walker
> Webmaster, Recycling and Environmental Action Planning Society
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
|
|
Posted by Jeff Gaines on October 21, 2007, 6:40 pm
Please log in for more thread options N. Little wrote:
>Try the tutorials at www.htmldog.com
Just a thank you for that link :-)
This is all very new to me and I have followed the tutorial through and
have a neat page using a css style sheet. Will have a play with styles
tomorrow so I can see what it is all doing.
--
Jeff Gaines Damerham Hampshire UK
There is absolutely no substitute for a genuine lack of preparation
|
|
Posted by Stan Brown on October 21, 2007, 5:50 pm
Please log in for more thread options Sun, 21 Oct 2007 20:26:01 GMT from Corey Walker
> This is the page: http://www.reaps.org/walker_html/publications.html .
> I'm not sure why the different paragraphs all have different fonts, when
> I can't even see a <font> tag.
Thanks for giving a URL instead of just pasting code.
Actually, you *don't* have any paragraphs. You have a big mass of
text with <br><br>, and groups of sentences are styled with <span>.
This makes it unnecessarily hard to figure out what's going on.
You have nested <span>s. Everything up to "types of worms" is in c2
within c1, and what comes after is in c2 *not* within c1. That's why
there's a difference.
<br><br> gives a blank line in some browsers, not all. If you had <p>
you could style it with a top margin; you can't do that with <span>.
Why not replace all that garbage with honest-to-gosh paragraphs?
--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you
|
| Similar Threads | Posted | | Problem with upgrading my site | May 7, 2005, 9:28 pm |
| Can well-formed but non-validated XHTML have extra namespaces? | November 20, 2006, 10:54 am |
| Recommendations for good Web site hosting company (for personal Web site) | April 16, 2006, 7:49 pm |
| Need help with my site - search function within my site not working?!? | April 24, 2008, 8:52 pm |
| What is this site using | January 4, 2005, 7:48 pm |
| How to add RSS 2.0 to my web site? | August 22, 2005, 6:01 pm |
| Subscription Web Site | August 28, 2004, 9:36 am |
| Site Migration | January 5, 2005, 5:59 am |
| Site critique | February 3, 2005, 5:00 pm |
| Help with web site management | February 11, 2005, 6:26 am |
|
XML Sitemap