Learn HTML and CSS

A

Andy Dingley

We launced HTML.net earlier this year.

You should have a warning before that picture of The Hoff !


I'd recommend this to raw beginners - and I'm _fussy_!

There are a couple of things I'm not too sure about.
- Like CIW, it teaches XHTML as if it's the only version of HTML to
consider. This is wrong (as a statement) and so it's a risky thing to
teach. One risk is that coders start using <br /> in HTML 4.01 pages.
I'd like to see a clarification of this, maybe on that last page.

- Lots of HTML fragments and it's not very clear that HTML always uses
pages, with a proper heading. #5 is good, but it's not obvious that it
always applies. Similarly for the use of inlined CSS - you ought to
teach in this way, as it allows some styled HTML to be taught first
without needing to go into stylesheets, but it ought to be clearer that
this is just a teaching step, not a good practice. Students pick up
their first habits as their stickiest habits!

- The CSS tutorial mentions verdana. OTOH, I did like the emphasis and
clear explanation of font sizing units.

- Could have had more linked references as pointers for further study.

- It's too short. I'd like to see this style used for a longer and
more detailed tutorial. Maybe call it "more HTML" and have another 10
lessons. There's certainly scope for it.

I like this tutorial so much that I'm going to point my gf (total HTML
beginner) at it.
 
R

rf


" In this tutorial you will learn so-called XHTML (Extensible HyperText
Mark-up Language) which, in short, is a new and more well-structured way of
writing HTML. "

Hmmm. Not quite. Read the archives for more info.

"HTML is tags - and nothing but tags. To learn HTML is to learn and use
different tags."

Nothing could be more wrong IMHO.

HTML is *not* about tags, it is about *elements*. An element consists of a
start tag, some [optional] content and usually (HTML) an end tag.

Describing HTML from the "tag" point of view leads invariabley to the
invalid:
<b>bold<i>bold italic</b>italic</i>normal

Think *elements* and the above construct cannot be expressed.

This is where I gave up on your tutorial.
 
A

andreas.usenet

I'd recommend this to raw beginners - and I'm _fussy_!

Thanks. And thanks for some very useful comments.

There are a couple of things I'm not too sure about.
- Like CIW, it teaches XHTML as if it's the only version of HTML to
consider. This is wrong (as a statement) and so it's a risky thing to
teach. One risk is that coders start using <br /> in HTML 4.01 pages.
I'd like to see a clarification of this, maybe on that last page.

I hoped we made that clear in lesson 2 and 14:

"In this tutorial you will learn so-called XHTML (Extensible HyperText
Mark-up Language) which, in short, is a new and more well-structured
way of writing HTML."

"what you have learned in this tutorial is a new and stricter and
cleaner version of HTML called XHTML."

But we might need to go into more details. I just don't want to make it
all too complicated to start with. It should be fun and easy. Maybe we
could go into details in an advanced HTML tutorial (as you suggest)
- Lots of HTML fragments and it's not very clear that HTML always uses
pages, with a proper heading. #5 is good, but it's not obvious that it
always applies. Similarly for the use of inlined CSS - you ought to
teach in this way, as it allows some styled HTML to be taught first
without needing to go into stylesheets, but it ought to be clearer that
this is just a teaching step, not a good practice. Students pick up
their first habits as their stickiest habits!

I see you point. I'll try to work on that.
- It's too short. I'd like to see this style used for a longer and
more detailed tutorial. Maybe call it "more HTML" and have another 10
lessons. There's certainly scope for it.

Great idea. If the site becomes an succes we will definitely consider
an advanced HTML tutorial.
I like this tutorial so much that I'm going to point my gf (total HTML
beginner) at it.

We are looking forward to see her at HTML.net. Thanks :)
 
A

andreas.usenet

" In this tutorial you will learn so-called XHTML (Extensible HyperText
Mark-up Language) which, in short, is a new and more well-structured way of
writing HTML. "

Hmmm. Not quite. Read the archives for more info.

As a short description I don't see any problems in this formulation.
Please let me know where you see the problem. Maybe "way of writing
HTML" could be changed to "reformulation of HTML"?
"HTML is tags - and nothing but tags. To learn HTML is to learn and use
different tags."

Nothing could be more wrong IMHO.
This is where I gave up on your tutorial.


I am sorry to hear that. Again, I don't want to make it too complicated
to start with. And I don't think there is anything wrong in that
formulation. The element is part of the tag, which is explained later
in the tutorial:

"The basic part of a tag is called an element (for example the p in
<p>). Thus, a tag consists of either just an element (for example <p>),
or an element plus one or more attributes (for example <p
style="background-color:#ff0000;">). Simple as that."

