Latest Entries »

Tujuan
Mengetahui konfigurasi/setting access point pada PC
Mengetahui pemasangan TP Link pada client dan cara konfigurasinya
Mengetahui pengalokasian IP Address dan Subnet

Peralatan

Access Point (AP) 1 buah
PC 3 buah
TP Link W350G  2 buah
CD Driver TP LINK.
Kabel Jaringan Cross
Buku panduan (jika perlu)

Langkah – langkah pemasangan, peng installan, dan konfigurasi TP Link pada client.

View full article »

Tujuan
Mengetahui konfigurasi/setting access point pada PC
Mengetahui pengalokasian IP Address dan Subnet

Peralatan

Access Point (AP) 2 buah atau Lebih
PC 2 buah atau lebih
Kabel Jaringan Cross
Buku panduan (jika perlu)

Langkah – langkah
1.    Pastikan semua peralatan-peralatan sudah terlengkapi / disiap kan
2.    Reset terlebih dahulu, apabila AP telah dipikai praktik sebelumnya, dan pastikan me reset Pada saat AP terhubung dengan listrik
3.    Pasang Antena APnya.
4.    Hubungkan Kabel Cross pada AP ke PC
5.    Apabila terhubung dengan baik, akan tertampil Local Area Connections are plugged / Connected. Apabila tidak terhubung dengan baik, pada icon LAN di pojok kanan bawah, tertampil tanda silang, atau untuk memastikannya buka Start-Connect to … -Show all connections..

6.    Seting ulang IP Address pada PC terlebih dahulu, sesuai kan dengan IP Address Default AP nya (Biasanya : 192.168.1.1) Dengan Cara :Klik kanan pada icon LAN-pilih properties-pilih Internet Protocol (TCP/IP)-Propeties-Pindahkan Check pada Use the Following IP Adress-lalu isikan
IP Address    : 192.168.1.2
Subner Mask    : 255.255.255.0
Lalu klik Ok

7.    Kemudian lakukan Ping dari PC ke AP untuk memastikan sudah terhubung apa tidak,  dengan cara : Klik start-Run-ketikan CMD-pada tampilan Dos, ketikan ping 192.168.1.1-enter. Apabila telah berhasil akan seperti gambar dibawah ini

8.    Mulai kita masuk ke Page AP untuk mengkonfigurasi. Dengan cara membuka aplikasi browser, seperti Internet Explorer, Mozila, dsb, sebagi contoh pada Browser Internet Explorer, aplikasi bawaan dari Windows. Klik Start-pilih Internet Explorer-Lalu ketikan Pada Address alamat IP AP nya, (192.168.1.1)-lalu tekan enter.


9.    Kemudian akan diminta User name dan password defaultnya (Biasana:Username : admin, Password : admin)-lalu ok


10.    Untuk mengganti nama / SSID AP nya, pilih Wireless-Basic Setting, pada kiri jendela anda. Lalu isi kan pada
SSID    : AP 1 (Sesuai yang Anda inginkan)
Region    : Indonesia ( Sesuai dengan tempata tinggal Anda)
Channel    : 6 (Sesuaikan dengan jaringan agar tidak terjadi Over Laps)
Mode    : 54Mbps (801.11g)
Lalu klik Save

11.    Apabila ingin mengubah IP Address AP nya, Pilih Network Pada Jendela samping kiri, lalu isikan
Type        : Static IP
IP     Address    : (Sesuai dengan keinginan kita, dengan memperhatikan subnetnya)
Subnet Mask    : (Sesuai dengan keinginan kita, dengan memperhatikan subnetnya)
Gateway        : (IP Router atau sejenisnya, guna terkoneksi ke internet,) jika tidak ada
isikan saja  0.0.0.0

Jika Anda sudah mengubah IP pada AP nya, Anda juga harus mengubah IP pada PC Anda sesuai dengan IP pada AP yang telah diubah, lalu check lagi dengan ping.

12.    Pilih Wireless Mode .Untuk men set status ,apakah AP di gunakan sebagai Client, Bridge, AP saja. Misal untuk menjadi Access Point, Tandi Pada Access Point, jika selain itu pilihan nya, Misalkan ingin menjadi Brigde, masukkan MAC address Access Point PC lain. Kemudian pilih Save

13.    Guna mencheck Brigde atau Client mana saja yang teruhubung dengan PC kita. Masih di halaman Wireless Mode, Pada bagian paling Bawah pilih survey, dan akan tertampil PC/Client/Bridge aman yang terhubung dengan PC Anda.

