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
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?

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

[Alan J. Flavell]

On Fri, 23 Dec 2005, Gérard Talbot wrote:

Alan J. Flavell a écrit :

I assume that this refers to IE's habit of displaying the alt text
as a popup, if no title= attribute is present?
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.

I basically agree. Surely the whole implication of the term
"alternative" is that the user should get /either/ the one /or/ the
other, at least as the default offering? Not both.

By coding title="", 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.

I'd have no objection to providing a mechanism for a user to
deliberately request display of the alternative text, even though the
image is present and being displayed. I'm told that this can be
helpful for some types of cognitive deficit. What I'm objecting to is
the current *default* behaviour of IE (when no title= attribute is
present).

Btw, I don't have any ambitions to go participating in MSDN
discussions. If IE want to support the WWW, then there's no charge
for them to read and apply anything that they can learn from WWW
forums such as ciwah where such matters are discussed in the wider
context.
quoting D.Massy "...
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.
....No, that's exactly what the title= attribute on the hyperlink is
meant for...
"Maybe it could be made an
optional thing if people find it annoying rather than helpful.
--Dave Massy"

Indeed my complaint is with the default behaviour. I would not object
to an option which gave access to the alt text, as I said above. In
fact, there are three texts to which access ought to be possible, and
I don't know of a browser which supports them all:

alt= - the alternative text for the image
title= of the image - short supplementary info about the image
title= of the enclosing <a href=...> - short details of what's at
the target of the link.

I note that some of the discussion at your cited URL seems to be
confusing the two title= attributes with each other.

As the discussion also shows (and it's been said countless times
before), the problem with non-serious HTML authors is that they won't
read the specifications, but rather they experiment with one or other
browser to find out what happens, and then draw their own conclusions
about what the intentions were. And the widespread, but wrong,
conclusion that they draw from IE is that the alt= attribute is
intended for producing tooltips. As the cited discussion says:

||The biggest problem with this is that amateur developers are using
||alt= instead of title= in which hurts the experience of people using
||competing browsers. [...]

which is exactly my point. While I suppose the easy answer to that is
that "authors should damned well RTFM, and not rely on the behaviour
of this or that particular browser - IE can't be held responsible for
the misguided beliefs of web authors", that's too facile an answer
IMHO, and IE could address this aspect as a useful side-effect of
reconsidering their default behaviour in the presence of an <img>
which has non-null alt= text and no title= attribute. At the same
time, they might give some thought to possible ways of accessing all
three of the texts mentioned above (via right-click, perhaps?).

And of course there's longdesc=, but I don't think we need to discuss
that in the present context.

cheers