So, you want to make a Web Page!
Lesson 16

adapted from Joe Barta's tutorials at- PageTutor.com

If you don't already have one, be sure to create a new folder titled Lesson_16 in your HTML folder

Start with a basic HTML page (don't forget the title)

<html> 
<head>
<title>Lesson 16</title>
</head> 
<body>
</body> 
</html>

Another very useful little tool is a list. There are ordered lists and unordered lists.

This is an ordered list:

  1. something big
  2. something small
  3. something short
  4. something tall

 

This is an unordered list:

  • something red
  • something blue
  • something old
  • something new

First, we will build an unordered list. It's mind-numbingly simple...   really.

Start with this...

<body>  
What I want for Christmas  
</body> 

nn

What I want for Christmas

 

(Technically we have not started to build the list yet. This is just a sort of heading.)

Add a pair of unordered list tags.

<body>  
What I want for Christmas  
<ul>  
</ul>  
</body> 

nn

What I want for Christmas

 

Add a list item.

<body>  
What I want for Christmas  
<ul>  
<li>a nice shiny Harley Davidson  
</ul>  
</body> 

nn

What I want for Christmas

  • a nice shine Harley Davidson

 

 

Add a few more...

<body>  
What I want for Christmas  
<ul>
<li>a nice shiny Harley Davidson
<li>a super fast speedboat  
<li>a drum set  
<li>a BB gun  
</ul>  
</body> 

nn

What I want for Christmas

  • a nice shiny Harley Davidson
  • a super fast speedboat
  • a drum set
  • a BB gun

 

Bingo! You made a list!

Save as: Lesson_16A.html in your HTML/Lesson_16 folder

 

That was pretty easy, let's keep going...

Want to make an ordered list? Easy! Change the <ul> tag to <ol>.

<body>  
What I want for Christmas  
<ol>
<li>a nice shiny Harley Davidson
<li>a super fast speedboat  
<li>a drum set  
<li>a BB gun  
</ol>  
</body>

 

nn

What I want for Christmas

  1. a nice shiny Harley Davidson
  2. a super fast speedboat
  3. a drum set
  4. a BB gun

 

And you thought HTML was hard. :)

Save as: Lesson_16B.html in your HTML/Lesson_16 folder

 

We can also change the type of an ordered list...

<body>  
What I want for Christmas  
<ol type="A">
<li>a nice shiny Harley Davidson
<li>a super fast speedboat  
<li>a drum set  
<li>a BB gun  
</ol>  
</body>

nn

What I want for Christmas

  1. a nice shiny Harley Davidson
  2. a super fast speedboat
  3. a drum set
  4. a BB gun

 

Save as: Lesson_16C.html in your HTML/Lesson_16 folder

 

Guess what? We can also change the type in an unordered list too...

<body>  
What I want for Christmas  
<ul type="circle">
<li>a nice shiny Harley Davidson
<li>a super fast speedboat  
<li>a drum set  
<li>a BB gun  
</ul>  
</body>

nn

What I want for Christmas

  • a nice shiny Harley Davidson
  • a super fast speedboat
  • a drum set
  • a BB gun

 

Save as: Lesson_16D.html in your HTML/Lesson_16 folder

 

[FYI (for your information only)... that means you don't actually have to do this part]

One more example before we move on. Note that lists can also be nested...

<ol>  
<li>Fruits     
        <ul>     
        <li>apples     
        <li>oranges     
        <li>bananas     
        </ul>  
<li>Nuts     
        <ul>     
        <li>peanuts     
        <li>macadamia     
        </ul>  
<li>Vegetables     
        <ul>     
        <li>cucumbers     
        <li>peppers     
        <li>lettuce     
        </ul>  
</ol> 

nn

  1. Fruits
    • apples
    • oranges
    • bananas
  2. Nuts
    • peanuts
    • macadamia
  3. Vegetables
    • cucumbers
    • peppers
    • lettuce

The following list types are available...

<ol> Ordered List

 

<ul> Unordered List

type="1" - numeric: 1,2,3,4... (default)
type="a" - lower alpha: a,b,c,d...
type="A" - upper alpha: A,B,C,D...
type="i" - lower roman: i,ii,iii,iv...
type="I" - upper roman: I,II,III,IV...

 
  • type="disc" (default)
  • type="circle"
  • type="square"

 

On to Lesson 17