Creating a Web Page II : Learning HTML
Created | Updated Sep 15, 2002
Previous entries in the "Creating a Web Page" series:
Since this is an HTML tutorial, this assumes that you are using either a text editor or are using the “edit source” feature of a WYSIWYG1 editor. This means that you will have to write the HTML yourself. Don't be scared- it won't "byte"2...
Getting Started
HTML is written in "tags". A "tag" is a command to the browser for how to display something. Tags usually (but not always) come in pairs: one that turns on the command, and one that turns it off. Whatever you want to display is in between the two. The very first tag we'll need then, is the one that tells the browser where the HTML starts:
<HTML>then you've got all the other junk in your page, and at the very end:
</HTML>tells the browser that it's reached the end of the HTML in that file.
An important concept in writing HTML is "nesting". Tags can fit inside each other; they have to since all other tags must be able to fit within the HTML tags. When you nest tags, you have to be sure that for every "on" there is an "off" (if an "off" is available), and that they are in the correct order:
<tag1><tag2><tag3>
yackety-yak </tag3></tag2></tag1>
You see how they have to be turned off in the opposite order that they were turned on? If the order gets mixed up, the browser gets confused and doesn't turn off a feature when it should so your entire page will end up in italics, for example. This will be come clearer in a second as we add in some more tags:
<HTML>
<HEAD>
<TITLE>Welcome to my web page!</TITLE>
</HEAD>
<BODY>
Check here for more stuff coming soon.
</BODY>
</HTML>
Notice how "TITLE" was closed before I closed "HEAD". "TITLE" in this case is what shows up at the top of the browser window, it does not show up on the page itself. That's why the "TITLE" tag is nested in the "HEAD" tag. Whatever is within the "BODY" tag is what will actually show up on the page.
Anything that is within the < and > will not be displayed on the page since the browser will assume it's HTML. So how did those signs appear in the example? You have to tell the browser specifically that you want the symbols and that they are not part of the HTML for the page. The HTML you would use to make those symbols appear is:
< for a "<"and
> for a ">"
And yes, there was also a number code used to make the ampersand visible in the example. How do you find out what the number codes are for all the various symbols?
There are two ways you can find out the number codes, and this is a good opportunity to teach you a handy feature of your browser. Whenever you see something interesting in a page and wonder how they did it, in most cases you can look at the HTML for that page. Put your mouse over this page. PC users: right click on your mouse. A menu will appear. Click on "View page source". Mac users: go to the view menu, then select "View source". The little clump of junk before the HTML tag is the code you need to create a <. You can also get all the codes for symbols and punctuation from Visibone.
- III: Text
- IV: Links
- V: Formatting Text and Lists
- VI: Tables
- VII: Colours
- VII.5: Images
- VIII: Sound
- IX: Promoting Your Website
- X: Design Tips
