Home
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 kotakFile 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 filelatih1.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 menjadisangat
rumit. Meski demikian, menggunakan teks editor untuk membuat halaman web
adalah cara terbaik untuk benar-benar mengerti tentang struktur
file HTML.
Demikianlah langkah Awal dalam mempelajari
HTML untuk tingkatan selanjutnya akan saya posting dikesempatan mendatang.
|
Tidak ada komentar:
Posting Komentar