Chapter 5. Rules, Images, and Multimedia
5.1.1. The <hr> Tag
<html>
<body>
This text is directly above the rule.
<hr>
And this text is immediately below.
<p>
Whereas this text will have space before the rule.
<p>
<hr>
<p>
And this text has space after the rule.
</body>
</html>

511

5.1.1.1. The size attribute
<html>
<body>
<p>
This is conventional document text,
followed by a IE’s 2-pixel tall rule line.
<hr>
The next three rule lines are 12, 36, and 72 pixels tall.
<hr size=12>
<hr size=36>
<hr size=72>
</body>
</html>

5111

5.1.1.2. The noshade attribute
<html>
<body>
<hr size=32>
<p>
<hr size=32 noshade>
</body>
</html>

5112

5.1.1.3. The width attribute
<html>
<body>
The following rules are 40 and 320 pixels wide
no matter the actual width of the browser window
<hr width=40>
<hr width=320>
Whereas these next two rules will always extend across
10 and 75 percent of the window, regardless of its width:
<hr width=”10%”>
<hr width=”75%”>
</body>
</html>

5113

5.1.1.4. The align attribute
<html>
<body>
<hr width=”35%” align=right>
<h3>Fruit Packing Advice</h3>

<hr width=”35%” align=center>
<h3>Shipping Kumquats</h3>

<hr width=”35%” align=left>
<h3>Juice Processing</h3>

</body>
</html>

5114

5.1.1.6. Combining rule attributes
<html>
<body>
<hr size=32 width=”50%” align=center>
</body>
</html>

51161

5.1.3. Using Rules in Headers and Footers
<html>
<body>
Kumquat Growers Handbook – Growing Season Guidelines
<hr>
<h1>Growing Season Guidelines</h1>
Growing season for the noble fruit varies throughout the
United States, as shown in the following map:
<p>
<img src=”bbb.png”>
<p>
<hr>
<i>Provided as a public service by the
<a href=”feedback.html”>Kumquat Lovers of America</a></i>
</body>
</html>

5131

5.2.6.1. The src attribute
<html>
<body>
Here we are, on day 17 of the tour, in front of the kumquat
packing plant:
<p>
<img src=”ccc.jpg”>
<p>
What an exciting moment, to see the boxes of fruit moving
</body>
</html>
ccc1

5.2.6.3. The alt and longdesc attributes
<html>
<body>
<h3><img src=”aaa.jpg” alt=”*”>Introduction</h3>
<br>

<ul>
<li> Kumquat recipes <img src=”ddd.jpg” alt=”(New!)”>
<li> Annual harvest dates
</ul>
</body>
</html>

52631

5.2.6.4. The align attribute
<html>
<body>
Line of text
<img src=”eee.jpg” align=middle>
<img src=”eee.jpg”>
goes on …
<br clear=left>
<p>
Line of text
<img src=”eee.jpg” align=middle>
<img src=”eee.jpg” align=middle>
goes on …
</body>
</html>

52641

5.2.6.5. Wrapping text around images
<html>
<body>
<img src=”fff.jpg” align=left>
The kumquat is the smallest of the citrus fruits, similar in appearance
to a tiny orange. The similarity ends with its appearance, however. While
oranges are generally sweet, kumquats are extremely bitter. Theirs is an acquired
taste, to be sure.
</body>
</html>

52653

<html>
<body>
<img src=”fff.jpg” align=left>
<img src=”ccc.jpg” align=right>
The kumquat is the smallest of the citrus fruits, similar in appearance
to a tiny orange. The similarity ends with its appearance, however. While oranges are generally sweet, kumquats are extremely bitter. Theirs is an acquired taste, to be sure.
</body>
</html>526511
<html>
<body>
<img src=”fff.jpg” align=left>
Strawberry!
<br>
<img src=”ggg.jpg” align=left>
Banana!
<br>
<img src=”hhh.jpg” align=left>
Apple!
</body>
</html>
526521

5.2.6.6. Centering an image
<html>
<body>
Kumquats are tasty treats
<br>
<center>
<img src=”ccc.jpg”>
</center>
that everyone should strive to eat!
</body>
</html>
5.2.6.6

5.2.6.8. The border attribute

5.2.6.8

5.2.6.11. Resizing and flood-filling images
<html>
<body>
<img src=”bbb.png” width=640 height=20>
<br>
<img src=”ccc.jpg” width=”100%” height=20>
</body>
</html>

5.2.6.11

5.2.6.13. The hspace and vspace attributes
<html>
<body>
<img src=”fff.jpg” align=left>
The kumquat is the smallest of the citrus fruits, similar
in appearance to a tiny orange. The similarity ends with its
appearance, however. While oranges are generally sweet,
kumquats are extremely bitter. Theirs is an acquired taste,
to be sure. Most folks, at first taste, wonder how you could
ever eat another, let alone enjoy it!
<p>
<img src=”ggg.jpg” align=left hspace=10 vspace=10>
The kumquat is the smallest of the citrus fruits, similar
in appearance to a tiny orange. The similarity ends with its
appearance, however. While oranges are generally sweet,
kumquats are extremely bitter. Theirs is an acquired taste,
to be sure. Most folks, at first taste, wonder how you could
ever eat another, let alone enjoy it!
</body>
</html>

