HTML - The Basics

Some Of The More Common Questions With HTML

This page is to answer the more common questions that arise with HTML. There are a million websites on the net that will give you the answers, but hopefully the question/answer format will make it easy to find what you need.

If you have questions that still need answering after reading this page, please drop me an email.

How Do I make A List?

This code here.....

<ul> <li>This Code</li> <li>Will Create</li> <li>A Bullet List</li> </ul>

will create what you see below. Actually, I have custom bullets, but that's a seperate page althogether. If you prefer to have the list numbered, use ol instead of ul. (ordered list versus unordered list).

• This Code
• Will Create
• A Bullet List

You can also create a lettered list (a,b,c) or roman numerals.

This list has roman numerals This List Has letters

<ol type="I"> <li>This list</li> <li>has roman numerals</li> </ol> <ol type="a"> <li>This List</li> <li>Has letters</li> </ol>

How Do I Make Text Wrap Around An Image?

An image tag is what's known as an "inline element". All that means is that if you insert an image onto your page, then add text, it will continue on the same line, until there is a carriage return. Then the text will begin BELOW the image....on the next line. See the example given here.. As I add in more text, it will continue on level with the bottom of the image, until it reaches the end. And then it will break down to below the image. Notice how the bottom edge of the image is "inline" with the text?

So, there are a few attributes that can be added to the image tag, to get the formatting how we want. An "attribute" is something added to the tag to change its' behaviour some way. So here are some of the attributes that you can use in the image tag.

• align="left"
• align="right"
• vspace="10"
• hspace="10"

If you add in the align="left" attribute to the image tag (or right, if your prefer) then the image will align with the left of the page. And subsequent text will wrap around it, filling up all the blank space on the right.

vspace and hpace sets the vertical and horizontal space between your image and the text. In this case, it's 10 pixels. There is only one more tag that you will need.

<br clear=all>

This will force everything following it, to break down below the image. Check out the example.

This is an example of a left aligned image, with 10px of white space around it. As I type in extra text, it fills up the area to the right of the image. When i want the text to start below the image, I use the br clear=all tag.
And the html used to produce what you see above is shown here.

<img src="image-files/chchfeb.jpg" align="left" hspace="10" vspace="10"/> This is an example of a left aligned image, with 10px of white space around it. As I type in extra text, it fills up the area to the right of the image. When I want the text to start below the image, I use the br clear=all tag. <br clear=all> And the html used to produce what you see above is shown here.

Not so hard really, is it?

First Table Example

This Is The Caption

This Is The Heading

On the right, is the first example of what you can do with a single column table. I have included some attributes that you may not have used before. For example, check out how only the horizontal borders are shown.

That was achieved using the frame="hsides" ....to show the vertical borders instead, I would have used the frame="vsides" instead. The HTML for this example is shown below.

Also, take a look at in in both IE, and Firefox (pc users). There are some minor rendering differences. Generally, it's IE that is incorrect....however always check your page using both.

You should be aware of this.....the align="xxxx" attribute has been depracated. That means it's not part of valid HTML4.01 Transitional. But don't worry, it will work just fine!

It's all part of the process of moving styling attributes off page and into external stylesheets.There is more scope for creativity using CSS, but that's for another page ;-)

<table align="right" frame="hsides" bordercolor="#00dd55" cellpadding="10" border="3"> <caption>This Is The Caption</caption> <tr><th bgcolor="yellow"> This Is The Heading</th></tr> <tr><td bgcolor="#00dd55"> <img src="image-files/chchfeb.jpg"> </td></tr></table>

More coming soon!