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---

Here is the video tutorial of "HTML elements in HTML pages":

The following example will help you know about different types of unordered list---

A Circle Bulleted List: List of some fruits

<ul id="id_name" type="circle">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>

A Square Bulleted List: List of some fruits

<ul id="id_name" type="square">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>

A Disc Bulleted List: List of some fruits

<ul id="id_name" type="disc">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>

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--- 0

Following examples explain different types of ordered list---

A Numbered List: List of some vehicles

<ol id="id_name" type="1">
<li>Motorbike</li>
<li>Car</li>
<li>Bus</li>
</ol>

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

<ol id="id_name" type="1" start="5">
<li>Motorbike</li>
<li>Car</li>
<li>Bus</li>
</ol> 1

A Capital Alphabet-ordered List: List of some vehicles

<ol id="id_name" type="A">
<li>Motorbike</li>
<li>Car</li>
<li>Bus</li>
</ol>

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

<ol id="id_name" type="i">
<li>Motorbike</li>
<li>Car</li>
<li>Bus</li>
</ol>

However, if you don't specify any type in an ordered list, the default type will be Numbers. 2

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:

<dl id="id_name">
<dt>Motorbike</dt>
<dd>A type of vehicle</dd>
<dt>Orange</dt>
<dd>A type of fruit</dd>
<dt>Tea</dt>
<dd>A type of hot drink</dd>
</dl> 3

Here, <dl> is Definition List tag, <dt> is Definition Term & <dd> 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. 4

Following table describes some important attributes of an image used in HTML---

See the following example.

<img src="index_discussion.jpg" border="1" height="100px" width="150px" alt="It shows footprints." align="left"> 5

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---

<img src="index_discussion.jpg" border="1" height="100px" width="150px" vspace="50">

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

<img src="index_discussion.jpg" border="1" height="100px" width="150px" align="left" hspace="50"> 8

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---

These attributes are used in the Opening Tag of the Body element to set a background to a web page. The following example will illustrate it. 9

Colors

In the creation of an HTML page, uses of colors are very important. Proper use of colors makes a web page attractive. We can specify colors to text, background of a page or a table and so on.

In HTML, we can specify colors to an element using Color Values and Color Names. A color value is a hexadecimal combination of Red, Green and Blue. It is called RGB color. The code for a specific color can be written as--- 0

#rrggbb
where rr, gg, bb are the corresponding values for Red, Green, Blue components of a color.

For example, #FF0000 denotes the Red color and #FFFF00 denotes the Yellow color.

Another way of defining a color in HTML is specifying color names. There are 16 standard color names defined by W3C that are validated by HTML. These colors are--- Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White and Yellow. 1

In the following table, some colors are shown with their respective color values and color names.

Tables

Tables are very important in designing a web page. They are frequently used in HTML for representing data in a well-mannered form. 2

A Table is created using the <table> tag. It is divided into Table Rows using the <tr> tag. Table rows are further divided into cells using <td> tag containing Table Data. A table data generally consists of texts, images, lists etc. A table itself may be a table data. Cells in a table may remain empty also. It is necessary to use the end </table> tag to make a table in HTML.

The general structure of a table in HTML is as follows---

<table>

<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>

<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>

</table> 3

A table can have any number of rows and cells.

Attributes in a Table:

The basic attributes used in a table is described in the following table--- 4

The Border Attribute and Table Headings:

A table in general has a border. It is used in the opening <table> tag as---

<table border="1, 2, 3, ..... etc."> 5

We can also specify a color to a border as---

<table bordercolor="colorname or colorvalue">

Table headings are defined by the <th> tag. Generally, in the first row of a table, instead of using the <td> tag, the <th> tag is used to specify headings in a table. A table data here corresponds to the content of each heading. 6

The following example depicts a table with three rows and three columns (i.e., three cells in each row) with table headings and a border of size "1" with a border color Red.

<table border="1" bordercolor="red">

<tr>
<th>First Row, First Cell (Heading 1)</th>
<th>First Row, Second Cell (Heading 2)</th>
<th>First Row, Third Cell (Heading 3)</th>
</tr>

<tr>
<td>Second Row, First Cell (Table Data)</td>
<td>Second Row, Second Cell (Table Data)</td>
<td>Second Row, Third Cell (Table Data)</td>
</tr>

<tr>
<td>Third Row, First Cell (Table Data)</td>
<td>Third Row, Second Cell (Table Data)</td>
<td>Third Row, Third Cell (Table Data)</td>
</tr>

</table>

Specifying Width and Bgcolor to a table: 7

We can specify the width of a table using the WIDTH attribute in the opening tag of the table. Similarly, the width of a specific column can also be specified in the <th> tag.

A background color can be set to a table specifying a color value or a color name to thr BGCOLOR attribute in the <table> tag. Similarly, if we use bgcolor in the <tr> tag, all cells in the row will be set to the corresponding color. Using bgcolor in the <td> we can set a color to a specific cell.

The following example illustrates the use of WIDTH and BGCOLOR in a table--- 8

<table border="1" width="75%" bgcolor="lightblue">

