Oleh Jack21
 Pelajaran 1
Pengenalan Pelajaran 1 Pelajaran 2 Pelajaran 3 Pelajaran 4 FAQ

Apa Itu Dokumen HTML?

HTML ialah Hyper Text Mark-up Language, iaitu satu format dokumen yang biasa anda lihat mempunyai hujungan .htm ataupun .html.

Jikalau anda biasa dengan Ms Windows saya percaya anda juga biasa dengan dokumen-dokumen yang mempunyai hujungan .doc (dokumen yang difahami oleh Ms Word dan Word Pad); .txt (dokumen yang difahami oleh kebanyakan penulis teks seperti Note Pad dan Word Pad); .rtf (dokumen rich text format) dan sebagainya.

Dokumen HTML juga adalah suatu format dokumen, tetapi ia mempunyai keistimewaan khas, iaitu ia berupa dokumen arahan -- arahan kepada pelayar web supaya memaparkan apa sahaja yang kita mahu dipaparkan.

Apa Perlunya Dokumen HTML?

Keistimewaan dokumen berformat HTML ialah keupayaannya memberi arahan (command) kepada pelayar web. Melalui penulisan dokumen HTML, kita boleh mengarahkan pelayar web supaya melakukan tindakan-tindakan khas apabila fail HTML itu dibuka.

Contoh yang paling mudah adalah begini: Jikalau anda rujuk ke petak di atas sekali anda akan melihat bagaimana saya mengarahkan pelayar web supaya membuka program khas untuk menghantar email kepada saya apabila anda klik huruf-huruf Jack21 (di bawah logo Membina HP). Hal ini dapat dilakukan oleh pelayar web anda mengikut arahan yang telah saya berikan -- melalui penulisan dokumen HTML.

Bagaimana Menulis Dokumen HTML?

Dokumen HTML secara amnya dapat ditulis melalui tiga (3) cara iaitu:

  • Penulis/Editor HTML;
  • Pembina Web yang Khas; dan
  • Pelayar Web.
Membina dokumen HTML dengan menggunakan Penulis/Editor HTML adalah sebenarnya mudah sekiranya anda memahami pelbagai arahan atau command kepada pelayar web.

Mula-mula dahulu saya jarang menulis dokumen HTML secara terus, kerana saya lebih selesa menggunakan Page Composer yang disertakan sekali bersama-sama Netscape Communicator Professional Edition 4.04. Namun begitu, saya juga perlu memahami asas penulisan dokumen HTML kerana saya perlu mengetahui arahan-arahan asas yang difahami oleh pelayar web. Saya perlukan pemahaman itu tatkala saya mengedit dokumen-dokumen HTML yang saya tulis bagi tujuan mengemas atau mengemas-kini. Bagi tujuan menulis atau mengedit dokumen HTML, saya gunakan Note Pad sahaja. Tetapi sekarang saya lebih selesa menulis terus dokumen HTML menggunakan Note Pad dan pada masa yang sama saya buka satu tetingkap pelayar web untuk melihat terus hasilnya. Kerja saya menjadi lebih mudah, apatahlagi tatkala menulis dokumen yang mempunyai teks terlalu panjang seperti Panduan Menulis Dokumen HTML ini!

Pembina Web yang Khas mudah digunakan kerana arahan-arahan khas yang diperlukan oleh pelayar web ditulis secara automatik. Di antara beberapa Pembina Web yang pernah saya gunakan ialah Adobe Pagemill, Corell Web Designer dan HotMetal Pro. Pembina web elok digunakan jikalau anda benar-benar tidak dapat memahami proses penulisan dokumen HTML.

Seperti yang saya jelaskan, komponen Page Composer ataupun kemudahan "edit" pada pelayar web, juga boleh digunakan. Di samping proses pembinaan yang lebih cepat, anda juga dapat melihat terus hasil kerja dengan serta-merta (WYSIWYG -- what you see is what you get).

Dokumen HTML Adalah Dokumen Arahan

Seperti yang saya telah nyatakan, dokumen HTML mempunyai hujungan .htm atau .html. Keistimewaan dokumen HTML ialah tugasnya yang memberikan arahan khas kepada pelayar web supaya memaparkan apa sahaja yang telah kita arahkan.

Arahan-arahan kepada pelayar web ini ditulis menggunakan tag arahan atau Command Tags. Perhatikan bahawa tag arahan ditulis menggunakan kurungan < >, di mana arahan yang dimaksudkan hendaklah diisikan di dalam kurungan berkenaan. Contohnya begini;





    dan sebagainya.
Harus juga diperhatikan bahawa terdapat dua jenis tag arahan iaitu tag bebas dan tag berpasangan.

Tag bebas berdiri sendiri dan tidak mempunyai pasangan atau penutup. Contohnya

    ; atau


    .

Tag berpasangan pula mempunyai tag pembuka dan tag penutup.

  • Tag pembuka ditulis seperti ini atau

  • Tag Penutup pula ditandakan dengan palang yang ditulis sebelum arahan seperti ini
    • atau

    .

Di samping itu, anda juga harus mengambil perhatian bahawa tag arahan itu mempunyai dua sifat iaitu sifat global (untuk keseluruhan dokumen HTML) dan setempat (local). Contoh yang paling mudah ialah melihat tag arahan global bagi huruf (font) yang ditulis dalam tag ;

Maksud tag arahan global itu ialah:
    teks berwarna hitam dengan latarbelakang berwarna putih.
Oleh kerana saiz fon tidak diberikan, pelayar web akan menggunakan default saiz mengikut setting pelayar web yang digunakan untuk membuka dokumen HTML berkenaan -- biasanya 0 atau 12 pica).

Jikalau anda mahu mengubah satu bahagian teks dalam dokumen HTML anda kepada warna-warna khas, anda boleh melakukannya dengan mudah. Seperti ini;

    Seekor itik serati telah dijumpai mati
    di atas jalan raya. Itik berkenaan mati akibat dilanggar kenderaan berat.
Pelayar web akan menunjukkannya begini;
    Seekor itik serati telah dijumpai mati di atas jalan raya. Itik berkenaan mati akibat dilanggar kenderaan berat.

Rangka Dasar Dokumen HTML

Perkara pertama yang mesti anda lakukan apabila menulis dokumen HTML ialah menandakan dokumen itu sebagai satu dokumen HTML. Tadi saya beritahu bahawa untuk mengenal dokumen HTML ialah dengan melihat pada hujungan nama fail (hujungan .htm atau .html). Namun begitu setiap dokumen HTML itu mempunyai sifat asasnya yang tersendiri, iaitu dokumen berkenaan mempunyai sepasang tag asas bagi menandakan sifatnya sebagai dokumen HTML, seperti ini:

Sekiranya anda telah "menulis suatu dokumen HTML" tetapi tidak meletakkan tag asas berkenaan, pelayar web tidak akan memahami atau mengenali dokumen anda sebagai suatu dokumen HTML!

Seterusnya, kita boleh ibaratkan proses penulisan dokumen HTML menyerupai proses melukis sebuah kereta lembu. Untuk melukis kereta lembu begini kita akan rangka sebegini;

    1. kepala (lembu); dan
    2. badan (kereta).
Bagi mengisi dokumen HTML, kita akan merangkanya begini;
    1. ? ; dan
    2. ? .
Kedua-dua bahagian
    dan
ini pula hendaklah diletakkan di antara pasangan tag

    dan

Pelajaran anda sekarang bermula. Sila Buka Note Pad. Tuliskan arahan di bawah ini di Note Pad anda.




Perhatikan palang pada , dan .

