BELAJAR HTML
Dewasa ini, hampir semua dokumen web dibuat
dengan bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja
membuat web page (halaman web) tanpa mengerti sedikitpun HTML, yakni dengan
menggunakan editor HTML berjenis WYSIWYG seperti Microsoft FrontPage, Adobe
PageMill atau Netscape Composer, namun sangat disarankan bahkan nyaris diharuskan,
agar anda mengerti bahasa HTML. Terutama agar anda bisa memanfaatkan secara
optimal berbagai fasilitas browser dan mengingat sejumlah kelemahan yang
terdapat pada editor WYSIWYG seperti di atas. Untuk itu langkah pertama bagi
Anda yang bercita-cita memiliki website sendiri adalah belajar HTML.
HTML (Hypertext Markup Language) adalah
bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan
dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up)
dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm
atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa
menggunakan semua program teks editor biasa, mulai dari Notepad hingga MS Word.
Untuk mudahnya, kita gunakan program Notepad. Bukalah program Notepad. Bila
anda belum tahu caranya, klik Start > Programs > Accessories
lalu Notepad. Sekarang ikutilah dengan seksama latihan-latihan
berikut satu demi satu.
PENGENALAN KODE HTML
Dalam program Notepad anda, tulislah seperti ini:
|
<HTML>
</HTML>
|
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.
Tidak ada komentar:
Posting Komentar