Listing items and Horizontal rule


Listing items
In the section we will learn how to list items in a web page, using HTML.
HTML provides you with Unordered List <UL> and Ordered List <OL> tags.
Below example display item using an Unordered List

<HTML>
<HEAD>
<TITLE> Bengallery Info. Tech. </TITLE>
</HEAD>
<BODY>
Here are some common programming languages:
<UL>
<LI> C++ </LI>
<LI> JAVA </LI>
<LI> VISUAL BASIC </LI>
<LI> PHP </LI>
</UL>
</BODY>
</HTML>


The preview of the page (above) display the listed items in separate lines using a bullet symbol, this is what Unordered means; it means using symbols to list instead of number or alphabets. In the code above we entered the listed items within the <LI> (List Item) tag between Unordered List <UL></UL> tag.
If you want the items to start with numbers instead of bullets, you must simply replace the <UL></UL> with the Ordered List <OL></OL> tag. See the example below.

<UL>
<LI> C++ </LI>
<LI> JAVA </LI>
<LI> VISUAL BASIC </LI>
<LI> PHP </LI>
</UL>

 

Nested list
Nested list is just as it sound, it’s simply having another list item inside another; like a sub list, see the screenshot below.

Below is the code that generates it.

<HTML>
<HEAD>
<TITLE> Bengallery Info. Tech. </TITLE>
</HEAD>
<BODY>

Continents and countries:

<OL>
<LI>Africa
     <OL>
           <LI> Nigeria </LI>
           <LI> Kenya </LI>
           <LI> South Africa </LI>
     </OL>
</LI>
<LI>Europe
<OL>
           <LI> England </LI>
           <LI> France </LI>
           <LI> Germany </LI>
     </OL>
</LI>
<LI>Asia
<OL>
           <LI> China </LI>
           <LI> Japan </LI>
           <LI> India </LI>
     </OL>
</LI>
</OL>
</BODY>
</HTML>


I believe the HTML tag is simple enough, because I purposely indent my line of code using the tab key to move the items e.g. <LI>Nigeria </LI> inward for code better readability. This code uses nested countries inside continents using ordered lists.

 

Horizontal Separator Rule
Another useful html function that you might be interested in is the horizontal line <HR> tag, this tag introduce a line which might be good to separate content in your webpage. See the screenshot below.

The code for the screenshot page above

<HTML>
<HEAD>
<TITLE> Bengallery Info. Tech. </TITLE>
</HEAD>
<BODY>
First content
<HR>
Second content
<HR>
Third content
</BODY>
</HTML>

As you can see the preview resulted in two horizontal lines separating three text lines or content. You can modify the properties for <HR>.
You can also reduce the WIDTH of the line, either in percent <HR WIDTH="50%"> or pixels <HR WIDTH="100">
For example, I reduce the first <HR> by 50%

<BODY>
First content
<HR WIDTH="50%">
Second content
<HR>
Third content
</BODY>


And this is what the preview looks like.

I purposely do this, so that I can let you know that whenever you adjust the width of <HR>, it may be apparent that you will also need some alignment, because the default alignment is center, so the code segment shows how we can align the <HR> to LEFT or any of the three positions
<BODY>
First content
<HR WIDTH="50%" ALIGN="LEFT">
Second content
<HR>
Third content
</BODY>


 

You can adjust line thickness using SIZE.
<HR size=”5”>
You can also determine the color of your <HR> line
<HR color="#FF0000">
In the example below I thicken the line (SIZE) of the second <HR> to 5 and also change the COLOR to red.

<HTML>
<HEAD>
<TITLE> Bengallery Info. Tech. </TITLE>
</HEAD>
<BODY>
First content
<HR WIDTH="50%" ALIGN="LEFT">
Second content
<HR color="#FF0000" size=5>
Third content
</BODY>
</HTML>

And the preview

 

Next »


Creating webpage with HTML »

META Data »

Background colour »

HTML Versions »

Setting up a website »

Break Line, paragraph and alignment »

Special character, bold, italics, underline and marquee »

Text Formatting »

Listing items and Horizontal rule »

Images »

Tables »

Hyperlink »

Form »