HTML boleh diterangkan dengan cara yang pelbagai. Akan tetapi, takrif-takrif formal bagi HTML itu sendiri lazimnya menggunakan istilah-istilah yang baru. Oleh itu, saya lebih suka menerangkan HTML dengan cara yang tidak konvensional: satu cara untuk memahami HTML ialah ia terdiri daripada unit-unit kecil yang dikenali sebagai tag. Ini ialah contoh sebuah tag: <p>. Nampak menakutkan? Jangan bimbang. Saya akan terangkan apa maksud tag tadi sebentar lagi. Cuma pada masa ini anda hanya perlu menetapkan dalam fikiran anda bahawa kod HTML terdiri daripada gabungan-gabungan tag seperti tadi. Ciri inilah yang merupakan ciri yang paling fundamental dan menjadikan HTML amat mudah untuk dipelajari.

Pemformatan

Fungsi HTML yang paling banyak digunakan ialah pemformatan. Anda boleh melakukan tugas-tugas lazim seperti menjadikan teks tebal, condong, berwarna dan sebagainya.

Sebagai permulaan, anda boleh pelajari tag yang paling asas dan yang paling banyak digunakan dalam HTML, iaitu tag <p>. Seperti yang telah dijanjikan, berikut adalah penerangan bagi tag <p>. Lihat contoh kod ini:

<p>Selamat datang!</p>

Seperti yang saya katakan sebelum ini, <p> ialah salah sebuah tag dalam HTML. Setiap tag mestilah diapit dengan kurungan siku (< dan >); iaitu ia mestilah mempunyai bentuk <…>. Selamat datang! pula merupakan isi dalam tag tersebut. Tag <p> digunakan untuk menghasilkan perenggan. Oleh itu, kod di atas akan menghasilkan paparan berikut:

Selamat datang!

Perhatikan bahawa kod tadi diakhiri dengan </p>. Ini dikenali sebagai tag penutup. Setiap tag mestilah ditutup dengan betul. Untuk menutup sesebuah tag, tambahkan tag yang sama di akhir kandungannya, akan tetapi ia perlulah mempunyai bentuk yang berbeza, iaitu terdapat aksara condong (/) selepas kurungan siku pertama, seperti ini: </…>. Kod ini:

<p>Selamat datang!

…adalah tidak sah kerana tag <p> perlulah ditutup dengan </p>.

Anda boleh merantaikan tag-tag <p> untuk menghasilkan perenggan-perenggan lain. Sebagai contoh, kod ini…

<p>Selamat datang!</p><p>Sila lawat galeri saya.</p>

…akan menghasilkan:

Selamat datang!

Sila lawat galeri saya.

Satu lagi tag yang mudah ialah <b>. Tag ini digunakan untuk menghasilkan teks tebal. Lihat contoh kod di bawah ini:

<b>Selamat datang!</b>

Jangan lupa untuk menutup tag <b> dengan </b>. Kod di atas menghasilkan paparan berikut:

Selamat datang!

Tugas tag <i> pula ialah menghasilkan teks condong. Oleh itu, jika anda menaip kod ini…

<i>Sila lawat galeri saya.</i>

…anda akan mendapat hasil ini:

Sila lawat galeri saya.

Mudah, bukan? Rupa-rupanya HTML tidaklah menakutkan seperti yang disangka.

Membina pautan

Salah satu ciri yang paling penting bagi HTML ialah kebolehan untuk membina hiperpautan, atau ringkasnya pautan. Pautan ialah sebuah mekanisme di mana anda boleh menghubungkan sesebuah laman web dengan laman web yang lain. Untuk membina pautan, anda perlulah menggunakan tag <a>. Nyatakan laman web sasaran menggunakan atribut href, dan nama pautan itu sebagai isi dalam tag <a> tersebut. Tak susah! Ikuti contoh ini:

<a href="galeri.html">galeri saya</a>

Hasilnya:

galeri saya

Pengguna boleh mengklik pada teks tersebut untuk pergi ke laman galeri.html.

Perhatikan bahawa tag <a> dalam kod di atas mempunyai bentuk yang agak berlainan daripada contoh-contoh sebelum ini. Kod href="…" di atas dikenali sebagai atribut. Anda boleh menambahkan atribut kepada tag-tag tertentu untuk memberikannya sifat-sifat yang khusus. <b> adalah umum dan sama sahaja di mana-mana, akan tetapi <a href="aku.html"> tidak sama dengan <a href="dia.html"> kerana kedua-duanya menghasilkan pautan khusus ke laman-laman web yang berbeza. Anda juga perlu ingat bahawa sesebuah atribut hanya boleh digunakan pada tag-tag yang tertentu sahaja. Contohnya, tag <b> tidak boleh menerima atribut href sedangkan tag <a> boleh.

