brianashe.com/linux

Brian's 20-minute intro to HTML

HTML stands for HyperText Markup Language. (By the way, Federal law requires that every HTML tutorial begin with that declaration.) So, what exactly does hypertext markup language mean? Don't worry about that right now. What you do need to know right now is that HTML is plain text. You can create HTML with just about any application that lets you type, but it might take more work than you're used to to save it as plain text. When you type something with a word processor, it usually (by default) gets saved in a special format that preserves settings like bold and italic text, various fonts, margins, etc. In addition to the words you typed, there is a lot of other information in the file (hidden to you) that holds all this extra information. "Plain text" is just what it sounds like: there is only one font, in one size, with no fancy stuff included. A plain text file can be read with just about any type of computer anywhere in the world, as opposed to a Word document, which needs special software (Word, a Word-compatible word processor, a web-browser plug-in, etc.) to view the contents of the file.

So, if you just open Word or WordPerfect or WordPad, type, and save the document, you probably won't get a document that can be read by a web browser. You'll need to click the menu where it says "Save as type:" and choose "plain text" from the list. Different programs on different operating systems will, of course, have different methods of generating plain text from what I just described, but I can't cover everything. The point is this: you might have to dig around to make a document plain text. A list of the most common text editors for the most common operating systems is in Appendix 1 at the bottom of the page.

OK, you've got the text editor of your choice open and you have poked around enough to create a plain text file. Type something (your name, asdf, anything) into a blank document and save it as "test.html" on your desktop. (You don't need to close the window you're typing in. In fact, it's best not to. If you save a text document as HTML and close it, it might open in your web browser, not your text editor, if you double-click on it.) Now, launch your web browser of choice, go to the file menu, choose open, and try to open the test.html document you just put onto your desktop. If you see in your browser window what you just typed into your text editor, congratulations, you're on your way. If not, go find help. Seriously. Nothing else here will work if you can't do this much, but there are too many things that can go wrong at this stage for me to list them all. Maybe your text editor is secretly adding ".txt" after the filename, maybe your computer has more than one desktop, could be lots of things.

(What just happened? Well, I'm sure you're used to using your web browser to look at documents on the Internet. Well, all a web browser is is a program that interprets and displays HTML pages. Usually, it gets these pages from the Internet, but it can show you any HTML document you ask it to, whether it's on the Internet, on your hard drive, on a floppy disk, CD-ROM, etc.)

OK, go back to that test.html document you were just working on. (This is how we'll work from here on out: you'll leave your text editor and web browser open. You'll make changes in your text editor, save it, switch to your web browser, hit "reload" or "refresh", and see the changes you just made. Then, you'll go back to your text editor, make more changes, etc. etc. etc.) Just so we're all on the same page, erase whatever you just wrote and type in your first and last name. (Madonna, if you're reading this, contact me personally for help.) Now save, go to your browser, and reload. Do you see your name up there? Great. Go back to your text editor and put before your first name and after your first name, like this:
Joe Smith
Now go back to your browser and reload the page. You should see your first name bolded, like this:
Joe Smith
Is it still working? Great. Now do the same thing, except this time put and around your last name, like this:
Joe Smith
And you should wind up with a bold first name and an italicized last name, like so:
Joe Smith
Pat yourself on the back: you've just written your first HTML, and you've learned how to compose and view HTML documents. We're off to a good start.

Appendix 1: Text Editors

Windows 3.x, 9x, ME, 2000, XP: Use Notepad. For now, don't use FrontPage or Word.
Mac OS 7.x-9.x: Use SimpleText or download BBEdit.
Mac OS X: Use TextEdit. TextEdit won't let you save as plain text unless you go to the Format menu and choose Make Plain Text. Or, download BBEdit.
Linux/UNIX: There are more text editors for UNIX and Linux than most other operating systems have programs. pico is a very friendly, easy-to-use editor that comes with most RedHat-based distributions, vi is available on almost every UNIX and Linux system ever made, joe or ae are usually found on those rare systems that don't have any of the above, and I'm required by law to mention emacs in any document about text editors. Of those 5, the only one that can (somewhat) be understood with no outside help is PICO. If you are using Linux or UNIX, hopefully you've got someone to show you around.

[Brian Ashe's home page] [brianashe.com/linux]