ADVERTISEMENTS
In today’s lesson we will learn about ordered and unordered list and how color schemes are formed. We will also learn how to play with ordered list. Lets start.
To make our text looks more impressive and attractive we often use list. Suppose we want to list some search engines in our post, we do not write Google, Yahoo, Bing rather we use list. Have a look
- Yahoo
- Bing
Basically there are 2 types of lists
1. Ordered List : Often known as Numbered
2. Unordered List : Often known as Bulleted
List item tags
<ol> : Used to specify our information as ordered list or numbered list
<ul> : Used to specify our information as unordered list or bulleted list
<li> : Known as List Item and is used to specify a line item as ordered or unordered list
Syntax to write ordered list
<ol> <li>Google</li> <li>Yahoo</li> <li>Bing</li> </ol>
Output
- Yahoo
- Bing
Syntax to write unordered list
<ul> <li>Google</li> <li>Yahoo</li> <li>Bing</li> </ul>
Output
- Yahoo
- Bing
Note : It is important to write <li> list item tag, after <ol> and <ul> tag.
Ordered and unordered list attributes
We can change the numbers that appears in the ordered list to numerals, capital and small aplhabets and romans. We can also change the bullets that appears in the unordered list to disc, square and circle. Lets take them one by one.
To change the number we simply write the following attributes in front of the <ol> tag.
TYPE=”A”
TYPE=”a”
TYPE=”I”
TYPE=”i”
TYPE=”1″
Syntax
<ol TYPE="A"> <li>Google</li> <li>Yahoo</li> <li>Bing</li> </ol>
Output
- Yahoo
- Bing
Now you can see the change, that in the ordered list above, the numbers did not appeared rather capital alphabets appeared because we used TYPE=”A” as attribute. In this way we can use any attribute we want.
To change the bullet in the unordered list we simply write the following attributes in front of the <ul> tag.
TYPE=”DISC”
TYPE=”SQUARE”
TYPE=”CIRCLE”
Syntax
<ul TYPE="SQUARE"> <li>Google</li> <li>Yahoo</li> <li>Bing</li> </ul>
Output
- Yahoo
- Bing
In the example above, you can see that squares have appeared in front of lists. This is because of the SQUARE attribute we used after the <ul> tag.
Playing With Ordered List
Yes ! we can have more options to play with ordered list. If I ask you one question that I want my list to start with 84 number followed by 85, 86.. and so on. Below is the syntax for it
<ol START=”84″>
<li>Google</li>
<li>Yahoo</li>
<li>Bing</li>
</ol>
Output
- Yahoo
- Bing
List Item In Between List Item
We can also add one list item into another list item, we will use Nesting method. As I told you before, writing one tag into another tag is called Nesting. Lets see :
<ol type=i> <li>Google</li> <li>Yahoo</li> <ol type=A> <li>Blogger</li> <li>Wordpress</li> <ol type=1> <li>Windows</li> <li>MAC</li> </ol> <li>Blogspot</li> </ol> <li>Bing</li> </ol>
Output
- Yahoo
- Blogger
- Wordpress
- Windows
- MAC
- Blogspot
- Bing
Colors
Now its time to learn, how to add colors to web pages, links, text, backgrounds and we will also learn about color scheme hexadecimal codes.
You might have seen a lot of different color codes, lets understand these codes. These are hexadecimal codes that are made up of 6 digits which is a combination of 3 primary colors i.e Red Green Blue, often called as RGB. These 3 colors are used to make other colors.
| R | G | B | Color Produced |
| 00 | 00 | 00 | Black |
| 11 | 00 | 00 | Red |
| 00 | 11 | 00 | Green |
| 00 | 00 | 11 | Blue |
Keep on changing the numbers to produce different color shades. This is how the color schemes are produced. If we do not want red color then we will put 00 first, similarly we will put 00 for green and blue also.
How to change background color
To change the background color we put BGCOLOR tag in one of our structure tag called body. Have a look at the syntax below :
Syntax
<html> <head> <title>How to add background color</title> <Body bgcolor="#11000000"> Gagan </body> </html>
That all for colors, we will learn more about colors in detail in CSS.
Font Size, Color and Face
To make a web page look more attractive we use different types of fonts. Generally we use fonts combined with CSS but for your explanation I’ll be telling you font tags and attributes.
To write a text in particular font we use a <font> tag. Below are some attributes for font tag.
Size="x" : Enter the number to change the size of the font. 1 is the smallest and 7 is the largest. 3 is the default size font. Color="x" : Change x with your desired color code and that color will sorrund the text. Face="x" : It specifies type faces as a list of possible type faces.
Commnoly used fonts are
- Arial
- Tines New Roman
- Courier New
Syntax
<font size="6" color="red" face="Arial"> Gagan </font>
Output
Gagan
We do not use tag now rather we use style sheets ( CSS), do not worry we will cover each and every concept in CSS. It is very important to learn each and every attribute as it will be used in CSS concept. That’s all for now, in the next lesson I’ll be telling you about various URL’s, linking, and tables in detail.
If you like this post, you will love these :
- All HTML Tags And Attributes : Lesson 4 Part1
- Welcome To HTML Tutorials : Introduction : Lesson 1
- HTML Editors, Internet Browsers and W3C : Lesson 2
- Starting With Five Structure HTML Tags : Lesson 3
- How To Submit Your Blog To Yahoo : Get Traffic From Search Engines : Part2
- Understanding URLs and Linking : Lesson 5
- Compare Bing And Google Search Results Together With Bingle
Gaganpreet Singh on August 9, 2009 | Filed Under Series
Welcome to
{ 4 comments… read them below or add one }
Hi Mr. Beep,
The output lists on some of you attribute changes aren’t coming out right. I am using Firefox and the letters and bullets on a couple of the example lists don’t change like they should. Take another look at it.
Instead of using Industry standard of hexadecimal codes for Color codes, you have chosen the complicated rgb system. I have not seen any website till now or any designer using the rgb system.
Fantastic Tutorial
This is Very Helpful to all beepthegeek Users
Thank you
Thank You
Thank You
Great tutorial
i didn’t know about type attribute for li.
Thanks for that