|
Pengenalan Kode HTML
Dalam program Notepad anda, tulislah seperti ini:
Masing-masing baris di atas disebut tag. Tag adalah kode yang
digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag
diapit dengan tanda kurung runcing. Ada
tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai
dengan tanda slash (garis miring) di depan awal tulisannya. Tag di atas
memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah
isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis
dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau
<html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat
bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh
terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa
ditampilkan dalam browser.
Sekarang kita akan beralih pada tag selanjutnya. Tambahkanlah tag seperti
berikut:
|
<HTML>
<BODY>
</BODY>
</HTML>
|
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag
<BODY>. Coba tuliskan:
|
<HTML>
<BODY>
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
|
Sekarang simpanlah file ini dengan meng-klik menu File lalu Save
As. Pada kotak dialog yang muncul, terlebih dahulu klik anak panah kecil di
ujung kanan kotak Save as type kemudian pilih All Files (*.*).
Setelah itu, isilah kotak File name dengan nama file yang anda inginkan
misalnya: latih1.htm. Jangan lupa penambahan ekstensi .htm di
belakang nama file! Akhirnya, klik tombol Save maka file akan tersimpan
sebagai dokumen web. Kini, tutuplah program Notepad anda. Sekarang bukalah lagi
program browser (Internet Explorer) selain jendela browser yang anda baca ini.
Klik menu File lalu Open. Pada kotak dialog yang muncul, klik
tombol Browse. Cari dan pilih file latih1.htm lalu klik Open.
Nah, lihatlah hasil karya anda yang pertama!
|
Tulisan ini akan tampak dalam
browser
|
Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web?
Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan
berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada
kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang
dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.
Sekarang lihatlah kembali browser anda yang sedang menampilkan file latih1
tadi. Klik menu View lalu Source. Dengan instruksi ini akan
muncullah program Notepad yang di dalamnya tampak source code atau kode-kode
HTML yang tadi anda buat. Misalnya kita akan menjadikan halaman web latih1 ini
menjadi berwarna latar belakang kuning dengan tulisan berwarna merah. Untuk
itu, kita perlu menambahkan atribut BGCOLOR dan TEXT ke dalam tag body sebagai
berikut:
|
<HTML>
<BODY BGCOLOR="yellow"
TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
|
Simpanlah kembali file ini (klik File lalu Save). Untuk
melihat bagaimana hasilnya, pergilah lagi ke program browser yang menampilkan
halaman web latih1 tadi. Klik menu View lalu Refresh atau
klik tombol Refresh pada toolbar atau bisa juga dengan menekan tombol F5
pada keyboard. Dengan demikian, browser akan memanggil ulang file latih1
yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:
|
Tulisan ini akan tampak dalam
browser
|
Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam
bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam
format heksa #rrggbb. Berikut ini adalah 16 nama warna beserta kodenya dalam
format heksa (harap diingat bahwa tulisan 0 adalah angka nol, bukan huruf O).
|
black
|
#000000
|
blue
|
#0000FF
|
olive
|
#808000
|
|
white
|
#FFFFFF
|
fuchsia
|
#FF00FF
|
green
|
#008000
|
|
red
|
#FF0000
|
gray
|
#808080
|
teal
|
#008080
|
|
yellow
|
#FFFF00
|
silver
|
#C0C0C0
|
navy
|
#000080
|
|
lime
|
#00FF00
|
maroon
|
#800000
|
purple
|
#800080
|
|
aqua
|
#00FFFF
|
|
|
|
|
Dengan demikian, kode HTML untuk contoh di atas bisa ditulis sebagai
berikut:
|
<HTML>
<BODY BGCOLOR="#FFFF00"
TEXT="#FF0000">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
|
Dengan menggunakan kode warna heksa, variasi warna yang dibuat bisa lebih
banyak. Klik
di sini untuk melihat daftar kode warna yang lainnya!
Demikianlah sekilas fungsi tag BODY. Sekarang bukalah kembali source code
alias kode-kode HTML. Masih ingat, kan
caranya? (Klik menu View lalu Source). Tambahkanlah tag-tag
berikut ini:
|
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="yellow"
TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
|
Di sini terlihat bahwa kita menambah tag <HEAD> dan tag <TITLE>.
Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang
berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita
memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi
untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang
mari kita tuliskan judul halaman web ini:
|
<HTML>
<HEAD>
<TITLE>Karya
Pertamaku</TITLE>
</HEAD>
<BODY BGCOLOR="yellow"
TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
|
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang
kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh
seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title
Bar) dari program browser akan menampilkan judul atau titel dari halaman
web anda yaitu: Karya Pertamaku. Alhamdulillah, selesailah
latihan pertama kita.
| 
