WEB_PAGE_TEMPLATE


<html> <!-- Remember the End tag-->
<head>
<title>Title of the document</title>
</head>
<body><!-- Remember the End tag-->


<hr> </hr> <!-- Draws a Line -->

<h1>My First Heading is H1 </h1>

My First Heading is H1


<h2>This is a heading H2</h2>
<h3>This is a heading H3</h3>

This is a heading H2

This is a heading H3


<p> My first paragraph.</p>

My first paragraph.


<!-- This is a comment -->

This is 5 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; spaces
This is 5       spaces

A & is written to a page as &amp;
Write < or > to a page as &lt; and &gt;
Write &lt; or &gt; to a page as &amp;lt; and &amp;gt;

<pre>Preformatted text preserves both spaces and line breaks. </pre>
Preformatted text preserves both spaces and line breaks. 

<a href="http://www.w3schools.com">This is a link</a>
This is a link

<img src="http://www.w3schools.com/html/w3schools.jpg" width="104" height="142" />


<p>This is<br />a para<br />graph with line breaks</p>

This is
a para
graph with line breaks


<b>This text is bold</b><br />
<strong>This text is strong</strong><br />
<big>This text is big</big><br />
<em>This text is emphasized</em><br />
<i>This text is italic</i><br />
<small>This text is small</small><br />
<strike>This text is strikeout</strike>
<tt>This text is teletype</tt>
<code>This text is code</code>
<u>This text is underlined</u>
This is<sub> subscript</sub> and <sup>superscript</sup><br />

This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This text is strikeout
This text is teletype
This text is code
This text is underlined
This is subscript and superscript

A blockquote quotation:
<blockquote>
This is a long quotation.
This is a long quotation.
This is a long quotation.
This is a long quotation.
This is a long quotation.
</blockquote>
<p><b>The browser inserts line breaks and margins for a blockquote element.</b></p>

A blockquote quotation:
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.

The browser inserts line breaks and margins for a blockquote element.


A short quotation:
<q>This is a short quotation</q>
<p><b>The q element does not render as anything special.</b></p>

A short quotation: This is a short quotation

The q element does not render as anything special.


The target attribute defines where the linked document will be opened.
The code below will open the document in a new browser window:
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

The target attribute defines where the linked document will be opened.
The code below will open the document in a new browser window:
Visit W3Schools!
<p>Create a link of an image:
<a href="default.htm">
<img src="http://www.w3schools.com/html/smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a>

Create a link of an image: HTML tutorial


<p>No border around the image, but still a link:
<a href="default.htm">
<img border="0" src="http://www.w3schools.com/html/smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a>

No border around the image, but still a link: HTML tutorial


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

See also Chapter 4.

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

Chapter 4

This chapter explains ba bla bla


<p><img src="http://www.w3schools.com/html/hackanm.gif" width="20" height="20" /></p>
<p><img src="http://www.w3schools.com/html/hackanm.gif" width="45" height="45" /></p>
<p><img src="http://www.w3schools.com/html/hackanm.gif" width="70" height="70" /></p>

You can make an image smaller or larger by changing the values of the "height" and "width" attributes.


<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="http://www.w3schools.com/html/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.w3schools.com/images/sun.gif" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.w3schools.com/html/merglobe.gif" />
<area shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/images/venglobe.gif" />
</map>

Click on the sun or on one of the planets to watch it closer:

Planets Sun Mercury Venus
<table border="1">
<tr>
<td>row 1, cell 1</td> <td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td> <td>row 2, cell 2</td>
</tr>
</table>

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

<hr> </hr>
<table border="1">
<tr>
<th>Heading</th> <th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td><td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td><td>row 2, cell 2</td>
</tr>
</table>

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

FORM FEEDBACK
<form method="POST" name="myForm" cellspacing="0">  <strong>
Q:Which US city has the largest population? </strong>
<input type="radio" name="Cities" value="Chicago" language="JavaScript"
onclick="myForm.AnswerArea.value ='Chicago is third largest.';">Chicago
<input type="radio" name="Cities" value="LA" language="JavaScript"
onclick="myForm.AnswerArea.value ='LA is in the second place.';">Los Angeles
<input type="radio" name="Cities" value="Houston" language="JavaScript"
onclick="myForm.AnswerArea.value ='not even close. ';">Houston
<input type="radio" name="Cities" value="NewYork" language="JavaScript"
onclick="myForm.AnswerArea.value ='New York City the #1.';"> New York
<textarea name="AnswerArea" rows="3" cols="39" wrap="virtual">
</textarea>

  Q:Which US city has the largest population? Chicago Los Angeles Houston New York
Form Examples <script language="JavaScript">
function Message5() { window.alert("You have selected other!!"); } </script>
<Form>
Select your gender below:
<input type=radio name="gender" value="F" > Female
<input type=radio name="gender" value="M" > Male
<input type=radio name="gender" value="O" onclick="JavaScript:Message5()"> Other
</Form>

Select your gender below:  Female  Male  Other

Age
<Form>
<INPUT TYPE="radio" NAME="age" VALUE="a" ><18
<INPUT TYPE="radio" NAME="age" VALUE="b" CHECKED >18-65
<INPUT TYPE="radio" NAME="age" VALUE="c" >65+
</Form>

<18 18-65 65+

HORIZONTAL RULES HR SIZE=1 WIDTH=100%
HR SIZE=5 WIDTH=50%
HR SIZE=25 WIDTH=75%
HR SIZE=3 WIDTH=100%
HR NOSHADE SIZE=1 WIDTH=100%
HR NOSHADE SIZE=3 WIDTH=100%
HR NOSHADE SIZE=10 WIDTH=20%

</body><!-- Remember the End tag-->

</html><!-- Remember the End tag-->