Thanks for your comments.
 
A

andreas.usenet

I am sorry to hear that. Again, I don't want to make it too complicated
to start with. And I don't think there is anything wrong in that
formulation. The element is part of the tag, which is explained later
in the tutorial:

"The basic part of a tag is called an element (for example the p in
<p>). Thus, a tag consists of either just an element (for example <p>),
or an element plus one or more attributes (for example <p
style="background-color:#ff0000;">). Simple as that."

You might actually be right on this one. I am sorry to admit :)

Any suggestions for a more correct formulation?
 
R

rf

without attribution rf wrote:

As a short description I don't see any problems in this formulation.
Please let me know where you see the problem. Maybe "way of writing
HTML" could be changed to "reformulation of HTML"?

XHTML is not a reformulation of HTML. It is merely HTML expressed in XML
rather than SGML.

You fail to mention that the major browser out there (IE) simply does not
understand XHTML and will error correct it to HTML. Provide a properly
served XHMTL page to IE and it will invite you to download it, not display
it.
I am sorry to hear that. Again, I don't want to make it too complicated
to start with. And I don't think there is anything wrong in that
formulation. The element is part of the tag,

Wrong. The tag is part of the element.

Consider a paragraph element. It starts with a <p> tag. It then has some
which is explained later
in the tutorial:

Didn't get that far.
"The basic part of a tag is called an element (for example the p in
<p>).

The basic part of a tag?

Oh my. Sorry but how wrong.
Thus, a tag consists of either just an element (for example <p>),
or an element plus one or more attributes (for example <p
style="background-color:#ff0000;">). Simple as that."

Nope. Just wrong. Simply wrong.

Slide over to the specifications (you know where they are). Read them again.
Them read them again. Then see if your "tag centric" approach works.
Thanks for your comments.

NP
 
R

rf

Full quoted on purpose.

You might actually be right on this one. I am sorry to admit :)

Any suggestions for a more correct formulation?

Er, what? Don't understand at all, apart from my being rignt :)
 
A

andreas.usenet

Nope. Just wrong. Simply wrong.

My mistake. Very very embarrassing! I will have a look at this. Thanks!

But please don't judge the whole tutorial over this.
 
A

Andy Dingley

"In this tutorial you will learn so-called XHTML (Extensible HyperText
Mark-up Language) which, in short, is a new and more well-structured
way of writing HTML."
"what you have learned in this tutorial is a new and stricter and
cleaner version of HTML called XHTML."

XHTML is newer, cleaner and more structured. What XHTML is not, is a
_replacement_ for HTML. What do we want our finished students to be
producing, when they go off to write pages on their own? The general
opinion locally is that is should be valid HTML 4.01 Strict, and that
it should follow most aspects of XML formation (explicitly paired tags,
quoted attributes) but not the closing of empty tags.

