Outline for tutorial

[Mr Initial Man]

As some of you know, I've been working on an HTML Tutorial that will teach semantic, valid markup to beginners, using plain english. This is my outline of the tutorial that I've come up with. Do you guys have any suggestions?


Main Page
Introduction
Basics
Doctype Declaration
HTML Element
Head Element
Body Element

Starting a page
Structure and basic elements
Presentation
Cascading Style Sheets 1 (Selectors)
Cascading Style Sheets 2 (Declarations)
HTML Semantics
Common Block Elements
Common Inline Elements

Advanced HTML
Lists
Framesets
Tables
Layouts

Odds and ends
Stuff you'll see
Website Do's and Don'ts
A bit on XHTML
Useful Links

[Charles]

The best outline for an HTML tutorial would be the table of contents from the 4.01 spec.

And the best tutorial would be simply a commentary on said spec.

[MstrBob]

The best outline for an HTML tutorial would be the table of contents from the 4.01 spec.

And the best tutorial would be simply a commentary on said spec.

I dunno. There's a big difference between a specification and a tutorial. That's like trying to learn something via a reference manual. It's for reference, it contains all the absolute information, clear cut with no nonsense. But a tutorial goes in depth explaining things much more (and generally don't cover every single bitty detail).

What you should be trying to accomplish with a tutorial on say, HTML 4.01, is introduce them to the language. Make sure the reader has an understanding of what HTML is, what its used for, what uses it, ect. Cover common elements and attributes, perhaps help them build a page by following the tutorial, and generally set the reader up so that they can:

1) Actually create something with what you've taught them, and
2) Are knowledgeable enough so that they can read and understand the specs (or reference manual) so that they can teach themselves all the intricacies and complete vocabulary of the lanugage.

[Charles]

What you should be trying to accomplish with a tutorial on say, HTML 4.01, is introduce them to the language. Make sure the reader has an understanding of what HTML is, what its used for, what uses it, ect. Cover common elements and attributes, perhaps help them build a page by following the tutorial, and generally set the reader up so that they can:

1) Actually create something with what you've taught them, and
2) Are knowledgeable enough so that they can read and understand the specs (or reference manual) so that they can teach themselves all the intricacies and complete vocabulary of the lanugage.The primer is introduction, explaining the bare basics and walking them through the creation of their own "Hello, World!" page. The tutorial should follow the spec. making clear to the novice what is found there-in. Once they've read the tutorial the spec. will make sense.

Better minds than ours have already poured over html and the table of contents from the spce. represents, in outline form, what anyone needs to know about it.

[Mr Initial Man]

The primer is introduction, explaining the bare basics and walking them through the creation of their own "Hello, World!" page. The tutorial should follow the spec. making clear to the novice what is found there-in. Once they've read the tutorial the spec. will make sense.

Better minds than ours have already poured over html and the table of contents from the spce. represents, in outline form, what anyone needs to know about it.


Then where are the understandable tutorials from those better minds? A List Apart is mostly advanced stuff, from what I've seen. W3schools is confusing. And the W3 spec is an information overload. It wasn't until I started getting reviews from webdesigners that I heard about Doctypes and semantic markup.

This tutorial is being written for those who, like me, ask "Where do I begin?"

The tutorial (as it stands so far), is at http://coachrandom.furtopia.org/tutorial It's far from finished, but it's getting there.

[Jeff Mott]

The spec has nearly every HTML fact you could ever need. The emphasis of a tutorial, what it really needs to teach, is a way of thinking. For example, it is more natural for new comers to write a list of links as...

Page 1 - Page 2 - Page 3

...rather than...<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>Informing the student that they should do this and why is not something that can be found in the spec.

[MstrBob]

Exactly, ways of thinking, ideas for how to structure information within a page, the best way to utilise HTML - these aren't necessarily found in the specifications. And while the spec does contain an Intro, to assume that this is sufficient for everyone is rather presumptuous. The specifications are, as I said, rather technical and bare bones get to the facts. Now for a more tech-oriented person, or someone familiar more with the web, or with computers, this may be all fine and dandy. For instance, when I took a look at MathML, I learned from the specifications. But then, I also have experience and knowledge in HTML and XML, not to mention a good idea of how the specs are structured and worded. For someone who knows none of this coming to a language, technical specifications are an immediate turn off and not helpful.

