20. More for Images and Lists

Well we already know how to remove those annoying borders around our images when they are associated with hyperlinks (lesson 8e).

But what if you want a border around your images even if they aren't a hyperlink??

Well here is how you can.

PUTTING BORDERS AROUND IMAGES
Now I will show you how to do the opposite of taking away borders, adding BIG THICK borders! You can use the same border=X option to add a border around an image. The number you use for X determines the thickness, in pixels, of the border placed around an image:

8 pixel border on an inline image

<img src="images/cube.jpg" width="48" height="40" 
border="8">

8 pixel border on an inline image, hyper linked to another page

<a href="page.html">
<img src="images/cube.jpg" width="48" height="40" 
border="8"></a>

BULLETS FOR UN-ORDERED LISTS

In lesson 6 we first created unordered <ul>...</ul> lists. Web browser by default automatically put a bullet mark in front of each item that you enter -- and the bullets change if we create a list inside of a list. With some web browsers, you can specify in your HTML any of three bullet characters by adding an attribute to the <ul> tag:

 <ul type="xxxx">

where xxxx can be:

• type="circle"
• type="square"
• type="disc" [default bullet for top level list]

And you can even do more! You can change the type within a list by putting the type attribute in the <li> tag:

HTML	How it Looks
<ul type="square"> <li>this is item 1</li> <li>this is item 2</li> <li>this is item 3</li> <li type="circle"> Yo! How about these circle bullets? </li> <li type="circle"> this is another item </li> <li type="circle"> and one more </li> <li type="disc"> Hey! How about this disc bullet? </li> </ul>	this is item 1 this is item 2 this is item 3 Hey! How about these circle bullets? this is another item and one more Hey! How about this disc bullet?

In NetScape browsers, the type specified in the <li type="xxxx"> tag is used by all following <li> tags that do not have the type attribute until another bullet type is established. But, in Internet Explorer web browsers, list items without a type attribute will revert back to the type set in your initial<ul> tag. So we recommend that if you wish to change the bullet styles within a list is that you set it for each <li> tag that requires a different bullet.

Gee, differences between the web browsers sure make life complicated! So this is a good reason why you should always consider checking your site in more environments that just your own computer. Or you could always consider having more than one web browser on your system. Why? Well that way you can view your web pages in a variety of browsers and see if they look as good in say Netscape and they do in Internet Explorer.

For a list of other Web Browsers Click Here.

Styles and Values for Ordered Lists

Now when we first created an ordered list <ol>...</ol> in lesson 6, we saw how the web browser automatically numbered the items, one for each <li> tag. What if we do not always want to use numerals (1, 2, 3...)? Well, here are the answers you want, a type=x attribute for the <ol> and <li> tags inside:

Another thing we can also do with our ordered lists is to have them start counting from another value than 1. So to do this, we add the start="y" attribute to the <ol> tag. Also remember that even if we have got some other type="x" attribute, we can still specify the starting value y as "2, 3 ,10, 100, etc". Look at some of these examples:

And finally you can alter your numbering sequence within a list by adding a value=z attribute to the <li> tag. Look at this example:

HTML	How it Looks
<ol type="A" start="5"><i> Blah Blah Blah</i> <li>Blah Blah Blah</li> <li>Blah Blah Blah</li> <p> <li value="12">Blah Blah Blah</li> <li>Blah Blah Blah</li> </p> <p> <li value="1">Blah Blah Blah</li> </p> </ol>	Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

INDEPENDANT PRACTICE
Experiment with some different bullet markers and numbering styles in the lists of your web pages. Can you think of some unique ways to use these added features? Can you make a complex outline with "standard" formatting?

Top of page | Previous Lesson| Lessons Index | Next Lesson