Home

List of items in a Webpage

   

An Unordered List

 

Introduction to Lists of Items

A list is a group of items created as a block. HTML supports two broad categories of lists: ordered and unordered.

An unordered list is one whose elements appear with a dot on the left. This means that items appear in any order of your choice. To get an unordered list, create an element named ul.

Adding Items to a List

The ul element is one of those that must act as parent to other elements. To add an item to a list, create an element named li, which must be nested in the ul element. On the right side of the start tag, put anything you want, such as text. The li element doesn't have to be closed. Here is an example:

<html>
<head>
<title>Geometry: Polygons</title>
<head>
<body>
<h3>Geometry: Polygons</h3>

<p>A polygon is a geometric plane figure made of straight lines 
also called segments. Polygons are categorized based on their number 
of sides. Examples of categories of polygons are:</p>

<ul>
  <li>Triangle: A geometric figure made of three sides
  <li>Quadrilateral: A geometric figure made of four sides
  <li>Others: This is for polygons made of five or more sides
</ul>

</body>
</html>

This would produce:

Adding Items to a List

Still, it is a good idea to close each item with an end tag.

Practical Learning: Introducing Lists

  1. From the root directory (html_public or wattsaloan), open the index.htm file
  2. Edit it as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, watts a loan, wattsaloan">
    <meta name="description" content="This is the corporate website of Watts A Loan, a small business that provides loans and financial services.">
    
    <title>Watts A Loan</title>
    
    <head>
    <body>
    
    <h1>Watts A Loan</h1>
    
    <p>Welcome to <b>Watts A Loan</b>. We provide personal and business loans 
    as well as various financial 
    services. We are your one-stop shop for all types of financial needs.</p>
    
    <p>Our customers include:</p>
    
    <ul>
      <li>Individuals: Personal loans, boat buyout, vehicle financing, musical 
    instruments purchase, etc.</li>
    
      <li>Businesses: Business startup, business improvement, late payroll, etc.</li>
    
      <li>Organizations: Non-government organizations, Not-For-Profit organizations, 
    limited liability needs, etc.</li>
    </ul>
    
    <p><b>Watts A Loan</b> is involved in community outreach activities, 
    such as</p>
    
    <ul>
      <li>Road clean-up</li>
      <li>Events sponsoring</li>
      <li>School supplies purchase</li>
    </ul>
    
    <p>The goal is to make <b>Watts A Loan</b> accountable to the community and the 
    environment by following the strict rules of 
    <a href="http://www.federalreserve.gov/bankinforeg/reglisting.htm">government 
    regulations</a>.</p>
    
    <p><a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="offices.htm">Offices Locations</a> | <a href="process.htm">Loan Process</a> | <a href="services/index.htm">Services</a></p>
    
    </body>
    </html>
  3. Save the file
  4. Preview the file in a browser

    Creating a List

    After viewing the file, return to its code

The Type of a List

By default, the items of an unordered list appear with smalled filled circles. As an alternative, you can make the items display small empty circles or small squares. This is done by adding the type attribute and assigning a type to to it. The options are:

circle small empty circles
disc small filled circles
square small filled squares

Besides text, the items of a list can be made of pictures or else.

Still, it is a good idea to close each item with an end tag.

Practical Learning: Setting the Type of a List

  1. Edit the index.htm file as follows:
    . . .
    
    <p><b>Watts A Loan</b> is involved in community outreach activities, 
    such as</p>
    
    <ul type="square">
      <li>Road clean-up</li>
      <li>Events sponsoring</li>
      <li>School supplies purchase</li>
    </ul>
    
    . . .
  2. Save the file
  3. Preview the file in a browser

    Creating a List

    After viewing the file, return to its code

Nesting a List

Although the li element must always be nested in a list element, it is a section in its own right. This means that other items can be nested in a list item.

Besides regular elements, a list can be nested in another list. To nest a list, create a new one as a child of a list item. The nested list must have its own ul element with the appropriate li items. Here are examples:

<html>
<head>
<title>Geometry: Polygons</title>
<head>
<body>

<h3>Geometry: Polygons</h3>

