HTML Elements

In this session, you will learn more things on HTML.

HTML Elements

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

 

 

 

 



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>

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

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

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

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
  1. Motorbike
  2. Car
  3. 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

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

A Definition List:
Motorbike
A type of vehicle

Orange
A type of fruit

Tea
A type of hot drink

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

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.

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

It is an image of height 100px and width 150px with a border of size 1. It is aligned right in the page.

Discussion among three people






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

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

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. 7 Discussion among three people

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.

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

It is an image of height 100px andDiscussion among three peoplewidth 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. 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.

Color Color value Color Name
  #FFFFFF White
  #008000 Green
  #FFFF00 Yellow
  #FF0000 Red
  #800080 Purple
  #000000 Black

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

Attribute Name Attribute Value Description
BORDER 1, 2, 3, ... It sets the border of a table to a size specified as its value.
BORDERCOLOR Color values or Color Names It sets the border of a table to a color specified as its value.
BGCOLOR Color values or Color Names It sets the background of a table to a color specified as its value. It is also used for a specific row or a specific cell.
WIDTH 100%, 50%, 25%, ... etc. It sets the width of a table or the width of cells to a specific size.
CELLSPACING Any Number like 10, 5, 20, ... etc. It inserts a space between the cells of a table of a size specified as its value.
CELLPADDING Any Number like 10, 5, 20, ... etc. It inserts a space between the content and the border of a cell of a size specified as its value.
ALIGN Left, Middle, Right It aligns the contents of a cell as left, middle and right.
ROWSPAN 2, 3, ... It divides a cell into two or more rows, e.g., two rows when rowspan="2", three rows when rowspan="3", ... and so on.
COLSPAN 2, 3, ... It divides a cell into two or more columns, e.g., two columns when colspan="2", three columns when colspan="3", ... and so on.

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>

First Row, First Cell (Heading 1) First Row, Second Cell (Heading 2) First Row, Third Cell (Heading 3)
Second Row, First Cell (Table Data) Second Row, Second Cell (Table Data) Second Row, Third Cell (Table Data)
Third Row, First Cell (Table Data) Third Row, Second Cell (Table Data) Third Row, Third Cell (Table Data)

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.

Heading 1 Heading 2 Heading 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

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>

Heading 1 Heading 2 Heading 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

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 border="1" width="50%" align="middle">

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

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

</table>

Data 1 Data 2
Data 3 Data 4

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>

Data 1 Data 2
Data 3 Data 4

Table with a CELLSPACING of 0:

<table border="1" width="50%" align="left" cellspacing="0">

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

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

</table>

Data 1 Data 2

 

Data 3 Data 4

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 border="1" width="50%" align="left">

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

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

</table>

Data 1 Data 2
Data 3 Data 4

Table with a CELLPADDING of 10:

<table border="1" width="50%" align="middle" cellpadding="10">

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

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

</table>

Data 1 Data 2
Data 3 Data 4

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

Student Name X
Subjects Physics
Maths

(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

Student Name Subjects
X Physics Maths
Y Physics Biology

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

Attribute Name Attribute Value Description
SRC Source of the HTML document The HTML document which source is the value of this attribute is put in the frame
NAME Name of the frame Name of the frame
NORESIZE noresize It will make the frames of a window fixed to their size
WIDTH 100%, 25%, 50%, ... etc. Specifies the width of the frame
FRAMEBORDER 0, 1, 2, 3, ... etc. Sets the border of a frame to a definite size
SCROLLING Yes, No, Auto It makes a frame to scroll when the value is "yes" or "auto" and makes it fixed when the value is "no"

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