5 Mei 2011

Dasar-dasar HTML 2

Posted by adi wirattama on Kamis, Mei 05, 2011 / with No Comments
Under
Oke,, kita teruskan pembahasan tentang HTML. Langsung saja cekidot.

Menggunakan Tag <CENTER>
Untuk menengahkan suatu teks, bisa digunakan tag <CENTER>. Tentu saja untuk mengakhiri penengahan teks (agar teks berikutnya tidak ditengahkan), perlu disertakan </CENTER>
<HTML>
<HEAD>
<TITLE>Tag CENTER</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>Group Jazz Terkenal : </H2>
Rippingtons <BR>
Spyro Gyra <BR>
Fourplay <BR>
Casiopea <BR>
</CENTER>
*****
</BODY>
</HTML>
Perhatikan bahwa simbol ***** tidak ditengahkan karena sebelum teks ini terdapat tag pengakhir penengah teks </CENTER>

Memformat Teks
HTML menyediakan sejumlah tag yang berguna untuk mengatur bentuk teks secara fisik. Lihat tabel berikut:

Contoh:
<HTML>
<HEAD>
<TITLE>Format Teks</TITLE>
</HEAD>
<BODY>
Normal <BR>
<B>Tebal</B><BR>
<BIG>Big</BIG><BR>
<I>Miring</I><BR>
<U>Digarisbawahi</U><BR>
<I><B>Miring dan tebal</B></I><BR>
X<SUB>n</SUB><SUP>2</SUP>
</BODY>
</HTML>

Teks Praformat
Contoh:
<HTML>
<HEAD>
<TITLE>Praformat</TITLE>
</HEAD>
<BODY>
<H1>Menu:</H1>
<PRE>
Nasi Goreng Spesial ........... 15.000
Nasi Rawon .................... 8.500
Nasi Gudeg Lengkap ............ 8.500
Nasi Langgi ................... 8.500
Nasi Soto Madura .............. 5.000
<PRE>
Selamat menikmati.
</BODY>

Pengaturan Font
Tag <FONT>...</FONT> berguna untuk mengatur jenis, ukuran, maupun warna font.

* Jenis Font
Untuk menentukan jenis font, bisa digunakan atribut FACE. 
Contoh:
<FONT FACE = “Arial”>ABCD</FONT>

Pada contoh di atas, tulisan ABCD akan ditampilkan dengan menggunakan font Arial.
Contoh:
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
Normal: 012345ABCD<BR>
<FONT FACE = “Arial”>Arial: 012345ABCD</FONT>
<BR>
<FONT FACE = “Lucida”>Lucida: 012345ABCD</FONT>
<BR>
<FONT FACE = “Courier”>Courier: 012345ABCD</FONT>
<BR>
<FONT FACE = “Verdana”>Verdana: 012345ABCD
</FONT>
<BR>
</BODY>
</HTML>

* Ukuran Font
Ukuran font ditentukan oleh atribut SIZE. Contoh:
<FONT SIZE = “1”>SIZE 1: 012345ABCD
</FONT>
</BR>
Digunakan untuk mengatur teks dg ukuran font sebesar 1. Ukuran font normal adalah 3. Ukuran font juga dapat memakai tanda + atau – di depan angka pada atribut SIZE. 
Contoh:
<FONT SIZE = “+1”>SIZE +1: 012345ABCD
</FONT>
</BR>
menampilkan teks dengan ukuran font lebih besar 1 daripada ukuran normal.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran Font</TITLE>
Normal: 012345ABCD<BR>
<FONT SIZE=”1”>SIZE 1: 012345ABCD</FONT>
<BR>
<FONT SIZE=”2”>SIZE 2: 012345ABCD</FONT>
<BR>
<FONT SIZE=”3”>SIZE 3: 012345ABCD</FONT>
<BR>
<FONT SIZE=”4”>SIZE 4: 012345ABCD</FONT>
<BR>
<FONT SIZE=”5”>SIZE 5: 012345ABCD</FONT>
<BR>
<FONT SIZE=”6”>SIZE 6: 012345ABCD</FONT>
<BR>
<FONT SIZE=”7”>SIZE 7: 012345ABCD</FONT>
<BR>
<FONT SIZE=”+1”>SIZE +1: 012345ABCD</FONT>
<BR>
<FONT SIZE=”+2”>SIZE +2: 012345ABCD</FONT>
<BR>
<FONT SIZE=”-1”>SIZE -1: 012345ABCD</FONT>
<BR>
</BODY>
</HTML>

* Warna Font
Atribut pada tag <FONT> yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk menentukan warna latar belakang teks. Adapun kalau warna latar belakang teks yang akan diatur, pengaturan perlu dilakukan melalui tag <BODY> dengan properti berupa BGCOLOR. Perlu juga diketahui, tag BODY juga memiliki atribut bernama TEXT yang dapat digunakan untuk mengatur warna teks pada keseluruhan
tubuh dokumen. Nilai yang diberikan pada atribut COLOR, BGCOLOR, dan TEXT tersebut berupa:
1. nama warna, atau
2. nilai RGB (Red-Green-Blue) yang dinyatakan dengan “#RRGGBB”.

