Lesson 1

Lesson 2

Lesson 3

Lesson 4

Lesson 5

Lesson 6

Lesson 7

Lesson 8

Lesson 9

Lesson 10

Tips

References

Day 2

Lists

Today we are going to discuss how to make lists with html. There are two types of lists; organized lists and unorganized lists. Organized lists are numbered while unorganized are just bulleted. Here is an example of an organized list:

1. Boombatzu
2. Srew-u
3. Ocean mouth
4. The worm
5. Moster
6. Muralla

And now this is an example of an unordered list:

• Oil exploder
• Octopus
• U-go-down
• High shooter
• T-Flash

Making lists is easy; both types of lists are very similar in the code. Lists require not only a pair of tags to embed the list, but also a tag for each element. Here is the code for the organized list above:

	<ol>
	<li>Boombatzu
	<li>Srew-u
	<li>Ocean mouth
	<li>The worm
	<li>Moster
	<li>Muralla
	</ol>

The the starting and ending tags indicate wether the list is an organized or unorganized list. The <li> tag before each line sets either a bullet or a number depending on the type of list. "ol" stands for "organized list" can you guess the starting and ending tags for an unorganized list?

	<ul>
	<li>Oil exploder
	<li>Octopus
	<li>U-go-down
	<li>High shooter
	<li>T-Flash
	</ul>

If you guessed <ul></ul>, you were right! As you can see, list are not so hard to make, all that changes between the two types of lists is the "ul" at the beginning and the end.

Now that you know about lists, it's time to apply them in our project. I hope you did your homework from the last lesson, those two pages are part of your project and we will be adding things to them as we go on. Go back to finish it if you are not done, you will need them!

If you are finish check your work with the code from the links bellow

• Games.html
• Location.html

Lets do some stuff now, open your "Games.html" document in your text editor and after the first paragraph add the following code marked in red and blue.

...This is a place only for people wanting to get 
their guts twisted and their brain turned upside 
down!
<p>
<h4>Get the pictures!</h4>

	<ul>
	<li>Boombatzu
	<li>Srew-u
	<li>Ocean mouth
	<li>The worm
	<li>Oil exploder
	<li>Octopus
	<li>U-go-down
	</ul> 
<p>

<h3>Roller Coasters</h3>...

Now save and load your page in the browser. A beautiful list should apear in your document!. You can check it out here:

Click here for example 2-1

Lets make a more drastic change to our "Games.html" document converting some text into an organized list. Open your document in your text editor if it is not already open. Find the heading "Mechanical Games" and after it, make the following changes. Note that you are just adding and deletin tags on the already typed code:

...<h2>Mechanical Games</h2>
	<ol>
	<li>Oil exploder - A device that shoots
	you up in the sky with no warning.
	It reaches a hight of 500 ft. (delet <p>)
	<li>Octopus - A horizontaly spinning 
	wheel halfway under water that carries 
	you inside. It can reach speeds to up to 
	75 km/h. (delet <p>)
	<li>U-go-down! - A free falling cord 
	attached to your body. You get pulled 1000
	ft above the ground and then you free fall
	until the cord pulls you up again.
	(delet <p>)
	</ol> 
</body>
</html>

Ok, I guess you know what to do next; save and reload to see your work. Check what you should have.

Click here for example 2-2

Well, you now know how to create basic lists, now you are ready to combine lists to make outlines in a web page. Here is what you can do by combining lists:

1. Jack Stewards
   • Jan 5, '82
   • Black hair
   • Brown eyes
2. David Peña
   • Sep 1, '82
   • Brown hair
   • Brown eyes

The code for this more complex list goes like this:

      <ol>
         <li>Jack Stewards
            <ul>
               <li>Jan 5, '82
               <li>Black hair
               <li>Brown eyes
            </ul>
         <li>David Peña
            <ul>
               <li>Sep 1, '82
               <li>Brown hair
               <li>Brown eyes
            </ul>
      </ol>

Too complex? Well, don't worry it doesn't get that complicated when making lists in a web page unless you are outlining notes, then it really gets complicated, even more than this. We are not going to add lists like this to our project, just observe how they are done so that you at least have an idea of how they are done.

Emphasizing text

There are different ways to emphasize text with html. If you have worked with a word processor program, you know you have the options of making text bold, italic, or underlined. Well, html offers you the three basic plus some more. We are going to focuse only on four; bold text, text in italics, underlined, and typewritter.