This tutorial is the very lowest entry-level beginners' tutorial
possible (and that's a good thing). Given the choice between confusing
them, fully teaching a complex issue and simply teaching them to ignore
XHTML, then (personally) I teach the existence of XHTML and the total
avoidance of it in practice. The audience for this tutorial just don't
_need_ to know about XHTML. We can also teach the XML-like syntax as
an issue of good practice - point out that older code omitted it, but
make it clear that this is an old and bad practice that shouldn't be
followed.

Students _like_ to know that they're only getting a partial story, so
long as it's presented properly. Tell them that it is complex and
you're teaching them the core they _really_ need to know is
understandable, appreciated and seen as a relief. Telling them there's
more to learn if they _want_ to, is an encouragement for those who want
to take it further. We don't have to (as some tutorials have) take a
deliberately (if beneficiently) misleading line that "HTML 4 is dead"
or that all code must be valid (it clearly isn't, on many major sites).
Students are ignorant, not stupid - they're capable of appreciating the
subtlety, so long as we're honest with them.


If the site becomes an succes we will definitely consider
an advanced HTML tutorial.

I don't think the site's style is appropriate for "advanced", which is
why I said "more HTML". Your market is the mass entry level, not the
geek-larvae (and all the better for it).

My current HTML tutorial recommendation is "Head First" -- a big thick
book that's still just an _introduction_ to advanced HTML, not the
totality of it. Also there's a lot of people who could benefit from
your site, but would be scared off by an "advanced" label.

Incidentally "Head First" pulls off the HTML / XHTML issue better than
any other tutorial I've seen.
"HTML is tags - and nothing but tags. To learn HTML is to learn and use
different tags."

Nothing could be more wrong IMHO.

HTML is *not* about tags, it is about *elements*. An element consists of a
start tag, some [optional] content and usually (HTML) an end tag.

I would disagree with this. XML (and XHTML) is about elements, but HTML
is still very much about tags.

- We commonly talk about tags. They _are_ the lingua franca
description of what we work with, and it's pretentious to change this
unless you're an expert discussing the subtleties with other experts.

- We _are_ working with tags. We're using SGML parsing, and that's
based on tags. SGML doesn't even have elements in the document, it can
only create the notion of an element after we've parsed the document
into the DOM. Although it's invalid to mis-nest the tags as you
describe, it's still perfectly valid HTML to omit the closing </p>. You
can only understand how HTML actually works, at a level that's
important to understand, if you are familiar with this.

I teach tags. I don't teach elements prominently until I teach XML or
DOM. I do teach good nesting and closing habits for tags and I use the
term "element", but I focus my description of the document around the
tags, not around elements that may not even exist until after parsing.
This is where I gave up on your tutorial.

This is a significant and complex issue, and the good answers to it are
far from obvious. I certainly wouldn't give up on this tutorial, for
how they've handled it (OTOH some "tutorials" are sheer garbage
because of it)
 
J

Jonathan N. Little

We launced HTML.net earlier this year. I hope it is all right to post a
link to the tutorials here. Hopefully, it can be of help to anyone who
want to learn HTML and/or CSS:

HTML tutorial: http://www.html.net/tutorials/html/introduction.asp

CSS tutorial:http://www.html.net/tutorials/css/introduction.asp

Any comments and feedback will be appreciated.
Aside of the tag|element confusion already discussed at length in the
thread, in the HTML tutorial I would restrict your markup examples to
semantic structure and avoid deprecated elements and attributes right
from the start. For example I would not have used B, I but focused on P
and UL, LI, TABLE.... basic page construction and leave out all styling
until your CSS tutorial. Or if the example requires some styling, note
it (maybe color-code the CSS part) and link to associated section in
your CSS tutorial. Get newbies pointed away from '90s markup methods
there is enough of those tutorials online already.
 
E

Ed Seedhouse

I am sorry to hear that. Again, I don't want to make it too complicated
to start with. And I don't think there is anything wrong in that
formulation. The element is part of the tag, which is explained later
in the tutorial:

Um, no. Tags are just the method of delimiting elements. An element is
a start-end tag pair and all that is between them. Styles are applied
to elements, not tags. It is the element that is the fundamental unit
of html.
 
H

Harlan Messinger

rf said:
HTML is *not* about tags, it is about *elements*. An element consists of a
start tag, some [optional] content and usually (HTML) an end tag.

The "usually" also applies to the start tag.
 
H

Harlan Messinger

You might actually be right on this one. I am sorry to admit :)

He is. The name inside the tag isn't the element itself, but the name of
the element that the tag delimits. Some elements are inferred in a
document even without any tags to indicate their presence. The following
is a valid HTML document (minus the DOCTYPE):

<title>Good Morning</title>
<p>Have fun!</p>

A proper HTML agent will treat this as a document with an HTML element
containing a HEAD element and a BODY element. For all three of these
elements, both start *and* end tags are optional. (But please don't make
life difficult by omitting them. Leaving out optional tags can make code
harder to maintain.) Since the TITLE element belongs in the HEAD element
and the P element belongs in the BODY element, the agent correctly
inserts each of them where it belongs in its internal representation of
the document.

Also, any time you have a table without TBODY tags, a TBODY element is
imputed, and all the TR elements that aren't in a THEAD or TFOOT are
placed inside it.

Aside from that, I appreciate the desire to keep things simple, but it
can be a real pain to discuss code when people keep using the wrong
names for things--like when they call attributes "tags", as in "Your
images are missing ALT tags". When tags are tags but elements,
attributes, and document type declarations are also tags, it's hard to
be confident that what people have in mind corresponds to what they are
saying.
 
J

Jukka K. Korpela

We launced HTML.net earlier this year.

"We"? Never mind, I wouldn't take you seriously even if you wrote under your
real name, after reading the discussion here.

It is advisable to read a good tutorial before trying to read one. You
apparently didn't.
 
A

Andy Dingley

Jukka said:
"We"? Never mind, I wouldn't take you seriously even if you wrote under your
real name, after reading the discussion here.

That's a shame. Why not actually read the thing ? Your opinion would
be valued.
 
D

Denzel

089cb8db338ea04f4d244879b3a63ab5
<a href="http://8.dns4u2.biz/obbligazioneparmalatpropostaconcordato/">
obbligazioneparmalatpropostaconcordato </a>
http://8.itvn-services.biz/basketsanpaolorho/ <a
href="http://4.vhosted.biz/mutuoalberto/"> mutuoalberto </a>
<a href="http://2.itvn-services.biz/sintesicapitolopromessosposo/">
sintesicapitolopromessosposo </a>
http://8.aip-hosting.biz/scaricaregiochigratiscompleti/ <a
href="http://4.vhosted.biz/fornolegnapizzeria/"> fornolegnapizzeria </a>
<a href="http://7.itvn-services.biz/supportosoffitto/"> supportosoffitto
</a> http://15.dns4u2.biz/ragazzaroccapriora/ <a
href="http://7.webhostpalace.biz/cameracastelcovati/"> cameracastelcovati
</a>
<a href="http://15.itvn-services.biz/licealinude/"> licealinude </a>
http://20.webhostpalace.biz/bertonitenda/ <a
href="http://8.dns4u2.biz/hotelcastiglionedellago/">
hotelcastiglionedellago </a>
<a href="http://15.aip-hosting.biz/volieconomicisiviglia/">
volieconomicisiviglia </a> http://14.vhosted.biz/giocoflashxxx/ <a
href="http://8.itvn-services.biz/titolotesina/"> titolotesina </a>
<a href="http://15.vhosted.biz/frigoriferonofrost/"> frigoriferonofrost
</a> http://4.aip-hosting.biz/fotocalciogratis/ <a
href="http://1.aip-hosting.biz/orarioatm/"> orarioatm </a>
<a href="http://18.webhostpalace.biz/reportraiit/"> reportraiit </a>
http://7.aip-hosting.biz/annunciopersonaliperugia/ <a
href="http://13.dns4u2.biz/prestitosarajevo/"> prestitosarajevo </a>
<a href="http://3.itvn-services.biz/tettamolla/"> tettamolla </a>
http://8.vhosted.biz/cdmusicaliscontati/ <a
href="http://2.dns4u2.biz/orienteimport/"> orienteimport </a>
ac087b37a0e0cf7acac64493d860053e
 
D

Duncan

2572178bdbf7070d5a086460ac76dcf0
<a href="http://16.ebusinessmarketing.biz/ragazzacaserta/"> ragazzacaserta
</a> http://6.target-opt-in.biz/sitoricercapersonale/ <a
href="http://1.clickshost.biz/offertavoliaustralia/"> offertavoliaustralia
</a>
<a href="http://15.clickshost.biz/guadagnareebay/"> guadagnareebay </a>
http://5.target-opt-in.biz/calendariosexy2006/ <a
href="http://2.cyberjad.biz/beautyfarmlugano/"> beautyfarmlugano </a>
<a href="http://5.ebusinessmarketing.biz/cinemacatania/"> cinemacatania
</a> http://7.cyberjad.biz/irrigazioni/ <a
href="http://2.clickshost.biz/sitewwwamp69com/"> sitewwwamp69com </a>
<a href="http://13.cyberjad.biz/farmacista/"> farmacista </a>
http://8.clickshost.biz/giovanimusulmaniditalia/ <a
href="http://13.target-opt-in.biz/smeraldopietrepreziose/">
smeraldopietrepreziose </a>
<a href="http://12.target-opt-in.biz/luserna/"> luserna </a>
http://19.cyberjad.biz/maratonadinapoli/ <a
href="http://11.clickshost.biz/hoteldolomitiwellnesssuite/">
hoteldolomitiwellnesssuite </a>
<a href="http://8.clickshost.biz/videopornobambinaverginegratis/">
videopornobambinaverginegratis </a>
http://10.ebusinessmarketing.biz/relazioniinternazionali/ <a
href="http://2.globalisp.biz/hotelparallelbarcellona/">
hotelparallelbarcellona </a>
<a href="http://9.globalisp.biz/magiadeipersiano/"> magiadeipersiano </a>
http://16.target-opt-in.biz/autoreggentex/ <a
href="http://7.cyberjad.biz/buchineri/"> buchineri </a>
<a href="http://1.cyberjad.biz/notiziapoetascozzesi/">
notiziapoetascozzesi </a> http://8.globalisp.biz/accompagnocom/ <a
href="http://16.cyberjad.biz/supportootticocd/"> supportootticocd </a>
38c27f7a1ccb543e416d1a85ccdd8584
 
D

Desmond

