Learning HTML: top down or bottom up?

In GQ: http://boards.straightdope.com/sdmb/showthread.php?s=&threadid=155884

An interesting little argument started taking place and it seems to me to warrant its own little thread. The question is whether someone who wants to learn to design web pages (non-professionally, of course) should begin with a WYSIWYG editor like Frontpage or if they should start out with nothing more than a text editor and an HTML book.

On one hand, starting from a WYSIWYG helps one understand what HTML does, perhaps what its limitations are, and then one can learn HTML by viewing the source generated and tweaking it for different effects.

On the other, learning HTML can be daunting. Sure, it is just markup, and the syntax couldn’t be any easier. But when you use a WYSIWYG editor, the first pages you build will be pretty complex compared to your raw HTML reading skills (which are nil). In such a situation it seems like we’d be trying to teach someone to read by handing them a Stephen King book and telling them to figure it out themselves.

So what do you think?

My vote: Bottom up.

Bottom up, accompanied by a good book on the subject (or an online step-by-step tutorial). Software may offer a quicker introduction, but as you say the results don’t always resemble anything useful for basing a deeper understanding on.

Bottom up. I am a soi disant HTML expert, and I learned everything I know from unpicking other people’s pages.

WYSIWYG editors tend, on the whole, to suck. The pages they create are fine in some circumstances, but they also tend to insert tons and tons of gibberish, and if you want the page to be even the slightest bit flexible, they can’t do it.

There are some excellent tutorials here.

I second the “Bottom up” vote…

The top-down editors, and especially the “save as HTML” or “save as web page” functions of non-HTML programs such as Microsoft Word and Excel, have a way of adding huge amounts of invisible dreck to their HTML output. They do this to make the HTML look like their non-HTML output, but it bloats the file size incredibly, and causes endless problems if you need to integrate it into an existing site or edit it externally.

Build your first few pages by hand. You won’t regret learning how to do this.

I started with a text editor and an HTML book. Then I graduated to the HTML editor of Netscape. Now I use Dreamweaver.

HTML is the only computer thing I’ve ever done that started off easy, and smoothly increased in complexity and possibility for as long as I wanted to learn it.

A ten-year-old can handle creating the source text of a simple page. That page will always serve perfectly well for disseminating information, which is the purpose of the Web, no matter what fancy new features are invented to dazzle creators and users.

Top down? Buttom up? Not really applicable here.

I agree that you should learn HTML with an editor and a good website or a good book (e.g. Ian Graham’s HTML Sourcebook for example).

[off topic]
Found this when I was looking for Ian Graham’s HTML book on Amazon:

::lol::

[/off topic]

When I first started, I used Netscape Composer to create fairly simple webpages. Then, with a little help from tutorials, I looked at the HTML for those pages and figured out what it was doing. It wasn’t long before I abandoned the WYSIWIG editor altogether and did everything in a text editor. (To be honest, though, nothing I’ve done is overly complicated or visually astounding, mostly because I prefer simplicity.)

I disagree with this part. I can only really learn the limitations via the bottom up approach. If I want to know what a system can or cannot do, I need to look at the lowest level details.

I rec. top-down for people who with very limited needs and no goal of becoming even slightly knowledgable about web page development. If you want to do things right, learn bottom up. But still using web page dev. tools is a-okay. (FrontPage doesn’t count.)

E.g., for the page of Xmas pics I put up for my far off family, I used Netscape Composer. (Which I think I called “Communicator” in one of these threads. Ack.) But then I went thru the html file using a text editor to see if it needed cleaning up. (Just fixed some header stuff.) And I was writing cgi-bin programs by 1994.

For some reason I’m not terribly interested in going back and contributing to the debate I helped start, but…

If you have the time learn HTML first.

If, for whatever reason, you need to get something up now, you don’t really have any choice but to a) hire someone, or b) use a WYSIWYG. And it’s ugly, and harder than it should be, but once you do learn HTML, FrontPage code can be cleaned up.

And for goodness sake, use a real HTML editor (even a freeware one) - suggestions to use notepad are, as I said in the other thread, a bad attempt at humor.

      • Learning how to write a few different kinds of tags is great, because once you do it, you can forget all about it and get on with WYSIWYG editors. Employers like to hear you can write everything by hand if you have to, but they never want you to take the time and actually do it. They look for buzzwords of names of software you know how to use–Dreamweaver, Frontpage, whatever. If you’re doing lots of javascript or other web programming then you have to edit pages by hand anyway, but a good WYSIWYG editor will be able to do just about everything that’s legit in standard HTML anyway.
  • What I have found helps a lot woth using Frontpage/Word docs is to export the word docs using the “compact HTML” filter (-saving the word doc as a web page is not the same thing). This loses some of the word doc’s formatting capabilities, but gets rid of many of the problems Frontpage has when importing word docs directly or as regular “saved as web pages”. Also: I only edit the HTML by hand if it doesn’t show up right in IE. If it works right in Netscape or anything else does not concern my boss, or me.
    ~

As an internet worker, some ask me how to which I don’t hesitate: download the free (200-300 kb - ish) HowTo from http://insights.iwarp.com/.

As for wisiwig, you cannot fault the colour coding and cut n paste qualities of CuteHTML.