Sekilas Tentang HTML
Pernah dengar HTML? Bisa jadi kamu sudah sering main internet, tetapi belum kenal dengan yang namanya HTML. Ta’rif kerennya adalah sebuah sistem untuk proses mark up atau pemakaian tag pada sebuah dokumen agar dokumen tersebut dapat ditampilkan di World Wide. Dan kepanjangan kerennya adalah Hypertext Markup Language. Mungkin saat ini kamu nggak paham dengan pengertian di atas. Tapi jangan panik karena ini tidak akan mempengaruhi porses praktis belajar HTML.
Sekarang saya akan berbicara secara awam tentang apa yang dimaksud HTML. Ketika main internet kamu pasti membuka program Internet Explorer (selanjutnya di singkat IE), atau Mozilla, atau Netscape. Ketiganya disebut browser. Tugas browser yaitu meminta dan menerjemahkan halaman yang akan kamu baca. Halaman itu sendiri disimpan di komputer lain yang entah berada dimana. Bisa di Amerika, Mesir, Australia, Arab Saudi atau bahkan di Indonesia sendiri. Komputer yang menyimpan halaman tersebut disebut komputer server.
Jadi sekarang kamu tahu bahwa di dalam berinternet ada komunikasi antara browser yang ada di komputer kamu atau disebut client web dengan komputer server atau sever web. Permintaan halaman dari browser kepada kompuer sever dilakukan melalui URL atau Uniform Resource Locator. Itu lho, tulisan yang kamu ketikkan di kolom “Address” di IE. Jadi kalau kamu menuliskan, misalnya, www.ponpessarang.net, maka IE akan dihubungkan dengan servernya ponpessarang, lalu merespon dengan memberikan halaman yang diminta.
Halaman yang dikirimkan web server tidak berupa teks seperti yang kita baca, tetapi berupa teks ASCII atau teks “bahasa planet” dalam format HTML. Begitu IE menangkap format HTML, ia akan menerjemahkan teks kiriman tersebut menjadi halaman Web yang kita baca waktu berinternet. Di dalam teks tersebut ada kode kode yang bisa dipahami IE. Misalnya, di dalam teks itu ada kode “<title> bla bla bla </title>” maka teks yang ada di antara kode title akan diletakkan di dalam title bar. Begitu pula kode kode lain.
Jadi, dalam bahasa awam HTML adalah bahasa komunikasi antara client web dengan server web untuk menampilkan halaman web. Dan lembaga yang mendifinisikan bahasa komunikasi tersebut adalah W3C atau World Wide Web Consurtium.
Memahami Tag HTML
Kunci utama dalam HTML adalah kode kode seperti saya sebutkan di atas, atau lazim disebut “tag”. Tag HTML umunya saling berpasangan yaitu ada tag pembuka dan tag penutup. Untuk tag pembuka, nama tag diapit oleh tanda <> dan tag penutup diapit oleh tanda yang sama ditambah slash “</>. Jadi untuk tag body, misalnya, anda harus menulis: <body> isi halaman web </body>
Berikut adalah struktur standar sebuah halam web :
<HTML>
<HEAD>
<TITLE>
judul halaman
</TITLE>
</HEAD>
<BODY>
Isi halaman
</BODY>
</HTML>
Sebelum saya jelaskan sebaiknya kamu praktik dulu. Buka program Notepad à tuliskan teks diatas di Notepad kamu à simpan dengan nama “latihan1.htm” di folder C:\latihan. Jangan lupa file kamu harus berekstensi htm. Artinya nama file kamu harus diakhiri dengan “.htm”. Kalau tidak, file kamu tidak akan dibaca sebagai file HTML. Sekarang buka file yang baru saja kamu buat dengan menggunakan IE. Caranya buka IE kamu à di kolom Addres yang terletak di atas ketikkan: “C:\latihan\latihan1.htm. Kalau kamu tidak salah menjalankan intruksi saya, maka di bagian title bar IE kamu akan tertulis “judul halaman” dan di bagian halaman terdapat tulisan “Isi halaman”. Good luck, untuk sukses latihan pertama kamu.
Sekarang perhatikan tag di atas. Masing masing tag selalu berpasangan. Di dalam tag <html> ada tag <head> dan tang <body>. Dan di dalam tag <head> ada tag <title>. Jadi di dalam suatu tag bisa diletakkan tag lain. Tag yang di dalamnya ada tag lain disebut tag bersarang atau tag murakkab.
Fungsi masing masing tag adalah sbb:
- Fungsi tag <html> adalah untuk menandai bahwa teks yang ada di dalamnya adalah bagian dari halaman web
- Tag <head> dipakai untuk memberikan informasi diluar isi halaman, seperti judul halaman, script, meta, style dll
- Tag <title> untuk menampilkan judul di title bar
- tag <body> untuk menampilkan isi halaman web
Tag bisa memiliki property atau atribut. Property tag ditulis didalam tag pembuka dan dipisah dengan spasi dan nilai property ditulis setelah “=” dan diapit tanda petik ganda. Contoh: <body bgcolor=”#000000”> </body>. Di dalam contoh ini tag <body> memiliki property “bgcolor” atau warna latar yang nilainya adalah “#000000” yaitu nilai hexa untuk warna hitam. Kalau diterjemahkan dalam bahasa awam: tag <body> memiliki sifat yaitu latar belakanya berwarna hitam.
Buka lagi file latihan1.htm à ubah tag pembuka <body> menjadi: <body bgcolor=”#000” text=”#30ff3d”> à simpan file. Arti dari tag tersebut adalah, kamu mengatakan kepada browser bahwa warna latar halaman web adalah hitam dan teksnya berwarna hijau muda. Sekarang buka file latihan1.htm dengan browser andalan kamu, IE dan lihat hasil perubahan. Kalau warna latar sudah hitam dan warna teks hijau muda berarti, Mabruk anda telah berhasil menambahkan property.
Tapi jangan latah. Kamu tidak bisa memberikan property “bgcolor” pada tag <html>, karena tag ini memang tidak punya properti “bgcolor”. Bahkan tag seperti <title> tidak memiliki property sama sekali.
OK. Seharusnya saat ini kamu sudah paham bahwa tag pembuka HTML berfungsi untuk menyatakan awal dari suatu perintah dan tag penutup berarti akhir dari suatu perintah. Dan teks yang berada diantara tag pembuka dan penutup akan ditampilkan sesuai dengan perintah. Jadi HTML memiliki dua bagian yaitu perintah dan teks yang ditampilkan sesuai perintah. Bagaimana kalau kamu salah menuliskan perintah?
Mari kita praktekkan kesalahan agar terhindar dari kesalahan. Kembali ke file latihan1.htm à ubah tag penutup </head> menjadi: “/head>” tanpa tanda “<” di depan. Lihat hasilnya. Teks halaman kamu berubah menjadi “/HEAD> Isi halaman”. Sebab penulisan tag penutup kamu yang salah diterjemahkan browser sebagai isi halaman dan bukan sebagai akhir dari perintah.
Tag untuk teks
Kita praktek lagi. Kembali ke Notepad dengan file latihan1.htm à ubah teks di dalam tag <body> menjadi seperti ini:
<BODY>
Isi halaman
<p> Paragraf pertama </p>
</body>
Tampilan halaman web kamu akan menjadi :
Isi Halaman
Paragraf pertama
Antara baris 1 dengan baris dua berjarak dua baris.
Seperti kamu lihat, tag <p> berfungsi untuk membuat paragraf. Dan di dalam HTML suatu paragraf akan membuat jarak sebanyak dua baris dengan teks sebelum dan sesudahnya. Kalau nggak ingin ada jarak kamu bisa mengganti tag <p> dengan tag <br>. Tag yang satu ini tidak perlu menggunakan tag penutup. Jadi kamu cukup menuliskan <br>, maka teks setalah <br> akan menempati baris baru tanpa jarak baris dengan teks sebelumnya.
<BODY>
Isi halaman <br> Pindah Baris
<p> Paragraf pertama </p>
</body>
Tampilan akan berubah seperti ini:
Isi Halaman
Pindah Baris
Paragraf pertama
Berikut beberapa tag yang berkaitan dengan teks :
- <b></b> atau <strong></strong> untuk mencetak tebal
- <i></i> atau <em></em> untuk mencetak miring
- <u></u> untuk memberi garis bawah
- <font></font> untuk mengatur tampilan font. Ada empat property font yang berkaitan dengan tampilan teks :
- face untuk mengatur jenis font
- size untuk mengatur ukuran font berdasarkan ukuran yang sudah ditentukan. Property size bernilai antara 1 s/d 7, atau +1 s/d +7, atau -1 s/d -7. kalau property size bernilai plus atau minus itu artinya ukuran font adalah font-size default ditambah atau dikurangi nilai property. Misalnya browser kamu puya default font-size 3 dan kamu mengisi property size dengan +1 maka property size adalah 4.
- color untuk mengatur warna font. Nilanya adalah bilagan hexadecimal seperti #000000
- <h1></h1> s/d <h6></h6> untuk mengatur level heading
- untuk mengatur perataan teks gunakan property align. Nilainya justify, center, right dan left. Tag yang memiliki property align diantaranya adalah <p> dan <h1> s/d <h6>
Biar mudah dipahami kita praktekkan saja. Buka lagi notepad dengan file latihan1.htm à tambahkan teks dibawah ini didalam tag <body>
<font face="Courier New" color="#ff0000" size="+1">
ini di dalam tag "font" : <br>
font style : Courir New <br>
font size : +1 <br>
font color : red atau dalam nilai hexadecimal #ff0000<br>
masih di dalam tag "font" <br>
test italic: <em>hasil tag "em"</em><br>
test bold: <strong>hasil tag "strong"</strong><br>
test underline: <u>hasil tag "u"</u><br>
test gabungan: <u><b><i>hasil tag "u" "b" "i"</i></b></u><br>
akhir tag font <br>
</font>
<font face="arial" color="#ffff00" size="7">
awal tag "font" dengan property berbeda: <br>
font style : arial <br>
font size : 7 <br>
font color : yellow atau dalam nilai hexadecimal #ffff00<br>
masih di dalam tag "font" <br>
test perataan paragraf <br>
rata kanan :
<p align="right"> rata kanan </p>
<p align="left"> rata kiri </p>
<p align="center"> rata tengah </p>
<p align="justify"> rata kanan-kiri bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bal bal bla bla rta kanan-kiri</p>
akhir tag font <br>
</font>
test heading<br>
<h1> h1 heading paling besar </h1>
<h5> heading kecil </h5>
<h6> heading paling kecil </h6>
Pahami penjelasan saya dengan membandingkan hasil praktek kamu.
Tambahan penjelasan dari praktek di atas :
- Tag HTML bersifat caseinsensitive atau tidak membedakan huruf besar dan kecil. Jadi, misalnya kamu menulis <strong> atau <STRONG> atau bahkan <sTrOng>, browser tetap paham bahwa kamu memerintahkan cetak tebal.
- di dalam tag <body> kamu mengisi property text dengan nilai #30ff3d, yang artinya seluruh text yang berada di dalam tag <body> harus berwarna hijau muda. tetapi di dalam tag <font>, baik yang pertama maupun kedua, memiliki perintah warna teks yang berbeda melalui property color. Dan hasilnya, semua tulisan yang ada di dalam tag <font> memiliki warna yang berbeda dengan perintah dalam tag <body>. Itu artinya, kalau ada dua tag memerintahkan nilai yang berbeda pada property yang sejenis, maka perintah yang dikerjakan adalah perintah tag terdekat.
Membuat Garis
Untuk membuat garis anda bisa menggunakan tag <hr>. tag ini termasuk yang tidak memerlukan pasangan. Jadi anda cukup menuliskan <hr> tanpa tag penutup. Beberapa property penting tag <hr> adalah :
- color, untuk menentukan warna garis. Nilainya warna dalam hexadecimal.
- Noshade, untuk menentukan efek shading. Property ini tidak memerlukan nilai, karena nilainya sudah terkandung dalam property itu sendiri. Jadi cara penulisannya adalah “<hr noshade>”.
- Align, menentukan perataan. Nilainya antara Center, Right dan Left, dan tidak ada Justify.
- Width, menetukan lebar garis. Nilainya bisa menggunakan satuan persen dan penulisannya <hr width=”10%”> atau pixel dan penulisannya <hr width=”10”> tanpa diikuti tanda satuan setelah angka.
- Size, menetukan ketebalan garis. Dan nilainya angka dalam satuan pixel.
Sama seperti tag <p>, tag <hr> juga akan membuat jarak baris dengan teks di atasnya dan di bawahnya.
Untuk mempraktikkan tag <hr>, tambahkan kode berikut di dalam tag <body>:
<hr color="ff0000" noshade size="2" width="30%" align="cente">
Kode di atas akan menambahkan garis horizontal berwarna merah dengan lebar 30% dari total lebar jendela browser. Perlu kamu perhatikan bahwa nilai width dengan menggunakan persen akan membuat garis memiliki lebar yang fleksibel bergantung pada lebar jendela browser.
List atau daftar berbutir
Tag yang digunakan untuk membuat list adalah <ul> atau <ol>. <ul> akan membuat list dengan masing masing item ditandai gambar. Sedangkan <ol> membuat list dengan butir bertanda huruf atau nomer secara berurutan. Tag <ol> dan <ul> memiliki property “type”. Property ini untuk menentukan jenis item yang digunakan. Pilihan type untuk tag <ol> adalah A, a, I, i, atau 1. Dan property “type” dari tag <ul> bisa bernilai circle atau square.
Kemudian masing masing item harus ditulis di dalam tag <li> , dan masing tag <li> berada di dalam tag <ul> atau <ol>. Ini contohnya:
<ol type=”A”>
<li>item satu</li>
<li>item dua</li>
<li>dan seterusnya</li>
</ol>
Kamu juga bisa membuat list bersarang, maksudnya di dalam tag <li> kamu memasukkan sub list. Contohnya:
<ul type=”square”>
<li>item satu
<ol>
<li> item satu point satu</li>
<li>item satu point dua</li>
</ol>
</li>
<li>item dua</li>
<li>dan seterusnya</li>
</ul>
Membuat Table
Ada empat tag yang berkaitan dengan pembuatan tabel, yaitu <table>, <tr>,<td> dan <th>. Tag <table> menyatakan tabel. Di dalam tag <table> minimal harus ada satu tag <tr> yang menyatakan baris tabel. Dan di dalam tag <tr> minimal harus ada satu tag <td> yang berarti kolom, atau <th> yang berarti kolom header. Jadi susunannya seperti ini :
<table>
<tr>
<td> teks kamu di sini
</td>
</tr>
</table>
Tanbih: sebenarnya tidak ada perbedaan siginifikan antara tag <th> dengan <td> selain bahwa tag <th> akan membuat teks di dalamnya akan dicetak tebal dan berata tengah.
Beberapa property penting <table> adalah :
- Align untuk mengatur perataan tabel. Nilai yang bisa dimasukkan: center, left atau right.
- Bgcolor untuk mengatur warna latar bernilai hexadecimal
- Border untuk mengatur ketebalan garis dengan nilai angka dalam satuan pixel
- Bordercolor untuk mengatur warna garis bernilai hexadecimal
- Width untuk menentukan lebar tabel bernilai angka dalam satuan % (persen) atau pixel
- Cellpadding untuk menentukan jarak antara teks di dalam cel dengan tepi kanan, kiri, atas dan bawah cel tersebut.
- Cellspacing untuk mengatur jarak antar cel dalam satuan pixel.
Kita akan coba membuat table dengan kolom no dan nama. Tulis kode berikut:
<table>
<tr>
<th>NO</th>
<th>NAMA</th>
</tr>
<tr>
<td>1</td>
<td>Susilo</td>
</tr>
<tr>
<td>2</td>
<td>Bambang</td>
</tr>
</table>
Kode di atas akan membuat table dua kolom dengan 1 baris header dan 2 baris isi.
Sekarang kita ubah tampilan table dengan memanfaatkan property. Ganti tag pembuka <table> menjadi seperti ini :
<table border=”1” bordercolor=”#ff0000”>
Kalau tidak salah menjalankan instruksi, seharusnya table kamu sekarang sudah berbingkai merah. Tetapi problemnya, teks yang ada di cel terlalu dekat dengan garis cel. Di sinilah kamu memerlukan property cellpadding. Coba tambahkan property cellpadding dengan nilai 4, seperti kode di bawah:
<table border=”1” bordercolor=”#ff0000” cellpadding=”4”>
disamping menggunakan propertynya <table>, kamu juga bisa menggunakan propertynya <tr> dan <td> untuk mengatur tampilan teks di dalam tabel. Beberapa property <tr> dan <td> yang terpenting adalah :
- Align untuk mengatur perataan teks secara horizontal. Jangan kacaukan property ini dengan property align milik <table>. Yang di sini untuk meratakan teks dan yang di <table> untuk meratakan tabel. Nilai yang bisa kamu masukkan adalah justify, center, right, dan left.
- Valign untuk mengatur perataan teks secara vertikal. Nilai yang bisa kamu masukkan adalah baseline, bottom, middle, top.
- Width untuk mengatur lebar dengan nilai angka dalam satuan pixel
- Height untuk mengatur tinggi dengan nilai angka dalam satuan pixel
Mari kita tuntaskan urusan tabel. Kita sekarang akan mengatur lebar dan perataan table, lebar kolom serta perataan teks. Ganti kode di atas dengan kode berikut :
<table border=”1” width=”400” align=”center” >
<tr bgcolor=”#cccccc”>
<th width=”50”>NO</th>
<th width=”350”>NAMA</th>
</tr>
<tr height=”40” align=”right” valign=”bottom”>
<td>1</td>
<td>Susilo</td>
</tr>
<tr bgcolor=”#999999” height=”40” align=”center” valign=”middle”>
<td>2</td>
<td>Bambang</td>
</tr>
</table>
Lihat hasilnya! Tabel memiliki lebar 400 pixel dan berada di tengah jendela browser. Itu pengaruh dari properti “width” dan “align” yang kamu tuliskan di tag <table>. Warna latar baris pertama adalah abu abu terang dan baris ketiga abu bau gelap. Itu hasil kerja property “bgcolor” yang kamu tuliskan di tag <tr>. Kolom nomer dan nama masing memiliki lebar 50 dan 350 pixel. Itu berkat kerja property “width” yang kamu tuliskan di tag <th> yang ada di dalam tag <tr> pertama. Perhatikan ! meskipun kamu hanya mengatur lebar kolom pada baris pertama, tetapi semua kolom di baris berikutnya akan mengikuti lebar kolom baris pertama. Sebab, qoidahnya kolom adalah: tampilan lebar suatu kolom mengikuti nilai lebar tertinggi dari baris yang ada. Jadi, kalau kamu menambahkan property width pada kedua <td> yang ada di dalam <tr> dengan nilai masing masing adalah 200, maka kedua kolom dalam tabel tersebut akan lebar yang sama yaitu 200 pixel.
Untuk melihat perbedaannya, coba ubah <tr> kedua seperti berikut:
<tr height=”40” align=”right” valign=”bottom”>
<td width=”200”>1</td>
<td width=”200”>Susilo</td>
</tr>
Kaidah kolom yang kedua adalah: jika semua kolom tidak ditentukan nilai lebarnya, maka lebar kolom mengikuti teks terpanjang dari baris yang ada. Untuk mencobanya, hilangkan semua property width yang ada di semua tag <td> atau <th>.
Ada dua property lagi yang perlu saya jelaskan, yaitu “collspan” dan “rowspan”. Kedua property ini hanya khusus untuk tag <td> dan tidak dimiliki oleh tag <tr>. Fungsi kedu aproperty ini adalah untuk menggabungkan beberapa cel menjadi satu cel. Penggabungan horizontal mengggunakan “collspan” dan penggabungan vertikal menggunakan “rowspan”. Kode untuk praktik seperti di bawah ini :
<table width="400" border="1">
<tr>
<td rowspan="2" align="center"><strong>no</strong></td>
<td rowspan="2" align="center"><strong>nama</strong></td>
<td colspan="3" align="center"><strong>alamat</strong></td>
</tr>
<tr>
<td align="center"><strong>desa</strong></td>
<td align="center"><strong>kec</strong></td>
<td align="center"><strong>kabupaten</strong></td>
</tr>
</table>
Mula-mula table ini memiliki dua baris dan tiga kolom. Kemudian dua baris yang ada di kolom pertama digabung dengan menggunakan perintah <td rowspan=”2”>. Demikian pula yang terjadi pada kolom kedua. Dan tiga kolom terakhir yang ada di baris pertama digabung dengan menggunakan perintah <td collspan=”3”>.
Menampilkan Gambar
Tag yang berfungsi untuk menampilkan gambar adalah <img>. Tag ini tidak memerlukan tag penutup. Beberapa property <img> yang perlu kamu ketahi adalah :
- SRC untuk menunjuk lokasi folder dan nama file dari gambar yang akan ditampilkan
- ALT untuk menampilkan alternatif yang akan ditampilkan jika browser gagal menampilkan gambar.
- Align untuk mengatur posisi gambar diantara objek lain didalam jendela browser. Nilainya bisa left, right, top, texttop, middle, absmiddle, baseline, bottom atau absbottom.
- Vspace untuk membuat jarak antara gambar dengan tepi atas dan tepi bawah, bernilai angka dalam satuan pixel.
- Hspace untuk membuat jarak antara gambar dengan tepi kiri dan kanan, bernilai angka dalam satuan pixel.
Untuk mempraktikkan tag <img>, buatlah file baru menggunakan Notepad, beri nama “latihan2.htm” (tanpa tanda kutip ganda, lho), dan letakkan di folder “C:\latihan”. Kemudian cari file gambar yang ukurannya kecil dan berformat “jpg”, kemudian kopi gambar tersebut ke folder “C:\latihan” dan ganti nama file menjadi “gambar1.jpg”. Masing ingat folder C:\latihan, kan? Folder ini kamu buat ketika pertama kali mempraktikkan tag HTML.
Buka file “latihan2.htm”. Seharusnya masih kosong, karena saya belum memerintahkan apa apa. Sekarang tuliskan kode berikut:
<HTML>
<HEAD>
<TITLE>
menampilkan gambar
</TITLE>
</HEAD>
<BODY>
<img src=”gambar1.jpg” alt=”gambar1” align=”left”>
di sebelah kiri adalah gambar yang kami pakai untuk berlatih untuk
menampilkan gambar. Dan teks ini berada di sebelah kanan gambar
karena saya memasukkan nilai "left" pada property align
</BODY>
</HTML>
Kalau kamu tidak salah menjalankan intruksi, halaman web kamu akan berisi gambar dan disebelah kanannya ada teks. Kalau kamu pingin membuat jarak antara gambar dan teks, tambahkan property hspace dengan nilai yang kamu inginkan, seperti kode berikut: hspace=”10”.
Membuat link
Kamu bisa membuat link untuk memanggil halaman web lain dengan menggunakan tag <a>. Beberapa proprty yang perlu kamu ketahui adalah :
- Href untuk menunjuk halaman yang kamu panggil
- Target untuk menentukan apakah halaman web yang kamu panggil ditampilkan di jendela yang sama atau jendela baru. Nilainya adalah “_blank”, “_self”, “_top” atau “_parent”. Ingat, nilai target selalu diawali underscore (“_”).
- Title untuk menampilkan hint ketika mouse berada di teks yang menjadi link atau disebut hypertext.
Sekarang kita akan mencoba memanggil halaman “latihan2.htm” dari halaman “latihan1.htm”. Buka file latihan1.htm à tambahkan kode berikut di dalam tag <body> :
<a href=”latihan2.htm” title=”membuka gambar” target=”_self”>klik di sini</a>
Hasil dari kode di atas adalah, menampikan teks “klik di sini” yang bergaris bawah atau underline. Kalau cursor diarahkan ke teks tersebut, cursor akan berubah menjadi handpoint atau cursor dengan dambar tangan dan ada hint bertuliskan “membuka gambar”. Coba klik teks tersebut, browser akan menampilkan halaman latihan2.htm. Kalau nilai property target kamu ubah menjadi “_blank”, maka halaman latihan2.htm akan ditampilkan dalam jendela browser tersendiri@2009
Tidak ada komentar:
Posting Komentar