<p>A polygon is a geometric plane figure made of straight lines 
also called segments. Polygons are categorized based on their number 
of sides. Examples of categories of polygons are:</p>

<ul>
  <li>Triangle: A geometric figure made of three sides (called edges) 
and three angles (called vertices). Triangles are categorized by the 
relationships among the edges:
    <ul>
      <li>Equalateral: All sides have the same length
      <li>Isosceles: Two of the sides have the same length
      <li>Scalene: All sides have different lengths
    </ul>
  </li>
  <li>Quadrilateral: A geometric figure made of four sides (called edges) 
and four angles (called corners). Quadrilaterals are categorized by the 
relationships among the sides, namely whether the opposite sides are 
equal, whether the opposite sides are parallel or not, etc. Examples of 
quadrilaterals are:
    <ul>
      <li>Convex Quadrilaterals (also called parallelograms): The opposite 
sides are equal and parallel, and opposite angles are equal
      <li>Others: At least one of the rules of parallelogram is not respected
    </ul>
  </li>
  <li>Others: This is for polygons made of five or more sides. Examples are:
    <ul>
      <li>Pentagon: Made of 5 sides
      <li>Hexagon: Made of 6 sides
      <li>Octagon: Made of 8 sides
      <li>Decagon: Made of 10 sides
      <li>Dodegagon: Made of 12 sides
    </ul>
  </li>
</ul>

</body>
</html>

This would produce:

Creating a List

In the same way, a list can be nested in a list that itself is nested. Here are examples:

<html>
<head>
<title>Geometry: Polygons</title>
<head>
<body>
<h3>Geometry: Polygons</h3>

<p>A polygon is a geometric plane figure made of straight lines 
also called segments. Polygons are categorized based on their number 
of sides. Examples of categories of polygons are:</p>

<ul>
  <li>Triangle: A geometric figure made of three sides (called edges) 
and three angles (called vertices). Triangles are categorized by the 
relationships among the edges:
    <ul>
      <li>Equalateral: All sides have the same length
      <li>Isosceles: Two of the sides have the same length
      <li>Scalene: All sides have different lengths
    </ul>
  </li>
  <li>Quadrilateral: A geometric figure made of four sides (called edges) 
and four angles (called corners). Quadrilaterals are categorized by the 
relationships among the sides, namely whether the opposite sides are 
equal, whether the opposite sides are parallel or not, etc. Examples of 
quadrilaterals are:
    <ul>
      <li>Convex Quadrilaterals (also called parallelograms): The opposite 
sides are equal and parallel, and opposite angles are equal. Examples are:
	<ul>
	  <li>Square: All four sides are equal and all (four) angles are right
	  <li>Rectangle: Each two opposite sides are equal and all (four) 
angles are right (two adjacent sides may have different lengths)
	  <li>Rhombus: All four sides are equal but, while opposite angles 
are equal, the angles may not be equal (this would differential a rhombus 
from a suare)
	</ul>
      </li>
      <li>Others: At least one of the rules of parallelogram is not respected. 
Examples are:
	<ul>
	  <li>Kite: Adjacent sides are equal and opposite angles are equal
	  <li>Trapezoid: At least two opposite sides are equal. Two variants 
of the trapezoid are:
	    <ul>
	      <li>Isosceles
	      <li>Tangential
	    </ul>
	  </li>
	</ul>
      </li>
    </ul>
  </li>
  <li>Others: This is for polygons made of five or more sides. Examples are:
    <ul>
      <li>Pentagon: Made of 5 sides
      <li>Hexagon: Made of 6 sides
      <li>Octagon: Made of 8 sides
      <li>Decagon: Made of 10 sides
      <li>Dodegagon: Made of 12 sides
    </ul>
  </li>
</ul>

</body>
</html>

This would produce:

Creating a List

Practical Learning: Nesting a List

  1. Edit the index.htm file as follows:
    . . .
    
    <p>Our customers include:</p>
    
    <ul>
      <li>Individuals:
        <ul>
          <li>Personal loans</li>
          <li>Boat purchase</li>
          <li>Vehicle financing</li>
          <li>Musical instruments purchase</li>
        </ul>
      </li>
      <li>Businesses:
        <ul>
          <li>Business startup
          <li>Business improvement
          <li>Late payroll
          <li>etc
        </ul>
      </li>
    
      <li>Organizations: Non-government organizations, Not-For-Profit organizations, 
    limited liability needs, etc.</li>
    </ul>
    
    <p><b>Watts A Loan</b> is involved in community outreach activities, 
    such as</p>
    
    <ul type="square">
      <li>Road clean-up</li>
      <li>Events sponsoring
        <ul>
          <li>Marathons</li>
          <li>Little league baseball</li>
          <li>Community farmers</li>
        </ul>
      </li>
      <li>School supplies purchase</li>
    </ul>
    
    . . .
  2. Save and close the file
  3. Preview the file in a browser

    Creating a List

    After viewing the file, return to its code

An Ordered List

 

Introduction

An ordered list is one in which each item has an incrementing label such as 1, 2, 3, etc, or a, b, c, etc, or i, ii, iii, etc. To get an ordered list, create an element named ol.

As done for an unordered list, to add a list item, create an element named li. Here is an example:

<html>
<head>
<title>Chemistry: Periodic Table</title>
<head>
<body>
<h3>Chemistry: Periodic Table</h3>

<p>In chemistry, the periodic table is used to organize the chemical elements 
based on their atomic numbers, their electron arrangement, and other 
properties. Based on the atomic numbers, the elements are:</p>

<ol>
  <li>Hydrogen</li>
  <li>Helium</li>
  <li>Lithium</li>
  <li>Beryllium</li>
  <li>Boron</li>
  <li>Carbon</li>
  <li>Nitrogen</li>
  <li>Oxygen</li>
</ul>

</body>
</html>

This would produce:

Creating a List

Practical Learning: Creating an Ordered List

  1. Open the process.htm file created in the second lesson
  2. Change the content of the document as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, process, step">
    <meta name="description" content="This webpage describes the process of applying or getting a loan from Watts A Loan.">
    
    <title>Watts A Loan: Loan Process</title>
    
    <head>
    <body>
    
    <h1>Watts A Loan: Loan Process</h1>
    
    <p><b>Watts A Loan</b> makes it very easy and fast to apply for a loan, get approved, 
    and receive your money.</p>
    
    <h3>Personal Loans</h3>
    
    <p>Our core business is based on personal loans. The simple steps to apply for a loan are:</p>
    
    <ol>
      <li>Contact us by calling our number or coming to one of our offices. We are 
    conveniently located near you</li>
      <li>Fill out a short and easy-to-follow application. Of course, our employees are 
    at your service to assist you</li>
      <li>Wait for one of our loan officers to contact you. Most applications are 
    processed the same day and the decision is time because we are very sensitive with 
    urgent situations</li>
      <li>Once a decision is made, if the loan is approved, you will sign a few documents 
    for the loan payment and then you will receive a check either in the exact amount 
    you requested or the amount we thought is more suitable</li>
    </ol>
    
    <h3>Purchase</h3>
    
    <p>As opposed to applying for a loan directly through us, you may want to 
    purchase an item (such as a musial instrument, a boat, a car, a motorcycle, a 
    lawnmower, anything). 
    <b>Watts A Loan</b> has a partnership with many local and domestic companies that sell 
    cars or various types of machines and all types of devices. The steps to apply for a 
    purchase are:</p>
    
    <ol>
      <li>Contact the seller or just go to their company</li>
      <li>Select the desired item to choose and get the price</li>
      <li>Fill out the application. All those companies have their appropriate loan/purchase 
    application</li>
      <li>Wait for an answer. Most applications are processed in a matter of minutes and a 
    decision is made right away
        <ul>
          <li>If the loan is approved, you will sign a document for the loan payment and you 
    will receive the machine or object you applied for</li>
          <li>If something did not work as expected, you will receive a response and possibly 
    an explanation</li>
        </ul>
      </li>
    </ol>
    
    <p>Good luck and count on <b>Watts A Loan</b> to meet your financial needs</p>
    
    <p align="center"><a href="index.htm">Home</a> | <a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="offices.htm">Offices Locations</a> | <a href="services/index.htm">Services</a></p>
    
    </body>
    </html>
  3. Save and close the file
  4. Preview the process.htm file in your browser

    Creating an Ordered List

    After viewing the file, return to its code

