Summary:

Ordered Lists in HTML using Text Edit

    arrow   Lists are Required Skills in HTML because they are the first step to creating Links.

    arrow   Also, learn to Create Bulleted Lists using Animated .gifs


Learn About:

Ordered and Unordered ListsCustom Animated Bullets<ul> tags <li> Tags  

 

  •   This tutorial is for the Fan-Tastic Project and is part of a series:

1 - First Web Page   2 - index Page   3 - Special Characters   4 - Ordered Lists   5 - Links   6 - Horizontal Nav

Step #1: Open your index page ~

Last time you worked on special characters and lines.

This time, we will explore what the rubric refers to as "Lists."


Open your index.htm document in your text editor and insert <!-- today's date --> between the invisible comment tags.


Step #2: Unordered Lists ~

First, wrap all your links in a <ul> tag:

Save your work, view it in a browser, and see what that does:


Step #3: Bullet Points ~

Now, create a bullet point by using the <li> tag:


Save your work and view it in a browser. Notice that anything inside the <li> tag, that is ALSO inside the <ul> tag has a bullet point.


Step #4: Ordered Lists ~

Sometimes you want your list to be numbered, and that's called an Ordered List.

Change the <ul></ul> tags to <ol></ol> save your work and watch what happens:

Remember - <ul> </ul> makes bullets, <ol></ol> makes numbers.


Step #4: Applying a Style to a List ~

You don't have to use numbers or bullets, you can specify letters by applying a style to your <ul> tag by typing style=" "

… then, between the " " type list-style-type:

… lastly, type lower-alpha

Save your work and view it again.


Step #5: Search for Animated Bullet Points ~

You can also use animated bullets to replace the list items like this: or this: arrow or this: or this: or this: or this: or this: or this: or search Google for animated gif bullets.


Step #6: Save the Animation to the Root Folder ~

Once you find an animated bullet you want to use, Right-Click it and save to the Root Folder of your site.


Step #7: Change the Style Code ~

Then change the <ul> tag styling by typing the following:


Step #8: Root Folder ~

Save your index.htm file IN THE ROOT FOLDER OF YOUR PROJECT …


Step #9: Compress your Folder ~

Now Right-Click the root folder of your site, compress it and attach it.


Last Step: Save and Attach ~

Attach the .zip file with the completed links …

Once you've sent the .zip file, you can delete it. It's of no further use.