NovaVizio

HTML ialah sebuah bahasa yang kompleks. Terdapat banyak fungsi yang boleh digunapakai dalam HTML, dan jika seseorang mahu pelajari HTML tanpa mengikuti hujung pangkalnya, dia akan buntu dan akhirnya sesat jalan. Hakikatnya, HTML tidaklah susah seperti yang disangka. Artikel kali ini ditulis untuk membuktikan bahawa kompleks tidak bererti payah. Anda perlu belajar HTML langkah demi langkah, barulah anda dapat menghayati kekuatan sebenar HTML.

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.