Reversing the Values of Items

By default, the numbering of the items is in incrementing order. If you want, you can reverse that. To do this, add an attribute named reversed to the ol start tag and assign a value of true to it.

The Type of a List

By default, the items of an ordered as arranged as 1, 2, 3, etc. If you want to use another category of order, add an attribute named type and assign the category to it. The options are:

Type Items Displayed As
1 1., 2., 3., 4., 5., etc
i i., ii., iii., iv., v., etc
I I., II., III., IV., V., etc
a a., b., c., d., e., etc
A A., B., C., D., E., etc
circle small empty circles
disc small filled circles
square small filled squares

Here is an example:

<html>
<head>
<title>Earth Science: The Structure</title>
<head>
<body>
<h3>Earth Science: The Structure</h3>

<p>The earth is made of four layers:</p>

<ol type="A">
  <li>The Crust
  <li>The Mantle
  <li>The Outer Core
  <li>The Inner Core
</ul>

</body>
</html>

This would produce:

Creating a List

As seen with the unordered list, you can nest an item in a list item.

The Value of a List Item

By default, the values of a list are automatically assigned whenever you add a new item. As an alternative, you can assign any desired value to an item. This is done by using an attribute named value to the li element and assigning a number to it. Here are examples:

<html>
<head>
<title>Earth Science: The Structure</title>
<head>
<body>
<h3>Earth Science: The Structure</h3>

<p>The earth is made of four layers:</p>

<ol>
  <li value="10">The Crust
  <li value="20">The Mantle
  <li value="30">The Outer Core
  <li value="40">The Inner Core
</ul>

</body>
</html>

This would produce:

Creating a List

The Starting Poing of a List

By default, the numbering of the items of a list start at the lowest value, namely 1. If you want, you can indicate where the numbering should start. This is done by adding an attribute named start to the li element and assigning the desired value to it.

 
 
 

Description Lists

 

Introduction

A description list is a simple arrangement of items where, like a bulleted list created from an unordered list, each item appears on its own line. Unlike the unordered list, the items in a description list don't have bullets: Each items simply appears on its line. To create a description list, use a tag named dl.

Adding Description Items

To create an item for a description list, nest a tag named dt in the dl element. Here are examples:

<html>
<head>
<title>Chemistry: Hydrogen</title>
<head>
<body>
<h3>Chemistry: Periodic Table</h3>


<p>Hydrogen is the most widely available substance on earth. Carbon is the 
main component of most minerals such as diamond and graphite.</p>

<p>Combining hydrogen and carbon results in many types of organic compounds. 
One of the categories of resulting compounds is that of carbon acids which 
are created from the C-H bond. Examples of hydro-carbon (or hydrocarbon) 
bonds are:</p>

<dl>
  <dt>Methyl</dt>
  <dt>Ethyl</dt>
  <dt>Vinyl</dt>
  <dt>Phenyl</dt>
</dl>

</body>
</html>

This would produce:

Adding Description Items

Defining Description Items

A defining item is one that is created as a child of a description item but the defining item is not structurally nested. The defining item appears under the description item and it is indented.

To create a definition for a description item, after a dt element create an element named dd. Remember that you are not nesting the defining item: It is created after the end tag of the dt element to which it belongs. Like the dt element, a dd element can have its own value. Here are examples:

<html>
<head>
<title>Chemistry: Hydrogen</title>
<head>
<body>
<h3>Chemistry: Periodic Table</h3>

<p>Hydrogen is the most widely available substance on earth. Carbon is the 
main component of most minerals such as diamond and graphite.</p>

<p>Combining hydrogen and carbon results in many types of organic compounds. 
One of the categories of resulting compounds is that of carbon acids which 
are created from the C-H bond. Examples of hydro-carbon (or hydrocarbon) 
bonds are:</p>

<dl>
  <dt>Methyl: This is a family of bonds created from methane. Variants are:</dt>
  <dd>Methylium Cation</dd>
  <dd>Methanide Anion</dd>
  <dt>Ethyl: This is a family of products created from ethane</dt>
  <dt>Vinyl: This results from removing a hydrogen atom from the compound. 