Pada format '#RRGGBB', masing-masing RR, GG, dan BB berupa dua buah digit heksadesimal (berupa angka 0 sampai dengan 9 atau A hingga F). RR menyatakan komponen warna merah, GG menyatakan komponen warna hijau, dan BB menyatakan komponen warna biru. Nilai 00 menyatakan bahwa komponen bersangkutan tidak ada. Sebagai contoh, #0000FF menyatakan warna biru.
Contoh:
<HTML>
<HEAD>
<TITLE>Warna – Bagian 1</TITLE>
<BODY>
Normal<BR>
<FONT COLOR = “aqua”>aqua</FONT><BR>
<FONT COLOR = “black”>black</FONT><BR>
 <FONT COLOR = "blue">blue</FONT><BR>
<FONT COLOR = "fuchsia">fuchsia</FONT><BR>
<FONT COLOR = "gray">gray</FONT><BR>
<FONT COLOR = "green">green</FONT><BR>
<FONT COLOR = "lime">lime</FONT><BR>
<FONT COLOR = "maroon">maroon</FONT><BR>
<FONT COLOR = "navy">navy</FONT><BR>
<FONT COLOR = "olive">olive</FONT><BR>
<FONT COLOR = "purple">purple</FONT><BR>
<FONT COLOR = "read">read</FONT><BR>
<FONT COLOR = "silver">silver</FONT><BR>
<FONT COLOR = "teal">teal</FONT><BR>
<FONT COLOR = "yellow">yellow</FONT><BR>
</BODY>
</HTML>

Contoh berikut menunjukkan penggunaan atribut BGCOLOR dan TEXT pada tag BODY.
<HTML>
<HEAD>
<TITLE>Warna - Bagian 2</TITLE>
</HEAD>
<BODY BGCOLOR = "black" TEXT = "gray">
Normal <BR>
<FONT COLOR = "blue">Warna Biru</FONT><BR>
<FONT COLOR = "green">Warna Hijau</FONT><BR>
<FONT COLOR = "red">Warna Merah</FONT><BR>
<FONT COLOR = "#0000FF">Warna Biru</FONT><BR>
<FONT COLOR = "yellow">Warna Kuning</FONT><BR>
</BODY>
</HTML>
Hasilnya berupa tampilan dengan latar belakang hitam (BGCOLOR = “black”) dan teks yang tidak diatur melalui tag <FONT> akan berwarna abu-abu (TEXT = “gray”).

Entitas Karakter dan Numerik
Misalnya anda ingin menuliskan tulisan: <HR> . Tetapi tidak dimaksudkan untuk menampilkan garis maka anda perlu melakukan penulisan secara khusus. Berhubung tanda < dan > mempunyai makna khusus bagi browser, Anda hanya bisa menampilkan tanda < dan > secara khusus pula. HTML menyediakan sejumlah simbol yang berguna untuk menampilkan karakter-karakter khusus yang menyatakan suatu entitas karakter seperti A umlaut (Ä) ataupun numerik seperti ¼, sebagaimana tabel berikut:


<HTML>
<HEAD>
<TITLE>Penulisan Simbol Khusus</TITLE>
</HEAD>
<BODY>
<H1>Kamus Jerman - Indonesia</H1>
Tsch&uuml;&szlig; = Sampai jumla<BR>
Fr&auml;ulein = Nona<BR>
Ich m&ouml;chte ... = Saya ingin ... <BR>
<HR>
Garis di atas diperoleh dengan menggunakan kode
&lt;HR&gt;
</BODY>
</HTML>

Daftar Item
* Tag <UL>
Digunakan untuk menampilkan data dalam bentuk daftar (list) yang tidak diberi nomor. 
Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Pemakaian Tag UL</TITLE>
</HEAD>
<BODY>
<H2>Group Jazz:</H2>
<UL>
Fourplay <BR>
Rippingtons <BR>
Spyro Gyra <BR>
Shakatak <BR>
</UL>
*****
</BODY>
</HTML>

Supaya setiap dalam daftar diberi tanda bulatan (disebut bullet) bisa ditambahkan tag <LI> di depan masing-masing item. Contoh:
<HTML>
<HEAD>
<TITLE>Contoh pemakaian tag UL</TITLE>
</HEAD>
<BODY>
<H2>Group Jazz:</H2>
<UL>
<LI>Fourplay <BR>
<LI>Rippingtons <BR>
<LI>Spyro Gyra <BR>
<LI>Shakatak <BR>
</UL>
*****
</BODY>
</HTML>

* Tag <OL>
Kadangkala daftar suatu item dikehendaki agar ditampilkan dengan nomor urut. Dengan menggunakan tag <OL>, pemberian nomor dapat diotomatiskan tanpa harus menuliskan nomor secara eksplisit. 
Contoh:
<HTML>
<HEAD>
<TITLE>Contoh pemakaian Tag OL</TITLE>
</HEAD>
<BODY>
<H2>Group Jazz:</H2>
<OL>
<LI>Fourplay <BR>
<LI>Rippingtons <BR>
<LI>Spyro Gyra <BR>
<LI>Shakatak <BR>
</OL>
*****
</BODY>
</HTML>




0 comments:

Posting Komentar