CHAPTER 2

HTML Elements

In this session, you will learn more things on HTML. You will learn about the uses of some elements in HTML with a description of their attributes through examples. This includes---

• Lists
• Images
• Background
• Colors
• Tables
• Frames

Lists
In the previous session, we discussed briefly about the uses of different types of list in HTML. Now we will give you an idea about some of their basic attributes used.
Unordered List:
In an unordered list, the items are listed in an unordered fashion. Basically, in an unordered list, two main attributes are used, viz., ID and TYPE. The following table gives the description of these attributes---

Attribute Name	Attribute Value	Description
ID	ID Name	ID describes the identity of the list
TYPE	Circle, Square, Disc	Type of list, i.e., Circle bulleted, Square bulleted or Disc bulleted list

The following example will help you know about different types of unordered list---
A Circle Bulleted List: List of some fruits

• Apple


• Mango


• Orange

A Square Bulleted List: List of some fruits

• Apple


• Mango


• Orange

A Disc Bulleted List: List of some fruits

• Apple


• Mango


• Orange

A Circle Bulleted List: List of some fruits Apple Mango Orange A Square Bulleted List: List of some fruits Apple Mango Orange A Disc Bulleted List: List of some fruits Apple Mango Orange

However, if you don't specify any type in an unordered list, the default type will be disc bullets.
Ordered List:
In an ordered list, items are listed in an orderly fashion. Like an unordered list, an ordered list also has the basic attributes ID and TYPE. Following table gives the description of the attributes of an ordered list---

Attribute Name	Attribute Value	Description
ID	ID Name	ID describes the identity of the list
TYPE	Numbers: 1, 2, 3,... Alphabets: A, B, C,... and a, b, c,... Roman Letters: I, II, III,... and i, ii, iii,...	Type of list, i.e., the items are ordered in the list according to Numbers, Alphabets or Roman Letters
START	1, 2, 3, ...	It is any Number assigned to the first item of the list

Following examples explain different types of ordered list---
A Numbered List: List of some vehicles

1. Motorbike


2. Car


3. Bus

Another Numbered List starting from the value "5": List of some vehicles

5. Motorbike


6. Car


7. Bus

A Capital Alphabet-ordered List: List of some vehicles

1. Motorbike


2. Car


3. Bus

A Lowercase Roman Letter-ordered List: List of some vehicles

1. Motorbike


2. Car


3. Bus

A Numbered List: List of some vehicles Motorbike Car Bus Another Numbered List starting from the value "5": List of some vehicles Motorbike Car Bus A Capital Alphabet-ordered List: List of some vehicles Motorbike Car Bus A Lowercase Roman Letter-ordered List: List of some vehicles Motorbike Car Bus

However, if you don't specify any type in an ordered list, the default type will be Numbers.
Definition List:
A Definition List is a type of list which gives a description about some items. A definition list don't have a type attribute. Following is an example of a definition list---
A Definition List:

Motorbike

A type of vehicle

Orange

A type of fruit

Tea

A type of hot drink

A Definition List: Motorbike A type of vehicle Orange A type of fruit Tea A type of hot drink

Here,

is Definition List tag,

is Definition Term &

is Definition Data.

Images
In the previous session, we discussed about some of the attributes of an image. Here, you will learn about some more of them. Use of images in HTML for web site development is very much important. It enhances the visual display content of a web page. Basically, an image is a JPEG or a GIF file.
Following table describes some important attributes of an image used in HTML---
 

Attribute Name	Attribute Value	Description
SRC	"Location Path" or the "Address" or the "URL" of the image	It describes directory path of the location of an image file. To display an image in a web page the SRC attribute is used.
WIDTH	Width of an image, e.g., 100 pixels (100px), 80px, ...	It sets the image to a size of definite width
HEIGHT	Height of an image, e.g., 100px, 80px, ...	It sets the image to a size of definite height
ALT	A short description of the image, e.g., "image of a boy" or "image of a house" ... etc.	ALT attribute is used to give a short description of an image when it is not loaded in a page due to some reason
BORDER	1, 2, 3, ...	It sets a border to an image. Greater the value of the BORDER, thicker is the border of the image.
ALIGN	Left, middle, Right	It aligns an image to the Left, Middle or Right in a web page.
VSPACE	1, 2, 3, ...	It is used to insert a vertical space between the image and any object above & below of it.
HSPACE	1, 2, 3, ...	It is used to insert a horizontal space between the image and any object left & right of it.

See the following example.

It is an image of height 100px and width 150px with a border of size 1. It is aligned right in the page. The text in the "alt" attribute is displayed when you place the mouse cursor over the image. But in some browsers, in doesn't work.

In the above example, we can insert a vertical space between the image and the text above and below of it. For this, we assign a certain value to the attribute VSPACE as follows---

It is an image of height 100px and width 150px with a border of size 1. It is aligned left by default in the page. A vertical space has been inserted between the image and the text above and below of it.

Similarly, a horizontal space can be inserted between an image and any object left and right of it by using "HSPACE" attribute.

It is an image of height 100px andwidth 150px with a border of size 1.

Background
In HTML, the background of a web page can be set to any color or any image. The background attributes are shown in the following table---

Attribute Name	Attribute Value	Description
BGCOLOR	Color Values, e.g., #ADD8E6, #E0FFFF,... Color Names, e.g., LightBlue, LightCyan,...	It sets the background to the color specified as its value
BACKGROUND	Source of an image	It sets the background to the image specified as its value

These attributes are used in the Opening Tag of the Body element to set a background to a web page.