14.    Untuk meyakinkan nya, bisa dengan cara Ping, Klik start-pilih Run-Ketik cmd-ok- ketik Ping (alamat IP Bridge/dsb/ tujuan

Chapter 11. CSS in Action

11.1.1. Case 1: Consistent Look and Feel
<html>
<BODY>
<LINK REL=”stylesheet” TYPE=”text/css”
HREF=”http://www.mycomp.com/style/site.css”&gt;
</BODY>
</html>

11.1.2. Case 2: Library Catalog System Interface
<html>
<BODY>
<TABLE CELLSPACING=0 BORDER CELLPADDING=”10″>
<TR>
<TD ROWSPAN=2>sidebar</TD>
<TD COLSPAN=2>navigation bar</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>main display</TD>
</TR>
</TABLE>

<TABLE CELLSPACING=0>
<TR>
<TD>sidebar</TD>
<TD>navigation bar and main display</TD>
</TR>
</TABLE>
<P>
<FONT FACE=”Verdana” COLOR=”white” size=”+1″><B><U>Heading</U></B></FONT>
<BR>
<FONT FACE=”Verdana” SIZE=”-1″>
<A HREF=”link1.html”><FONT COLOR=”yellow”>Link</FONT></A><BR>
<A HREF=”link2.html”><FONT COLOR=”yellow”>Link</FONT></A><BR>
<A HREF=”link3.html”><FONT COLOR=”yellow”>Link</FONT></A><BR>
</FONT>
</P>

</BODY>
</html>

11.1.2

<html>
<BODY>
<TD><P>
<SPAN>Heading</SPAN>
<BR>
<A HREF=”link1.html”>Link</A><BR>
<A HREF=”link2.html”>Link</A><BR>
<A HREF=”link3.html”>Link</A><BR>
</P>
</TD>
<DIV>
icons
</DIV>
<TABLE CELLPADDING=”0″ CELLSPACING=”0″ BORDER>
<TR VALIGN=”top”>
<TD>
(sidebar)
</TD>
<TD>
<DIV>
(icons)
</DIV>
<DIV>
(content)
</DIV>
</TR>
</TABLE>

</BODY>
</html>
11.1.2.1

11.1.3. Case 3: Putting a Magazine Article Online

<html>
<body bgcolor=”aqua”>
<DIV STYLE=”float: left; width: 40%; margin-left: 10%; margin-right: 5%;”>
This causes the entire set of text in the first division to become a floating block on the left margin and the following text to flow past it on the right. In other words, a two-column layout! This first column is declared to be 40% as wide as the browser window, have a left margin 10% as wide as the browser window, and a right margin that is 5% of the window’s width. This will cause the second column to automatically calculate its overall width as 45% (40 + 10 + 5 = 55, and 100 – 55 is 45).
</DIV>
</body>
</html>

11.1.3

11.2.4. Styling Common Elements

<html>
<body bgcolor=”aqua”>
<TABLE BORDER CELLPADDING=”4″>
<TR>
<TD><A HREF=”home.html”>Home Page</A></TD>
<TD><A HREF=”read.html”>My Writing</A></TD>
<TD><A HREF=”fun.html”>Fun Stuff!</A></TD>
<TD><A HREF=”links.html”>Other Links</A></TD>
<TD><A HREF=”write.html”>Contact Me</A></TD>
</TR>
</TABLE>

<TABLE border cellpadding=”4″>
<TR>
<TD><A HREF=”home.html”>Home Page</A></TD>
<TD><A HREF=”read.html”>My Writing</A></TD>
<TD><A HREF=”fun.html”>Fun Stuff!</A></TD>
<TD><A HREF=”links.html”>Other Links</A></TD>
<TD><A HREF=”write.html”>Contact Me</A></TD>
</TR>
</TABLE>

</body>
</html>

11.2.4
11.2.7. Preserving Boldness

<html>
<body>
<P STYLE=”font-weight: normal;”>This is a paragraph which contains a
<B>boldface element</B>, but Navigator 4 won’t make the text bold.</P>
</body>
</html>
11.2.711.2.10. Disappearing Styles
<html>
<body>
<SCRIPT LANGUAGE=”JavaScript1.2″>
<!–
var agt = navigator.userAgent.toLowerCase( );
var is_major = parseInt(navigator.appVersion);
var is_nav = ((agt.indexOf(‘mozilla’) != -1) &&
(agt.indexOf(‘spoofer’) == -1) &&
(agt.indexOf(‘compatible’) == -1));
var is_nav4 = (is_nav && (is_major == 4));

if (is_nav4) {onresize = location.reload();}
//–>
</SCRIPT>
</body>
</html>

Chapter 10. CSS2: A Look Ahead

10.2.1.2. Child selector

<html>
<BODY>
<P>This paragraph is green.</P>

<DIV>
<P>This paragraph is not green.</P>
</DIV>
<P>This paragraph is green.</P>
</BODY>
</html>

10.2.1.2<html>
<BODY>
<OL>
<LI>The EM text here is <EM>not</EM> purple.</LI>
</OL>
<DIV>
<OL>
<LI>Look, a list:
<UL>
<LI>The emphasized text here <EM>is</EM> purple.</LI>
</UL>
</LI>
</OL>
</DIV>
</BODY>
</html>

10.2.1.2.1<html>
<BODY>
<OL>
<LI>The text here is silver.</LI>
</OL>
<DIV>
<UL>
<LI>Look, a list (and this text is not silver, by the way):
<OL>
<LI>The text here is <EM>not</EM> silver.</LI>
</OL>
</LI>
</UL>
</DIV>
</BODY>
</hmtl>

10.2.1.2.1.1
10.2.1.3. Adjacent-sibling selector

<html>
<body bgcolor=”red”>
<H2>Coloring Text</H2>
<P color=”silver”>This paragraph is silver.</P>
<P>This paragraph is not.</P>

<H2>More Coloring Text</H2>
<UL><LI>This is not silver</LI></UL>
<P>Neither is this.</P>

<H2>More Coloring Text</H2>
This text is not silver.
<P color=”silver”>This paragraph is silver.</P>
<P>This paragraph is not.</P>
</body>
</html>

10.2.1.3
10.2.2.1. Attribute matching

<html>
<body bgcolor=”lime”>
<IMG SRC=”04.jpg” BORDER=”1″ ALT=”image one (match)”>
<IMG SRC=”05.jpg” BORDER=”23″ ALT=”image two (match)”>
<IMG SRC=”06.jpg” ALT=”image three (no match)”>
</body></html>

10.2.2.1
10.2.3.3. :lang

<html>
<body bgcolor=”lime”>
<P lang=”en”>This paragraph is in English.</P>
<P lang=”fr”>Ce paragraphe est en fran&ccedil;ais.</P>
</body>
</html>

10.2.3.3

10.2.3.4. :first-child

<html>
<BODY>
<P>This paragraph should be italic.</P>
<P>This paragraph should be normal.</P>
<DIV STYLE=”border: 1px dashed gray;”>
This text should be normal.
<P>This paragraph should be italic.</P>
<P>This paragraph should be normal.</P>
</DIV>
<DIV STYLE=”border: 1px dotted gray;”>
<H2>This H2 should be normal.</H2>
<P>This paragraph should be normal.</P>
<P>This paragraph should be normal.</P>
</DIV>
</BODY>
</html>

10.2.3.4

Chapter 9. Positioning

9.1.5. Element Visibility
<html>
<body bgcolor=”gray”>
<P>
This is a paragraph which should be visible. Lorem ipsum, dolor sit amet,
<EM>consectetuer adipiscing elit, sed diam nonummy nibh </EM>
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</P>
</body>
</html>

9.1.5
9.2. Relative Positioning

<html>
<body bgcolor=”gray”>
<P>This is a paragraph which should be visible. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.<EM>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat.</EM>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla

<B>facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum</B> zzril delenit augue duis dolore te feugait nulla facilisi.
</P><br>
<P>This is a paragraph which should be visible. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
<EM>Ut wisi enim ad minim veniam, <B>quis nostrud exerci tation ullamcorper</B>
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</EM>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.</P>
</body>
</html>

9.2
9.3. Absolute Positioning

<html>
<body bgcolor=”lime”>
<B STYLE=”position: absolute; top: auto; right: 0; bottom: 0; left: auto; width: 8em; height: 4em;”>
Consider the example in Figure 9-19. It shows two paragraphs that contain identical text. However, the first paragraph contains an inline boldface element,

and the second an absolutely positioned boldface element. In the second paragraph, the styles used would be something like what is shown here:</body>
</html>

9.3<html>
<body bgcolor=”gray”>
<P STYLE=”position: absolute; top: 0; right: 25%; left: 25%; bottom: auto; width: 50%; height: auto; background: silver;”>
Consider a case where the element being positioned is a child of the BODY element, e.g., a paragraph or heading element. With the right styles, the

containing block for the positioned element will be the entire BODY element. Thus, applying the following styles to the BODY and the fifth paragraph in a

document would lead to a situation similar to that shown in Figure 9-20: </P>
<P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <SPAN>***</SPAN>laoreet dolore magna

aliquam erat volutpat.</P><P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <SPAN

CLASS=”change”>***</SPAN>laoreet dolore magna aliquam erat volutpat.
</P>
</body>
</html>

9.3.1

Chapter 8. Visual Formatting

8.2.1.1. Height

<html>
<body bgcolor=”maroon”>
<P STYLE =”height:10em”>
In general, the height of an element is determined by its content. This can be affected by its width, of course; the skinnier a paragraph becomes, for

example, the taller it has to be in order to contain all of the textual (and other) content.</p>
<P STYLE=”height: 3em”>In practice, most browsers will not

do this. They will instead simply increase the height of the element, as though the value of height had been set to auto. This is permitted under CSS1, which

states that browsers can ignore any value of height other than auto if an element is not a replaced element such as an image. Under CSS2, it is possible to

set up a situation where scrollbars would be applied to an element such as a paragraph.
</p>
</body>
</html>

8.2.1.1
8.2.2. Horizontal Formatting

<html>
<body bgcolor=”maroon”>
<IMG SRC=”test1.gif” STYLE=”margin: 5px;” ALT=”first test”>
<IMG SRC=”test2.gif” STYLE=”margin: 5px;” ALT=”second test”>
</body>
</html>

8.2.2
8.2.2.4. Negative margins

<html>
<body bgcolor=”maroon”>
<DIV STYLE=”width: 420px; background-color: silver; padding: 10px; margin-top: 75px;”>
<P CLASSS=”neg”>
A paragraph.
</P>
</DIV><BR>
<DIV STYLE=”width: 420px; background-color: silver;padding: 10px; margin-top: 75px;”>
<P>A paragraph.</P>
</DIV><P>The next paragraph.</P>
</body></html>
8.2.2.4

8.2.4. Block-Level Replaced Elements
<html>
<body bgcolor=”maroon”>
<IMG SRC=”01.jpg” STYLE=”display: block;” ALT=”test image”>
<IMG SRC=”02.jpg” STYLE=”display: block; height: 50px;” ALT=”test image”>
<IMG SRC=”03.jpg” STYLE=”display: block; height: 200px;” ALT=”test image”>
</body>
</html>

8.2.4

8.4.2. Inline Formatting

<html>
<body bgcolor=”aqua”>
<P STYLE=”line-height: 0.25em;”>
Without content, the paragraph won’t have anything to display, so it will not. The fact that this paragraph has a line-height of any value — be it 0.25em or

25in — makes no difference without inline content to take advantage of it.In a certain sense, then, each line of text contained within a block-level element

is its own inline element, even though it isn’t surrounded by any tags. If you like, picture a fictional tag sequence something like this:
</P>
<P><LINE>This is a paragraph with a number of</LINE>
<LINE>lines of text which make up the</LINE>
<LINE>contents.</LINE>
</P>
</body>
</html>

8.4.2
8.4.2.1. Generating a line box

<html>
<body bgcolor=”aqua”>
<P STYLE=”font-size: 12px; line-height: 12px;”>
This is text, <EM>some of which is emphasized</EM>,
plus other text<BR>
which is <B STYLE=”font-size: 24px;”>boldfaced</B> and which is<BR>
larger than the surrounding text.</P><br>
<P STYLE=”font-size: 12px; line-height: 12px;”>
This is text, <EM>some of which is emphasized</EM>,
plus other text<BR>which is <B STYLE=”font-size: 24px;”>boldfaced</B>
and <SPAN STYLE=”vertical-align: top;”>tall</SPAN> and which is<BR>
larger than the surrounding text.
</P><br>
<P STYLE=”font-size: 12px; line-height: 12px;”>
This is text, <EM>some of which is emphasized</EM>, plus other text<BR>
which is <B STYLE=”font-size: 24px;”>boldfaced</B>
and <SPAN STYLE=”vertical-align: top; line-height: 4px;”>tall</SPAN> and which is<BR>
larger than the surrounding text.
</P><br>
<P STYLE=”font-size: 12px; line-height: 12px;”>
This is text, <EM>some of which is emphasized</EM>, plus other text<BR>which is <B STYLE=”font-size: 24px;”>boldfaced</B>
and <SPAN STYLE=”vertical-align: top; line-height: 18px;”>tall</SPAN>
and which is<BR>larger than the surrounding text.
</P>
</body>
</html>

8.4.2.1

8.4.3.1. Scaling the line heights

<html>
<body bgcolor=”aqua”>
<P>This paragraph has a line-height of 1.5 times its font-size. In addition,any elements within it <SMALL>such as this small element</SMALL>
also have line-heights 1.5 time their font-size… and that includes <BIG>this big element right here</BIG>.
By using a scaling factor, line-heights scaleto match the font-size of any element.</P>
</body>
</html>

8.4.3.1
8.4.4. Inline Replaced Elements
<html>
<body bgcolor=”gray”>
<P>The image in this paragraph
<IMG SRC=”test.gif” ALT=”test image”>
will be raised 9px.</P>
</body>
</html>

8.4.4

Chapter 7. Boxes and Borders

7.3.2. Percentages and Margins

<html>
<body bgcolor=”navy”>
<font color=”lime”>
<P>This paragraph is contained within a DIV which has a width of 200 pixels,
so its margin will be 10% of the width of the paragraph’s parent (the DIV).
Given the declared width of 200 pixels, the margin will be 20 pixels on
all sides.
</P>
</DIV>
<DIV STYLE=”width: 100px;”>
<P>This paragraph is contained within a DIV with a width of 100 pixels,
so its margin will still
be 10% of the width of the paragraph’s parent.
There will, therefore, be half as much margin on this
paragraph as that
on the first paragraph.</P></DIV>
<font color=”lime”>
</Font>
</body>
</html>

7.3.2

7.3.6. Negative Margin Values

<html>
<body Bgcolor=”maroon”>
<font color=”lime”>
There’s another side to margins: the negative side. That’s right, it’s possible to set
negative values for margins. This will have some interesting effects, assuming that a user agent supports
negative margins at all.

<P STYLE=”margin: -1.75em 0 0 0; font-weight: bold;”>
TIP

User agents are not,
according to the CSS1 specification, required to fully support negative margins, using the phrase, ”
A negative value is allowed, but there may be implementation-specific limits.” In the world of web browsers,
though Navigator 4.x, Explorer 4.x/5.x, and Opera 3.x do permit negative margins:
</p>Negative margins have an impact on vertical formatting, affecting how margins are collapsed.
If there are negative vertical margins, then the browser should take the absolute maximum of the
negative margins and subtract that from the maximum of any positive margins.

In the case where there
are only two margins to be collapsed, one positive and the other negative, the situation is handled
in a fairly simple manner. The absolute value of the negative margin is subtracted from the positive margin — or,
to put it another way, the negative is added to the positive — and the resulting value is the distance between
the elements.

To see what this means, let’s start with a paragraph that has a negative top margin and no margins
on its other sides — this will keep the example simple. In addition, we’ll make the paragraph bold, so that it’s
easier to distinguish from its neighbors: </Font>
</body>
</html>

7.3.6

7.3.7. Margins and Inline Elements

<html>
<body>
Let’s say that you want to set top and bottom margins on<B margin-top=”25px” margin-bottom=”50px”>
boldfaced text</b> <br><br>
</body>
</html>

7.3.7

7.3.8. Margins: Known Issues

<html>
<body>
<H1 margin-bottom”0″>
7.3.8. Margins: Known Issues</h1>
<P margin-top=”-1em”>

The first is that Navigator 4.x generally adds margin rules to its built-in margins,
instead of replacing the built-in values. For example, let’s say you want to eliminate the space
between H1 elements and paragraphs. Here’s the simplest case for doing so:

H1 {margin-bottom: 0;}
P {margin-top: 0;}

This is, after all, one correct way to eliminate the space between succeeding elements.
Navigator 4.x, however, will display the elements with the usual blank line between them, as you can see
in Figure 7-26. This is because it’s adding the zero values to its own default margins.  </p>
</body>
</html>

7.3.8

<html>
<body>
<STRONG margin-left=”10px”>Figure 7-28. Margins, inline elements, and Navigator 4.x</strong>
The style used to generate Figure 7-28 was as follows:
Instead of adding ten pixels of blank
space to the beginning of the STRONG element, Navigator assumes that the margin refers to the
eft edge of the browser window, and places the STRONG element accordingly This is utterly, completely wrong.
(There are those who speculate that Navigator turns the inline element into a block-level element,
but its placement implies that things may be otherwise. It’s difficult to be sure.) Unfortunately,
the fact that this happens means that the use of margins on inline elements is a risky proposition,
and not one to be undertaken lightly.
</body>
</html>

7.3.8.1
7.4.1.1. Multiple styles

<html>
<body><P.aside border-style=”solid dashed dotted solid”>
The result, shown in Figure 7-33, is a paragraph with a solid top border, a dashed right border,
a dotted bottom border, and a solid left border.
Figure 7-33 </p>
</body>
</html>

7.4.1.1

7.4.3. Border Colors

<html><body>
<Pshade border-style=”solid” border-width=”thick” color=”gray”>
The result, shown in Figure 7-33, is a paragraph with a solid top border, a dashed right border,
a dotted bottom border, and a solid left border.
Figure 7-33 </p>
</body>
</html>

7.4.3

7.5.1. Percentage Values and Padding

<html>
<body>
<DIV STYLE=”width: 200px;”>
<P>This paragraph is contained within a DIV which has a width of 200 pixels,
so its padding will be 10% of the width of the paragraph’s parent element.
Given the declared width of 200 pixels,
the padding will be 20 pixels on
all sides.</P>
</DIV>
<DIV STYLE=”width: 100px;”>
<P>This paragraph is contained within a DIV with a width of 100 pixels,so its padding will still be 10%
of the width of the paragraph’s parent.
There will, therefore, be half as much padding on this
paragraph as that
on the first paragraph.</P>
</body>
</html>

7.5.1

7.7.1. Types of Lists

<html>
<body>
<OL>
<LI>Item the first
<LI CLASS=”off”>Item the second
<LI>Item the third
<LI CLASS=”off”>Item the fourth
<LI>Item the fifth
</OL>
</body>
</html>

7.7.1

Chapter 6. Colors and Backgrounds
6.1.1. Foreground Colors

<html>
<body>
<P STYLE=”color: gray;”>This paragraph has a gray foreground.</P>
<P>This paragraph has the default foreground.</P>
</body>
</html>

6.1.1
6.1.1.1. BODY attributes

<html>
<body>
<BODY TEXT=”black” LINK=”#808080″ ALINK=”silver” VLINK=”#333333″>
</body>
</html>

6.1.1.4

 6.1.1.4. Affecting form elements

<html>
<body>
<INPUT TYPE=”radio” NAME=”r2″ VALUE=”A” CLASS=”radio”>
<INPUT TYPE=”checkbox” NAME=”c3″ VALUE=”one” CLASS=”check”>
<INPUT TYPE=”radio” NAME=”r2″ VALUE=”A “>
<INPUT TYPE=”checkbox” NAME=”c3″ VALUE=”one “>
</body>
</html>

6.1.1.4
6.2. Complex Backgrounds

<html>
<body BACKGROUND=”bg23.gif”>
<H1>6.2. Complex Backgrounds</H1>
<font color=””>
Having covered the basics of foreground and background colors, we turn now to the subject of background images. In HTML, it’s possible to associate an image with the background of the document by using the BODY attribute BACKGROUND:
 
    <BODY BACKGROUND=”bg23.gif”>
 
This will cause a user agent to load the file bg23.gif and then “tile” it in the document background, repeating it in both the horizontal and vertical directions to fill up the entire background of the document, as shown in
</Font>
</body>
</html>

6.2

Chapter 5. Fonts
5.2.2. Getting Bolder

<html>
<body bgcolor=”yellow”>
<P>
This paragraph contains elements of increasing weight: there is an
<SPAN>SPAN element which contains a <STRONG>strongly emphasized
element, and that contains a <B>boldface element</B></STRONG></SPAN>.
</P>
<P>
100 <SPAN> 400 <STRONG> 700 <B> 800 </B></STRONG></SPAN>.
</P>
<P>
100 <SPAN> 400 <STRONG> 700 <B> 800 <STRONG> 900
</STRONG></B></STRONG></SPAN>.
</P>
<P>
regular <SPAN> regular <STRONG> bold <B> bold
<STRONG> bold </STRONG></B></STRONG></SPAN>.
</P></body>
</html>

 
5.2.3. Lightening Weights

<html>
<body bgcolor=”yellow”>
<P>
900 <SPAN> 700 <STRONG> 400 <B> 300 <STRONG> 200
</STRONG></B></STRONG></SPAN>.
</P>
<!– …or, to put it another way… –>
<P>
bold <SPAN> bold <STRONG> regular <B> regular
<STRONG> regular </STRONG></B></STRONG></SPAN>.
</P></body>
</html>
 
5.3.2. Relative Sizes

<html>
<body>
<P>This paragraph element contain <STRONG>a strong-emphasis element
which itself contains <EM>an emphasis element that also contains
<STRONG>a strong element.</STRONG></EM></STRONG></P>
<P> medium <STRONG>large <EM> x-large
<STRONG>xx-large</STRONG></EM></STRONG></P>
</body>
</html>

5.3.2
<html>
<body>
<H1>A Heading with <EM>Emphasis</EM> added</H1>
<P>This paragraph has some <EM>emphasis</EM> as well.</P>
<H1> xx-large <EM> xx-large </EM> xx-large </H1>
<P> medium <EM>large </EM> medium </P>Jajang Lukmanul H
</body>
</html>

5.3.2.1
5.3.3. Percentages and Sizes

<html>
<body>
<P>This paragraph contains both <EM>emphasis</EM> and <STRONG>strong
emphasis</STRONG>, both of which are larger than their parent element. 
The <SMALL>small text</SMALL>, on the other hand, is smaller by a quarter.</P>
<P CLASS=”fnote”>This is a ‘footnote’ and is smaller than regular text.</P>
<P> 12px <EM> 14.4px </EM> 12px <STRONG> 16.2px </STRONG>  12px
<SMALL> 9px </SMALL> 12px </P>
<P CLASS=”fnote”> 9px </P>
</body>
</html>

5.3.3
5.3.4. Font Size and Inheritance

<html>
<body>
<P>This paragraph contains both <EM>emphasis and <STRONG>strong
emphasis</STRONG></EM>, both of which are larger than the paragraph text. </P>
<P> 12px <EM>14.4px <STRONG>19.44px</STRONG></EM> 12px  </P>
</body>
</html>

5.3.4
5.4.2. Font Variations

<html>
<body>
<H1>The Uses of font-variant</H1>
<P>
The property <CODE>font-variant</CODE> is very interesting…
</P>
</body>
</html>

5.4.2

Chapter 4. Text Properties
4.1.1.1. Indenting text
<html>
<body bgcolor=”yellow”>
<P CLASS=”hang”><IMG SRC=”planet.jpg” WIDTH=”30px” HEIGHT=”60px”
ALIGN=”left” ALT=”Floated”>This paragraph has a negatively indented first
line, which overlaps the floated image which precedes the text. Subsequent
lines do not overlap the image, since they are not indented in any way.</P>
<br>sss
<P>This paragraph is contained inside a DIV which is 400px wide, so the
first line of the paragraph is indented 20px (400 * 5% = 20). This is because
percentages are computed with respect to the width of the parent element.</P>
<br>
<DIV>
<P>This paragraph is contained inside a DIV which is 400px wide, so the
first line of the paragraph is indented 20px (400 * 5% = 20). Subsequent
lines within the same element are not indented,<BR>
even if they follow a<BR>
line-break.</P>
<P>Once again, the first line of this paragraph is indented by 20px,
but other lines in the same element are not.</P>
</DIV>
<br>
<DIV>
This first line of the DIV is indented by 50 pixels.
<P>This paragraph is 200px wide, and the first line of the paragraph
is indented 50px. This is because computed values for ‘text-indent’
are inherited, instead of the declared values.</P>
</DIV>
</body>
</html>

4.1.1.1


4.1.1.2. Aligning text

<html>
<body bgcolor=”yellow”>
<H1>An Un-centered H1 Element</H1>
<DIV CLASS=”first”>
<P>
This is a paragraph without any alignment styles applied to it. However, it is
contained within a DIV element which has alignment set, and this alignment will
inherit into the paragraph. This will also affect any images which appear within
the DIV, such as this one <IMG SRC=”planet.jpg”> or the next one.
</P>
<IMG SRC=”sun_strom.jpg”>
</DIV>
<br>
<DIV STYLE=”text-align: center;”>
<IMG SRC=”sun_strom.jpg” ALT=”Shiny object”>
</DIV>
</body>
</html>
4.1.1.2
4.1.1.3. Handling whitespace

<html>
<body bgcolor=”yellow”>
<P>This paragraph has many
spaces in it.</P>
<br>
<P>This paragraph has many
spaces in it.</P>
<br>
<P STYLE=”white-space: nowrap;”>This paragraph is not allowed to wrap,
which means that the only way to end a line is to insert a line-break
element. If no such element is inserted, then the line will go forever,
forcing the user to scroll horizontally to read whatever can’t be
initially displayed <BR>in the browser window.</P>
<br>
<TABLE bgcolor=”red”><TR bgcolor=”lime”>
<TD>The contents of this cell are not wrapped.</TD>
<TD>Neither are the contents of this cell.</TD>
<TD>Nor this one, or any after it, or any other cell in this table.</TD>
<TDsss>CSS prevents any wrapping from happening.</TD>
</TR></TABLE>
</body>
</html>

4.1.1.3

4.1.2. The Height of Lines

<html>
<body bgcolor=”yellow”>
<P>This paragraph inherits a ‘line-height’ of 14pt from the BODY, as well as
a ‘font-size’ of 13pt.</P>
<P CLASS=”one”>This paragraph has a ‘line-height’ of 16.8pt (14 * 1.2), so
it will have slightly more line-height than usual.</P>
<P CLASS=”two”>This paragraph has a ‘line-height’ of 15pt (10 * 150%), so
it will have slightly more line-height than usual.</P>
<P CLASS=”three”>This paragraph has a ‘line-height’ of 0.33in, so it will have
slightly more line-height than usual.</P>
<br>
<DIV>
<P>This paragraph’s ‘font-size’ is 18pt, but the inherited ‘line-height’
is only 12pt. This may cause the lines of text to overlap each other by
a small amount.</P>
</DIV>
<br>
<DIV>
<P>This paragraph’s ‘font-size’ is 18pt, and since the ‘line-height’
set for the parent DIV is 1.5, the ‘line-height’ for this paragraph
is 27pt (18 * 1.5).</P>
</DIV>
<br>
<P>This paragraph’s ‘font-size’ is 18pt, and the ‘line-height’ for this
paragraph is 23pt. However, a <BIG>larger element</BIG> within the
paragraph does not cause the value of ‘line-height’ to change, which can
lead to some interesting effects.</P>

<P>This paragraph’s ‘font-size’ is 18pt, and the ‘line-height’ for this
paragraph is 27pt. A <BIG>larger element</BIG> within the paragraph does
not cause the line’s height to change, but setting its ‘line-height’ does,
which leads to some interesting effects.</P
</body>
</html>

4.1.2

4.1.3.1. Baseline alignment
<html>
<body bgcolor=”lime”>
<P>The baseline of the <B>boldfaced text</B> is aligned with the baseline
of this paragraph.</P><br><br>
<P>The image found in this paragraph <IMG SRC=”dot.gif” ALT=”a dot”> has its
bottom edge aligned with the baseline of the paragraph.</P>

</body>

</html>
4.1.3.1

4.1.3.2. Superscripting and subscripting
<html>
<body bgcolor=”lime”>
<P>This paragraph contains <SUB>subscripted</SUB> text.</P><br><br>
<P>This paragraph contains <SUP>superscripted</SUP> text.</P></body></html>

4.1.3.2

4.1.3.3. Bottom feeding
<html>
<body bgcolor=”lime”>
<P>This paragraph contains an image <IMG SRC=”tall.gif” ALIGN=”middle”
ALT=”tall image”> which is tall, and another image <IMG SRC=”short.gif”
CLASS=”feeder” ALT=”short image”> which is not tall.</P><br><br>
<P>Here: a <IMG SRC=”tall.gif” ALIGN=”middle”
ALT=”tall image”> tall image, and then a <IMG SRC=”short.gif”
CLASS=”tbot” ALT=”short image”> short image.</P>
</html>
</body>

4.1.3.3

4.1.3.4. Getting on top
<html>
<body bgcolor=”lime”>
<P>Here: a <IMG SRC=”tall.gif” ALIGN=”middle”
ALT=”tall image”> tall image, and then a <IMG SRC=”short.gif”
CLASS=”up” ALT=”short image”> short image.</P>
<P> Here: a <IMG SRC=”tall.gif” CLASS=”textup”
ALT=”tall image”> tall image, and then a <IMG SRC=”short.gif”
CLASS=”textup” ALT=”short image”> short image.</P</body>
</html>
4.1.3.4


4.1.3.6. Percentages

<html>
<body bgcolor=”lime”>
<P>This paragraph contains some <B>boldfaced</B> text, which is raised
up 100%. This makes it look as though it’s on a preceding line.</P>
<br>
<P>We can either <SUP>soar to new heights</SUP> or, instead,
<SUB>sink into despair…</SUB></P>
<br>
<P>Some <IMG SRC=”tall.gif” alt=”tall image”>
<IMG SRC=”short.gif” CLASS=”up” ALT=”short image”> text.</P</body>
</html>
4.1.3.6


4.1.4.1. Word spacing

<html>
<body bgcolor=”lime”>
<P>The spaces between words in paragraphs will be increased by 0.2em.</P>
<br>
<P>The spaces between words in paragraphs will be decreased by 0.4em.</P>
</html>
</body>

4.1.4.1

4.1.4.2. Letterspacing
<html>
<body bgcolor=”lime”>
<P>The letters in this paragraph are spaced as normal.</P>
<P CLASS=”spacious”>The letters in this paragraph are spread out a bit.</P>
<P CLASS=”tight”>The letters in this paragraph are smooshed together a bit.</P>
<P>This paragraph contains <STRONG>strongly emphasized text</STRONG>
which is spread out for extra emphasis.</P</body>
</html>
4.1.1.2

4.1.4.3. Spacing, alignment, and font size
<html>
<body bgcolor=”lime”>
<P>This spacious paragraph features <SMALL>tiny text which is just
as spacious</SMALL>, even though the author probably wanted the
spacing to be in proportion to the size of the text.</P>
<P>This spacious paragraph features <SMALL>tiny text which is
proportionally spacious</SMALL>, which is what the autho
probably wanted.</P</body>
</html>

4.1.4.3

4.1.5. Text Transformation
<html>
<body bgcolor=”lime”>
<H1>The heading-one at the beginninG</H1>
<P>
By default, text is displayed in the capitalization it has in the source
document, but <STRONG>it is possible to change this</STRONG> using
the property ‘text-transform’.
</P>
<P CLASS=”cummings”>
For example, one could Create TEXT such as might have been Written by
the late Poet E.E.Cummings.
</P>
<P CLASS=”raw”>
If you feel the need to Explicitly Declare the transformation of text,
that can be done as well.
</P>
<br>
<H1>This is an H1 element</H1
</body>
</html>

4.1.5

4.1.6.1. Weird decorations
<html>
<body bgcolor=”lime”>
<P><u>This paragraph, which is black and has a black underline, also contains
<B>boldfaced text</B> which has the black underline beneath it as well.</P>
<br>
<P>This paragraph, which is black and has a black underline, also contains
<B>boldfaced text</B> which does not have black underline beneath it.</P>
<br>
<P>This paragraph, which is black and has a black underline, also contains
<B>boldfaced text</B> which does not have black underline beneath it.</P></u</body>
</html>

4.1.6.1