A5. More Images and Lists

Hypertext Borders on Hyperlinked Images Earlier on you learned how to make a small graphic image act as a hyperlink to some other web page or a larger size copy of a picture. Notice that a web browser places a boundry box around the graphic, to identify it as being "hyper" like normal hypertext items: works just like any other hypertext link. However, the box is sometimes distracting, especially if there is an image that has non-rectangular borders. The user can typically determine if a picture is "hyper" simply by noting a change in the cursor as they move a mouse over the image (it usually changes to a "hand" when it is over an active link). You can turn "off" the box by adding an attribute to the <img...> tag The below code produces the below graphic link : <a href="less-a5.htm#top"><img src="world.gif" border=0></a>

Bullets for Un-Ordered Lists When you first created ordered <ul>...</ul> lists. The web browser automatically put a bullet mark in front of each item- 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 even more! You can change the type within a list by putting the type attribute in the <li> tag:

	Modifying the bullets
	HTML	Result
	<ul type=circle> <li>Item 1 <li>Item 2 <li>Item 3 <li type=square> Item 4 <li>Item 5 <li>Item 6 <li type=disc> Item 7 </ul>	Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7

	Note that the type specified in the <li type=xxxx> tag is used by all succeeding <li> tags until another bullet type is selected.
	Styles and Values for Ordered Lists When you first created an ordered list <ol>...</ol>, you saw how the web browser automatically numbers the items, one for each <li> tag. Here's what you do when you want to use something different than arabic numerals (1,2,3...). You include the type=x attribute for the <ol> and <li> tags like this :

	Modifying the Numbering
	HTML	Result
	Arabic <ol type=1> <li>Item 1 <li>Item 2 <li>Item 3 </ol> Capital Letters <ol type=A> <li>Item 1 <li>Item 2 <li>Item 3 </ol> Small Letters <ol type=a> <li>Item 1 <li>Item 2 <li>Item 3 </ol> Large Roman <ol type=I> <li>Item 1 <li>Item 2 <li>Item 3 </ol> Small Roman <ol type=i> <li>Item 1 <li>Item 2 <li>Item 3 </ol>	Arabic Item 1 Item 2 Item 3 Capital Letters Item 1 Item 2 Item 3 Small Letters Item 1 Item 2 Item 3 Large Roman Item 1 Item 2 Item 3 Small Roman Item 1 Item 2 Item 3

Another thing you can do with ordered lists is to have them start counting from some other value than 1. to do this, you add the start=y attribute to the <ol> tag. Note that even if you have some other type=x attribute, you can still specify the starting value y as "2,3,10,100, etc". Check out these examples:

	Starting somewhere other than 1
	HTML	Result
	Arabic <ol type=1 start=15> <li>Item 1 <li>Item 2 <li>Item 3 </ol> Capital Letters <ol type=A start=15> <li>Item 1 <li>Item 2 <li>Item 3 </ol> Small Letters <ol type=a start=15> <li>Item 1 <li>Item 2 <li>Item 3 </ol> Large Roman <ol type=I start=15> <li>Item 1 <li>Item 2 <li>Item 3 </ol> Small Roman <ol type=i start=15> <li>Item 1 <li>Item 2 <li>Item 3 </ol>	Arabic Item 1 Item 2 Item 3 Capital Letters Item 1 Item 2 Item 3 Small Letters Item 1 Item 2 Item 3 Large Roman Item 1 Item 2 Item 3 Small Roman Item 1 Item 2 Item 3

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

	Modifying the Numbering Part2
	HTML	Result
	<ol type=A start=5><i> Heading</i> <li>Item 1 <li>Item 2 <p> <li value=12>Item 3 <li>Item 4 <li value=1>Item 5 </ol>	Heading Item 1 Item 2 Item 3 Item 4 Item 5

Click on Advanced Lesson 6 to continue, or click here (Top) to return to the top of document