<tr>
<th width="25%">Heading 1</th>
<th width="25%">Heading 2</th>
<th width="50%">Heading 3</th>
</tr>

<tr bgcolor="yellow">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>

<tr>
<td>Data 4</td>
<td bgcolor="red">Data 5</td>
<td>Data 6</td>
</tr>

</table>

Width of the following table is 75% whether the width of the first, second, and third columns are respectively 25%, 25% and 50%. The background color of the second row is yellow and that of the second cell in the third row is red. The color of the remaining cells in the table is lightblue as specified in the opening tag of the table.

The Align attribute: 9

The ALIGN attribute is used to align the content of a cell as left, middle and right. For instance, if we set Align="right" in a <tr> tag, contents of all the cells in that row will be aligned as right. If we set Align="middle" in a <td>, the content of that particular cell will be aligned as middle. However, the default alignment of the table data within a cell is left. The default alignment of the contents of a table heading is middle.

The ALIGN attribute is also used in the opening tag of a table to align the table as left, right or middle in a page. The default alignment in this case is left.

Let us take the following example--- 0

<table align="middle" border="1" width="60%">

<tr>
<th align="left" width="25%">Heading 1</th>
<th width="25%">Heading 2</th>
<th width="50%">Heading 3</th>
</tr>

<tr align="right">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>

<tr>
<td>Data 4</td>
<td align="middle">Data 5</td>
<td>Data 6</td>
</tr>

</table>

In this example, the table is aligned middle in the page. The first heading is aligned left. The contents of the cells in the second row is aligned right. The content of the second cell of the third row is aligned middle whether the contents of the remaining cells in the table is aligned left by default.

Cellspacing and Cellpadding: 1

CELLSPACING is used in a table to insert a space between the cells.

Table without CELLSPACING:

Table with a CELLSPACING of 10: 2 <table border="1" width="50%" align="middle" cellspacing="10">

<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>

<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>

</table>

Table with a CELLSPACING of 0:

CELLPADDING in a table is used to insert a white space between the content and the border of the cells. 3

Table without CELLPADDING:

Table with a CELLPADDING of 10:

Rowspan and Colspan: 4

(i) ROWSPAN is used in a table to divide a cell into two or more rows.

A Table with ROWSPAN 2:

<table border="1">

<tr>
<th>Student Name</th>
<td>X</td>
</tr>

<tr>
<th rowspan="2">Subjects</th>
<td>Physics</td>
</tr>

<tr>
<td>Maths</td>
</tr>

</table>
5

(ii) COLSPAN is used in a table to divide a cell into two or more columns.

A Table with COLSPAN 2:

<table border="1">

<tr>
<th>Student Name</th>
<th colspan="2">Subjects</th>
</tr>

<tr>
<td>X</td>
<td>Physics</td>
<td>Maths</td>
</tr>

<tr>
<td>Y</td>
<td>Physics</td>
<td>Biology</td>
</tr>

</table> 6

Frames

In HTML, with the use of frames we can display more than one document in a browser window. The <frameset> tag defines a set of frames. There are two types of frameset used, viz., Horizontal frameset and Vertical frameset. Horizontal frameset divides the window into two or more rows (frames) and the vertival frameset divides the window into two or more columns (frames).

The <frame> tag is used to specify which HTML document is to be put in a specific frame. The SRC attribute tells the Address of that particular HTML documment.

The frameset has a closing tag but the frame doesn't have a closing tag. 7

Horizontal frameset:

<frameset rows="30%, 70%">

<frame src="frame1.html">
<frame src="frame2.html>

</frameset>

The first frame will cover an area of 30% of the window whether the second frame will cover 70%. 8

Vertical frameset:

<frameset cols="40%, *">

<frame src="frame1.html">
<frame src="frame2.html>

</frameset>

The asterisk (*) symbol denotes the remaining portion of the window. The first frame will cover an area of 40% of the window whether the second frame will cover 60%. 9

The following example will describe how a window can be divided into horizontal and vertical frames---

The basic attributes used in a frame is shown in the following table---

Frames with Noresize: 0

In the above example, you can see that the three frames, viz., frame1, frame2, frame3 are resizable, i.e., you can alter the size of the frames by dragging them at their inner borders. The size of the frames can be made fixed using the NORESIZE attribute. The value of the attribute in this case is "noresize", i.e., NORESIZE="noresize".

<frameset cols="40%, *">

<frame src="f1.html" noresize="noresize">

<frameset rows="50%, *">
<frame src="f2.html" noresize="noresize">
<frame src="f3.html" noresize="noresize">
</frameset>

</frameset>

In this example, the size of the frames are fixed. 1

Inline frames:

Inline frames are the frames within a line of an HTML document. The <iframe> tag is used to define an inline frame in HTML. It has a closing tag.

Following is an example of an online frame which downloads the HTML document "inline.html" into it. 2

<iframe src="inline.html" Name="inline" width="75%" frameborder="0" Scrolling="yes"></iframe>

It is an inline frame with a width of 75% and a frameborder of "0" value. Scrolling is permitted in this frame.

Click: Download source code 3