EXAMPLES FOR HTML COURSE

Collected by Nhat Duy Nguyen

From : www.w3schools.com

TP.HCM, 27-08-2004

Table of contents :

Basic Tags

A very simple HTML document..........................................................................................4

How text inside paragraphs is displayed
More paragraphs
The use of line breaks
Poem problems (some problems with HTML formatting)
Heading tags
Center aligned heading
Insert a horizontal rule
Comments in the HTML source
Add a background color.......................................................................................................5
Add a background image

Formatting Text

Text formatting
Preformatted text (how to control line breaks and spaces)
Different computer-output tags
Insert an address...................................................................................................................6
Abbreviations and acronyms
Long and short quotations
How to mark deleted and inserted text ...............................................................................7

Links

How to create hyperlinks

Set an image as a link...........................................................................................................8
Open a link in a new browser window
Jump to another part of a document (on the same page)
Break out of a frame..........................................................................................................10
How to link to a mail message (will only work if you have mail installed)

Frames
How to create a vertical frameset with 3 different documents..........................................11
How to create a horizontal frameset with 3 different documents
How to mix a frameset in rows and columns.....................................................................12
How to create a navigation frame
Inline frame (a frame inside an HTML page)....................................................................13
Jump to a specified section within a frame
Jump to a specified section with frame navigation ...........................................................14

Tables

