how to use html lists, links and definition links, link types, alinks, vlinks

Astro Lesson #5 : lovely.lists.and.luscious.links

Whizzing along aren't we? Today we shall discuss Lists, and Links. (no, not shopping lists, and definately not Golf Links, cuff links or chain links) Firstly, the definitive definition of a definition list:

Definition lists are another peachy keen way to display text. Here is the code and what it should eventually look like on the web page -

<dl> (Here is a definition list)
<dt> (Here is the definition term - the heading if you like)
My Definition List (This is it)
<dd> (Here is the definition data)
My definition of the definition term (Wunderbar!)
</dl> (And now I'm all done)

My Definition List: My definition of the definition term

See how it gets indented from the heading, and is placed one line below it? This can be very useful and also looks quite nice.

And now ordinary lists. Very handy for breaking up blocks of text, or displaying points of information in a tidy manner (and we do try to be tidy, don't we children?)

The Grand Poobahs of HTML have allowed us to use 2 types of lists - ordered and, wait for it, unordered! Simply put, (Cos we know you simply love it), one is numbered and one has bullets. Let's look at the HTML and some examples, shall we?

<ul type=disc>
Here comes an unordered list, and will you look at that, it's gonna have little dots as bullets! (This is the default type, but you can also have type=rectangle, or type=circle)

<li>
This is the first item
<li>
This is the next item
<li>
And one more for luck!
</ul>

All done - notice that the < li > does not require a closer, however the < /ul > does.

This is the first item

This is the next item

And one more for luck!

Clear as mud? Good, onward we go! For an ordered list, the format is identical apart from substituting <ol> for <ul>. In this case the options for type are ...

type=1 (arabic numbers) 1,2,3
type=a (lower alpha) a,b,c
type=A (upper alpha) A,B,C
type=i (lower roman) i,ii,iii
type=I (upper roman) I.II.III

As you can see, we have also used the blockquote tag to indent this list for extra effect. If you are feeling adventurous, it is possible to 'nest' lists within lists - just make sure all the tags are in the correct order

Links are what makes the Web such a wondrous place - it is easy to spend hours following one hyperlink to another, clicking your way around the web. It is an easy matter to create a link within a web page which will whizz the happy webber off to another destination in no time.

<a href="http://www.users.bigpond.com/retrographix/nerve.html"> Click Here </a>

Looks a bit complicated? - not really. We need to start with a tag specifying an address that, when clicked upon, causes the browser to retrieve the new page. That's the < a href="" > bit. Next insert the URL, or address, of the new page - thats the http://www.users.bigpond.com/retrographix bit. Then decide what to click on - this can be words (ie Click Here!) or an image. As we will be discussing images later let's just stick with words for now. Lastly, we need to end the address tag - that's the < /a > bit.

Click Here! (Then select the 'Back' button of your browser to come back here)

Notice that the 'Link' now appears underlined and has changed color - this color can set by specifying it within the < body > tag at the top of your page.

link (The displayed color for unvisited links)
vlink (The displayed color for visited links)
alink (The displayed color at the moment of clicking a link)

Like this - <body alink="red" vlink="blue" link="white">
next.pod
copyright.wendy.phillips.1998-2000

(The Retro City neurometer is reading that your brain is now full)
Remember, Space Cadets! This is a basic guide only - go read the manual.

back.to.space.cadets.lounge