Learn with Kbdk: Examples of Html code for practice(Html)
Example 1
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
</body>
</html>
Example 2
<html>
<body>
<p>This is<br />
a para<br/>
graph with line breaks</p>
</body>
</html>
Example 3
<html>
<body>
<p>
My Bonnie lies over the
ocean.
My Bonnie lies over the sea.
My Bonnie lies over the
ocean.
</p>
</body>
</html>
Example 4
<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>
</body>
</html>
Example 5
<html>
<body>
<h1 style="text-
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 6
<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 7
<html>
<body>
<!--This comment will not be
displayed-->
<p>This is a regular
paragraph</p>
</body>
</html>
Example 8
<html>
<body style="background-
color:yellow">
<h2>Look: Colored
Background!</h2>
</body>
</html>
Example 9
<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>
Example 10
<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
<html>
<body>
<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>
<p>
<b>Note:</b> These tags are
often used to display
computer/programming code.
</p>
</body>
</html>
Example 11
<html>
<body>
<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>
</body>
</html>
Example 12
<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>
Example 13
<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>
</body>
</html>
Example 14
<html>
<body>
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 short quotation:
<q>This is a short quotation</q>
<p><b>The q element does not
render as anything
special.</b></p>
</body>
</html>
Example 15
<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>
Example 16
<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 17
<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 18
<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>
Example 19
<html>
<body>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</body>
</html>
Example 20
<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>
Example 21
<html>
<frameset cols="120,*">
<frame
src="tryhtml_contents.htm">
<frame src="frame_a.htm"
name="showframe">
</frameset>
</html>
Example 22
<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>
Example 23
<html>
<frameset cols="20%,80%">
<frame src="frame_a.htm">
<frame src="link.htm#C10">
</frameset>
</html>
Example 24
<html>
<frameset cols="180,*">
<frame src="content.htm">
<frame src="link.htm"
name="showframe">
</frameset>
</html>
Example 25
<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 26
<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 27
<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 28
<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 29
<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.
</p>
<p>No-breaking space is a
character entity. If you don't
know what a character entity is,
read the chapter about it.
</p>
<p>The no-breaking space entity
starts with an ampersand ("&"),
then the letters "nbsp", and
ends with a semicolon (";")
</p>
</body>
</html>
Example 30
<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>
Example 31
<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 32
<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>
Example 33
<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 34
<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 35
<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="bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Example 36
<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>
Example 37
<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 38
<html>
<body>
<p>
If you see no frames around the
tables in these examples, your
browser is too old or does not
support it.
</p>
<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Example 39
<html>
<body>
<p>
If you see no frames around the
tables in these examples, your
browser is too old, or does not
support it.
</p>
<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Example 40
<html>
<body>
<p>
If you see no frames around the
tables in these examples, your
browser does not support the
frame attribute.
</p>
<table frame="hsides"
border="3">
<tr>
<td>First row</td>
</tr>
</table>
<br />
<table frame="vsides"
border="3">
<tr>
<td>First row</td>
</tr>
</table>
</body>
</html>
Example 41
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Example 42
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Example 43
<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 44
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
Example 45
<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>
Example 46
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Example 47
<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>
Example 48
<html>
<body>
<form action="">
First name:
<input type="text"
name="firstname">
<br>
Last name:
<input type="text"
name="lastname">
</form>
</body>
</html>
Example 49
<html>
<body>
<form action="">
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 50
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox"
name="vehicle" value="Bike">
<br />
I have a car:
<input type="checkbox"
name="vehicle" value="Car">
<br />
I have an airplane:
<input type="checkbox"
name="vehicle" value="Airplane">
</form>
</body>
</html>
Example 51
<html>
<body>
<form action="">
Male:
<input type="radio"
checked="checked"
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>
Example 52
<html>
<body>
<form action="">
<select name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option
value="fiat">Fiat</option>
<option
value="audi">Audi</option>
</select>
</form>
</body>
</html>
Example 53
<html>
<body>
<form action="">
<select name="cars">
<option
value="volvo">Volvo</option>
<option
value="saab">Saab</option>
<option value="fiat"
selected="selected">Fiat</option
>
<option
value="audi">Audi</option>
</select>
</form>
</body>
</html>
Example 54
<html>
<body>
<fieldset>
<legend>
Health information:
</legend>
<form action="">
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 55
<html>
<body>
<form action="">
<input type="button"
value="Hello world!">
</form>
</body>
</html>
Example 56
<html>
<body>
<form name="input"
action="html_form_action.asp"
method="get">
Type your first name:
<input type="text"
name="FirstName" 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>
Example 57
<html>
<body>
<form name="input"
action="html_form_action.asp"
method="get">
I have a bike:
<input type="checkbox"
name="vehicle" value="Bike"
checked="checked" />
<br />
I have a car:
<input type="checkbox"
name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox"
name="vehicle" value="Airplane"
/>
<br /><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>
Example 58
<html>
<body>
<form name="input"
action="html_form_action.asp"
method="get">
Male:
<input type="radio" name="Sex"
value="Male" checked="checked">
<br>
Female:
<input type="radio" name="Sex"
value="Female">
<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 59
<html>
<body>
<form
action="MAILTO:someone@w3schools
.com" method="post"
enctype="text/plain">
<h3>This form sends an e-mail to
W3Schools.</h3>
Name:<br>
<input type="text" name="name"
value="yourname" size="20">
<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>
Example 60
<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 that of a non-
moving image.
</p>
</body>
</html>
Example 61
<html>
<body>
<p>An image from another
folder:</p>
<img src="/images/chrome.gif"
width="33" height="32">
<p>An image from W3Schools:</p>
<img
src="http://www.w3schools.com/im
ages/w3schools_green.jpg"
width="104" height="142">
</body>
</html>
Example 62
<html>
<body
background="background.jpg">
<h3>Look: A background
image!</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 63
<html>
<body>
<p>
An image
<img src="hackanm.gif"
align="bottom" width="48"
height="48">
in the text
</p>
Example 64
<html>
<body>
<p>
<img src ="hackanm.gif"
align ="left" width="48"
height="48">
A paragraph with an image. The
align attribute of the image is
set to "left". The image will
float to the left of this text.
</p>
<p>
<img src ="hackanm.gif"
align ="right" width="48"
height="48">
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>
Example 65
<html>
<body>
<p>
<img src="hackanm.gif"
width="20" height="20">
</p>
<p>
<img src="hackanm.gif"
width="45" height="45">
</p>
<p>
<img src="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 66
<html>
<body>
<img src="goleft.gif" alt="Go
Left" width="32" height="32">
<p>
Text-only browsers cannot
display images and will only
display the text that is
specified in the "alt" attribute
for the image. Here, the "alt"-
text is "Go Left".</p>
<p>
Note that if you hold the mouse
pointer over the image, most
browsers will display the "alt"-
text.
</p>
</body>
</html>
Example 67
<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 68
<html>
<body>
<p>Click on the sun or on one of
the planets to watch it
closer:</p>
<img src="planets.gif"
width="145" height="126"
alt="Planets"
usemap="#planetmap" />
<map name="planetmap">
<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>
</body>
</html>
Example 69
<html>
<body>
<p>
Move the mouse over the image,
and look at the status bar to
see how the
coordinates change.
</p>
<p>
<a href="tryhtml_ismap.htm">
<img src="planets.gif"
ismap width="146" height="126">
</a>
</p>
</body>
</html>
Example 70
<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 71
<html>
<body bgcolor="#ffffff"
text="yellow">
<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 72
<html>
<body
background="background.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>
Example 73
<html>
<body background="paper.gif">
<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>
Example 74
<html>
<body background="rock.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>
Example 75
<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>
Example 76
<html>
<body>
<a href="lastpage.htm"
style="text-decoration:none">
THIS IS A LINK!
</a>
</body>
</html>
Example 77
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="styles.css" >
</head>
<body>
<h1>I am formatted with a linked
style sheet</h1>
<p>Me too!</p>
</body>
</html>
Example 78
<html>
<head>
<title>The title is not
displayed</title>
</head>
<body>
<p>This text is displayed</p>
</body>
Example 79
<html>
<head>
<base target="_blank">
</head>
<body>
<p>
<a
href="http://www.w3schools.com"
target="_blank">This link</a>
will load in a new window
because the target attribute is
set to "_blank".
</p>
<p>
<a
href="http://www.w3schools.com">
This link</a>
will also load in a new window
even without a target attribute.
</p>
</body>
</html>
Example 80
<html>
<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>
Example 81
<html>
<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>
Example 82
<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.w3scho
ols.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>
Example 83
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello
World!</h1>")
</script>
</body>
</html>
Example 84
<html>
<body>
<script type="text/javascript">
<!--
document.write("If this is
displayed, your browser supports
scripting!")
//-->
</script>
<noscript>No JavaScript
support!</noscript>
<p>
A browser that does not support
JavaScript will show the text in
the noscript element.
</p>
</body>
</html>
