Blog

Web Basic 101 – Class 4!

     Welcome to the fourth course,

     We are slowly starting to grasp the basic architecture of a web page with all various components. We are not webmasters yet but we are getting there!

     Today we’ll take a closer look at order and unordered list. Everyone knows that you can use list to display a list of element on a document or on a web site, but the great advantage with the list in HTML is that we can also use them to display navigation menu and event dropdown menu (With the help of a little CSS!). They can also be used for an image light box.

     To begin with, you have to know that in HTML there are two types of list; ordered list (used with the OL tag) and unordered list (used with the UL tag). Let’s take a look at two list example:

     Ordered list will have a number or letter (even roman number) to define the order in which they are shown.

  • First
  • Second

     As for the unordered list, they have a symbol or image which will be the same for the entire list.

  1. First
  2. Second

     When you are creating a list, all the items in the list must be contained within the “li” tag. Now enough with the writing and let’s take a look at an example for the ordered list:

<ol>
	<li>First</il>
	<li> Second</il>
</ol>

     And here’s an unordered list example:

<ul>
	<li>First</il>
	<li>Second</il>
</ul>

     As you’ve probably notice, the only difference is the opening tag (Using either ul or ol).

     You can also place a list within a list as follow:

<ul>
	<li>First</li>
	<li>
		<ul>
			<li>First Sub</li>
			<li>Second Sub</li>
		</ul>
	</li>
	<li>Second</li>
</ul>

     And this will give you a result similar to this one:

  • First
    • First Sub
    • Second Sub
  • Second

     That’s all for this course, in my next blog we will try to add a little beauty to our page! Meanwhile, here is the YouTube version of the course: