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.
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:
Still, it is a good idea to close each item with an end tag.
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:
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.
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:
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:
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:
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.
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:
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:
As seen with the unordered list, you can nest an item in 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:
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. |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Practical Learning: Introducing
Lists
