HTML? What?
Just starting with HTML? Or don't know quite where to start? Fear not, it's not as bad as it seems. You don't need any special tools or programs, just a keyboard and some information.
What is this HTML stuff?
Hyper Text Mark-up Language is a method of "marking up" a piece of text, in order to tell a browser how to display the text. It can do much more than this, but this is a good starting point.
HTML is a universally-agreed upon standard for the physical display of documents. A group called the WWW Consortium, made up of private companies and public research institutions, decides what features HTML should have and how they should work. Then it's up to companies like Microsoft and Netscape who make web browsers to support those features.
What program do you need to create HTML?
Many computer programs have a proprietary file format, requiring you to use that particular program to work with files: Microsoft Word is needed to open and edit Word files, and Adobe Illustrator is needed to open and work with Illustrator files.
HTML is a little different: as an open standard, there is no single program you need. Any text editor will do the trick. A text editor is any program that can read and write text files, such as TextEdit on the Mac, Notepad on Windows, Pico on Unix; you could also use Word, WordPerfect, or BBEdit (Mac only).
For example, here's a document in TextEdit:
And the same document opened in Notepad on Windows:
And in BBEdit (the only commercial program in this list):
The really great thing about HTML is that I can work in any or all of these programs on the same documents: they're all text editors, so as long as I can work in one, I can work in any of them, as necessity dictates. (You'll notice that BBEdit, the commercial product, is the only one that is colour-coded, because while all the programs will allow you to edit HTML, only BBEdit realizes what you're doing, recognizing the HTML and applying proper syntax colouring to make things a lot easier to read. This is by no means the only reason to cough up for BBEdit, but it's a very very useful feature, if you find yourself becoming more interested in web development.)
Note: if you're using Mac OSX and TextEdit, which you certainly can, you need to set a couple of preferences, like so:
- Make sure that Plain text is selected, not Rich text;
- Make sure that Append ".txt" extension to plain text files is unchecked, because you want to add a ".html" extension, not a ".txt" extension;
- Make sure that Ignore rich text commands in HTML files is checked, because you don't want TextEdit to interpret your tags for you, you want TextEdit to show you your code so you can edit them.
If everything is set up properly, you should see a blank file look like this:
If TextEdit looks like this —
— then re-check the preferences.
What about Dreamweaver, GoLive, and programs like those?
These programs are fine, and have many advantages over text editors, and can make the job of creating a web site a whole lot easier. But for learning HTML and designing for the web, understanding how HTML works and why it works the way it does and what its limitations are will be beneficial in the long run. Using a text editor, too, gives you a power over the web: if you can write HTML by hand, you're not tied to any specific program, and you can create or modify a site from anywhere, using any tool at hand.
The Pleasures of Hand-Coding
John Gruber writes:
Complexity is not new to the digital age. All professional crafts are complex. Web design is no different. HTML and CSS are complex standards, and their complexity is magnified significantly by the various differences and shortcomings of real-world web browsers.
This complexity is not an excuse for professional web designers not to learn HTML and CSS.
Designers, obviously, tend to be visual thinkers. Thus they are drawn to visually-oriented web design applications such as Dreamweaver and GoLive. But Dreamweaver and GoLive are extremely complex applications — in my (possibly biased) opinion, they are in fact more complex than the HTML and CSS languages they are ostensibly designed to simplify. (For example, books about Dreamweaver and GoLive tend to be much thicker than books about HTML and CSS.)
The idea, of course, is that designers are accustomed to visual design applications like QuarkXPress, Photoshop, FreeHand, and Illustrator. But the difference is that in print design, the output of design applications — usually Postscript — is a means to an end, not the end itself. When you create a print design project, the finished product is ink on paper. It doesn't matter how many layers you used in your Photoshop images, or whether you set up proper style sheets in Quark — if the end result looks good, you can reasonably claim to have done a good job.
In web design, however, the end result is the markup itself. The final presentation of the markup is out of your hands. It is thus a misnomer to describe Dreamweaver and GoLive as "WYSIWYG" applications. What you see is what you get implies that you have complete control over the final presentation of your project. In print, this is possible. On the web, this is impossible.
It is true that learning to use Dreamweaver or GoLive is similar to learning to use Photoshop or Quark. Learning to hand-code HTML and CSS is very different, and thus, for many designers, intimidating.
Many designers also have the misconception that hand-coders perform visual design by typing out code — that starting with nothing more than an empty text editor window, they crank out stylish web pages. No wonder many designers are intimidated by hand coding — but it's just not true. Hand-coding web designers design visually — they just don't expect their visual tools to generate production-quality markup code. An architect draws extensive sketches first, before producing actual blueprints. So too with web designers.
So how does HTML work, then?
HTML is no different from any other text file, but it's important to know what a text file is. By technical definition, "text" is a file with no formatting, no font selection, no bold, no italic, nothing fancy: raw text only. Text files don't look like much, but the simplicity of them works to make them easily transportable: many different programs can open and edit text files, like this one. But as soon as the file is renamed from "text.txt" to "text.html", the browser formats the page a little differently, so now it looks like this. Once the document has been named as an HTML document, formatting features can be added. HTML uses "tags" to give structure to text, and give it a visual form.
Tags? What are those?
Tags use the less-than and greater than symbols (< & >) symbols to mark up text; some tags are quite simple (<b>, for example, will make a block of text BOLD), while others can be more complex (<img>, for placing images, can contain a number of arguments or parameters, such as height, width, and src, which points to a particular file.
Let's add a simple bold tag, in the form of <b>, to our text document, and look at it again. It looks something like this:
Now, let's look at the exact same file, just renamed again from ".txt" to ".html". Now it looks like this:
Tags are what make HTML work: they tell the browser how to display the text, and include any images, and format the document on screen.
Is it necessary to memorize all these?
No, of course not. You just need to know how to find them, or have a general idea of how they work. Sooner or later, though, you'll find that it becomes easier and easier to just write it.
