Scribd
Upload
5 views

HTML Examples

The document provides examples of HTML code for different elements like headings, formatting, backgrounds, lists, tables, frames, and links. It includes over 50 programs with HTML code demonstrating how to use these various elements through short code snippets. The programs cover topics like inserting text headings, formatting text, adding images or colors as backgrounds, creating ordered and unordered lists, building tables with rows and columns, implementing frames to split content, and developing internal and external links.

Uploaded by

Peter Munene
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

HTML Examples

The document provides examples of HTML code for different elements like headings, formatting, backgrounds, lists, tables, frames, and links. It includes over 50 programs with HTML code demonstrating how to use these various elements through short code snippets. The programs cover topics like inserting text headings, formatting text, adding images or colors as backgrounds, creating ordered and unordered lists, building tables with rows and columns, implementing frames to split content, and developing internal and external links.

Uploaded by

Peter Munene
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

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>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

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


<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</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%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>

Program 3
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
</html>

Program 4
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
</html>

Program 5
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frameset cols="25%,75%">
<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>
<frameset cols="20%,80%">
<frame src="frame_a.htm">
<frame src="link.htm#C10">
</frameset>
</html>

You might also like