The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
Please vote in the Forum Structure Poll. Polling will close at 2PM EST on January 21, 2025.
How to teach HTML
Stuf
Registered User regular
Registered User regular
Alright, so, I'm not looking for a HOW TO guide on HTML, but more specifically, in what order you might go about teaching it.
I'm asking here because I imagine most people have some experience with the language, and possibly some positive experiences they can share, or some things to avoid, or definite thing to mention which might normally be avoided.
Thanks in advance.
I'm asking here because I imagine most people have some experience with the language, and possibly some positive experiences they can share, or some things to avoid, or definite thing to mention which might normally be avoided.
Thanks in advance.
“There are... things which a man is afraid to tell even to himself, and every decent man has a number of such things stored away in his mind.†-Fyodor Dostoevsky
Stuf on
0
Posts
This is simple but good advice. Not because professionals write in notepad, but because it's the best way to learn. Personally, I wouldn't recommend notepad itself, but the idea stands. A plain text editor with syntax highlighting is all you need. On the windows side I recommend notepad++, on the mac side I recommend textWrangler. Eventually, something like CSSEdit (Mac) can be very useful for creating CSS files. Haven't found an equivalent for Windows, honestly.
Only if you want to piss off your students and sour them to the whole thing.
Get Eclipse or some other sort of editor that is prepared to handle markup languages.
Here are key points for teaching HTML, in my opinion
1) Define that it is not a programming language. Define what a markup language is, and why they exist.
2) Talk about the origins of HTML and how it was originally used (university document storage, etc).
3) Distinguish between HTML and Javascript. Especially pointing out that "DHTML" is not some magical version of the language.
4) Give actual examples of what bad markup and poorly formed documents can do. It's not enough to say "hey, don't do that". Because as soon as they do it and hit on that 50% chance of it actually working how they thought it would, they will stop listening to you.
5) DOCTYPES. make this the first and last question on the final exam.
That's all I can think of for now.
we also talk about other random shit and clown upon each other
I've used Eclipse for C and Java, but not HTML - how does it differ from syntax aware text editors?
Edit: Basically, I was advocating for non-WYSIWYG editors in general, not necessarily an iron-fisted NOTEPAD, MORTALS approach. I use Zend, but that's primarily because of all the PHP involved in my projects. I don't think new-to-html learners should be bogged down with "project files" and the intricacies of the dev environment prior to making their first page.
Or you can just pick up one of a billion plugins with XML/HTML support.
we also talk about other random shit and clown upon each other
I would start by quickly running through all the basic tags, then get right into CSS. I wouldn't start people (students?) off with programming theory because it'll be hard for them to absorb and they won't understand the reasoning for it.
that's why we call it the struggle, you're supposed to sweat
It supports the following highlighting, and a portable package, I use it at work all the time. Tabbed files, etc... basically the best thing since sliced bread:
Spoiled for ginormus:
Languages Supported in Crimson Editor
Version 3.70 Release (Sep. 22, 2004)
- Maxima CAS (thanks to : Andrej)
- Microsoft Windows LOGO (thanks to : Petr Kohutek)
- TeraTerm Macro (thanks to : Trevor O'Grady)
- IDL (Interactive Data Language by RSI) (thanks to : SungWon)
- Dynamic C (thanks to : Thomas Monjalon)
- dsPIC Assembly (thanks to : Fiorenzo D. Ramaglia)
- Virtools Script (thanks to : Axel Scheiwe)
- Text Adventure Development System (TADS) (thanks to : A Ninny)
- Aeroflex RadHard 69R000 Assembly (thanks to : Ely Soto)
- Allegro/APD SKILL (thanks to : Jack Rabbit)
- Octave Language (thanks to : Alexandre M. Pinto)
- TEA Language (thanks to : Ricardo Marques)
- Abstract Syntax Notation One (ASN.1) (thanks to : Caio Bruchert)
- Windows Resource Script (thanks to : M-Knight)
- MIDL (Microsoft Interface Definition Language) (thanks to : M-Knight)
- MS T/SQL (thanks to : Stephen Mills)
- Objective-C (thanks to : JC Benoit)
- DirectX FX, DirectX Mesh (thanks to : Malmer)
- TLC (Target Language Compiler) (thanks to : James)
- CHILL (CCITT High Level Language) (thanks to : Fabio Luiz Approbato)
- TMS320C6X-ASM (thanks to : Kyungseop Jang)
- VRML (thanks to : Anja Le Blanc)
- POV-RAY (thanks to : Kasper Christensen)
- POD (Plain Old Documentation) (thanks to : Hans Oesterholt-Dijkema)
- ADMB (AD Model Builder) (thanks to : Carolina V. Minte-Vera)
- Maple (thanks to : Jonathan Juniman)
- MATRIXx - MathScript, TPL (thanks to : Carl Ljungholm)
- Citect Cicode (thanks to : Peter Disiot)
- RTPI (Real Time Production Intelligence software from ABB) (thanks to : Manuel)
Version 3.60 Release (Feb. 09, 2004)
- AutoLISP (thanks to : Michael Lees)
- Escapade (thanks to : jShadow)
- VXML (thanks to : Franck)
- AMADA Punch (thanks to : Samuele Pasqualini)
- D Language (thanks to : Srecko Howard)
- SilkPerformer (thanks to : Bjarne Dein)
- FlexPDE (thanks to : Mohammad Rahmani)
- Ch Language (thanks to : Stephen)
- Unreal Script (thanks to : Devlyn Napoli)
- MV-BASIC (thanks to : Algorithm Technologies)
- PostScript (thanks to : Matthew Iskra)
- Inform (thanks to : Paolo Lucchesi)
- Lingo (thanks to : Vixtor Ventura)
- InstallShield (thanks to : Danny Liang)
- Informix-4gl (thanks to : Craig Rettig)
- Progress-4gl (thanks to : Dave Boechler)
- xsl + xpath (thanks to : Brock Filer)
- DTML (thanks to : Guy Bruneau)
- MEL(Maya Embeded Language) (thanks to : Ren-Wei Yang)
- Teradata SQL (thanks to : kec)
- APIC GIS (thanks to : Gilles BERETA)
- PIC Assembly (thanks to : Josef Planeta)
- XML Schema (thanks to : Jens Goedeke)
- JAL(Just Another Language) (thanks to : Ali Erhan Aydemir)
- Apache Configuration (thanks to : Trevol)
- RWX Language (thanks to : Dersaidin)
- SIOD Language (thanks to : RobC)
- WinRunner / TSL (thanks to : Marc Koper)
- MetaPost (thanks to : Damiano)
- MDX Language (thanks to : Marco)
- PSL(Patrol Scripting Language) (thanks to : Craig)
- 8051 Assembler (thanks to : Giacomo)
- 68000 Assembler (thanks to : Chang Soo Jang)
- PDMS PML (thanks to : sypark)
- CSL(C Scripting Language) (thanks to : drbrutalo)
- X86 Assembly (thanks to : Stephan Naro)
- FiveWin (thanks to : Rochinha)
- Altera TDF (thanks to : Gabriel Drenger)
Version 3.50 Release (Jun. 03, 2003)
- Ruby (thanks to : JcSO)
- METAFONT (thanks to : Christophe Grandsire)
- MatrixX (thanks to : Daniel Brohede)
- Microsoft High Level Shader (thanks to : Jeff Hanna)
- OpenGL ARB vertex program (thanks to : Grisha)
- Modula-2 (thanks to : Nicolas Conde)
- Hypertext Preprocessor (HTP) (thanks to : tom)
- Reliable Transaction Engine (RTE) (thanks to : ILLICOM)
- R/SPLUS, SAS, SPSS & STATA (thanks to : Yong)
- Limbo (thanks to : JC)
- awk (thanks to : Luca Preziosi)
- MySQL (thanks to : Kentaur)
- ActionScript MX (thanks to : Vcitor)
- jBASE/PICK (thanks to : Rick)
- HTML Tidy config files (thanks to : Paul White)
- RapidQ Basic (thanks to : Petijumo & IDBsoft)
- Cisco config files (thanks to : mgb)
- Renderman shaders (thanks to : Agi)
- REBOL (thanks to : ShadWolf)
- mIRC (thanks to : MDGrein)
- Small (thanks to : Tiago Moreira)
- MicroStation MDL (thanks to : Chris Iverson)
- Philips HDL (thanks to : Dave Eckersley)
- AMPL (thanks to : Stuart)
- FASM (thanks to : James)
- XSL/XSLT (thanks to : John Roland)
- ZMAC (Z80 Assembler) (thanks to : CSKi & Esperanto)
- OpenROAD (thanks to : Matt Budd)
- Gui4Cli (thanks to : daonlyfreez)
- FORTRAN 90/95 (thanks to : Francesco)
- Visual DataFlex (thanks to : Joel)
- AutoIt, Pawl, DOS Batch (thanks to : daonlyfreez & Iain Cheyne)
- WML (thanks to : EP)
- Tivoli TEC (thanks to : Wade)
- OSDD (ME10) Macro Language (thanks to : mihau)
- COBOL (thanks to : Joey & Olav)
- Lua (thanks to : Walter Souto)
- XUL (thanks to : Yuri Pyuro)
- LotusScript (thanks to : Julian Robichaux)
- Mitsubishi MCUs (thanks to : Cefas Cheong)
- Haskell (thanks to : Jukka Rosendahl)
- Eiffel (thanks to : Nev)
- nVidia Cg (C for Graphics) (thanks to : Jeff Hanna)
- ZZT (thanks to : Darcy Laycock)
Version 3.45 R2 (Aug. 26, 2002)
- ABAP/4 (thanks to : Kevin)
- ANSYS APDL (thanks to : Marek Bartoszek)
- Visual Basic 6.0 (thanks to : Rex W. Heagy)
- Windows INI & BATCH files (thanks to : Alex)
- CLIPPER (thanks to : Genario Maciel)
- ColdFusion (thanks to : Eryk Vogelgesang)
- C# (thanks to : Ben Hinton)
- DMIS (thanks to : Rex W. Heagy)
- DOORS DXL (thanks to : Ron Lewis)
- FORM (thanks to : Mauro)
- FORTRAN 77 (thanks to : Steven Rankine)
- KixTart (thanks to : Max Grant & Claus nielsen)
- Korn Shell Script (thanks to : Wade)
- LC2 Assembly Language (thanks to : J Hamblen)
- LISP (thanks to : BlitzCraig)
- Maki Script (thanks to : A. Cassidy Napoli)
- MAX Script (thanks to : Jeff Hanna)
- NASM Assembly (thanks to : Jed Smith)
- NullSoft NSIS Script (thanks to : Claudio Tranchina)
- Pure Basic (thanks to : Kevin Bell)
- Object Rexx (thanks to : Luiz Claudio)
- Scilab (thanks to : matti)
- VBScript (thanks to : Ben Ward)
Version 3.40 (Dec. 25, 2001)
- HLA (thanks to: seggie)
- Winbatch (thanks to: Kevin Bell)
- OCaml (thanks to: Craig J. Anderson)
- GNU-style x86 Assembly (thanks to: Fried)
- JScript (thanks to: vsv)
- PeopleSoft SQR (thanks to: Andy Fugate)
- Ada 83 (thanks to: frederic.frances)
- MIPS (thanks to: J Hamblen)
- BAAN (thanks to: Lluis Hernandez)
Version 3.32 (Oct. 31, 2001)
- TCL (thanks to: david)
Version 3.31 (Oct. 25, 2001)
- Delphi (thanks to: Rogerio Jacques)
- Python (thanks to: Geert van Boven)
- Euphoria (thanks to: Giovanni Salmeri)
- Bash shell script (thanks to: A Childs)
Version 3.25 (Aug. 30, 2001)
- CSS (thanks to: Chang-woo Yang)
- SQL (thanks to: Maicon F. Santos)
Version 3.20 (Jun. 25, 2001)
- ASP, PHP, JSP
- EDIF, VHDL, Verilog-HDL (thanks to: Chang-woo Yang)
Version 2.21 (Jul. 12, 1999)
- HTML, C/C++, Perl, Java, Matlab, LaTeX
Basically, yeah, find a text editor with syntax highlighting. Any additional in-app file management and stuff is extra win.
Also, seriously, everything Jasconius said, with the addition of:
Don't spend too long on the history of mark up languages. He probably isn't going to need to use TeX any time soon and just as forcing him to use vanilla notepad will sour him quickly, taking too long to get to the basic 'web design' stuff (which I presume is the ultimate goal here) will also sour him. Intro to markup languages, cover the basic tags of HTML markup then move reasonably swiftly on to CSS. The sooner this happens the sooner he can start learning about the separation of content and style, semantic markup etc. which is crucial stuff if he wants to be employable.
This is all I was getting at. Use the most basic tools and simple concepts at first. HTML is easy so complicated stuff like frontpage/dreamweaver should come much later.
Meh. You generally don't show someone how to change a car's oil with an oil change pump first.
Generally what you should do is let them use a WYSIWYG editor for a week or two then switch to teaching them the raw HTML to teach them how to fix/edit/create properly. Depending on the students. If you're teaching a whole bunch of multimedia kids you probably should just stick to the WYSIWYG editor, and if you're teaching programmers you should stick to notepad.
No way. I tried to use Dreamweaver once. I come from a graphics background. InDesign, Quark, Illustrator, Freehand, Photoshop, whatever, I'm comfortable in those environments. Dreamweaver? Forget about it. Completely counter-intuitive nightmare. Almost made me give up on web design. Then I picked up an XHTML/CSS book, downloaded PSPad and never looked back. Mark up and CSS is so simple in comparison to Dreamweaver.
Anyone who is not retarded will figure out well-formedness.
It's not the concept of well-formedness that people can't understand.
It's an improper demonstration of the ramifications of making the mistakes that causes problems. Which dovetails into the appropriate use of DOCTYPE.
we also talk about other random shit and clown upon each other
XBL Michael Spencer || Wii 6007 6812 1605 7315 || PSN MichaelSpencerJr || Steam Michael_Spencer || Ham NOØK
QRZ || My last known GPS coordinates: FindU or APRS.fi (Car antenna feed line busted -- no ham radio for me X__X )
Maybe it's because I'm a programmer guy, but I feel exactly the same way. Ages ago when the first wysiwyg html editors were coming out, I tried them for a while, but it just didn't make sense. Raw HTML is simple and just makes sense.
<div> </div> is a container? Okay. Just wrap <b> around something to make it bold? Cool.
Compared to programming html is simple, and anyone who can write a post on this board can understand it.
CSS is slightly more complicated, but seriously, outside of IE-ridiculousness and stuff, most properties are not complicated. Margin and padding do basically exactly what you'd expect after a 10 second explanation. Positioning stuff is probably about as complicated as it gets (and it can, admittedly get pretty complicated).
When I picked up the CSS reset, many lightbulbs popped into my head as to the nature of browsers and CSS itself.
we also talk about other random shit and clown upon each other
Notepad++ is fantastic.
Except for anything not named CSS or HTML. w3schools is an okay resource for hobbyists. Anyone looking to do it for real should look elsewhere.
To the OP, I'm curious about a few things:
1. Who is this course aimed towards?
2. How much time will you have? A week? A month? A semester?
3. Are you looking to just teach HTML, or beginning web development?
I ask because HTML, in and of itself, takes only a few hours to learn. Once you learn how to properly write the code (which won't be difficult for anyone used to BBCode), you're essentially done. You could memorize various tags, but, really, what's the point? So long as the students know the old stand-by's, like div, span, p, and the anchor, they'll be essentially set. Tables and forms take slightly longer, but aren't difficult to explain at all.
If you decide to teach CSS, emphasize positioning and the box model. I was screwed up for about a year because my professor never described the box model. It fucks with positioning if you don't understand it.
If you decide to teach JavaScript, stay far away from w3schools. They don't teach nearly enough to give newbies a clear idea of how the language works. A good chunk of JS errors and problems I address on PHP Freaks are due to w3schools being absolute shit in that regard.
we also talk about other random shit and clown upon each other
Once they understand how to make an effective visual presentation, teach them how to execute their design using HTML. Knowing HTML on its own is like knowing C syntax without having any idea of how program flow works or how to write an algorithm. It's a waste of time.
CUZ THERE'S SOMETHING IN THE MIDDLE AND IT'S GIVING ME A RASH