Menyertakan gambar

Anda boleh menggunakan HTML untuk menyisipkan imej ke dalam laman web anda. Tag yang mempunyai fungsi ini ialah <img>. Anda perlu menyatakan nama fail imej tersebut menggunakan atribut src. Sebagai contoh, sekiranya anda mahu memasukkan imej yang bernama x.jpg, anda boleh menggunakan kod yang sebagaimana berikut:

<img src="x.jpg"/>

Perhatikan bahawa, tidak seperti tag-tag lain, tag <img> tidak mempunyai isi. Oleh itu, anda boleh menggunakan kod trengkas di atas berbanding kod panjang berikut:

<img src="x.jpg"></img>

Tag yang tidak mengandungi isi tidak perlu ditutup. Akan tetapi anda perlu menambahkan aksara condong sebelum aksara kurungan siku kedua. Oleh itu, tag yang tidak mengandungi isi mempunyai bentuk <…/>.

Menggabungkan tag

Tahukah anda bahawa sesebuah tag boleh menjadi isi bagi tag yang lain? Anda boleh menggunakan kreativiti anda dengan menggabungkan tag-tag yang ada untuk mendapatkan hasil yang anda mahukan. Sebagai contoh, untuk memperolehi teks yang tebal dan condong pada masa yang sama, anda boleh menggabungkan tag <b> dan <i>. Apitkan sebarang teks dengan tag <i>, kemudian apitkan hasilnya sekali lagi dengan tag <b>. Kod ini:

<b><i>Perhatian</i></b>

Menghasilkan paparan ini:

Perhatian

Katakan anda mahu memasukkan imej dalam laman web anda. Anda mahu menjadikan imej itu sebuah pautan, supaya apabila pengunjung mengklik pada imej tersebut, dia akan dibawa ke laman web lain. Anda boleh menggunakan tag <img>, tetapi masalahnya tag ini menghasilkan imej biasa sahaja, tanpa pautan. Anda juga boleh menggunakan tag <a>, akan tetapi tag ini hanya menghasilkan pautan, tetapi tidak memasukkan imej.

Penyelesaiannya ialah anda boleh menggabungkan tag <img> dan <a> sekali. Katakan anda mahu menyisipkan imej yang bernama aku.jpg yang merupakan pautan ke aku.html. Anda boleh menulis kod berikut:

<a href="aku.html"><img src="aku.jpg"/></a>

Hakikatnya, sebuah dokumen HTML yang lengkap merupakan struktur dan hierarki bagi tag. Sila kaji kod ini betul-betul:

<p><b>Selamat datang!</b></p><p><i>Sila lawat <a href="galeri.html">galeri saya</a>.</i></p>

Kod di atas mengandungi tag-tag yang kelihatan bercampur aduk, akan tetapi, apabila dipecah-pecahkan, salasilah tag dalam kod tadi boleh digambarkan seperti dalam rajah berikut:

<p>
 +- <b>
     +- Selamat datang!
<p>
 +- <i>
     +- Sila lawat
     +- <a href="galeri.html">
     |   +- galeri saya
     +- .

Hasilnya adalah seperti berikut:

Selamat datang!

Sila lawat galeri saya.

Permulaan

Ini bukan penutup. Apa yang saya tunjukkan di sini hanyalah sebahagian kecil daripada kebolehan-kebolehan HTML. Banyak lagi yang anda boleh lakukan dengan HTML. Terdapat bermacam-macam tag yang anda boleh gunakan untuk menghasilkan unsur-unsur teks yang pelbagai: tajuk, subtajuk, senarai, jadual dan sebagainya. HTML juga tidak terbatas pada pemformatan dan persembahan sahaja. Anda juga boleh memasukkan unsur-unsur interaksi dengan pengguna seperti kotak (untuk diisi oleh pengunjung), butang dan sebagainya. Dukacitanya, semua ini tidak mampu diterangkan dalam satu helai kertas sahaja.

Terdetik secebis perasaan ragu-ragu dalam hati. Benarkan pernyataan itu? Saya pun menggatal untuk menyemak laman tersebut. Saya buka laman Khidmat Pengesahan Markap W3C, masukkan URL bagi laman tadi, dan klik butang Check. Teka apa yang saya lihat:

Oh ya, perasankah bagaimana laman pengesah W3C menggunakan saiz fon yang besar dengan latar belakang warna merah untuk memberitahu bahawa laman yang disemak tak sah? Saya rasa, mereka sengaja melakukan sedemikian supaya tuan punya kod akan berasa tersinggung dan makan hati.

