.: Mengenal 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:
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.
MENGUTAK-ATIK HURUF
Dalam latihan kedua ini, kita akan mempelajari beberapa tag yang relatif
mudah diingat. Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu menebalkan
(bold), membuat tulisan miring (italic) atau memberi garis bawah
(underline). Buka lagi program Notepad kemudian tuliskan seperti berikut
ini:
|
<HTML>
<HEAD>
<TITLE>Tipe-tipe
Teks</TILE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering
digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah
tulisan tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua
tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan
bergaris bawah atau tulisan miring dan bergaris bawah. Bahkan bisa pula
ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa
tulisan tebal, miring dan bergaris bawah.
</BODY>
</HTML> |
Simpanlah file tersebut. Jangan lupa mengikuti langkah-langkah cara menyimpan
file HTML yang sudah kita pelajari dalam latihan pertama dahulu. Setelah file
tersimpan, bukalah file tersebut dengan program Internet Explorer. Perhatikanlah
bahwa semua tulisan dalam dokumen tersebut masih seragam. Kini, kita akan
melakukan sedikit perubahan pada beberapa kata dan kalimat yang ada di situ
sehingga menjadi seperti ini:
| Ada tiga macam tipe tulisan yang paling sering digunakan dalam
penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan
tebal, tulisan miringdan tulisan bergaris bawah. Bisa
pula dua tipe huruf dipadukan misalnya tulisan tebal dan
miring, tulisan tebal dan bergaris bawah atau
tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga
tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan
tebal, miring dan bergaris bawah. |
Bagaimana caranya? Bukalah source code dari dokumen tadi (tekan F5),
kemudian tambahkan tag-tag berikut. Tag-tag tersebut adalah <B> untuk
menebalkan (bold) tulisan, <I> untuk memiringkan (italic) tulisan dan
<U> untuk menggaris-bawahi (underline) tulisan:
|
<HTML>
<HEAD>
<TITLE>Tipe-tipe
Teks</TITLE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering
digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah
tulisan <B>tebal</B>, tulisan <I>miring</I> dan
tulisan <U>bergaris bawah</U>. Bisa pula dua tipe huruf
dipadukan misalnya tulisan <B><I>tebal dan
miring</B></I>, tulisan <B><U>tebal dan bergaris
bawah</B></U> atau tulisan <I><U>miring dan
bergaris bawah</I></U>. Bahkan bisa pula ketiga tipe tulisan
tersebut sekaligus bergabung menjadi satu berupa tulisan
<B><I><U>tebal, miring dan bergaris
bawah</B></I></U>.
</BODY>
</HTML> |
Setelah anda menambahkan semua tag-tag tersebut, simpan (Save) file source
code itu kemudian lakukan Refresh pada dokumen web yang tampak pada program
browser anda. Lihatlah hasil perubahannya! Andaikata ada yang tidak beres, coba
perhatikan baik-baik penulisan tag-tag anda, mulai dari tag pembuka <HTML>
hingga </HTML> jangan sampai ada yang salah tulis meskipun satu karakter.
Misalnya: bila tag </TITLE> anda tulis </TILE> maka browser tidak
akan menampilkan tulisan apa-apa dalam dokumen anda. Kalau tidak percaya,
cobalah menulis source code yang salah seperti itu, simpan (save) kemudian
refresh dokumen anda dan lihatlah hasilnya!
Untuk lebih mempermantap keterampilan yang anda dapatkan dari latihan kedua
ini, ada baiknya anda mencoba membuat dokumen HTML berikut ini. Buatlah dokumen
dengan judul (titel): Pemantapan Tipe-tipe Teks, yang isinya adalah
tulisan seperti berikut:
|
Karena file-file HTML sebenarnya adalah file-file
ASCII biasa, maka anda dapat menggunakan editor-editor teks
sederhana seperti WordStar (WS), Notepad, MS
Write, dan lain-lain. Editor-editor teks tersebut dapat membimbing
anda mempelajari kode-kode HTML secara luar dalam. Akan tetapi
mungkin anda sedikit frustrasi karena harus mengetik semua kode
HTML baris per baris yang dalam perkembangannya akan menjadi
sangat rumit. Meski demikian, menggunakan teks editor untuk membuat
halaman web adalah cara terbaik untuk benar-benar mengerti tentang
struktur file HTML. |
Bila anda sudah menyimpannya, bukalah dan lihatlah hasilnya dalam program
browser.
| 
