|
Example 1, A very simple HTML document
Go Top
<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>
Example 2, Giving comments
Go Top
<html>
<body>
<!--This comment will not be displayed-->
This is a regular paragraph
</body>
</html>
Example 3, Simple paragraph tag
Go Top
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
Example 4, Paragraph with mulitple lines in the source code
Go Top
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
Example 5, Problems with HTML Spacing
Go Top
<html>
<body>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<p>Note that your browser simply ignores your formatting!</p>
</body>
</html>
Example 6, Preformat tag
Go Top
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Example 7, Line Breaks on web page
Go Top
<html>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
</body>
</html>
Example 8, HTML Headings
Go Top
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>Use heading tags only for headings. Don't use them to make something big. Use other tags for that.</p>
</body>
</html>
Example 9, Centralised heading
Go Top
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>
</body>
</html>
Example 10 Giving Horizontal Line on a web page
Go Top
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>
Example 11, Add a Background Color
Go Top
<html>
<body bgcolor="yellow">
<h3>Look: Colored Background!</h3>
</body>
</html>
Example 12, Add a Background Color
Go Top
<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>
Example 13, Add a Background Image
Go Top
<html>
<body background="background.jpg">
<h3>Look: 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>
Example 14 Text formatting
Go Top
<html>
<body>
<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>
This text contains
<sub>
subscript
</sub>
<br>
This text contains
<sup>
superscript
</sup>
</body>
</html>
Example 15 Insert Image
Go Top
<html>
<body>
<img src="../images/goleft.gif" alt="Go Left" width="32" height="32">
<p>
Text-only browsers will only display the text in the "alt" attribute, which is "Go Left".
Note that if you hold the mouse pointer over the image it will display the text.
</p>
</body>
</html>
Example 16 Adjust Images to different Sizes
Go Top
<html>
<body>
<p>
<img src="../images/hackanm.gif" width="20" height="20">
</p>
<p>
<img src="../images/hackanm.gif" width="45" height="45">
</p>
<p>
<img src="../images/hackanm.gif" width="70" height="70">
</p>
<p>
You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the <img> tag.
</p>
</body>
</html>
Example 17, Working with Images from Different Folder
Go Top
<html>
<body>
<p>
An image from another folder:
<img src="../images/netscape.gif" width="33" height="32">
</p>
<p>
An image from W3Schools:
<img src="http://www.w3schools.com/images/ie.gif" width="73" height="68">
</p>
</body>
</html>
Example 18, Working with Moving Images
Go Top
<html>
<body>
<p>
An image:
<img src="constr4.gif" width="144" height="50">
</p>
<p>
A moving image:
<img src="hackanm.gif" width="48" height="48">
</p>
<p>
Note that the syntax of inserting
a moving image, is no different from
a non-moving image.
</p>
</body>
</html>
Example 19,
Display an Alternate Text for an Image
Go Top
<html>
<body>
<img src="../images/goleft.gif" alt="Go Left" width="32" height="32">
<p>
Text-only browsers will only display the text in the "alt" attribute, which is "Go Left".
Note that if you hold the mouse pointer over the image it will display the text.
</p>
</body>
</html>
Example 20,
How to create Hyperlinks
Go Top
<html>
<body>
<p>
<a href="lastpage.htm">
This text</a> is a link to a page on
this Web site.
</p>
<p>
<a href="http://www.microsoft.com/">
This text</a> is a link to a page on
the World Wide Web.
</p>
</body>
</html>
Example 21, Set
an Image as a Link
Go Top
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>
</body>
</html>
Example 22,
Open a Link in a new browser window
Go Top
<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
</body>
</html>
Example 23, Jumping to another part of a document in the same page
Go Top
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<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>
<a name="C4"><h2>Chapter 4</h2></a>
<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>
Example 24, How to link to a mail message
Go Top
<html>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?Subject=Hello again">
Send Mail</a>
</p>
</body>
</html>
Example 25, Simple Unordered List
Go Top
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Example 26, Nested Unordered List
Go Top
<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>
<html>
<body>
Example 27, Bulleted List
Go Top
<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>
Example 28, An Ordered List
Go Top
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Example 29, A Numbered
List Go Top
<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>
Example 30, A Definition List
Go Top
<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>
Example 31, Simple Tables
Go Top
<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>
Example 32, Different Table Borders
Go Top
<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a very thick border:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Example 33, Table with no borders
Go Top
<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>And this table has no borders:</h4>
<table border="0">
<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>
Example 34, Headings in a Table
Go Top
<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>
Example 35,
Table with Empty Cells
Go Top
<html>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>
As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.
</p>
<p>
The trick is to insert a no-breaking space ( ) in the cell. No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.
</body>
</html>
Example 36,
Table cell spans more than one row or column
Go Top
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Example 36, Tags
inside table Go
Top
<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> </td>
</tr>
</table>
</body>
</html>
Example 37,
Cell padding the white space between cell content and the
border Go Top
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Example 38,
Cell Spacing - control the distance between cells
Go Top
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Example 39, Align the Content in a Table Cell
Go Top
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
Example 40,
Add a Background Color or a Background image to a Table Cell
Go Top
<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="../images/bgdesert.jpg">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Example 41,
How to Create Input Field
Go Top
<html>
<body>
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
Example 42,
How to Create Password Field
Go Top
<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.
</p>
</body>
</html>
Example 43, How to Create MultiLine
Input Field Go
Top
<html>
<body>
<p>
This example can not be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
Example 44, How
to Use Check Boxes
Go Top
<html>
<body>
<form>
I have a bike:
<input type="checkbox" name="Bike">
<br>
I have a car:
<input type="checkbox" name="Car">
</form>
</body>
</html>
Example 45, How to Use Radio Buttons on a Form
Go Top
<html>
<body>
<form>
Male:
<input type="radio" checked name="Sex">
<br>
Female:
<input type="radio" name="Sex">
</form>
<p>
When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name becomes unchecked
</p>
</body>
</html>
Example 46,
How to Create Simple Drop-Down List
Go Top
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
Example 47,
How to Create Drop-Down box with pre-selected Value
Go Top
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat" selected>Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
Example 48,
How to Create Push Buttons
Go Top
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Enter your first name:
<input type="text" name="FirstName" value="Mickey">
<br>Enter your last name:
<input type="text" name="LastName" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>
<p>
If you click the "Submit" button, you will send your input to a new page called
html_form_action.asp.
</p>
</body>
</html>
Example 49,
How to Draw a Border with a Caption Around Data
Go Top
<html>
<body>
<fieldset>
<legend>
Health information:
</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>
<p>
If there is no border around the input form, your browser is too old.
</p>
</body>
</html>
Example 50,
Source code of navigation frame
Go Top
<html>
<body>
<a href ="framea.htm" target ="showframe">Frame a</a><br>
<a href ="frameb.htm" target ="showframe">Frame b</a><br>
<a href ="framec.htm" target ="showframe">Frame c</a>
</body>
</html>
<!--Code of Frame A -->
<html>
<body bgcolor="#8F8FBD">
<h3>Frame A</h3>
</body>
</html>
<!--Code of frameB -->
<html>
<body bgcolor="#EBC79E">
<h3>Frame B</h3>
</body>
</html>
<!--Source code of frame C -->
<html>
<body bgcolor="#FFFFCC">
<h3>Frame C</h3>
</body>
</html>
Example 51,
HTML file for creating frame for navigation
Go Top
<html>
<frameset cols="120,*">
<frame src="framea.htm">
<frame src="frameb.htm" name="showframe">
</frameset>
</html>
|