Saya tak kira, anda digelar Penulis Blog Paling Jujur di Dunia sekalipun, bila anda meletakkan label “Valid HTML” sedangkan markap anda tak sah, maka saya anggap anda dengan sengajanya membohongi pelawat-pelawat anda. Tolonglah, baiki markap anda, atau sebagai tanda prihatin, tukarkan saja label itu kepada “This page is not valid HTML because I don’t give a damn.”

Kod HTML yang sah adalah berkualiti tinggi. Ia adalah langkah pertama dalam pengoptimuman enjin carian (SEO). Menulis kod HTML dalam markap yang sah adalah satu kemahiran yang sukar untuk dikuasai. Namun mereka yang cukup beruntung untuk memiliki kemahiran itu mempunyai hak untuk memberitahu pembaca bahawa kod HTML yang mereka tulis adalah sah. Sayangnya label ini digunakan sewenang-wenangnya.

Fakta: Kumpulan W3C Quality Assurance Interest menganggarkan bahawa 99% laman web di luar sana mempunyai kod HTML yang tak sah.

Safari ialah sebuah pelayar web yang asalnya dibina oleh Apple Inc. untuk disertakan sekali dengan sistem pengoperasian Mac OS X. Perisian ini menggunakan enjin persembahan sumber terbuka berdasarkan KHTML milik Konqueror; oleh itu, tak seperti Internet Explorer, ia amat patuh kepada spesifikasi standard web (seperti XHTML dan CSS). Safari juga dilaporkan beroperasi lebih pantas daripada Internet Explorer dan juga Mozilla Firefox. Bermula dari pelancarannya pada awal tahun 2003, pelayar web ini menjadi amat popular dalam kalangan pengguna Mac OS X.

Saya sendiri sudah mencuba Safari dan agak berpuas hati dengannya. Ini screenshot yang saya ambil (perhatikan bahawa ia menggunakan enjin paparan Mac OS X seperti scrollbar dan font-smoothing):

Cuba Safari sekarang melalui pautan ini: http://www.apple.com/safari

Keputusan Apple untuk mengeluarkan pelayar web mereka untuk platform Windows hanyalah salah satu daripada kejutan-kejutan yang tidak berkesudahan daripada Apple. Antara produk mereka yang juga dijangka “meletup” pada tahun ini ialah;

• Mac OS X Leopard — menawarkan ratusan ciri kreatif dan inovatif seperti Dock yang lebih kemas elegan, Spaces (aneka desktop), Time Machine (backup automatik), dan Core Animation (animasi pada peringkat teras).
• iPhone — dijadualkan untuk dipasarkan pada 29 Jun 2007, iPhone ialah sebuah telefon bimbit pintar yang mempunyai keupayaan multimedia dan Internet serta teknologi skrin sentuh.

Sila tonton keynote daripada Steve Jobs untuk mengetahui dengan lebih lanjut mengenai produk-produk terbaru ini. Oh ya, Apple kini mempunyai web reka bentuk baru.

Kemas kini: Sebuah rencana tentang Safari sudah pun diterbitkan dalam Berita Harian pada 25 Jun 2007.

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>&copy; 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 “&copy;” 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:

• http://www.yourhtmlsource.com/
• http://htmldog.com/
• http://www.htmlquick.com/tutorials.html

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).

Dalam Berita Harian Online ada ruangan khas untuk Sumber Terbuka. Hampir semua rencana dalam ruangan tersebut membincangkan tentang Zope, sebuah perisian pelayan web yang dibangunkan dengan menggunakan bahasa pengaturcaraan Python. Rencana-rencana ini ditulis dalam bahasa Melayu oleh Bakhtiar A Hamid. Lihat blog beliau di sini.

Anda boleh membuka ruangan Sumber Terbuka Berita Harian Online melalui pautan ini.

Salah satu perintah penting yang anda boleh gunakan dalam fail htaccess ialah ErrorDocument. Anda boleh gunakan perintah ini untuk mengubah suai laman-laman ralat (error pages) dalam tapak web anda.

Sebagai contoh, anda boleh cipta fail notfound.html dengan kandungan berikut:

<i>Maaf, fail tak wujud!</i>

… kemudian, tambahkan perintah ini dalam fail htaccess anda:

ErrorDocument 404 /notfound.html

Hasilnya, apabila ada pengguna membuka laman yang tak wujud dalam tapak web anda, mesej berikut akan dipaparkan dalam pelayar:

Maaf, fail tak wujud!

Untuk pengetahuan anda, 404 ialah kod ralat (error code) bagi fail yang tidak dijumpai. Contoh kod ralat lain yang lazim dihasilkan ialah 500 (ralat pelayan) dan 403 (tak dibenarkan). Untuk menambah laman-laman ralat yang lain, hanya ubah suai contoh tadi dan tambahkannya ke dalam fail htaccess anda. Selamat mencuba!

Anda boleh melihat banyak lagi contoh-contoh penting di laman ini.