Simple tables
Different table borders.......................................................................................................15
Table with no borders
Headings in a table.............................................................................................................16
Empty cells
Table with a caption...........................................................................................................17
Table cells that span more than one row/column...............................................................18
Tags inside a table..............................................................................................................19
Cell padding (control the white space between cell content and the borders
Cell spacing (control the distance between cells)
Add a background color or a background image to a table...............................................20
Add a background color or a background image to a table cell.........................................21
Align the content in a table cell
The new frame attribute

Lists

An unordered list................................................................................................................22
An ordered list....................................................................................................................23
Different types of ordered lists
Different types of unordered Lists.....................................................................................24
Nested list
Nested list 2........................................................................................................................25
Definition list

Forms and Input

How to create input fields..................................................................................................26

Password fields
Checkboxes
Radiobuttons......................................................................................................................27
Simple drop-down box (a selectable list)
Another drop-down box with a pre-selected value
Textarea (a multi-line text input field)
Create a button
Draw a border with a caption around data
Form with an input field and a submit button....................................................................28
Form with checkboxes and a submit button
Form with radiobuttons and a submit button
Send a mail from a form ...................................................................................................29

Images

Insert images
Insert images from another folder or another server
Align an image within a text..............................................................................................30
Let the image float to the left/right of a paragraph............................................................31
Adjust images to different sizes.........................................................................................32
Display an alternate text for an image (if the browser can't load images)
Make a hyperlink of an image
Create an image-map, with click-able regions

Backgrounds

Good background and text color

Bad background and text color
Good background image
Good background image 2
Bad background image

Styles

Styles in the head section of an HTML document.............................................................33

Link that is not underlined.................................................................................................34
Link to an external style sheet

The Head Section

Set a title of a document

One target for all links on a page

The Meta Tag

Document description
Document keywords
Redirect a user to another URL ........................................................................................35
1. A very simple HTML document
<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>

2. How text inside paragraphs is displayed

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

3. The use of line breaks

<html>
<body>

<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>

</body>
</html>

4. Heading tags
<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 just to make something bold. Use other tags for
that.</p>

</body>
</html>

5. Add a background color

<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>

6. Text formatting
<html> This text is bold
<body> This text is strong
This text is big
<b>This text is bold</b> This text is emphasized
This text is italic
<br> This text is small
This text contains subscript
<strong> This text contains superscript
This text is strong
</strong>

<br>

<big>
This text is big
</big>

<br>

<em>
This text is emphasized
</em>

<br>

7. Insert a horizontal rule

<html> The hr tag defines a horizontal rule:
<body>
<p>The hr tag defines a horizontal
rule:</p>
<hr>
<p>This is a paragraph</p> This is a paragraph
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p> This is a paragraph
</body>
</html>
This is a paragraph

8. Insert an address
<html> Donald Duck
<body> BOX 555
Disneyland
<address> USA
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>

</body>
</html>

9. How to create hyperlinks

<html> This text is a link to a page on this
<body> Web site.

<p> This text is a link to a page on the

<a href="lastpage.htm"> World Wide Web.
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>

10. Preformatted text (how to control line breaks and spaces)

<html> This is
<body> preformatted text.
It preserves both
<pre> spaces
This is and line breaks.
preformatted text.
It preserves both spaces The pre tag is good for displaying
and line breaks. computer code:
</pre>
for i = 1 to 10
print i
<p>The pre tag is good for
next
displaying computer code:</p>

<pre>
for i = 1 to 10
print i
next i
</pre>

</body>
</html>

11. How to mark deleted and inserted text

<html> a dozen is twelve pieces
<body>
Most browsers will overstrike
<p> deleted text and underline inserted
a dozen is text.
<del>twenty</del>
<ins>twelve</ins> Some older browsers will display
pieces deleted or inserted text as plain text.
</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>

12. Set an image as a link

<html> You can also use an image as a link:
<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>

13. Open a link in a new browser window

<html> Last Page
<body>
If you set the target attribute of a link
<a href="lastpage.htm" to "_blank", the link will open in a
target="_blank">Last Page</a> new window.

<p>
If you set the target attribute of a link
to "_blank",
the link will open in a new window.
</p>

</body>
</html>

14. Jump to another part of a document (on the same page)

<html> See also Chapter 4.
<body>
<p> Chapter 1
<a href="#C4">
See also Chapter 4. This chapter explains ba bla bla
</a>
</p> Chapter 2

This chapter explains ba bla bla

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

<h2>Chapter 2</h2> Chapter 4

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

<h2>Chapter 3</h2> Chapter 5

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

Chapter 6
<a name="C4"><h2>Chapter
4</h2></a> This chapter explains ba bla bla
<p>This chapter explains ba bla
bla</p> Chapter 7
<h2>Chapter 5</h2> This chapter explains ba bla bla
<p>This chapter explains ba bla
bla</p> Chapter 8

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

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

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

<p>This chapter explains ba bla
Chapter 10
bla</p>
This chapter explains ba bla bla
<h2>Chapter 8</h2>
<p>This chapter explains ba bla Chapter 11
bla</p>
This chapter explains ba bla bla
<h2>Chapter 9</h2>
<p>This chapter explains ba bla Chapter 12
bla</p>
<h2>Chapter 10</h2> This chapter explains ba bla bla
<p>This chapter explains ba bla
bla</p> Chapter 13

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

<p>This chapter explains ba bla
Chapter 14
bla</p>
This chapter explains ba bla bla
<h2>Chapter 12</h2>
<p>This chapter explains ba bla Chapter 15
bla</p>
This chapter explains ba bla bla
<h2>Chapter 13</h2>
<p>This chapter explains ba bla Chapter 16
bla</p>
This chapter explains ba bla bla
<h2>Chapter 14</h2>
<p>This chapter explains ba bla Chapter 17
bla</p>
This chapter explains ba bla bla
<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>

15. Break out of a frame

<html> Locked in a frame?
<body>
Click here!
<p>Locked in a frame?</p>

<a
href="http://www.w3schools.com/"
target="_top">Click here!</a>

</body>
</html>

16. How to link to a mail message (will only work if you have mail installed)
<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>

This is a mail link: Send Mail

Note: Spaces between words should be replaced by %20

to ensure that the browser will display your text properly.

17. How to create a vertical frameset with 3 different documents

<html>

<frameset
cols="25%,50%,25%">

<frame
src="tryhtml_frame_a.htm">
<frame
src="tryhtml_frame_b.htm">
<frame
src="tryhtml_frame_c.htm">

</frameset>

</html>

18. How to create a horizontal frameset with 3 different documents

<html>

<frameset rows="25%,50%,25%">

<frame
src="tryhtml_frame_a.htm">
<frame
src="tryhtml_frame_b.htm">
<frame
src="tryhtml_frame_c.htm">

</frameset>

</html>

19. How to mix a frameset in rows and columns

<html>

<frameset rows="50%,50%">

<frame src="tryhtml_frame_a.htm">

<frameset cols="25%,75%">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>

</frameset>

</html>

20. How to create a navigation frame

<html>

<frameset cols="120,*">

<frame src="tryhtml_contents.htm">

<frame src="tryhtml_frame_a.htm"

name="showframe">

</frameset>

</html>

21. Inline frame (a frame inside an HTML page)

<html>
<body>

<iframe src="default.asp"></iframe>

<p>Some older browsers don't

support iframes.</p>
<p>If they don't, the iframe will not
be visible.</p>

</body>
</html>

22. Jump to a specified section within a frame

<html>

<frameset cols="20%,80%">

<frame
src="tryhtml_frame_a.htm">
<frame src="link.htm#C10">

</frameset>

</html>

23. Jump to a specified section with frame navigation

<html>

<frameset cols="180,*">

<frame src="content.htm">
<frame src="link.htm"
name="showframe">

</frameset>

</html>

24. Simple tables

<html> Each table starts with a table tag. Each table row starts with a
<body> tr tag. Each table data starts with a td tag.

<p> One column:

Each table starts with a table tag.
Each table row starts with a tr tag. 100
Each table data starts with a td tag.
</p> One row and three columns:

<h4>One column:</h4> 100 200 300

<table border="1">
<tr> Two rows and three columns:
<td>100</td>
</tr> 100 200 300
</table>
400 500 600
<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>

25. Different table borders

<html> With a normal border:
<body>
First Row
<h4>With a normal border:</h4> Secon
<table border="1"> Row
d
<tr>
<td>First</td>
With a thick border:
<td>Row</td>
</tr>
<tr> First Row
<td>Second</td> Secon
Row
<td>Row</td> d
</tr>
</table> With a very thick border:

<h4>With a thick border:</h4> First Row

<table border="8"> Secon
<tr> Row
d
<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>

26. Headings in a table

<html> Table headers:
<body>
Telephon Telephon
Name
<h4>Table headers:</h4> e e
<table border="1"> Bill 555 77 555 77
<tr> Gates 854 855
<th>Name</th>
<th>Telephone</th> Vertical headers:
<th>Telephone</th>
</tr> First
<tr> Bill Gates
Name:
<td>Bill Gates</td>
<td>555 77 854</td> 555 77
Telephone:
<td>555 77 855</td> 854
</tr> 555 77
Telephone:
</table> 855

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

27. Table with a caption

<html> This table has a caption, and a thick border:
<body>
My Caption
<h4> 100 200 300
This table has a caption,
400 500 600
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>

28. Table cells that span more than one row/column

<html> Cell that spans two columns:
<body>
 Name Telephone
<h4>Cell that spans two
Bill 555 77 555 77
columns:</h4>
Gates 854 855
<table border="1">
<tr>
Cell that spans two rows:
<th>Name</th>
<th colspan="2">Telephone</th>
</tr> First
Bill Gates
<tr> Name:
<td>Bill Gates</td> 555 77
<td>555 77 854</td> 854
Telephone:
<td>555 77 855</td> 555 77
</tr> 855
</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>

29. Tags inside a table

<html> This cell contains a
<body> This is a paragraph
table:
This is another AB
<table border="1">
paragraph CD
<tr>
<td> This cell contains a HELLO
<p>This is a paragraph</p> list
 <p>This is another  apples
paragraph</p>  bananas
</td>
<td>This cell contains a table:  pineapples
<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>

30. Cell padding (control the white space between cell content and the borders
<html> Without cellpadding:
<body>
First Row
<h4>Without cellpadding:</h4> Secon
<table border="1"> Row
d
<tr>
<td>First</td>
With cellpadding:
<td>Row</td>
</tr>
<tr> First Row
<td>Second</td>
 <td>Row</td>
</tr> Secon
Row
</table> d

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

31. Add a background color or a background image to a table

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

<h4>A background image:</h4>

<table border="1"
background="/images/bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

</body>
</html>

32. Add a background color or a background image to a table cell

<html> Cell backgrounds:
<body>
First Row
<h4>Cell backgrounds:</h4> Secon
<table border="1"> Row
d
<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>

33. Align the content in a table cell

<html> Money spent on.... January February
<body>
Clothes $241.10 $50.20
<table width="400" border="1"> Make-Up $30.00 $44.45
<tr> Food $730.40 $650.00
<th align="left">Money spent on....</th> Sum $1001.50 $744.65
<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>

34. An unordered list

<html> An Unordered List:
<body>
 Coffee
<h4>An Unordered  Tea
List:</h4>  Milk
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

35. An ordered list

<html> An Ordered List:
<body>
1. Coffee
<h4>An Ordered List:</h4> 2. Tea
<ol> 3. Milk
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

36. Different types of ordered lists

<html> Numbered list:
<body>
1. Apples
<h4>Numbered list:</h4> 2. Bananas
<ol> 3. Lemons
<li>Apples</li> 4. Oranges
<li>Bananas</li>
<li>Lemons</li> Letters list:
<li>Oranges</li>
</ol> A. Apples
B. Bananas
<h4>Letters list:</h4> C. Lemons
<ol type="A"> D. Oranges
<li>Apples</li>
Lowercase letters list:
<li>Bananas</li>
<li>Lemons</li> a. Apples
<li>Oranges</li> b. Bananas
</ol> c. Lemons
d. Oranges
<h4>Lowercase letters list:</h4>
<ol type="a"> Roman numbers list:
<li>Apples</li>
<li>Bananas</li> I. Apples
<li>Lemons</li> II. Bananas
<li>Oranges</li> III. Lemons
</ol> IV. Oranges

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

<ol type="I">
<li>Apples</li> i. Apples
<li>Bananas</li> ii. Bananas
<li>Lemons</li> iii. Lemons
<li>Oranges</li> iv. Oranges
</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>

37. Different types of unordered Lists

<html> Disc bullets list:
<body>
 Apples
<h4>Disc bullets list:</h4>  Bananas
<ul type="disc">  Lemons
<li>Apples</li>  Oranges
<li>Bananas</li>
<li>Lemons</li> Circle bullets list:
<li>Oranges</li>
</ul> o Apples
o Bananas
<h4>Circle bullets list:</h4> o Lemons
<ul type="circle"> o Oranges
<li>Apples</li>
Square bullets list:
<li>Bananas</li>
<li>Lemons</li>  Apples
<li>Oranges</li>  Bananas
</ul>  Lemons
 Oranges
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>

38. Nested list 2

<html> A nested List:
<body>
 Coffee
<h4>A nested List:</h4>  Tea
<ul> o Black tea
<li>Coffee</li> o Green tea
<li>Tea  China
<ul>  Africa
<li>Black tea</li>  Milk
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>

39. Definition list

<html> A Definition List:
<body>
Coffee
<h4>A Definition Black hot drink
List:</h4> Milk
<dl> White cold drink
<dt>Coffee</dt>
<dd>Black hot
drink</dd>
<dt>Milk</dt>
<dd>White cold
drink</dd>
</dl>
</body>
</html>

40. How to create input fields

<html> First name:
<body>
Last name:
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>

</body>
</html>

41. Password fields

<html> Username:
<body>
Password:
<form>
Note that when you type characters in a password
Username:
field, the browser displays asterisks or bullets
<input type="text" name="user">
instead of the characters.
<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>

42. Checkboxes
<html> I have a bike:
<body>
I have a car:
<form>
I have a bike:
<input type="checkbox"
name="Bike">
<br>
I have a car:
<input type="checkbox"
name="Car">
</form>

</body>
</html>

43. Radiobuttons
<html> Male:
<body>
Female:
<form>
When a user clicks on a radio-button, the button
Male:
becomes checked, and all other buttons with the
<input type="radio" checked
same name become unchecked
name="Sex" value="male">
<br>
Female:
<input type="radio"
name="Sex" value="female">
</form>

<p>
When a user clicks on a radio-button, the button
becomes checked, and all other buttons with the
same name become unchecked
</p>

</body>
</html>

44. Another drop-down box with a pre-selected value

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

45. Form with an input field and a submit button

<html> Type your first name:
Mickey

<body> Mouse
Type your last name:
Submit
<form name="input"
action="html_form_action.asp" method="get">
If you click the "Submit" button, you will send
Type your first name: your input to a new page called
<input type="text" name="FirstName" html_form_action.asp.
value="Mickey" size="20">
<br>Type your last name:
<input type="text" name="LastName"
value="Mouse" size="20">
<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>

46. Form with checkboxes and a submit button

<html> I have a bike:
<body>
<form name="input" I have a car:
Submit
action="html_form_action.asp" method="get">
I have a bike: If you click the "Submit" button, you send your
<input type="checkbox" name="Bike" checked> input to a new page called html_form_action.asp.
<br>
I have a car:
<input type="checkbox" name="Car">
<br>
<input type="submit" value="Submit">

</form>

<p>
If you click the "Submit" button, you send your
input to a new page called html_form_action.asp.
</p>

</body>
</html>

47. Send a mail from a form

<html>
<body> This form sends an e-mail to W3Schools.
<form
action="MAILTO:someone@w3schools.com" Name:
yourname
method="post" enctype="text/plain">
Mail:
<h3>This form sends an e-mail to yourmail

W3Schools.</h3> Comment:
Name:<br> yourcomment

<input type="text" name="name"

value="yourname" size="20"> Send Reset
<br>
Mail:<br>
<input type="text" name="mail"
value="yourmail" size="20">
<br>
Comment:<br>
<input type="text" name="comment"
value="yourcomment" size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>

48. Insert images from another folder or another server

<html>
<body> An image from another folder:

<p>
An image from another folder:
<img src="/images/netscape.gif" An image from W3Schools:
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>

49. Align an image within a text

<html>
<body>
An image in the text
<p>
An image
<img src ="/images/xhtml.gif" An image in the text
align="bottom" width="100" height="50">
in the text
</p> An image in the text
<p> Note that bottom alignment is the default alignment
An image
<img src ="/images/xhtml.gif"
align="middle" width="100" height="50">
An image in the text
in the text
</p>
<p>
An image
<img src ="/images/xhtml.gif" An image before the text
align="top" width="100" height="50">
in the text
</p>
An image after the text
<p>Note that bottom alignment is the
default alignment</p>

<p>
An image
<img src ="/images/xhtml.gif"
width="100" height="50">
in the text
</p>

<p>
<img src ="/images/xhtml.gif"
width="100" height="50">
An image before the text
</p>

<p>
An image after the text
<img src ="/images/xhtml.gif"
width="100" height="50">
</p>

</body>
</html>

50. Let the image float to the left/right of a paragraph

<html> A paragraph with an image. The align
<body> attribute of the image is set to "left".
The image will float to the left of this
<p> text.
<img src ="/images/xhtml.gif"
align ="left" width="100" height="50"> A paragraph with an image. The align attribute of
A paragraph with an image. The align attribute of the image is set to "right". The image will float to
the image is set to "left". The image will float to the right of this text.
the left of this text.
</p>
<p>
<img src ="/images/xhtml.gif"
align ="right" width="100" height="50">
A paragraph with an image. The align attribute of
the image is set to "right". The image will float to
the right of this text.
</p>

</body>
</html>

51. Adjust images to different sizes

<html>
<body>

<p>
<img src="/images/hackanm.gif"
width="20" height="20">
</p>

<p>
<img src="/images/hackanm.gif"
width="45" height="45"> You can make a picture larger or smaller changing
</p> the values in the "height" and "width" attributes of
the img tag.
<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>

52. Create an image-map, with click-able regions

<html> Click on one of the planets to watch it closer:
<body>

<p>
Click on one of the planets to watch it closer:
</p>

<img src="/images/planets.gif"
width="145" height="126"
usemap="#planetmap">
Note: We use both an id and a name attribute in
<map id="planetmap" name="planetmap"> the map tag because some versions of Netscape
don't understand the id attribute.
<area shape="rect"
coords="0,0,82,126"
alt="Sun"
href="sun.htm">

<area shape="circle"
coords="90,58,3"
alt="Mercury"
href="mercur.htm">

<area shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm">

</map>

<p>
<b>Note:</b> We use both an <b>id</b> and a
<b>name</b> attribute in the map tag
because some versions of Netscape don't
understand the id attribute.</p>

</body>
</html>

53. Styles in the head section of an HTML document

<html> This is header 1

<head> This is header 3

<style>
h1 {color: red}
h3 {color: blue}
</style>

</head>

<body>
<h1>This is header 1</h1>
<h3>This is header 3</h3>
</body>

</html>

54. Link that is not underlined

<html> THIS IS A LINK!

<body>

<a href="lastpage.htm"

style="text-decoration:none">

THIS IS A LINK!

</a>

</body>

</html>

55. The Meta Tag : Document description

<html> The meta attributes of this document identify the
author and the editor software.
<head>

<meta name="author"
content="Jan Egil Refsnes">

<meta name="revised"
content="Jan Egil Refsnes,6/10/99">
<meta name="generator"
content="Microsoft FrontPage 4.0">

</head>

<body>
<p>
The meta attributes of this document identify the
author and the editor software.
</p>
</body>

</html>

56. The Meta Tag : Document keywords

<html> The meta attributes of this document describe the
document and its keywords.
<head>

<meta name="description"
content="HTML examples">

<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML,
JavaScript, VBScript">

</head>

<body>
<p>
The meta attributes of this document describe the
document and its keywords.
</p>
</body>

</html>

57. Redirect a user to another URL

<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.w3schools.com">
</head>
<body>
<p>
Sorry! We have moved! The new URL is: <a
href="http://www.w3schools.com">http://www.w3schools.com</a>
</p>

<p>
You will be redirected to the new address in five seconds.
</p>
<p>
If you see this message for more than 5 seconds, please click on the link above!
</p>

</body>
</html>