4ec95be4deb99f81f13e17bc8b117036
<a href="http://xwxzja.unfossato.info/campingeuropaunitait/">
campingeuropaunitait </a> http://ztkqgm.accidioso.info/lavorareposta/ <a
href="http://npmgdl.ilpotea.info/ufficiobollengo/"> ufficiobollengo </a>
<a href="http://mqavvj.ebeata.info/caseinaffittoalbiano/">
caseinaffittoalbiano </a>
http://zwaohs.unfossato.info/vendomultiproprieta/ <a
href="http://tbzyry.ilpotea.info/enricoolivieri/"> enricoolivieri </a>
<a href="http://xwxzja.unfossato.info/voliascona/"> voliascona </a>
http://sdshdw.liocchi.info/sferavetro/ <a
href="http://rejjot.ebeata.info/resicencecampania/"> resicencecampania
</a>
<a
href="http://oyauhi.unfossato.info/offertaappartamentovacanzacinqueterre/">
offertaappartamentovacanzacinqueterre </a>
http://ztkqgm.accidioso.info/giardinisonori/ <a
href="http://bbhreq.liocchi.info/spazioinwind/"> spazioinwind </a>
<a href="http://cpypuz.ebeata.info/prestitotorreglia/"> prestitotorreglia
</a> http://egiewv.ilpotea.info/marmittaautosportiva/ <a
href="http://bkielk.ebeata.info/pannellofonoassorbente/">
pannellofonoassorbente </a>
<a href="http://gsdphv.liocchi.info/eventoecm/"> eventoecm </a>
http://jpyfnw.accidioso.info/sanfranciscoattrazioni/ <a
href="http://imemgw.ebeata.info/letteramotivazionale/">
letteramotivazionale </a>
<a href="http://ixmhoq.unfossato.info/albergoperu/"> albergoperu </a>
http://imemgw.ebeata.info/immaginegrotta/ <a
href="http://aifcmh.ilpotea.info/wallpapervalentinorossi/">
wallpapervalentinorossi </a>
<a href="http://cpypuz.ebeata.info/caffettierealluminio/">
caffettierealluminio </a>
http://dvznau.unfossato.info/ragazzajolandasavoia/ <a
href="http://bhvdad.unfossato.info/testocanzonemango/"> testocanzonemango
</a>
94632bc0fbe1bca80ce7190168a695d9
 
J

J

44a54c817a512bfa9caf8eb4f2dc803c
<a href="http://ufficio-cellole.weteronataugi.info/">
ufficio-cellole.weteronataugi.info </a>
http://finanziamento-furlo.dafutirabatu.info/ <a
href="http://lettore-dvd-progressive.samadaleberu.info/">
lettore-dvd-progressive.samadaleberu.info </a>
<a href="http://scegliere-il-materasso.weteronataugi.info/">
scegliere-il-materasso.weteronataugi.info </a>
http://ristorante-particolari.feromonotumi.info/ <a
href="http://girocollo-donna-argento.weteronataugi.info/">
girocollo-donna-argento.weteronataugi.info </a>
<a href="http://camera-ponte-brenta.lietonumudana.info/">
camera-ponte-brenta.lietonumudana.info </a>
http://mezzi-vitello.dafutirabatu.info/ <a
href="http://progetto-interni.olobahataahu.info/">
progetto-interni.olobahataahu.info </a>
<a href="http://atlantic-250.dafutirabatu.info/">
atlantic-250.dafutirabatu.info </a>
http://crisi-petrolifera.feromonotumi.info/ <a
href="http://brioche-al-cioccolato.olobahataahu.info/">
brioche-al-cioccolato.olobahataahu.info </a>
<a href="http://immagini-scooter-elaborati.feromonotumi.info/">
immagini-scooter-elaborati.feromonotumi.info </a>
http://cinema-livorno.lietonumudana.info/ <a
href="http://colonne-sonore-film-tomas-milian-mp3.lietonumudana.info/">
colonne-sonore-film-tomas-milian-mp3.lietonumudana.info </a>
<a href="http://riflessione-and-amicizia.weteronataugi.info/">
riflessione-and-amicizia.weteronataugi.info </a>
http://prestito-lugnano-in-teverina.samadaleberu.info/ <a
href="http://tourism-deiva-marina.siekotofotuchi.info/">
tourism-deiva-marina.siekotofotuchi.info </a>
<a href="http://auto-noleggio-collevecchio.weteronataugi.info/">
auto-noleggio-collevecchio.weteronataugi.info </a>
http://centro-impiego-montepulciano.olobahataahu.info/ <a
href="http://milano-granseola.weteronataugi.info/">
milano-granseola.weteronataugi.info </a>
<a href="http://servizi-internet.feromonotumi.info/">
servizi-internet.feromonotumi.info </a>
http://don-luigi-giussani.siekotofotuchi.info/ <a
href="http://rivigen.lietonumudana.info/"> rivigen.lietonumudana.info </a>
ed805c623406018b276899b16d29100d
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,764
Messages
2,569,567
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top