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 »

 

Category Archives: HTML

HTML online tutorial

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)
HTML PARAGRAPHS (6.1)
HTML Paragraph (6.2)
HTML HEADINGS 7
HTML FORMATS 8
HTML IMAGES 9
HTML LINKS (10.1)
HTML LINKS (10.2)
HTML LISTS (11.1)
HTML LISTS (11.2)
HTML FRAMES (12.1)
HTML FRAMES (12.2)
HTML TABLES (13)
HTML SUMMARY
email
XHTML

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 tags to be used. These tags are used to carry data. In short XHTML was designed to carry data not to display data.
The difference between HTML and XML is that:

  • XML is basically designed to store information in structured format and transport it. It does not perform any function on information except storing it.
  •  

  • HTML was designed to display any stored information, it focuses on the layout of information.
  •  


ADVANTAGES OF XHTML:

Following are some advantages of XHTML:

  • XHTML is used as a compliment to HTML. With HTML, XHTML is used to transport data and display it efficiently.
  • XHTML is easy to understand and use.
  • XHTML allows user to define its own tags so that data can be stored according to user’s defined structure.

There is more information about XHTML coming up on this site very soon.

html summary

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 these lessons, I hope that you can easily design a simple website like this one. Now you should learn XHTML.


To get more knowledge about Web designing, check other available tutorials on this website.

.To go back to Contents of this tutorial: Contents of HTML Tutorial

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