HTML Online Tutorial Contents

Following are the posts for HTML online Tutorial. To learn everything about HTML, just read these posts: HTML Online Tutorial HTML TAGS (2) HTML BASICS (3) HTML ELEMENTS (4) HTML ATTRIBUTES (5) More »

XHTML

XHTML stands for Extensible Hypertext Markup Language. It is also known as XML (Extensible Markup Language). It is a markup language. In XHTML, there are no predefined tags. The user defines the More »

HTML SUMMARY

In this tutorial, you learned: HTML Introduction HTML Tags HTML Basics HTML Elements HTML Attributes HTML Paragraphs HTML Headings HTML Formats HTML Image HTML Links HTML Lists HTML Frames HTML Table After More »

HTML TABLES (13)

HTML Tables are used to arrange data in web pages. HTML allows the use of tables by <table>…</table> tags. Each row in HTML table is recognized by <tr>…</tr> tag. In each row More »

HTML FRAMES (12.2)

Nested frames example: For the following example to work, there are two other simple HTML files : “HMTL11e1 frame a.html” and “HMTL11e1 frame b.html”. your browser will divide your screeub half. The More »

 

Tag Archives: HTML

html tables

HTML TABLES (13)

HTML Tables are used to arrange data in web pages. HTML allows the use of tables by <table>…</table> tags. Each row in HTML table is recognized by <tr>…</tr> tag. In each row every cell is recognized by <td>…</td> tag.

Following some important tags used for creation of beautiful and colorful tables:

TABLE TAGS DISCRIPTION
<table>…</table> It is used to define a table.
<tr>…</tr> It is used to define a table row.
<td>…</td> It is used to define a table cell.
<th>…</th> It is used to define a table header.
<thead>…</thead> It is used to define a group of header content in a table.
<tbody>…</tbody> It is used to define a group of body content in a table.
<tfoot>…</tfoot> It is used to define a group of footer content in a table.
<caption>….</caption> It is used to define a caption of a table.

 

Simple Table Example:

 

Following are some important attributes to the <table>…</table> tag:

Following example will use table tags to create a table of 5 rows and 5 columns. There is also a table caption entered using <caption>…<caption> tag. Moreover, simple text is placed in every cell.
Example 1: <html> <head> <title>Website-School/HTML Table Example 1 Result</title> </head>   <body> <table width=”580″ height=”441″ border=”1″> <caption> Simple Table </caption> <tr> <td width=”89″>Monday</td> <td width=”149″>8:00-10:00 English</td> <td width=”151″>10:00-12:00 Chemistry</td> <td width=”150″>12:00-2:00Maths</td> <td width=”7″>2:00-4:00 Physics</td> </tr> <tr> <td>Tuesday</td> <td>8:00-10:00 Physics</td> <td>10:00-12:00 English</td> <td>12:00-2:00 Chemistry</td> <td>2:00-4:00Maths </td> </tr> <tr> <td>Wednesday</td> <td>8:00-10:00 Chemistry</td> <td>10:00-12:00Physics </td> <td>12:00-2:00 English</td> <td>2:00-4:00 Maths</td> </tr> <tr> <td>Thursday</td> <td>8:00-10:00 Chemistry</td> <td>10:00-12:00 Maths</td> <td>12:00-2:00Physics</td> <td>2:00-4:00 English</td> </tr> <tr> <td>Friday</td> <td>8:00-10:00 Physics</td> <td>10:00-12:00 Chemistry</td> <td>12:00-2:00 English</td> <td>2:00-4:00 Maths</td> </tr> </table> </body> </html>

 

TABLE TAG ATTRIBUTES DISCRIPTION
Width It is used to define width of a table.
Height It is used to define height of a table.
Summary It is used to define summary of a table.
Cell spacing It is used to define cell spacing of a table.
Cell Padding It is used to define cell padding of a table.
Bgcolor It is used to define background color of a table.
Border It is used to define border of a table.

Simple Table Attributes Example: Following example shows a table of 6 rows and 6 columns. The height, width, border, cell spacing, cell padding, background color and summary are given as an attributes to the <table>…</table> tag.
Example 2:


<html>

<head>

<title>Website-School/HTML Table Example 2 Result</title>

