TUTORIAL HTML 8
Sitenblog 10:31 PM
Sebenarnya anda bisa dibilang sudah mahir kalau memang mengikuti keseluruhan tutorial yang telah saya sampaikan sebelumnya. Tapi kalau anda ingin tahu lebih banyak, baiklah akan saya beberkan beberapa jurus rahasia yang hanya boleh dipelajari oleh mereka yang telah memiliki kuda-kuda yang cukup baik. :D
Pertama, sekali lagi kita bicara tentang format dan manipulasi teks. Ada beberapa tag yang belum saya bahas, antara lain:
<BLOCKQUOTE> ....... </BLOCKQUOTE>
Tag ini gunanya untuk mengkuot (bahasa Indonesia yang bener apaan sih) paragraf. Contohnya, ya ini. Anda bisa melihat sendiri kalau paragraf ini berbeda kan dengan paragraf lainnya.:) Yup, paragraf ini jadi sedikit lebih ke dalam, istilahnya indent.
Kemudian yang fungsinya agak mirip adalah tag berikut:
<CITE> ....... </CITE>
Tag Cite: Tag <CITE> ini berguna kalau misalnya kita sedang mengutip. Misalnya kayak tulisan ini yang saya maksudkan sebagai definisi penggunaan tag <CITE>. Dengan memakai tag <CITE> tulisan menjadi miring (italic), ya kayak inilah.
Nah tag lain yang juga membahas tentang paragraf adalah tag DIV seperti ini:
<DIV ALIGN="left" STYLE="...."> ....... </DIV>
Tag <DIV> ini berguna untuk memformat satu paragraf dan dengan atribut yang umum dipakai ALIGN dan STYLE. Untuk atribut ALIGN bisa diisi "left", "center" atau "right" yang artinya rata kiri, tengah, atau rata kanan. Sedang STYLE berguna untuk mendefinisikan font dalam paragraf tersebut, baik ukuran (SIZE), jenis font (FACE), pokoknya tentang font deh. Tapi STYLE ini harus didefinisikan dulu di bagian <HEAD>. Masih ingat kan tentang HEAD ? Itu lho bagian di atas . Tapi .. mmm saya fikir untuk saat ini kita belum perlu belajar STYLE. Kalau contoh pemakaian DIV, ya paragraf ini. Sekarang saya bikin align="center".
Berikutnya ada tag yang rada cool:
<PRE> ....... </PRE>
Dengan tag ini kita bisa membuat tulisan yang kita tampilkan akan muncul dengan persis. Misal tulisan seperti ini:
**********************
MAUNYA SIH BIKIN
@ @
*
* *
*********
KEPALA ORANG
**********************
Tanpa menggunakan tag <PRE>, hasilnya akan seperti ini:
********************** MAUNYA SIH BIKIN @ @ * * * ********* KEPALA ORANG **********************
Dengan menggunakan tag <PRE> .... </PRE>, noda-noda yang membandel akan hilang .. jrenggg ..
**********************
MAUNYA SIH BIKIN
@ @
*
* *
*********
KEPALA ORANG
**********************
Berikutnya, kita akan membahas tentang tag tag <STRIKE>. Saya sendiri hampir nggak pernah make nih. Bentuknya:
<STRIKE> ....... </STRIKE>
Tag ini akan menyebabkan ada garis yang memotong huruf. Mungkin salah satu gunanya menunjukkan adanya koreksi. Misalnya saya tulis seperti ini:
Harga Lama:
Harga Baru: 2000
Nah untuk harga lama kita pakai STRIKE - dicoret.
Terus sekarang kita akan membahas tag berikut:
<SUB> ....... </SUB>
Tulisan yang berada di antara tag <SUB> dan </SUB> akan ditampilkan turun (subscript). Contoh penggunaannya untuk menulis rumus kimia, misalnya seperti ini:
H2O adalah air, kalau CSUB>6HSUB>12OSUB>6 adalah karbohidrat. Gitu, keren kan.
Nah kalau ngomongin SUB, tentu kita ingat pasangannya.
<SUP> ....... </SUP>
SUP kebalikannya, akan menampilkan tulisan naik (superscript). Contohnya seperti di rumus berikut: E = mcSUP>2
Adalagi tag yang seperti ini:
<TT> ....... </TT>
Tag <TT> ini akan menampilkan toelisan jang mirip dengan toelisan mesin ketik zaman perdjoeangan. Tjontoh-tjontoh toelisan di masa silam terseboet akan tjoba saya tampilkan dalam toelisan jang sederhana ini. Sengaja font size jang digoenakan saya perbesar agar kegoenaan tag TT ini lebih dapat mendjadi periksa. Apa tjoba .. Gitjuuu. :D
Terus untuk urusan tabel sebenarnya kita punya tag <CAPTION> yang gunanya untuk ngasih judul, dan tag <TH> yang gunanya bikin header. Lihat deh contoh pemakaiannya. Saya akan menulis seperti ini. Tag <CAPTION> otomatis membuat tulisan jadi di tengah, sedang tag <TH> otomatis membuat tulisan jadi tebal. Tag <CAPTION> ditulis di luar tag <TR> dan <TD>. Sedang tag <TH> digunakan untuk membuat sel seperti biasa (sama dengan tag <TD>>
<TABLE BORDER="1">
<CAPTION>Ini Caption</CAPTION>
<TR>
<TH>Ini Header pake TH</TH>
<TD>Ini pake TD</TD>
</TR>
<TR>
<TD>Ini sel biasa</TD>
<TD>Ini juga sel biasa</TD>
</TR>
</TABLE>
Dan hasilnya akan seperti ini:
Sekarang kita bicara tentang list. Ada beberapa tag yang berhubungan dengan fungsi list, yaitu:
• <OL> ....... </OL>
• <UL> ....... </UL>
• <LI>
Lihat di atas saya telah menggunakan list. Anda penasaran bagaimana membuatnya, simak penuturan saksi mata di bawah ini.
UL (unordered list) digunakan untuk membuat list dengan bulletizing. Jadi membuat daftar barang memakai bullet (item-item di depan tiap barang). Cara pemakaiannya adalah seperti ini.
<UL>
<LI> Barang Pertama
<LI> Barang Kedua
<LI> Barang Ketiga
</UL>
Jadi dibuka dengan <UL> dan ditutup dengan </UL>. Di dalamnya diisi dengan tag <LI> sebanyak barang yang dibutuhkan. Dapat kita lihat tag <LI> tidak perlu ditutup dengan </LI>. Hasil kode di atas seperti ini.
• Barang Pertama
• Barang Kedua
• Barang Ketiga
Kalau kita mengganti UL dengan OL (ordered list), maka list kita akan diberi nomor (bukan bullet). Lihat kode di bawah ini:
<OL>
<LI> Barang Pertama
<LI> Barang Kedua
<LI> Barang Ketiga
</OL>
Dan hasilnya seperti ini:
1. Barang Pertama
2. Barang Kedua
3. Barang Ketiga
Terakhir kita bicara tentang URL. Anda tahu kan URL ini adalah halaman sebuah situs yang mengacu kepada sebuah file, misalnya "http://rahim.f2o.org/html/final.html". Kita telah sering menggunakan URL sebelumnya, misalnya pada saat menulis:
1. <IMG SRC="tintin.gif">
2. <A HREF="final.html">
Anda masih ingat kode HTML di atas bukan ? Nah mungkin anda bertanya mengapa kita tidak menggunakan URL lengkap seperti misalnya:
<A HREF="http://rahim.f2o.org/html/final.html">
tetapi kita hanya menuliskannya:
<A HREF="final.html">
Jawabannya adalah karena kita menggunakan URL relatif, bukan URL absolut. URL relatif ini dapat anda gunakan jika file yang anda tuju (*.html, *.gif, *.jpg, dll) berada pada server yang sama. Jika file tersebut berada pada server yang berbeda, mau tidak mau anda harus menuliskannya lengkap, seperti:
<A HREF="http://www.geocities.com/rohim94/index.html">
Nah untuk URL relatif, aturannya adalah sebagai berikut:
• Jika file berada pada folder yang sama, maka kita cukup memanggil namanya, misal:
<A HREF="final.html">
Posisi file mungkin seperti ini:
rahim.f2o.org/html/tutorial.html
rahim.f2o.org/html/final.html
Dari file tutorial.html untuk memanggil file final.html, cukup namanya saja.
• Jika file berada pada folder yang lebih atas, maka digunakan "../sesuatu.html", contohnya:
<A HREF="../contoh.html">
Posisi file mungkin seperti ini:
rahim.f2o.org/html/tutorial.html
rahim.f2o.org/contoh.html
Sekali lagi, kita sedang berada di tutorial.html dan akan memanggil contoh.html. (Pokoknya kita tuh selalu tutorial.html - apapun yang terjadi).
• Jika file berada pada folder yang lebih bawah, maka kita tuliskan foldernya "folder/sesuatu.html", contohnya:
<A HREF="frame/tambahan.html">
Posisi file mungkin seperti ini:
rahim.f2o.org/html/tutorial.html
rahim.f2o.org/html/frame/tambahan.html
atau
<IMG SRC="pic/tintin.gif">
Dengan posisi file:
rahim.f2o.org/html/tutorial.html
rahim.f2o.org/html/pic/tintin.gif
• Jika file berada pada folder yang berbeda, maka kita harus 'naik' dulu kemudian 'turun' ke folder yang dituju "../folder/sesuatu.html", misalnya:
<A HREF="../php/script.php">
Posisi file mungkin seperti ini:
rahim.f2o.org/html/tutorial.html
rahim.f2o.org/php/script.php
Udah. Ngerti kan ya ?
OK, that's all folk.
Anda telah benar-benar lulus. Semoga saja anda bisa cepat mempraktekkan 'ilmu' ini. Sebab kalau tidak anda praktekkan, akhirnya anda akan terlupa. Dan in case anda lupa, kunjungi saja situs ini. Kami akan tetap menerima anda. :D
Oleh Abdur Rahim
Posted by ibnuradinas.blogspot.com
Posted by Abol Ezz
on 10:31 PM.
Filed under
