Heather Lee's
HTML Lesson 6
An Example, and some Common Mistakes
First of all, here is an example of a page that uses all those tags. Its a fairly basic site with very little content, but it does demonstrate the use of image related and structural tags. There are headings, paragraphs, lists, graphics, links, strong text, emphasized text, and of course meta tags. Here are a few problems you may have run into and their solutions:
An image did not show up! - I had more weird problems with this that would seem likely. The most common causes where having the wrong extension (all the images we have used for this are .gif), the wrong path (your images should all be in the directory images/), and incorrect capitalization of the file name. For the most part the simplest solution to this is to use lower case for tags and file names, also in xhtml all tags must be in lower case.
Everything is written in bold, or underlined like a link! - This happens when you fail to close a tag, or you spell one of the tags incorrectly. The browser assumes that you know what your talking about, so if you open the tag as <strong> and then close it as </stong> the browser figures you where just closing a different tag. Also make sure that the closing tag has the "/" character or the browser will simply assume you opened another tag.
My link brings up an error message! - This most often happens when the full url is not given in the href="" part of the tag. Make sure it starts off with http://. The easiest way to get correct links is to actually go to the page and then copy the address out of the address bar of your browser.
The whole page just looks weird! - Sometimes you can look at your page and see that there is something strange about it, but you can't really see what it is. There are a few small things that can cause a lot of display errors and they are often hard to spot. First check that all values to your tag attributes are enclosed in double quotes; for example, a href="http://emrldempress.artshost.com" in a link tag, or alt="Red Dragon" in an image tag. Also look for spelling errors in tags, and make sure all tags are properly opened and closed in the correct order.
Tags, Attributes, and Things to Remember...
The meta tags I introduced in lesson 5 work the same way that the description meta tag does. The name is the first attribute given, it tells us that one of the meta tags indicates the page author and the other lists the keywords. That leads us once more to the meat of the tag, the content attribute holds the actual authors name and the list of keywords someone might use to search for the site. The best approach when coming up with keywords for a page is to try and think what someone might type into a search engine to come up with a page like yours. If your page is about dragons for instance you might want to use words like "dragon mythology serpent legend" etc...
In the previous lesson there were several new image attributes given. The first one is the alt attribute which is extremely important to good web page design. One thing it does is allow people using text based browsers to have some idea what they would have been looking at, it also makes your page more accessible to the visually impaired. Those are both extremely important reasons to always use the alt tag, and as an added benefit it also gives more information to your visitor since the contents of the alt tag is often displayed when a user hovers their mouse over an image.
While browsing the net, one occasionally comes across a page where the text keeps jumping down as the site loads, it is especially noticeable to people using slower connections such as dial up. It is an extremely annoying and distraction situation. The problem is caused when the web page designer neglects to use the height and width attribute to their img tags so the browser has to constantly adjust the page as it finds out the sizes of the images it needs to display. The height and width attribute values are normally specified in pixels. If you read the properties of any image it should tell you what those values are, simply enter then into the height and with attributes.
The other new image attribute is border. The browser assumes that there is no border around normal images, so you don't need to use this attribute in most cases. However, when using an image for a button or link the browser draws a nice blue link box around the clickable image. This rather ruins things like nicely drawn round buttons, so when using an image for a link you can include border="0" to get rid of the outline.
Ordered Lists are the next item of interest. An ordered list simply puts a number* instead of a bullet in front of each item on the list so the tags to start and finish are <ol> and </ol> rather than <ul> and </ul>. The Definition List works a little differently. It is placed inside the <dl> and </dl> tags and allows you to specify first the definition term inside the <dt> </dt> tag and then the definition itself inside the <dd> </dd> tag.
That brings us to the last item Strong or Emphasized text. It is occasionally necessary to make a word stand out from the rest of the page, these tags simply do that. Search engines also sometimes place a bit more weight on words that stand out in this manner or are listed in headings.
On to Lesson 7
| Lesson 1, 2, 3, 4, 5, 6, 7 | Lesson Links | Lesson Clip Art |
*It is also possible to use roman numerals or letters in ordered lists, I am only going over the most basic uses of these tags here. In the reference section of these lessons you will find more tags and attributes that can be used with them.
