Oleh: boediman93 | Mei 19, 2009

Chapter 5. Rules, Images, and Multimedia

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

5.1.1

5.1.1.1. The size attribute

tag HTML :<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>

5.1.1.1

5.1.1.2. The noshade attribute

tag HTML:
<html>
<body>
<hr size=32>
<p>
<hr size=32 noshade>
</body>
</html>

5.1.1.2

5.1.1.3. The width attribute

tag HTML:<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>

5.1.1.3

5.1.1.4. The align attribute

tag HTML:<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>

5.1.1.4

5.1.1.6. Combining rule attributes

tag HTML:<html>
<body>
<hr size=32 width=”50%” align=center>
</body>
</html>

5.1.1.6

5.1.3. Using Rules in Headers and Footers

tag HTML:<html>
<body>
<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>

5.1.3

5.2.6.1. The src attribute

tag HTML:

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

5.2.6.3. The alt and longdesc attributes

tag HTML:

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

5.2.6.3

5.2.6.4. The align attribute

tag HTML:

5.2.6.4

5.2.6.5. Wrapping text around images

tag HTML:

5.2.6.5

tag HTML:

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

tag HTML:

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

5.2.6.5.2

5.2.6.6. Centering an image

Tag HTML:

<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

tag HTML:

5.2.6.8

5.2.6.11. Resizing and flood-filling images

tag HTML:

5.2.6.11

5.2.6.13. The hspace and vspace attributes

tag HTML:

<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

tag HTML:<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.6.16. The name, onAbort, onError, onLoad and other event attributes
tag HTML:
<html>
<body>
<img src=”fff.jpg” usemap=”#map1″
onAbort=”window.alert(‘Caution: This image contains important hyperlinks. Please load the entire image.’)”>
</body>
</html>

5.2.6.16
5.2.7.3. The loop attribute
tag HTML:
<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
tag HTML:
<html>
<body>
<img dynsrc=”movies/intro.avi” start=”fileopen,mouseover”
src=”aaa.jpg”>
</body>
</html>

5.2.7.4

5.2.7.5. Combining movie <img> attributes
tag HTML:
<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
tag HTML:
<html>
<body bgcolor=”#FF0000″>
</body>
</html>

5.3.1.1
tag HTML:
<html>
<body bgcolor=”peach”>
</body>
</html>

5.3.1.1.1

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

tag HTML:
<html>
<body background=”bbb.png” bgproperties=”fixed”>

<h3>Kumquat Lore</h3>
For centuries, many myths and legends have arisen around the kumquat.
...

</body>
</html>

5.3.1.2.1

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

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

5.3.1.4
5.3.1.6. The leftmargin attribute
tag HTML:
<html>
<body leftmargin=50>
Internet Explorer lets you indent the<br>
<–left margin<br>
away from the left edge of the window.
</body>
</html>

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

5.3.1.7

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

5.5.1.2

5.5.1.3. The bgcolor attribute
tag HTML:
<html>
<body>
<marquee bgcolor=yellow>
</body>
</html>

5.5.1.3
5.6.2. Referencing Audio, Video, and Images
tag HTML:
<html>
<body>
The <a href=”sounds/anthem.au”>Kumquat Grower’s Anthem</a> is a rousing tribute to
the thousands of ‘quat growers around the world.

</body>

</html>

5.6.2

Tinggalkan sebuah Komentar

Ditulis dalam Chapter 5 - 7, TUGAS HTML

Oleh: boediman93 | Maret 4, 2009

Chapter 2 – 4

Chapter 2. Quick Start

2.2. A First HTML Document

tag HTML :

<html>
<head>
<title>My first HTML document</title>
</head>
<body>
<h2>My first HTML document</h2>
Hello, <i>World Wide Web!</i>
<!– No “Hello, World” for us –>
<p>
Greetings from<br>
<a href=”http://www.ora.com”>O’Reilly & Associates</a>
<p>
Composed with care by:
<cite>(Boediman)</cite>
<br>©2000 and beyond
</body>
</html>

2.12. Style Sheets and JavaScript

tag HTML:

<html>
<head>
<title>CSS Example</title>
<!-- Hide CSS properties within comments so old browsers
don't choke on or display the unfamiliar contents. -->
  <style type="text/CSS">
    <!--
    H1 {color: red}
    -->
  </style>
</head>
<body>
<H1>I'll be red if your browser supports CSS</H1>
Something in between.
<H1>I should be red, too!</H1>
</body>
</html>

Chapter 3. Anatomy of an HTML Document

3.2. Structure of an HTML Document

tag HTML:
<html>
<head>
<title>Barebones HTML Document</title>
</head>
<body>
This illustrates, in a very <i>simp</i>le way,
the basic structure of an HTML document.
</body>
</html>

3.3.2. Sample Tags

tag HTML:
<html>
<head>
</head>
<body>
<a href="http://www.oreilly.com/catalog.html">
<ul compact>
<ul compact="compact">
<input type=text name=filename size=24 maxlength=80>
<link title="Table of Contents">
</body>
</html>

3.3.4. Proper and Improper Nesting

