Heather Lee's

HTML Lesson 4

Breaking it down

I know, I know "eeeeek" does come to mind, but I haven't really complicated things all that much. I have, however, added two important parts of a well made page, and two more very useful tags. If you want to make sure that your page is correct it should look something like this example.

Lets take it from the top, lol. I have explained that tags are built up in a structure rather similar to a fridge, yet I'm sure you noticed when you typed this in, that there was a container sitting on top of our virtual fridge. There is one tag that needs to sit on top of the fridge, maybe its our loaf of bread or something...

It does look rather like gobbledegook doesn't it? Although it doesn't make much sense to us, the above line of code is very important. Not all HTML is the same. Just like all other kinds of computer technologies HTML is constantly evolving. That line of code is called a Doctype*, it tells the browser or anyone looking at your code what version of HTML you are using and where the specifications for that version are available. For now we will try to stay within HTML 4.01 strict specifications, so you can get away with just typing that into the top of every page.

Shall we take a look at the second piece of gobbledegook? It looks kind of weird too, but its also very very important. Have you ever notice that if you stumble onto a web site written in another language your browser wants to install a new "character set"? That is because the symbols used in each language are different... they use different characters to communicate and therefore have different keys on their keyboards. That line of code just explains the the browser which character set you have used to create the page. Its another bit of code that you can get away with just typing into each new page for now.

That line of information is also called a meta tag. Meta tags can be used to indicate character sets, keywords**, the page author, or even the page description. The page description is the second way you used the meta tag in your second web page. Do you see how they both start out with meta? The parts that come after that are called attributes, the same way that href="..." is and attribute of the a tag. The name="" attribute of that second meta tag tells the browser what type of meta tag it is, here its a description. The content="" holds the actual meat of the tag, the description of your web site in this case.

Now that we have that out of the way, lets look at something a bit more fun. At least it is to me... The importance of good written content can never be over emphasized, but images can add a lot of interest to your page. In cases like online art galleries they become extremely important. The basic code to include an image is: <img src="imagepath/name">. Where "imagepath" is the location of the image (in your case a directory called image) and "name" is the name of the image and its extension (in your case elf.gif). I'm sure if you take a look at the code, you can now see that img is the tag type and src="" is an attribute of the image tag that tells the browser where to look for the image. There are several important things to think about when including images so I will cover them in another lesson.

The last new bit on your page is another structural element, a list. There are several different types of list which i will list later, but for now lets look at the one on your site. It is called an unordered list, meaning that the items have a bullet in front of them rather than a letter or number. This sort of list works well where the items are of similar importance and in no particular order. <ul> indicates the start of the list, each item on the list is contained inside <li> and </li> tags, and then the list is closed with the </ul> tag. On the page you just made, you simply placed link tags inside of the list tags but you can use lists for anything you want to organize into that format.

On to Lesson 5

*Once you start building your own page, you will need to decide which version of HTML you are going to use, and then find the appropriet doctype. There is a list of doctype resouces in the lesson links.

**Meta tags where at one point far more important than they are now in determining the keywords to index pages in search engines. They were also very easy to abuse, since the page author could place information in them that was truly not relevant to the site in question. Search engines now place more importance on the textual contents of your page, rather then the specified keywords, but meta tags are still very useful to the page author. You can, for example, set up an internal search engine (one that only looks through your page) that will read the keywords you specify.