Furthermore, other chemical products can be added to get such items as:</dt>
  <dd>Vinyl Chloride</dd>
  <dd>Vinyl Fluoride</dd>
  <dd>Vinyl Acetate</dd>
  <dt>Phenyl</dt>
</dl>

</body>
</html>

This would produce:

Defining Description Items

Practical Learning: Creating a Descriptive List

  1. Change the document as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, process, step">
    <meta name="description" content="This webpage describes the process of applying or getting a loan from Watts A Loan.">
    
    <title>Watts A Loan: Loan Process</title>
    
    <head>
    <body>
    
    <h1>Watts A Loan: Loan Process</h1>
    
    <p><b>Watts A Loan</b> makes it very easy and fast to apply for a loan, get approved, 
    and receive your money.</p>
    
    <h3>Personal Loans</h3>
    
    <p>Our core business is based on personal loans. The simple steps to apply for a loan are:</p>
    
    <ol>
      <li>Contact us by calling our number or coming to one of our offices. We are 
    conveniently located near you</li>
      <li>Fill out a short and easy-to-follow application. Of course, our employees are 
    at your service to assist you</li>
      <li>Wait for one of our loan officers to contact you. Most applications are 
    processed the same day and the decision is time because we are very sensitive with 
    urgent situations</li>
      <li>Once a decision is made, if the loan is approved, you will sign a few documents 
    for the loan payment and then you will receive a check either in the exact amount 
    you requested or the amount we thought is more suitable</li>
    </ol>
    
    <h3>Purchases</h3>
    
    <p>As opposed to applying for a loan directly through us, you may want to 
    purchase an item (such as a musial instrument, a boat, a car, a motorcycle, a 
    lawnmower, anything). 
    <b>Watts A Loan</b> has a partnership with many local and domestic companies that sell 
    cars or various types of machines and all types of devices. The steps to apply for a 
    purchase are:</p>
    
    <ol>
      <li>Contact the seller or just go to their company</li>
      <li>Select the desired item to choose and get the price</li>
      <li>Fill out the application. All those companies have their appropriate loan/purchase 
    application</li>
      <li>Wait for an answer. Most applications are processed in a matter of minutes and a 
    decision is made right away
        <ul>
          <li>If the loan is approved, you will sign a document for the loan payment and you 
    will receive the machine or object you applied for</li>
          <li>If something did not work as expected, you will receive a response and possibly 
    an explanation</li>
        </ul>
      </li>
    </ol>
    
    <h3>Business Loans</h3>
    
    <p>We make it convenient to apply for the right loan that will help your business meet 
    a timely requirement or purchase that valuable machine. We have various types of 
    packages or we can customize one for your particular needs. We support:</p>
    
    <dl>
      <dt>Budget Constraint Needs: We can help you to fill that sudden gap in your budget. We meet issues related to:</dt>
        <dd>Cash Flow: A whole in your cashier box is not a negative sign for us and we 
    will deal with it</dd>
        <dd>Deficit: Whether caused by slowness based on seasonal work or a decrease in your 
    sales, a deficit should not slow you down. We will make the necessary payments</dd>
        <dd>Unaccountable Business Partners: Business partners may let you down. We won't</dd>
      <dt>Payroll: We have the right amount to achieve your payroll at the last minute. We 
    are quiet familiar with:</dt>
        <dd>Employees Concerns</dd>
        <dd>IRS Deadlines</dd>
    </dl>
    
    <p>We will analyze your situation and come up with the right package for you. Just contact 
    us today. We can even come to your office or to meet with you anywhere.</p>
    
    <p>Good luck and count on <b>Watts A Loan</b> to meet your financial needs</p>
    
    <p align="center"><a href="index.htm">Home</a> | <a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="offices.htm">Offices Locations</a> | <a href="services/index.htm">Services</a></p>
    
    </body>
    </html>
  2. Save and close the file.
    If you had set up a website and if you are working from your computer, upload the files now
  3. Preview the index.htm file from your website or from your computer, and click the links

Adding Description Items

   
   
 

Previous Copyright © 2015, FunctionX Next