tag HTML:

<html>
<head>
</head>
<body>
This is some text in the body, with a
<a href=”another_doc.html”>link, a portion of which
is <b>set in bold</b></a>
</body>
</html>

3341

3.6.1.1. The dir attribute

tag HTML :

<html dir=rtl>
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>

36111

3.7.2. The <title> Tag

tag html:

<html>
<head>
<title>HTML and XHTML: The Definitive Guide</title>
</head>
</html>

372

3.9.2. Using Editorial Markup

tag HTML:

<html>
<body>
The party of the first part, as represented by
<ins datetime=1998-06-22T08:30Z
cite=”http://www.mull+dull.com/tom_duller.html”>
Thomas Muller of Muller and Duller
</ins>
<del>[insert representation here]</del>
</body>
</html>

392

3.10. The <bdo> Tag

tag html:

<html>
<body>
<bdo dir=rtl>This would be readable if in Chinese, perhaps.</bdo>
Back to the Western way of reading and writing.
</body>
</html>

310

Chapter 4. Text Basics

4.1.2. The <p> Tag

tag HTML:

<html>
<body>
This is the first paragraph, at the very beginning of the
body of this document.
<p>
The tag above signals the start of this second paragraph.
When rendered by a browser, it will begin slightly below the
end of the first paragraph, with a bit of extra white space
between the two paragraphs.
<p>
This is the last paragraph in the example.
</body>
</html>

412

4.1.2.2. The align attribute

tag HTML:

<html>
<body>
<p align=right>
Right over here!
<br>
This is too.
<p align=left>
Slide back left.
<p align=center>
Smack in the middle.
</p>
Left is the default.
</body>
</html>

4122

4.2.1.1. The align attribute

tag HTML:

<html>
<body>
<h1 align=right>Right over here!</h1>
<h2 align=left>Slide back left.</h2>
<h3 align=center>Smack in the middle.</h3>
</body>
</html>

4211

4.2.2. Appropriate Use of Headings

tag HTML:

<html>
<head>
<title>Kumquat Farming in North America</title>
</head>
<body>
<h3>Kumquat Farming in North America</h3>
<p>
Perhaps one of the most enticing of all fruits is the…
</body>
</html>

422

4.2.3. Using Headings for Smaller Text

tag HTML:

<html>
<head>
<title>Kumquat Farming in North America</title>
</head>
<body>
resulting in years of successful kumquat production
throughout North America.
</p>
<h6>This document copyright 1995 by the Kumquat Growers of
America. All rights reserved. </h6>
</body>
</html>

423

4.2.6. Adding Images to Headings

tag HTML:

<html>
<body>
<h2>
<img src=”images.jpg”></img src>
For More Information</h2>
</body>
</html>

4262

4.4.3. The <cite> Tag

tag HTML:

<html>
<body>
While kumquats are not mentioned in Melville’s
<cite>Moby Dick</cite>, it is nonetheless apparent
that the mighty cetacean represents the bitter
“kumquat-ness” within every man. Indeed, when Ahab
spears the beast, its flesh is tough, much like the noble fruit.
</body>
</html>

4432

4.4.4. The <code> Tag

tag HTML:

<html>
<body>
The array reference <code>a[i]</code> is identical to
the pointer reference <code>*(a+i)</code>.
</body>
</html>

444

4.4.5. The <dfn> Tag

tag HTML:

<html>
<body>
When analyzing annual crop yields, <dfn>rind spectroscopy</dfn> may prove useful. By comparing the relative levels of saturated hydrocarbons in fruit from adjacent trees, rind spectroscopy has been shown to be 87% effective in predicting anoutbreak of trunk dropsy in trees under four years old.
</body>
</html>

445

4.4.6. The <em> Tag

tag HTML:

<html>
<body>
Kumquat growers must <em>always</em> refer to kumquats
as “the noble fruit,” <em>never</em> as just a “fruit.”
</body>
</html>

445b3

4.4.7. The <kbd> Tag

tag HTML:

<html>
<body>
Type <kbd>quit</kbd> to exit the utility, or type
<kbd>menu</kbd> to return to the main menu.
</body>
</html>

4473

4.4.8. The <samp> Tag

tag HTML:

<html>
<body>
The <samp>ae</samp> character sequence may be converted
to the æ ligature if desired.
</body>
</html>

4482

4.4.9. The <strong> Tag

tag HTML:

<html>
<body>
One should <em>never</em> make a disparaging remark
about the noble fruit. In particular, mentioning
kumquats in conjunction with vulgar phrases is
expressly <strong>forbidden</strong> by the Association
bylaws.
</body>
</html>

4492

4.4.10. The <var> Tag

tag HTML:

<html>
<body>
The user should type
<pre>
cp <var>source-file</var> <var>dest-file</var>
</pre>
replacing the <var>source-file</var> with the name of
the source file, and <var>dest-file</var> with the name
of the destination file.
</body>
</html>

44102

4.4.17. Combining Content-Based Styles

tag HTML:

4417

4.5.9. The <sup> Tag

tag HTML:

<html>
<body>
The larval quat
weevil<a href=”footnotes.html#note74″><sup><small>74</small></sup></a> is a
</body>
</html>

459

4.5.15. Summary of Physical Style Tags

tag HTML:

<html>
<body>
Explicitly <b>boldfaced</b>, <i>italicized</i>, or
<tt>teletype-style</tt> text should be used
<big><big>sparingly</big></big>.
Otherwise, drink <strike>lots</strike> 1×10<sup>6</sup>
drops of H<sub><small><small>2</small></small></sub>O.
</body>
</html>

4515

4.5.18. Combining Physical Styles

tag HTML:

<html>
<body>
<b><i>Thar she blows!</i></b>
</body>
</html>

4518

4.6.2. The <basefont> Tag (Deprecated)

tag HTML:

<html>
<body>
Unless the base font size was reset above,
Inernet Explorer renders this part in font size 3.
<basefont size=7>
This text should be rather large (size 7).
<basefont size=6> Oh,
<basefont size=4> no!
<basefont size=2> I’m
<basefont size=1> shrinking!
</basefont><br>
Ahhhh, back to normal.
</body>
</html>

462

4.6.3.1. The size attribute

tag HTML:

<html>
<body>
<p>
<font size=7>C</font>all me Ishmael.
</body>
</html>

46311

tag HTML:

<html>
<body>
<p>
<font size=1>
All rights reserved. Unauthorized redistribution of this document is
prohibited. Opinions expressed herein are those of the authors, not the
Internet Service Provider.
</body>
</html>

46312

tag HTML:

<html>
<body>
<p>
Make sure you <font size=+1>always</font> sign and date the form!
</body>
</html>

46313

tag HTML:

<html>
<body>
<p>
The ghost moaned, “oo<font size=+1>oo<font size=+2>oo<font
size=+3>oo</font>oo</font>oo</font>oo.”
</body>
</html>

46314

4.6.3.2. The color attribute

tag HTML:

<html>

<body>

Here comes the <font color=”#FFFF00″>sun</font>!

Here comes the <font color=yellow>sun</font>!

</body>

</html>

46322

4.6.3.3. The face attribute

tag HTML:

<html>

<body>

This text is in the default font. But,

heaven only knows</font>

what font face is this one?

</body>

</html>

46331

4.7.1. The <br> Tag

tag HTML:

<html>

<body>

<h3>

Heartbreak Hotel</h3>

<p>

Ever since my baby left me<br>

I’ve found a new place to dwell.<br>

It’s down at the end of lonely street<br>

Called <cite>Heartbreak Hotel</cite>.

</p>

</body>

</html>

4712

4.7.1.1. The clear attribute

tag HTML:

<html>

<body>

This text should wrap around the image, flowing between the

image and the right margin of the document.

This text will flow as well, but will be below the image,

extending across the full width of the page. There will

be white space above this text and to the right of the

image.

</body>

</html>

47113

tag HTML:

<html>
<body>
Paragraph tags separate leading and following
text flow from the captions.
<p>
I’m the caption on top of the image.
<br />
<img src=”aaa.jpg” align=”absmiddle”/>
This one’s centered on the right.
<br clear=”left” />
This caption should be directly below the image.
</p>
<p>
</body>
</html>
471121

4.7.2. The <nobr> Tag

tag HTML:

<html>
<body>
When prompted by the computer, enter
<nobr>
<tt>find . -name \*.html -exec rm \{\}\;</tt>.
</nobr>
After a few moments, the load on your server will begin
to diminish and will eventually drop to zero.
</body>
</html>
4721

4.7.3. The <wbr> Tag

tag HTML:

<html>
<body>
<p>
<nobr>
This is a very long sequence of text that is
forced to be on a single line, even if doing so causes
<wbr>
the browser to extend the document window beyond the
size of the viewing pane and the poor user must scroll right
<wbr>
to read the entire line.
</nobr>
</body>
</html>
4731

4.7.4. Better Line-Breaking Rules

tag HTML:

<html>
<body>
Make sure you type <tt>du</tt>, not <tt>df</tt>.
</body>
</html>
4743

4.7.5. The <pre> Tag

tag HTML:

<html>
<body>
<p>
The processing program is:
<pre>
main(int argc, char **argv)

{ FILE *f;
int i;

if (argc != 2)
fprintf(stderr, “usage: %s <file>\n”,
argv[0]);
<a href=”http:process.c”>process</a>(argv[1]);
exit(0);
}
</pre>
</body>
</html>
4752

4.7.6. The <center> Tag (Deprecated)
tag HTML:

4.8.1. The <blockquote> Tag
tag HTML:
<html>
<body>
We acted incorrectly in arbitrarily changing the Kumquat
Festival date. Quoting from the Kumquat Growers’ Bylaws:
<blockquote>
The date of the Kumquat Festival may only be changed by
a two-thirds vote of the General Membership, provided
that a <strong>60 percent quorum</strong> of the Membership
is present.
</blockquote>
(Emphasis mine) Since such a quorum was not present, the
vote is invalid.
</body>
</html>
4812