My son has decided he wants to learn to write HTML - He’s 9, but I’m sure this is well within his grasp, as he’s quite technically-minded.
My plan is to do it from scratch - using Notepad - at least to begin with - and show him a few of the basics - after which we can look at some WYSIWYG editors and the code they output, comparing it to our own.
I plan to introduce the concept of opening and closing tags by fictional analogy - when you enter a room, you turn on the light, then you turn it off as you leave - so if there was a tag for that, it would be:
<light>
do stuff in the room
</light>
Does this seem a reasonable plan? Anyone got any other tips?
I taught HTML to high-schoolers by comparing the tag struture to a sandwich:
<bread>
meat
</bread>
I said that the bread provides structure to the sandwich, but the “good stuff” was in the middle. And making a sandwich with only one slice of bread left you with a mess. Then, I said an HTML file is like a sandwich containing smaller sandwiches.
I believe you’re overthinking things slightly. The point of my analogy is that each starting tag has to have a closing tag, and that the tags’ content was to be placed between them.
Once they grasped this, I presented them with a basic HTML file and had them open it with their browsers. When they saw how the tag structure places text and images to the screen, they figured out the purpose of the tags (formatting) pretty quickly.
I do agree with you about holding off on WYSIWYG but there are other options besides Notepad. I would start out with something that at least has syntax highlighting – TextPad for example.
I might move on to something with syntax highlighting, but I wanted to start out with notepad to emphasise that HTML is just plain, ordinary text that gets interpreted by the browser.
I’m not averse to WYSIWYG editors, BTW (although I only recently weaned myself off them for my own site) - I think I’d still favour a WYSIWYG environment for, say, building a complex table - if I had need of such a thing.
Does he need analogies? The techniques are very straightforward, and far less incomprehensible than most programming languages. The technical reasons behind it are clear. This may be a good opportunity to talk about things like unplanned obsolecence as well. Remind him of his favorite video game on the previous computer, the one which doesn’t work anymore. HTML, and all markup languages really, came about because of the fight with unplanned obsolecence. One time a bunch of guys got tired of not being able to use their old stuff on their new computers, so they made up a new language which would preserve the plain text, even if the computers upgraded and no longer knew how to interpret the encoding. They could still print out their documents and get the real text even if things weren’t prettily formatted [sub]anymore[/sub]. This very post is an example of the properties of a markup language(including vbcode). If you choose “reply with quote”, or copy-paste into notepad, you can see the actual text under the gobbledegook there.
I’d think a sharp nine year old wouldn’t have a problem with the same explanation you’d give an adult. When I was nine I was programming menu interfaces for the family PC using batch files. Give him the real stuff, he’ll probably do fine and may appreciate being treated like an adult on this topic.
Also, rember there are numerous tags in HTML which do not require pairs. The paragraph tag, <P>, is the most obvious example, but there are others.
I agree with sugar and spice. There’s no reason to start out just with Notepad. I started out with Notepad and now I rock at HTML and still prefer color-coded text editors. You don’t need to use any built-in features from your editor…just the color coding. Just point out to your son that the editor is used to edit the files, the files are on your hard drive, and you still need to use FTP to get them to the server (meaning, don’t use the built-in FTP client if there is one).
Don’t turn to WYSIWYG for complex table editing, either. Tables are a fantastic thing to learn in HTML and a great teaching tool. Open a table, open a row, open a cell, close a cell, close a row, close a table. Doesn’t look right? Turn on borders. If your code is messy (not tabbed properly), it’ll be harder to find errors. Table code can then help your son with the transition into XML and/or database structure. Knowing how tables work even helps me with asp.net.
Two of the most brilliant coders I know (where code != HTML) don’t know how to do tables very well and it makes me sad. Even with CSS, they are needed. They need to be learned, and learned by hand. If you learn everything about HTML but always need some sort of wizard to make tables for you, you haven’t learned HTML very well.
I think Mangetout is referring to very complex tables, which are about the only thing I use WYSIWYG editors for these days. When you start getting into multiple rowspans and colspans, adding/removing/altering anything in that table is a friggin’ nightmare if you want to do it properly. It’s much easier and faster to do it in a WYSIWYG editor than a text editor, turning on borders, refreshing the browser and looking for mistakes.
I would just start off at the top of the document and work my way down. Forget the meta data and doctypes at first, just start with the <html>, <title>, and <body> tags and work your way down. The <h1> - <h6> tags are particularly important and easy to grasp, and of course the <p> tags.
Also, anytime you can, tell him what the HTML stands for. <ol>, <ul>, and <li> are a piece of cake to remember once you know what they stand for, but are are kind of difficult to grasp if they just look like random characters.
Yes, that’s what I meant - I can do it longhand, it’s just easier to do graphically in some complex cases (and there’s nothing wrong with that - graphical editors have their place - to shun them completely is just snobbery)
We actually started with a line of plain text - Firefox doesn’t care if it’s inside <html> and <body> tags - as long as the extension is .html, it will open and render it.
So we made one word bold, then another italic, then I asked him what would happen if we moved the </i> tag to the end of the sentence - he grasped it straight away. Tags with parameters (like images and link anchors) were a bit more tricky, but by the end of today’s session, he had a page with different fonts, sizes, styles and colours (having to spell it ‘color’ was an interesting point), links, images and even an embedded video.
I did introduce him to the <html>, <head> and <body> tags at the end, and we added a title. Not bad - and he understands it quite well so far, I think. he was disappointed at how dull it is to code in text, at first.
Yeah, I know - it’s tricky - I mean, the right way to do it would be not to use the <font> tag either, but to do it in CSS, but you can’t just plunge straight into that, I think - at least not at this level.