The Celestial Steps: lists and links

With me so far? This part is going to be very easy.

You know how those pesky rice traders, bean counters and market cryers like to use bullets and lists? They believe that presenting information this way makes it easier to understand. We, of course know, that a picture is worth a thousand words. But if lists is how they want to do it, we can accommodate them

We have 2 types of lists available to us: unordered lists <ul> and oredered lists <ol>. the actual text for both types of lists goes between the opening and closing <ili> tags.

Observe an unordered list:

 

<ul>
      <li>I'm not a bean counter</li>
      <li>I'm not a bean counter</li>
      <li>I'm not a bean counter</li>
</ul>
					

 

And an ordered list:

 

<ol>
      <li>I am a web ninja</li>
      <li>I am a skillful web ninja</li>
      <li>I am the greatest web ninja in the world!</li>
</ol>
						

 

One important thing that a lot of beginners miss, is that you should not put the <ul> tag or the <ol> inside of a paragraph (the <p> tags!)

Let's take a look at a master Ninja TODO list

 

<html>
      <head>
            <title>
                  The Celestial Steps
            </title>		
      </head>	
	
      <body>
            <h1>FRIDAY NIGHT: Things to do:</h1>
			
            <p>
                  A good ninja is always prepared.
            </p>
            <ul>
                  <li>sharpen all blades</li>
                  <li>prepare enough supplies for 3 days</li>
                  <li>stash some poison in case I get caught</li>
            </ul>	
			
            <h1>SATURDAY NIGHT: Things to do:</h1>
			
            <p>
                  Assasination in 3 easy steps
            </p>
            <ol>
                  <li>Infiltrate enemy castle</li>
                  <li>Locate target in the main dining chambers</li>
                  <li>Assasinate target</li>
            </ol>			
      </body>
</html>
					

 

This concludes the list of most common basic elements you will find on a webpage. I left out the explanation for the <div> tag on purpose. The <div> does not display in any way. Instead it is used to organize information on a page into logical sections. It will come in handy when we start learning CSS (Cascading Style Sheets).

For the purpose of clarity, I will give you an example of how <div> tags are used:

 

<html>
      <head>
            <title>
                  The Celestial Steps
            </title>		
      </head>
	
      <body>
            <div>
                  <h1>FRIDAY NIGHT: Things to do:</h1>
			
                  <p>
                        A good ninja is always prepared.
                  </p>
                  <ul>
                        <li>sharpen all blades</li>
                        <li>prepare enough supplies for 3 days</li>
                        <li>stash some poison in case I get caught</li>
                  </ul>	
            </div>
            <div>	
                  <h1>SATURDAY NIGHT: Things to do:</h1>
			
                  <p>
                        Assasination in 3 easy steps
                  </p>
                  <ol>
                        <li>Infiltrate enemy castle</li>
                        <li>Locate target in the main dining chambers</li>
                        <li>Assasinate target</li>
                  </ol>
            </div>		
      </body>
</html>
						

 

As you can see I used the page with 2 lists, only this time I put the first "logical" section insidea set of opening and closing <div> tags. I did the same for the second section. If you save this markup into your index.html, you will see that there is no visible difference between the page with <div> tags and the page without them. Their significance will be revealed during the CSS part of your training.

 

Spiritual Advice from your Sensei:

Did you notice how I change the title tag to match the title of the lesson in each source example? It's easy to forget about the title. You don't need a new one for each page, but it is not unheard of when one starts designing and leaves the title empty, only to forget about it in the end and deliver the complete website without any titles present. One must always be aware in order to survive!

 

Kata Practice: Using a structure similar to the one presented above (you can use the version with <div> tags or without them), make your own lists. Prepare a list (unordered) of weapons a ninja would take on a mission, followed by a list of what a ninja needs to do to avoid detection by the castle guards.

Next >>

 

Inside the Web Dojo

the HTML chamber