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