5.2.6.13

5.2.6.14. The ismap and usemap attributes
<html>
<body>
<a href=”/cgi-bin/images/map2″>
<img src=”pics/map2.gif” ismap>
</a>
<a href=”/cgi-bin/images/map2″>
<img src=”pics/map2.gif” ismap usemap=”#map2″>
</a>

<map name=”map2″>
<area coords=”0,0,49,49″ href=”link1.html”>
<area coords=”50,0,99,49″ href=”link2.html”>
<area coords=”0,50,49,99″ href=”link3.html”>
<area coords=”50,50,99,99″ href=”link4.html”>
</map>

</body>
</html>

52614

5.2.6.16. The name, onAbort, onError, onLoad and other event attributes
<html>
<body>
<a href=”/cgi-bin/images/map2″>
<img src=”bbb.png” ismap usemap=”#map2″>
</a>

<map name=”map2″>
<area coords=”0,0,49,49″ href=”link1.html”>
<area coords=”50,0,99,49″ href=”link2.html”>
<area coords=”0,50,49,99″ href=”link3.html”>
<area coords=”50,50,99,99″ href=”link4.html”>
</map>
</body>
</html>

5.2.6.14

5.2.7.1. The dynsrc attribute
<html>
<body>
<img dynsrc=”movies/intro.avi”>
<img dynsrc=”movies/intro.avi” src=”pics/mvstill.gif”>
</body>
</html>

5271
5.2.7.2. The controls attribute
<html>
<body>
<img dynsrc=”movies/intro.avi” controls src=”pics/mvstill.gif”>
</body>
</html>

5272

5.2.7.3. The loop attribute
<html>
<body>
<img dynsrc=”movies/intro.avi” loop=infinite src=”aaa.jpg”>
</body>
</html>

5.2.7.3

5.2.7.4. The start attribute
<html>
<body>
<img dynsrc=”movies/intro.avi” start=”fileopen,mouseover”
src=”aaa.jpg”>
</body>
</html>
l>

5.2.7.4

5.2.7.5. Combining movie <img> attributes
<html>
<body>
<img dynsrc=”movies/intro.avi” src=”aaa.jpg” align=right>
</body>
</html

5.2.7.5

5.3.1.1. The bgcolor attribute
<html>
<body bgcolor=”#FF0000″>
<body bgcolor=”peach”>
</body>
</html>

5311

5.3.1.2. The background attribute
<html>
<body background=”iii.png”>
</body>
</html>
5.3.1.2

5.3.1.3. The bgproperties attribute
<html>
<body background=”bbb.png” bgproperties=”fixed”>
</body>
</html>

5.3.1.3

5.3.1.4. The text attribute
<html>
<body bgcolor=”#777700″ text=”blue”>
</body>
</html>

5314

5.3.1.6. The leftmargin attribute
<html>
<body leftmargin=50>
Internet Explorer lets you indent the<br>
&lt;–left margin<br>
away from the left edge of the window.
</body>
</html>

5316

5.3.1.7. The topmargin attribute
<html>
<body topmargin=50>
<p align=center>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Internet Explorer can give your documents
a little extra headroom.
</p>
</body>
</html>

5317

5.4.1.1. The src attribute
<html>
<body>
<bgsound src=”audio/welcome.wav”>
</bgsound>
</body>
</html>

5.4.1.2. The loop attribute
<html>
<body>
<bgsound src=”audio/tadum.wav” loop=10>
<bgsound src=”audio/noise.wav” loop=infinite>
</bgsound>
</bgsound>
</body>
</html>

5.5.1.1. The align attribute
<html>
<body>
<marquee align=top>SMKN 1 KARAWANG</marquee>
</body>
</html>

5511

5.5.1.2. The behavior, direction, and loop attributes
<html>
<body>
<marquee align=center loop=infinite>
Kumquats aren’t filling
………. Taste great, too!
</marquee>
</body>
</html>

5512

5.5.1.3. The bgcolor attribute
<html>
<body>
<marquee bgcolor=yellow>
Kumquats aren’t filling
………. Taste great, too!
</marquee>
</body>
</html>

5513

5.5.1.4. The height and width attributes
<html>
<body>
<marquee height=50 width=”33%”>
Kumquats aren’t filling
………. Taste great, too!
</marquee>
</body>
</html>

5514

5.5.1.5. The hspace and vspace attributes
<html>
<body>
<marquee vspace=10 hspace=10>
Kumquats aren’t filling
………. Taste great, too!
</marquee>
</body>
</html>

5515

5.5.1.6. The scrollamount and scrolldelay attributes
<html>
<body>
<marquee scrollamount=1 scrolldelay=1>
Kumquats aren’t filling
………. Taste great, too!
</marquee>
</body>
</html>

5516