HTML Crash Course

If you use a PC, go download Textpad.
If you use a Mac, go download TextWrangler.

Why? They are great text editors for HTML. You can use Wordpad, too, but the two above are made for HTML and will color things to make it easier to spot problems. Do not use MS Word; it likes to turn things into html by itself, and the code it generates will be messy.

Textpad is shareware, which means you can try it out for free, and then choose to pay them for it or just keep skipping past the message that requests you do so and continue using it for free. TextWrangler is free.

Once you have your text editor, set up a folder where you will store your site. For ease of reference here, you could name it "website". Inside that folder, make another one called "images". This is where you will put all images for your site.

Open your text editor and make a new document. Copy and paste this into it:


<head><title>My Web Page</title></head>


<p>Hello, world!</p>



Now save the file in your "website" folder. Name it "index.html", or, if you're on a PC, "index.htm", and save it in text format if there's a choice (I don't remember with Textpad - been a while since I used it). Even though it's in text format (.txt), still give it the .htm or .html extension.

Open a web browser. Find your index.html file and drag its icon into the browser window and see what you made.

Breakdown of tags:

Tells the browser that the info to be displayed as a webpage is between these two tags.

All kinds of info can go in the "head", but I don't use most of it.

<title></title> Always goes inside the head tags, and this is what's displayed at the very top of your browser window. It's also what gets stored as the name when someone bookmarks that page, so it's kind of important.

Is where the visible content of the page goes.

Is for "paragraph". You can do it again under that one and get another paragraph. If you just want a forced line break without a skipped line, use <br>. The <br> tag is one of the ones that stands by itself - it doesn't need a closing tag. There is no "</br>".

The "/" denotes an end to that specification.

So play with that. You can use these tags to affect the appearance of text:

<b></b> Bold
<i></i> Italic
<u></u> Underline

Browse my Plantbonz site - go to a page, then go to "View / Source", and that will display my HTML. I've probably given you enough here that you understand the concept well enough to follow my code, match it to my page, and see how I do things.

By the way, "index.html" is a special name that means something to web servers and browsers - that is the file that will be displayed by default when someone goes to the folder it resides in. With any other file, they'd have to type that part of the name in, too. For instance, you only have to type "", and the browser looks in that folder for the file called "index.html". It won't automatically look for any other file name.