Valid HTML Tutorial

[Safalra]

When a poster in a forum I frequent said they were beginning to learn HTML,
I thought I should direct them to a good HTML tutorial so that they
wouldn't start using <blink> and the like. Remembering that this group has
discussed HTML tutorials several times in the past, I searched the Google
Groups archives, but all I can find are tutorials unfortunately
demonstrating Flavell's Law. Searching the internet, the only accurate
tutorials for valid HTML I can find are very basic. Ideally I'd like
something meeting the following criteria:

- teaches valid HTML, including the rarer elements
- covers browser compatibility issues (such as <abbr> and <acronym>)
- addresses accessibility issues (such as alt text)
- mentions some usability issues (such as navigation)
- covers (at least in basic form) formatting using CSS

Is there a tutorial (or even a couple of tutorials) that covers all of
this, or will I have to write one myself?

--
Safalra (Stephen Morley)
http://www.safalra.com/hypertext/

[Spartanicus]

Safalra <us****@safalra .com> wrote:

When a poster in a forum I frequent said they were beginning to learn HTML,
I thought I should direct them to a good HTML tutorial so that they
wouldn't start using <blink> and the like. Remembering that this group has
discussed HTML tutorials several times in the past, I searched the Google
Groups archives, but all I can find are tutorials unfortunately
demonstratin g Flavell's Law. Searching the internet, the only accurate
tutorials for valid HTML I can find are very basic. Ideally I'd like
something meeting the following criteria:

- teaches valid HTML, including the rarer elements
- covers browser compatibility issues (such as <abbr> and <acronym>)
- addresses accessibility issues (such as alt text)
- mentions some usability issues (such as navigation)
- covers (at least in basic form) formatting using CSS

Is there a tutorial (or even a couple of tutorials) that covers all of
this, or will I have to write one myself?

No experience with it myself, but http://www.htmldog.com/ has been
mentioned favourably by some of the knowledgable regulars of alt.html.

--
Spartanicus

[Lachlan Hunt]

Safalra wrote:

Searching the internet, the only accurate tutorials for valid HTML I
can find are very basic. Ideally I'd like something meeting the
following criteria:

- teaches valid HTML, including the rarer elements
- covers browser compatibility issues (such as <abbr> and <acronym>)
- addresses accessibility issues (such as alt text)
- mentions some usability issues (such as navigation)
- covers (at least in basic form) formatting using CSS
Add to that teaching that XHTML is not as simple as writing HTML in XML
syntax, and starts by teaching HTML 4, rather than XHTML, as XHTML is
not really suitable for beginners.
Is there a tutorial (or even a couple of tutorials) that covers all of
this, or will I have to write one myself?

Take a look through the comments of this article, there's lots of HTML
and CSS tutorials and other resources mentioned.

http://www.mezzoblue.com/archives/20...s_re/index.php

I've never actually found a tutorial that meets all that criteria
myself. I'd like to though.

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

[Tony]

>Is there a tutorial (or even a couple of tutorials) that covers all of

this, or will I have to write one myself?

I have found http://www.quirksmode.org to be a great resource -
although it addresses mostly CSS & javascript, not as much emphasis on
the straight HTML.

Have you checked out the w3schools and webmonkey tutorials? That's the
first place I would probably send someone - although I'll admit I
haven't used them in quite a long time...

[Tim]

On Tue, 06 Dec 2005 10:53:28 -0800, Tony sent:

Have you checked out the w3schools

I'd advise against it. It's full of errors, and that sort of thing leads
the new comer in the wrong direction.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please destroy some files yourself.

[Gérard Talbot]

Tony wrote :

Is there a tutorial (or even a couple of tutorials) that covers all of
this, or will I have to write one myself?

Have you checked out the w3schools and webmonkey tutorials?

I disagree. w3schools.com is full of errors, is not updated on a
regular/continuous basis, shows examples without any doctype
declaration, etc.

webmonkey.com uses unrequested popup windows (is that how you should
teach others to do site entrance pages??), is full of markup validation
errors (over 200 per page), etc.

I recommend instead

Creating websites with CSS and (X)HTML: tutorials and lessons from
Alsacreations
http://tutorials.alsacreations.com/

Web Design Group Web Authoring FAQ
http://www.htmlhelp.com/faq/html/

HTML Dog
http://www.htmldog.com/

Gérard
--
remove blah to email me

[Gérard Talbot]

Safalra a écrit :

When a poster in a forum I frequent said they were beginning to learn HTML,
I thought I should direct them to a good HTML tutorial so that they
wouldn't start using <blink> and the like. Remembering that this group has
discussed HTML tutorials several times in the past, I searched the Google
Groups archives, but all I can find are tutorials unfortunately
demonstrating Flavell's Law. Searching the internet, the only accurate
tutorials for valid HTML I can find are very basic. Ideally I'd like
something meeting the following criteria:

- teaches valid HTML, including the rarer elements
This is related to semantic HTML.
- covers browser compatibility issues (such as <abbr> and <acronym>)
MSIE 7 will support <abbr> so I'd say this is already a resolved issue.
What's important is to code according to web standards.
- addresses accessibility issues (such as alt text)
There are about a dozen good resources on this issue on the web. So far,
several web developers have demanded that the next release of MSIE 7
corrects the way MSIE renders alt attribute.
- mentions some usability issues (such as navigation)
useit.com
Also:
Use <link>s in your document
http://www.w3.org/QA/Tips/use-links

Link bar:
http://webcoder.info/reference/LinkBars.html

- covers (at least in basic form) formatting using CSS

Is there a tutorial (or even a couple of tutorials) that covers all of
this, or will I have to write one myself?

I recommend this page (in the process of being upgraded) for starters:

Website design resources for beginner and intermediate Nvu users
http://www.gtalbot.org/NvuSection/Nv...Resources.html

Also, excellent resources worth mentioning:

Learning website design:
Dan's website design tips:
http://webtips.dan.info/

W3C Quality Assurance tips:
Quality Tips for Webmasters
http://www.w3.org/QA/Tips/

Toby Inkster
http://tobyinkster.co.uk/html-tutorial

David Dorward
http://dorward.me.uk/www/

All things web
http://www.pantos.org/atw/

Resources on CSS:
http://dorward.me.uk/www/css/

Web authoring tutorial, HTML tutorial, CSS tutorial
http://tranchant.plus.com/web/

For more advanced users:
Using Web standards in your web pages:
http://www.mozilla.org/docs/web-deve...upgrade_2.html

Gérard
--
remove blah to email me

[Alan J. Flavell]

On Tue, 13 Dec 2005, Gérard Talbot wrote:

Safalra a écrit :

- covers browser compatibility issues (such as <abbr> and <acronym>)
MSIE 7 will support <abbr> so I'd say this is already a resolved issue.

As I understand it, IE7 will only be available to users of XP SP2 and
later. There are some years to go before *that* requirement will be
widely fulfilled. In any case, although I accept that users of MSIE
tend to update to newer versions rather more enthusiasically than
users of WWW-compatible browsers, there are plenty of old WinIE
versions which still show up in the browser logs, and I don't expect
the availability of IE7 to do much about that.
What's important is to code according to web standards.

No dispute there. For <abbr> I see two options, both of which are
reasonably harmless:

1. mark up abbreviations correctly. Ignore the fact that MSIE does
not choose to render them distinctively.

2. double-barrelled markup, wrapping the <abbr title="..."> (works
well with WWW-conforming clients) within something like <span
class="abbr" title="..."> for the benefit of MSIE. This can be done
with a macro, if you use an HTML source preprocessor of some kind.

- addresses accessibility issues (such as alt text)

There are about a dozen good resources on this issue on the web. So
far, several web developers have demanded that the next release of
MSIE 7 corrects the way MSIE renders alt attribute.

I assume that this refers to IE's habit of displaying the alt text as
a popup, if no title= attribute is present? By coding title="", it's
possible to disable that behaviour in older IE versions, without
(AFAIAA) doing any harm to other browsers.

cheers

[Jukka K. Korpela]

"Alan J. Flavell" <fl*****@ph.gla .ac.uk> wrote:

As I understand it, IE7 will only be available to users of XP SP2 and
later. There are some years to go before *that* requirement will be
widely fulfilled.
Besides, it has already been delayed considerably. Public beta was expected
to be issued in July, but now it is said to be available in first quarter of
2006. This may mean that there will be a nonnegligible period of time between
first public beta and the first official release, not to mention the period
of time between first release and the release that can be recommended to
ordinary users.
For <abbr> I see two options, both of which are
reasonably harmless:

There's also the option of _not_ using it, and this is surely harmless. It
helps to make the author realize that if an expansion or other explanation is
_needed_, it should be given explicitly and not in an attribute, and if it is
not needed, it need not be given. (I can see reasons for using an attribute
in in-between cases, but in reality, that's too subtle to most authors.)

What if IE 7 really decides to implement <abbr> as defined, including the
rendering recommended in CSS specifications? That would mean
ABBR, ACRONYM { font-variant: small-caps; letter-spacing: 0.1em }
i.e. rendering <abbr> element content in small capitals and with increased
spacing (of 10 % of the font size) between characters.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Gérard Talbot]

Alan J. Flavell a écrit :

On Tue, 13 Dec 2005, Gérard Talbot wrote:

Safalra a écrit :

- covers browser compatibility issues (such as <abbr> and <acronym>)
MSIE 7 will support <abbr> so I'd say this is already a resolved issue.

As I understand it, IE7 will only be available to users of XP SP2 and
later. There are some years to go before *that* requirement will be
widely fulfilled. In any case, although I accept that users of MSIE
tend to update to newer versions rather more enthusiasically than
users of WWW-compatible browsers, there are plenty of old WinIE
versions which still show up in the browser logs, and I don't expect
the availability of IE7 to do much about that.

Fair enough. <abbr> will be supported in the future for XP users using
IE 7 and is not and will NOT be supported for an important minority of
Window users (Windows 2000, ME and Windows 98).

What's important is to code according to web standards.

No dispute there. For <abbr> I see two options, both of which are
reasonably harmless:

1. mark up abbreviations correctly. Ignore the fact that MSIE does
not choose to render them distinctively.

2. double-barrelled markup, wrapping the <abbr title="..."> (works
well with WWW-conforming clients) within something like <span
class="abbr" title="..."> for the benefit of MSIE.

Yes. The "double-barrelled markup" is the workaround I suggested several
months ago in another newsgroup (can't recall which one).

This can be done with a macro, if you use an HTML source preprocessor of some kind.

- addresses accessibility issues (such as alt text)
There are about a dozen good resources on this issue on the web. So
far, several web developers have demanded that the next release of
MSIE 7 corrects the way MSIE renders alt attribute.

I assume that this refers to IE's habit of displaying the alt text as
a popup, if no title= attribute is present? By coding title="",

Yes. This trick is mentioned at
http://channel9.msdn.com/wiki/defaul...rogrammingBugs
but it's still a trick, a workaround that compensate for a wrong
implementation.

it's possible to disable that behaviour in older IE versions, without
(AFAIAA) doing any harm to other browsers.

Well, I wish MSIE dev. team and Chris Wilson (and D. Massy) would meet
the spec and implement the spec as it should be.

In this page
http://channel9.msdn.com/wiki/defaul...rogrammingBugs
at section
"Browser Behavior
Alt attributes",
one can read David Massy say:
"It's not exactly clear to me from any of the links that Internet
Explorer is not handling to specification. Maybe I missed it but is
there anything in the World Wide Web Consortium
12/6/2004 10:45:25 PM - dmarsh
W3C recommendation that says that tooltips type display of the text is
not an acceptable use of the Alt attribute? I think it's an interesting
point but often having the tooltip can be a useful addition especially
when the image is a hyperlink. Maybe it could be made an optional thing
if people find it annoying rather than helpful. --Dave Massy"

and then you can read lots of comments, some being mine.

Also, at this page:
http://channel9.msdn.com/wiki/defaul...andardsSupport
{
alt and title attributes: The alt attribute's text is displayed when a
mouse over is done to its object/image/<insert name here>. The alt
attribute's text should only be displayed when the image is broken
(which to my knowldge it isn't) while the title attribute's text should
only be displayed when a mouse over is done. The alt attribute should be
understood only and exclusively as textual alternate content, textual
replacing content, textual rendering equivalent. When one thinks of the
alt attribute, one should understand, think of what he would say of an
image if he was to describe it on the phone. The title attribute should
be understood only and exclusively as advisory information, additional
information, complementary information. E.g.<img src="[path/url]"
width="..." height="..." title="My dog's name is Rex" alt="My dog
catching a frisbee in the park">
}
quote from
http://channel9.msdn.com/wiki/defaul...andardsSupport

Gérard