Mulakan HTML!
7 Jun 2007
Dahulunya Internet muncul sebagai sebuah eksperimen tentera untuk menghubungkan rangkaian-rangkaian komputer ke dalam sebuah rangkaian yang lebih luas. Rangkaian ini membolehkan sesebuah komputer ‘bercakap’ dengan komputer yang lain. Pada awal perkembangannya, penggunaan Internet adalah terhad kepada pelajar universiti dan golongan penggodam (hacker) untuk tujuan-tujuan penyelidikan sahaja. Tiada perancangan dilakukan untuk mengatur kaedah atau format penghantaran maklumat. Internet pada masa itu tidak digunakan oleh orang awam kerana kos pemasangan yang agak mahal, pengendalian yang agak payah, dan penyediaan maklumat yang agak terhad.
Pada tahun 1993, Tim Berners-Lee, seorang penyelidik di CERN, mengendalikan sebuah projek yang dikenali sebagai World Wide Web (Jaringan Sejagat) dengan tujuan mengetengahkan penggunaan Internet kepada masyarakat awam dan menyatukan format penghantaran maklumat. Maka lahirlah HTML sebagai format rasmi bagi dokumen web. Antara ciri menonjol dalam HTML ialah sesebuah dokumen boleh merujuk kepada dokumen lain dengan menggunakan kaedah pemautan hiperteks (hypertext linking). Projek tersebut mendapat perhatian seluruh dunia dan menjadi titik tolak kepada perkembangan pantas Internet dan web pada hari ini.
Rencana ini ditulis dengan tujuan memperkenalkan HTML kepada para pembaca. Bagi yang tertanya-tanya, HTML ialah bahasa tunjang bagi pembinaan dokumen-dokumen web. HTML ialah singkatan kepada Hypertext Markup Language (Bahasa Markap Hiperteks). Markap bererti anda boleh menambahkan simbol-simbol tertentu kepada teks asal sebagai arahan yang memberitahu pelayar web bagaimana teks tersebut dipaparkan. Hiperteks pula bererti teks biasa yang dilengkapi dengan ciri-ciri tambahan seperti pemformatan, imej, multimedia, dan—yang paling penting—pautan kepada dokumen yang lain.
Untuk melihat dokumen HTML, anda perlu menggunakan pelayar web (web browser). Contoh pelayar web yang popular ialah Mozilla Firefox dan Internet Explorer. Sebenarnya, apabila anda membuka sesebuah laman web di Internet (contohnya apabila anda membuka hompej Yahoo! melalui alamat http://www.yahoo.com), pelayar web menghantar permintaan (request) kepada komputer pelayan (server). Komputer pelayan kemudiannya membalas permintaan tersebut kepada pelayar web dalam bentuk kod HTML. Kod ini tidak ditunjukkan kepada pengguna, sebaliknya diterjemahkan oleh pelayar web ke dalam bentuk paparan grafikal. Terjemahan ini dilakukan secara belakang tabir oleh pelayar web—memang sudah menjadi tugasnya, namun begitu anda boleh melihat kod tersebut bila-bila masa sahaja dengan menggunakan fungsi View Source (Lihat Sumber) yang terdapat di pelayar web kegemaran anda. Melalui Mozilla Firefox, di bar menu, anda boleh klik pada View > Page Source. Melalui Internet Explorer pula, di bar menu, anda boleh klik pada View > Source. Rupa-rupanya paparan laman web yang berwarna-warni tadi hanyalah tafsiran bagi kod HTML!
Anda juga boleh membina sebuah laman ringkas menggunakan HTML. Pembinaan dokumen HTML tidak tertakluk kepada mana-mana perisian khusus. Sebarang perisian yang boleh menyunting teks (text editor) sudah memadai (anda juga boleh menggunakan perisian penyunting HTML grafikal seperti Macromedia Dreamweaver dan Microsoft FrontPage, tapi perbincangan bagi perisian-perisian ini adalah luar daripada skop rencana ini). Buka mana-mana penyunting teks yang anda gemari (seperti Notepad, tapi jangan gunakan Microsoft Word—Word ialah pemproses perkataan, bukan penyunting teks!), dan taipkan kod seperti ini:
<html>
<head>
<title>Dokumen HTML Saya Yang Pertama</title>
</head>
<body>
<h1>Selamat datang!</h1>
<p>Ini adalah <b>dokumen HTML</b> saya <i>yang pertama.</i></p>
<p>Salam daripada <a href=”http://www.pmram.org”>PMRAM</a>.</p>
<p>© 2007 Si Fulan</p>
</body>
</html>
Pastikan kod ini ditaip dengan tepat. Jangan khuatir jika anda tidak faham kod ini. Saya akan terangkan satu persatu selepas ini. Setelah siap, simpan kod ini sebagai fail baru (pastikan nama fail tersebut berakhir dengan .htm atau .html, contohnya anda boleh menamakannya “laman.html”). Kemudian buka fail tersebut dengan pelayar web yang anda gemari untuk diterjemahkan kepada paparan web biasa. Anda akan melihat paparan dokumen HTML yang anda taip sebentar tadi seperti ini:
Tahniah, anda telah berjaya membina dokumen HTML anda yang pertama!
Penerangan
OK, tibalah masa untuk saya terangkan maksud yang tersirat di sebalik kod HTML tadi. Anda mesti perasan bahawa aksara-aksara kurungan sudut (< dan >) banyak bertaburan dalam kod ini. Dalam HTML, anda menggunakan aksara-aksara ini untuk membina tag. Tag digunakan untuk melabelkan elemen. Setiap elemen mesti dilabelkan dengan tag pembuka dan tag penutup. Sebagai contoh, elemen html dibuka dengan tag <html> dan ditutup dengan tag </html> (tag penutup ditanda dengan aksara / selepas <).
Anda perlu menggunakan tag untuk menstrukturkan dokumen HTML. Anda dapat perhatikan pada kod tadi bahawa elemen yang mula-mula ialah elemen html. Sebagai peraturan, setiap dokumen HTML mesti mempunyai elemen html sebagai elemen puncanya. Elemen ini pula mengandungi dua elemen—head dan body. Untuk memudahkan pemahaman anda, saya gambarkan struktur dokumen HTML tadi secara kasar melalui rajah di bawah (sila bandingkan dengan kod tadi):
<html>
|
+- <head>
| |
| +- <title>
| |
| +- Dokumen HTML saya yang pertama
|
+- <body>
|
+- <h1>
| |
| +- Selamat datang!
|
+- <p>
| |
| +- ...(teks)...
|
+- <p>
| |
| +- ...(teks)...
|
+- <p>
|
+- ...(teks)...
Elemen head (kepala) digunakan untuk meletakkan maklumat-maklumat mengenai dokumen tersebut, seperti siapakah penulisnya, apakah tajuknya, dan sebagainya. Maklumat-maklumat ini tidak ditunjukkan dalam paparan pelayar. Antara elemen yang biasa diletakkan di bahagian head ialah title (tajuk). Biasanya pelayar web akan menggunakan elemen ini sebagai tulisan di bar tajuk (lihat Rajah 2).
Elemen body (badan) pula adalah elemen utama bagi HTML. Segala kandungan yang ingin ditunjukkan dalam paparan pelayar diletakkan dalam elemen ini.
Perasankah anda bahawa elemen h1 (“Selamat datang!”) dipaparkan dalam teks saiz besar di pelayar? h1 ialah singkatan bagi Heading 1; anda boleh menggunakan elemen ini untuk menandakan isinya sebagai tajuk (heading) dokumen. Terdapat enam elemen tajuk semuanya, iaitu h1, h2, h3, sehingga h6. Anda boleh gunakan elemen-elemen ini untuk mentajukkan dan mensubtajukkan dokumen mengikut struktur yang anda suka.
Elemen p pula digunakan untuk pemerengganan (singkatan bagi paragraph). Biasanya pelayar akan menjarakkan antara perenggan.
Terdapat juga tag-tag yang digunakan untuk memformat dokumen HTML. Tag-tag ini dikenali sebagai inline tags. Anda boleh gunakan tag <b> (singkatan bagi bold) untuk menebalkan teks dan tag <i> (singkatan bagi italics) untuk mencondongkan teks (rujuk kod). Pastikan tag ini ditutup dengan betul dan tidak bertindan dengan tag lain.
Elemen a (singkatan bagi anchor) pula digunakan untuk membina pautan (hyperlink) kepada dokumen yang lain. Anda perlu nyatakan laluan (path) bagi pautan tersebut melalui atribut href (singkatan bagi hyperlink reference). Dalam kod tadi, saya jadikan teks “PMRAM” sebagai pautan kepada laman web PMRAM melalui kod ini:
<a href="http://www.pmram.org">PMRAM</a>
Anda mungkin berasa hairan terhadap teks “©” yang dipaparkan sebagai simbol hak cipta (©) dalam pelayar. Sebenarnya, selain tag, HTML juga mempunyai markap yang dikenali dengan rujukan entiti aksara (character entity reference). Markap ini dimulai dengan aksara “&” dan diakhiri dengan aksara “;”. Anda boleh menggunakan markap rujukan entiti aksara untuk memasukkan simbol-simbol khas. Contoh lain bagi rujukan entiti aksara ialah … untuk simbol elipsis (…) dan & untuk simbol “&”.
Sampai sini sahaja perkenalan HTML buat masa ini. Jika anda berminat untuk belajar HTML secara lebih mendalam, anda boleh melawat laman-laman web ini:
Sekian!
Nota: Rencana ini telah disiarkan dalam majalah Suara Kampus PMRAM Edisi Kelantan (SKEK) bilangan 38, April 2007. Ada pembaca menkomplen yang mereka tak faham apabila membaca rencana saya. Saya tak tahu kenapa (saya baca semula cam ok je), mungkin rencana saya terlalu ringkas (kerana ruang yang diberikan adalah terhad).
Sebahagian daripada siri: Pembangunan web, Rencana
Komentar
2 komen
Wah! panjang entri kali ni. Go Amaya
wht a stupid information!!!!!!! i never see blog like this…..