If I tried to learn Linux by simply using the tech manual for each command, yeah I might eventually learn, but chances are I'll be turned off to it rather fast if I know nothing about Linux command line - or command lines in general even. Tutorials bridge this gap, introducing the material slower, explaining better, offering examples and real world usage (Or at least, this is what a good tutorial should do). Heck, even after I knew some hack HTML and had been using it for a few years, the specifications were still too technical, information overload for me.

Right, so my personal opinion is, you needn't follow the specification to the letter. For instance, if you decide you'd rather cover the topic of hyperlinks, before covering tables (unlike the specs) feel free to do so. If you are factually correct there's nothing wrong with it. Also, you don't need to cover every little detail, then it gets too annoying for a reader. Making the reader aware of the specifications, perhaps helping them understand them so that they can properly utilize them is your real main concern in terms of the specs.

[Snitchcat]

Hmm... just a thought:

Maybe I'm being somewhat dense here, but while I know how to use CSS, the names given to the specific components used make no sense to me -- in fact, all they do is confuse my understanding of the components. Could the names be defined / clarified before heading into the actual CSS?

[Snitchcat]

Since this is for beginners, how about adding a seventh and eighth section:

7. Trouble shooting -- how to find and solve the bugs in your HTML
8. Validating Your HTML -- where to validate; understanding what the page tells you; etc.

[Mr Initial Man]

Hmm... just a thought:

Maybe I'm being somewhat dense here, but while I know how to use CSS, the names given to the specific components used make no sense to me -- in fact, all they do is confuse my understanding of the components. Could the names be defined / clarified before heading into the actual CSS?

The CSS section is not complete yet. I'll definately keep your suggestion in mind.

Since this is for beginners, how about adding a seventh and eighth section:

7. Trouble shooting -- how to find and solve the bugs in your HTML
8. Validating Your HTML -- where to validate; understanding what the page tells you; etc.

Good idea.

[hooloovoo24]

Just a small thing...I was looking through your tutorial, and noticed that it wasn't compliant...on line 63, the first list item "Main" isn't right. The line as you have it is:

<li><a href="./index.html">Main</span></li>

when it should be
<li><a href="./index.html">Main</a></li>

Just a small oversight, I'm sure.

[Snitchcat]

Just brainstorming again.

You might consider having the following in a subsection or an appendix:

HTML FAQ -- aka, all the questions you wanted to ask but were afraid to ('cos you thought they'd make you look stupid)

HTML Cheat Sheet -- list of HTML tags used in the tutorial

[Mr Initial Man]

Good ideas, and thank you hooloovoo

I'm taking the suggestions as approval for my basic idea...

[LiLcRaZyFuZzY]

i can't seem to find any link tho...

[BigMoosie]

The tutorial (as it stands so far), is at http://coachrandom.furtopia.org/tutorial It's far from finished, but it's getting there...

[LiLcRaZyFuZzY]

oops, thx bigmoosie ;)

[Mr Initial Man]

Yeah, and with college being completely nuts, I haven't had much time to work on it lately. :(

[nawoc]

hmm, luks like i might be a little late to post here but my only suggestion wud be to run the whole thing building up to an example site - make it more like a project than a tutorial - most buks an online things i used wen starting html said mor or less wat things did and the order 2 put them and stuff but didnt give any examples to work through - you should also include little 'tests' to see how they're getting on with scenarios of pages that need to be built maybe including a design etc. and ask them to try and build it - if they struggle they know they need to go back and re-read some of the earlier stuff

[Mr Initial Man]

A very good idea, nawoc. I've been thinking of doing something like that, but I'd need help in setting it up.

[nawoc]

Well if I can do anything to help you with it, PM me

[Charles]

I agree. Though the 4.01 spec. excells in its organization it does lack two things. And you should strive towards these two things, readability and one big example being put together to unify the document. However, there is one example in the spec that is dear to my heart and you should consider using it. http://www.w3.org/TR/html401/struct/lists.html#edef-DL

[Mr Initial Man]

Definition lists will be part of my "list" page.

I've divided that page up into item lists (ordered and unordered lists) and Definition lists. :)

As for readability, I'm asking people I know who have no experience with HTML to critique it on clarity. As for putting the document together, I'll work on that. :)

[LiLcRaZyFuZzY]

tell us when your done!

[Mr Initial Man]

It's gonna be a while. Right now, I'm fighting my way through college.