</head>

 

<body>

<table width=”617″ height=”517″ border=”3″ cellpadding=”2″ cellspacing=”2″ bgcolor=”#00CC33″ summary=”Table with 6 rows and 6 columns.”>

<caption>

Table with 6 rows and 6 columns..

</caption>

<tr>

<td width=”83″>Days</td>

<td width=”78″>8:00-10:00</td>

<td width=”84″>10:00-12:00 </td>

<td width=”78″>12:00-2:00</td>

<td width=”66″>2:00-4:00 </td>

<td width=”214″>4:00-6:00 </td>

</tr>

<tr>

<td>Monday</td>

<td> English</td>

<td> Chemistry</td>

<td>Maths</td>

<td>Physics</td>

<td>Urdu</td>

</tr>

<tr>

<td>Tuesday</td>

<td>Physics</td>

<td>English</td>

<td>Chemistry</td>

<td>Maths </td>

<td>urdu</td>

</tr>

<tr>

<td>Wednesday</td>

<td>Chemistry</td>

<td>Physics </td>

<td>English</td>

<td>Maths</td>

<td> Urdu</td>

</tr>

<tr>

<td>Thursday</td>

<td> Chemistry</td>

<td> Maths</td>

<td>Physics</td>

<td> English</td>

<td>Urdu</td>

</tr>

<tr>

<td>Friday</td>

<td>Physics</td>

<td>Chemistry</td>

<td> English</td>

<td>Maths</td>

<td> Urdu</td>

</tr>

</table>

</body>

</html>

See, how easy it is to create a table using HTML.

For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial

HTML  frames

HTML FRAMES (12.2)

Nested frames example:

For the following example to work, there are two other simple HTML files : “HMTL11e1 frame a.html” and “HMTL11e1 frame b.html”. your browser will divide your screeub half. The following example shows two main framesets. The first one contains the second frameset and frame a. Then the inner frameset further contains the frame “c” and “d”.


Example  (Website-

School/HTML Frame “a”):

<html>

<head>

<title>Website-School/HTML Frame &quot;a&quot;</title>

</head>

 

<body>

This is frame a HTML document.

</body>

</html>

Example  (Website-

School/HTML Frame “b”):

<html>

<head>

<title>Website-School/HTML Frame &quot;b&quot;</title>

</head>

 

<body>

This is frame b HTML document.

</body>

</html>

Example

<html>

<frameset rows=”20%,*” frameborder=”yes” >

<frame src=”/HMTL11e1framea.html” name=”a”  scrolling=”auto” noresize=”noresize”  />

<frameset cols=”30%, 20%”   frameborder=”yes”>

<frame src=”/HMTL11e1framec.html” name=”c” scrolling=”auto” noresize=”noresize”  id=”c” />

<frame src=”/HMTL11e1framed.html” name=”d” scrolling=”auto” noresize=”noresize”  id=”d” />

</frameset>

</frameset>

<noframes>

<body>

<p> your browser do not suppport frames</p>

</body>

</noframes>

<head>

<title>Website-School/HTML Frames Example 3 Result</title>

</head>

</html>

The frames can be nested. For this purpose one frameset tags have to be inside other frameset tags. Variety of display and layouts can be created using nested frames.

For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial

 

HTML frames 1

HTML FRAMES (12.1)

A container window which can display a web page is known as Frame. Each frame can display separate HTML document. A webpage can be divided into many frames, each displaying different HTML documents simultaneously. The tag used for this purpose is <frameset>….</frameset>. This tag specifies the number of frames in a web page and their styles. Following are important attributes of this tag:


FRAMESET ATTRIBUTES VALUES
Cols It divides the screen in specified no of columns. Its value can be given in:

  • Percentage of screen
  • No of Pixels
  • “*” this symbol means all the remaining space.
Rows It divides the screen in specified no of rows. Its value can be given in:

  • Percentage of screen
  • No of Pixels
  • “*” this symbol means all the remaining space.

In each frame <frame>…</frame> tag is used to specify which HTML document is going to be displayed. Following is the syntax to divide a page into frames: <frameset> <frame> . . . </frame> </frameset> Note that frame tag is used inside frameset tag.
The attributes to <frame> …</frame> tag pair are following:

FRAME TAG ATTRIBUTES DISCRIPTION
Src It is used to specify the source of page to be displayed in the frame.
Marginheight It is used to specify the space to be left at the top and bottom sides of the frame.*
Marginwidth It is used to specify the space to be left at the sides of the frame.
Name It is used to name the frame.
Scrolling It is used to specify the appearance of horizontal and vertical scrollbars. It can have three values:

  • Yes
  • No
  • Auto

The <noframes>…..</noframes> tag is used in browsers which do not support frames. You can write a text that you want to be displayed in case no frames are displayed in the user browser. The syntax of <noframes> is:

<noframes>

<body>……..</body>

</noframes>

For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial

 

HTML Lists 2

HTML LISTS (11.2)

 

Following are the examples:


Ordered List:

The following example shows an ordered list using <ol>…</ol> tags.

 

<html>

 

<head>

<title>Website-School/HTML Lists Example 1</title>

</head>

 

<body>

<p>I like folowing fruits</p>

<ol>

<li>Cherry</li>

<li>Mango</li>

<li>Pineapple</li>

</ol>

</body>

</html>

Unordered List:

The following example shows an numbered list using <ul>…</ul> tags.


<html>

 

<head>

<title>Website-School/HTML Lists Example 2</title>

</head>

 

<body>

<p>I like folowing fruits</p>

<ul type=”square”>

<li>Cherry</li>

<li>Mango</li>

<li>Pineapple</li>

</ul>

</body>

 

</html>

Definition List:


The following example shows a defined list using <dl>…</dl> tags.

<html>

 

<head>

<title>Website-School/HTML Lists Example 3</title>

</head>

 

<body>

<p>I like folowing fruits</p>

<dl>

<dt>Cherry</dt>

<dd>It is a small sphere like fruit.</dd>

<dt>Mango</dt>

<dd>Mango is one of the delicious fruits of summer</dd>

<dt>Pineapple</dt>

<dd>The slices of Pineapple is available in market through out the year</dd>

</dl>

</body>

</html>

Nested List:

The following example shows a nested list using <ol>…</ol> and <li>..</li>  tags.

 

<html>

 

<head>

<title>Website-School/HTML Lists Example 4</title>

</head>

 

<body>

<ol>Follwoing are the books and thier author names:</ol>

<li>Physics</li>

<ol><li>John</li>

<li>Andy</li></ol>

<li>Chemistry</li>

<ol><li>Leo</li>

<li>Pheobe</li></ol>

 

</body>

</html>

For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial

lists 1

HTML LISTS (11.1)

In websites, displaying a list is very easy by the help of HTML. There are three types of lists in HTML:


ORDERED LIST: The ordered list which consists of numbered objects. This list is also known as “Numbered List”. The tag used for this type of list is <ol>….</ol>. The tag used to specify an entry of list is <li>…</li>. The attributes given to this tag are:

TAG ATTRIBUTES DISCRIPTION
TYPE This attribute specifies the type of number schemes. There are five types of number schemes:I for I,II,III….

1 for 1,2,3…..

A for A,B,C….

A for a,b,c…..

“i”fori,ii,iii…..

START It specifies the starting point (number) of the list.
VALUE It is used to change the number at any position of number sequence.

 


UNORDERED LIST: An unordered list consists of objects which are marked with symbols. This list is also known as “Unnumbered List”. The tag used for this type of list is <ul>….</ul>. The tag used to specify an entry of list is <li>…</li>. The attributes given to this tag are:

TAG ATTRIBUTES DISCRIPTION
TYPE It specifies the type of the symol which is used as a bullet for the entry of the list. There are four important types of such symbols:

  • Circle (Default value)
  • Square
  • Disc
  • Fillround

 

DEFINATION LIST: This type of list consists of terms and their description. The tag which is used for this purpose is <dl>….</dl>. The tag which is used to create a list of terms is <dt>…</dt>. The tag used for the definition of any entry of list is <dd>….</dd>.


NESTED LIST: To display items in a nested list is also very easy in HTML. The List with in another list can be displayed by using nested listing tags.

 


For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial