HTML Examples

HTML Examples
 Copy and paste the programs in a text editor (like notepad) and save it as filename.html.
 To run/ execute the program, open the file in Ms Internet Explorer
1. Head
Program 1
<html>
<head>
<title>The title is not displayed</title>
</head>
<body>
<p>This text is displayed</p>
</body>
</html>
2. Formatting
Program 1
<html>
<body>
<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Program 2
<html>
<body>
<address>
Donald Duck<br />
BOX 555<br />
Disneyland<br />
USA
</address>
</body>
</html>
Program 3
<html>
<body>
<abbr title="United Nations">UN</abbr>

<br />
<acronym title="World Wide Web">WWW</acronym>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer
over the acronym or abbreviation.</p>
</body>
</html>
Program 4
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the
right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
Program 5
<html>
<body>
<p>
a dozen is
<del>twenty</del>
<ins>twelve</ins>
pieces
</p>
<p>
Most browsers will overstrike deleted text and underline inserted text.
</p>
<p>
Some older browsers will display deleted or inserted text as plain text.
</p>
</body>
</html>
3. Background Examples
Program 1
<html>
<body bgcolor="#d0d0d0">
<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph.
</p>
<p>
This is another paragraph. This is another paragraph. This is another paragraph. This is
another paragraph.
</p>
</body>
</html>
Program 2
<html>
<body background="Kenya.jpg">
<h3>Image Background</h3>
<p>Both gif and jpg files can be used as HTML backgrounds.</p>
<p>If the image is smaller than the page, the image will repeat itself.</p>
</body>
</html>
4. Lists
Program 1
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Program 2
<html>
<body>
<h4>An Ordered List:</h4>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Program 3
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>

<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>

<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>

<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
Program 4
<html>
<body>
<h4>Disc bullets list:</h4>

<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>

<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Program 5
<html>
<body>
<h4>A nested List:</h4>

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Program 6
<html>
<body>
<h4>A Definition List:</h4>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
5. Links
Program 1
<html>
<body>
<p>Create a link of an image:

<a href="default.htm">
<img src=" kenya.jpg " alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:

<a href="default.htm">
<img border="0" src="kenya.jpg" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>
Program 2
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2><a name="C4">Chapter 4</a></h2>

<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
</body>
</html>
Program 3
<html>
<body>
<p>Locked in a frame?</p>
<a href="http://www.w3schools.com/"
target="_top">Click here!</a>
</body>
</html>
Program 4
<html>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the
browser will display your text properly.
</p>
</body>
</html>
Program 5
<html>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the
browser will display your text properly.
</p>
</body>
</html>
Program 6
6. Tables
Program 1
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Program 2
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Program 3
<html>
<body>
<h4>
This table has a caption,
and a thick border:
</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Program 4
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
Program 5
<html>
<body>
<h4>A background color:</h4>

<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>

<table border="1"
background="kenya.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Program 6
<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
7. Frames
Program 1
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
Program 2
<html>
<frameset rows="25%,50%,25%">
</frameset>
</html>
Program 3
<html>
<frameset cols="25%,50%,25%">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
</html>
Program 4
<html>
<frameset rows="50%,50%">
<frameset cols="25%,75%">
</frameset>
</frameset>
</html>
Program 5
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>
Program 6
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm">
<frame src="frame_a.htm"
name="showframe">
</frameset>
</html>
Program 7
<html>
<frame src="link.htm#C10">
</frameset>
</html>

HTML Examples

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Examples

Uploaded by

Copyright:

Available Formats

HTML Examples

<p><b>This text is bold</b></p>

<abbr title="United Nations">UN</abbr>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<h4>An Ordered List:</h4>

<h4>Lowercase letters list:</h4>

<h4>Roman numbers list:</h4>

<h4>Lowercase Roman numbers list:</h4>

<h4>Disc bullets list:</h4>

<h4>Circle bullets list:</h4>

<h4>A nested List:</h4>

<h4>A Definition List:</h4>

<p>Create a link of an image:

<p>No border around the image, but still a link:

<h2><a name="C4">Chapter 4</a></h2>

<h4>A background color:</h4>

<h4>A background image:</h4>

You might also like