Maksud arahan anda kepada pelayar web ialah;


    • - "ini adalah pembuka dokumen HTML"; dan

    • - "ini adalah pembuka tag HEAD"; dan


    • - "ini adalah penutup tag HEAD".

    • - "ini adalah pembuka tag BODY"; dan


    • - "ini adalah penutup tag BODY".


    • - "ini adalah penutup dokumen HTML".

Jikalau dokumen HTML anda tidak mematuhi keperluan untuk menuliskan pasangan dan pelayar web tidak akan faham maksud tulisan anda dan akan menunjukkan dokumen anda sebagai dokumen teks biasa.

Mengisi Dokumen HTML
    1. Pasangan Tag HEAD;
    Pasangan Tag HEAD hendaklah diisikan dengan tajuk dokumen anda;



      </FONT> <BR><FONT COLOR="#009900"></HEAD></FONT> <BR></HTML></UL> <p>Contohnya begini; <p><UL><HTML> <BR><FONT COLOR="#009900"><HEAD></FONT> <BR><FONT COLOR="#FF0000"><TITLE>Air Terjun Sekayu

    Tambahkan arahan di atas di Note Pad anda.

    Jikalau anda perhatikan bahagian atas (kiri) pelayar web anda sekarang, anda akan membaca tajuk dokumen ini -- "Membina Halaman Peribadi". Jikalau anda biarkan ruang antara Tag HEAD itu kosong, tajuk dokumen HTML anda tidak akan kelihatan.

    2. Pasangan Tag BODY

    Pasangan Tag BODY adalah ruang di mana anda akan mengisikan dokumen HTML anda dengan maklumat yang ingin dipaparkan;

      Aduss!!! Sejuuuuuknyaaaaa!

    Tambahkan arahan di atas di Note Pad anda.

    Penerangan mengenai bagaimana mengisi maklumat dalam ruang antara tag BODY akan diberikan pada pelajaran seterusnya. Namun sebelum itu, hendaklah anda fahami bahawa arahan warna global hendaklah diisi pada tag pembuka BODY. Arahan global yang dimaksudkan pada umumnya membabitkan;

      # warna latarbelakang dokumen HTML; dan
      # huruf (warna asas, teks berangkai, teks berangkai sedang dilawati dan teks berangkai yang sudah dilawati).

    Contohnya, anda harus menulis begini;

      ="#000000" BGCOLOR="#FFFFFF" >Aduss!!! Sejuuuuuknyaaaaa!

    Tambahkan arahan di atas di Note Pad anda.

    Sekarang anda bolehlah simpan (save) dokumen anda sebagai dokumen HTML. Jikalau anda menggunakan Note Pad, pastikan anda tulis dengan hujungan .htm ataupun .html pada nama fail anda. Contohnya; "sekayu.htm" atau "sekayu.html". Untuk memudahkan kerja selanjutnya, simpanlah dalam satu sampul (folder) khas yang mudah untuk anda cari.

    Sekarang cuba anda lihat hasil kerja anda di pelayar web. Ikut arahan ini:

      1. Buka satu lagi tetingkap pelayar web dengan klik "File" --> klik "New Navigator Window" (Netscape) atau klik "File" --> klik "New Browser Window" (Internet Explorer);

      2. Klik "File" --> klik "Open" --> cari fail "sekayu.htm" atau "sekayu.html" yang tadi anda tulis menggunakan Note Pad;

      3. Klik butang "open" atau "ok."

      4. Apa yang anda lihat? Hehe... satu dokumen HTML yang mempunyai satu baris ayat sahaja! Namun anda harus akui bahawa anda sudah boleh membuka dokumen itu menggunakan pelayar web. Maknanya anda sudah berjaya menulis satu dokumen HTML yang sah! Tahniah! Mudah sahaja bukan?

    Pada panduan seterusnya kita akan ikuti bagaimana mengisi kandungan dokumen HTML, iaitu mengisi maklumat antara pasangan tag BODY.

Berundur Setapak? Maju Selangkah?
1