Oleh Jack21
 Pelajaran 2
Arahan Mengenai Teks
Dalam Pelajaran 2 anda akan belajar mengenai:
Pengenalan Pelajaran 1 Pelajaran 2 Pelajaran 3 Pelajaran 4 FAQ

Tentu anda masih ingat bahawa dokumen HTML anda tadi masih hanya mempunyai arahan mudah mengenai warna global. Sekarang kita pelajari dengan lebih mendalam mengenai beberapa arahan global.

Arahan Global Bagi Latar Belakang (Global Background Colors)

Arahan global bagi warna latar belakang diletakkan di luar pasangan tag BODY, tetapi hendaklah ditulis dalam tag pembuka BODY. Lihat contoh ini;

    <BODY BGCOLOR="#??????">
    </BODY>

Di mana "#??????" hendaklah digantikan dengan kod warna pilihan. Kod warna boleh dilihat DI SINI.

Jikalau anda mahu menggunakan warna pilihan sendiri (dalam format gif ataupun jpeg), anda hendaklah mengarahkan Pelayar Web secara khusus dengan menulis seperti ini:

    <BODY BACKGROUND="bg01.gif">
Sila perhatikan bahawa arahan sudah bertukar dari BGCOLOR kepada BACKGROUND.

Warna Global Bagi Teks (Global Text Colors)

Arahan untuk memberi warna kepada teks secara global juga hendaklah diletakkan terus ke dalam tag pembuka BODY seperti ini:

    <BODY TEXT="#??????"> Di mana "#??????" hendaklah digantikan dengan kod warna pilihan. Kod warna boleh dilihat DI SINI.

    Arahan tambahan memberi warna kepada teks secara global juga hendaklah diletakkan terus ke dalam tag pembuka <BODY>. Arahan tambahan biasa adalah untuk tujuan berikut:

  • Link bagi menandakan teks berkenaan dirangkai kepada lain-lain bahagian dokumen yang sedang dibaca ataupun lain mukasurat;
  • Alink atau Active Link Text bagi menandakan rangkaian teks sedang dilawati
  • Vlink atau Visited Link bagi menandakan ragkaian teks itu sudah dilawati

Umumnya, bagi mukasurat berwarna putih (seperti dokumen yang sedang anda baca) warna default yang digunakan adalah seperti berikut:

  • Text is black -- teks berwarna hitam
  • Links are blue -- teks bergaris bawah berwarna biru
  • Active link is red -- teks bergaris bawah berwarna merah
  • Visited link is purple -- teks bergaris bawah berwarna jingga
Arahan yang saya berikan kepada pelayar adalah seperti berikut:
    <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000FF" VLINK="#FF0000" ALINK="#000088">
    </BODY>

Asas Mengenai Teks

Dua (2) perkara utama yang anda harus tahu mengenai teks ialah jenis dan saiz huruf atau font

Jenis huruf ada dua iaitu true type fonts dan postscript fonts. True type fonts adalah jenis huruf yang anda dapat lihat pada skrin dan sekaligus boleh terima oleh lain-lain program komputer (termasuk pelayar) dan boleh dicetak oleh kebanyakan pencetak (printer). Huruf-huruf dalam kumpulan ini bolehlah dianggap sebagai WYSIWYG (what you see is what you get). Sementara postscript fonts pula tidak dapat diterima oleh semua sistem komputer serta memerlukan perisian yang khas untuk dilihat atau dicetak.

Untuk pembinaan HP, anda sebenarnya tidak memerlukan postccript fonts, memadailah dengan menggunakan huruf biasa seperti Times New Roman, Arial, Heavenetica dan sebagainya. Tidak ada gunanya menggunakan huruf-huruf cantik tetapi tidak dapat dilihat oleh lain orang.

Perkara kedua mengenai teks untuk HP yang perlu anda fahami ialah mengenai saiz huruf. Setiap pelayar mempunyai saiz huruf default. Anda boleh mengetahuinya dengan mudah. Kalau anda menggunakan Netscape Communicator, klik edit dan diikuti dengan preference. Anda akan melihat fonts pada petak appearance. Di ruang berkenaan anda boleh melihat pelbagai maklumat mengenai pelayar web anda.

Arahan Mengenai Teks Yang Difahami oleh pelayar web

Perlulah diingat bahawa pelayar web mempunyai arahan standard mengenai teks yang difahaminya. Sekiranya arahan yang anda berikan mengenai teks tidak difahami oleh pelayar web, arahan anda itu akan dipaparkan sebagai teks sahaja. Oleh kerana itu, pastikan bahawa anda memahami (tidak semestinya mengingati) akan arahan-arahan berkenaan. Walau bagaimanapun anda MESTI INGAT bahawa arahan-arahan yang tidak membabitkan arahan global hendaklah ditulis di antara pasangan tag <BODY> iaitu;

    <BODY>
    Di sini ya!
    </BODY>
Di samping memaparkan teks, secara amnya arahan asas (standard) untuk teks yang difahami oleh pelayar web membabitkan perkara-perkara berikut;
  • jenis font
  • saiz
  • tebal (bold)
  • condong (italics)
  • bergaris bawah (underlined)
  • warna
  • mengerlip

Arahan-arahan ini akan mengubah arahan global, tetapi membabitkan hanya bahagian-bahagian khas yang menerima arahan asas. Contohnya, arahan global untuk keseluruhan dokumen yang anda sedang tatap ialah;

    <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000FF" VLINK="#663366" ALINK="#FF0000">
    </BODY>

Maknanya saya mengarahkan pelayar anda menggunakan saiz default untuk huruf (perhatikan bahawa tiada arahan khas bagi saiz huruf = pelayar web akan gunakan saiz default), warna hitam untuk teks ("#000000") iaitu huruf yang anda tatap, warna putih untuk latar belakang, dan sebagainya. Oleh kerana saya menggunakan saiz default berukuran 12 untuk huruf, sementara anda pula menggunakan saiz default ukuran 10 untuk huruf, saiz huruf yang anda lihat akan menjadi lebih kecil dari saiz yang saya gunakan. Ini bukan masalah, tetapi hanya menunjukkan hubungkait antara saiz default pelayar web antara pembaca sahaja.

Arahan asas yang difahami oleh pelayar bagi mengubah beberapa aspek mengenai huruf adalah seperti berikut:

    tebal <B>teks</B>
    condong <I>teks</I>
    bergaris bawah <U>teks</U>
    mengerlip (blink) <BLINK>teks</BLINK>

Sekiranya anda mahu menyusun teks berkenaan secara berselang seperti ini:

    teks tebal, condong, bergaris bawah dan mengerlip
Arahan yang perlu anda tulis adalah seperti berikut:
    teks <B>tebal</B><I>condong</I> <U>bergaris bawah</U> dan <BLINK>blink</BLINK>
Sekiranya anda mahu menggunakan lebih dari satu arahan untuk sesuatu teks, anda mesti melakukannya dalam struktur yang betul:

(Sila buka fail pelajaran dahulu menggunakan Note Pad dan gantikan ayat yang sedia ada dengan arahan di bawah. Simpan(save) dan lihat dokumen HTML ini menggunakan pelayar web. Apa yang anda lihat?)

    <B><I><BLINK>teks tebal, condong dan mengerlip</B></I></BLINK>
Ini dipanggil tag bertindih (overlapping) -- ABCABC -- dan tidak difahami oleh pelayar web.

(Gantikan pula dengan arahan di atas, simpan dan lihat hasilnya menggunakan pelayar web.)

    <B><I><BLINK>teks tebal, condong dan mengerlip</BLINK></I></B>
Ini dipanggil tag tersusun (nested) -- ABCCBA-- dan hendaklah digunakan.

Hasil kerja anda seharusnya begini:

    teks tebal, condong dan mengerlip

Arahan Khas Bagi Huruf

    a. Saiz Dan Warna.

    Arahan bagi mengubah saiz dan warna pula tidak perlu berpasangan, tetapi hendaklah dalam kurungan sepasang Tag FONT.

    (Sila buka fail pelajaran dahulu menggunakan Note Pad dan gantikan ayat yang sedia ada dengan arahan di bawah. Simpan dan lihat dokumen HTML ini menggunakan pelayar web. Apa yang anda lihat?)

      Warna kegemaran saya ialah <FONT COLOR="#006600">hijau</FONT> dan <FONT COLOR="#3333FF">biru</FONT>.

    Pelayar anda akan menunjukkannya seperti ini:

      Warna kegemaran saya ialah hijau dan biru.

    Arahan untuk mengubah jenis dan saiz huruf adalah serupa dengan arahan menukar warna. Setiap arahan mestilah diletakkan dalam sepasang tag <FONT>. Oleh kerana itu anda akan melihat dua pasang tag <FONT> dalam arahan ini, sepasang untuk jenis <FONT> dan sepasang lagi untuk saiz <FONT>. Hendaklah juga diperhatikan bahawa susunan ABBA (tag tersusun) bukan ABAB (tag bertindih).

    (Sila buka fail pelajaran dahulu menggunakan Note Pad dan gantikan ayat yang sedia ada dengan arahan di bawah. Simpan dan lihat dokumen HTML ini menggunakan pelayar web. Apa yang anda lihat?)

    Saya suka membaca tulisan bersaiz <FONT SIZE=+3>besar</FONT>.

    Hasil kerja anda seharusnya kelihatan begini:

      Saya suka membaca tulisan bersaiz besar.

    Sila ambil perhatian bahawa saiz yang difahami oleh setiap pelayar internet ialah antara -2 hingga +4 iaitu 7 saiz.
      sangat kecil kecil biasa lebih besar dari biasa besar amat besar terlalu besar!
      -2 -1 0 +1 +2 +3 +4

    Anda juga boleh memberikan pelbagai arahan kepada pelayar untuk menghasilkan teks seperti ini:

    SELAMAT DATANG
    Semuanya bergantung kepada kreativiti dan inovasi.

    b. Kedudukan Teks

    Arahan untuk meletak kedudukan teks adalah seperti berikut:

    Kiri (Tag Tidak Diperlukan)
    Tengah
    		 <CENTER>tengah</CENTER>
    Kanan
    <DIV ALIGN=right>kanan</DIV>

    Untuk latihan seterusnya, Sila buka fail pelajaran dahulu menggunakan Note Pad dan gantikan ayat yang sedia ada dengan arahan di bawah. Simpan dan lihat dokumen HTML ini menggunakan pelayar web. Apa yang anda lihat?

    <CENTER> SESEN</CENTER> <BR>

    <DIV ALIGN=right> KAPAL LANUN</DIV>

    c. Pisah Ayat Dan Pisah Perenggan

    Sekarang kita pelajari pula arahan mengenai pisah ayat (line break) dan pisah perenggan (paragraph break). Perlu anda maklum bahawa Pelayar Web tidak akan memahami format biasa untuk menulis teks.

    Sila buka fail pelajaran dahulu menggunakan Note Pad dan gantikan ayat yang sedia ada dengan arahan di bawah. Simpan dan lihat dokumen HTML ini menggunakan pelayar web. Apa yang anda lihat?

      Alahai besen!
      Kenapa tak diisi air?
      Macam mana adik nak berenang?

    Pelayar Web anda tetap tidak memahami maksud anda dan memaparkannya sebagai ayat-ayat dalam satu perenggan sahaja seperti ini:

      Alahai besen!Kenapa tak diisi air?Macam mana adik nak berenang?

    Masalah ini sebenarnya boleh diatasi dengan memberi arahan yang sesuai seperti berikut:

      pisah ayat (line break) <BR>
      pisah perenggan (paragraph break ) <P>

    Beza antara pisah ayat dan pisah perenggan ialah:

    • pisah ayat semata-mata mengasingkan ayat mengikut baris; sementara
    • pisah perenggan pula mengasingkan ayat langkau sebaris.

    Sila buka fail pelajaran dahulu menggunakan Note Pad dan gantikan ayat yang sedia ada dengan arahan di bawah. Simpan dan lihat dokumen HTML ini menggunakan pelayar web. Apa yang anda lihat?


      <BR>Omak oiii!
      <BR>Kenapa diisi dengan air panas?
      <BR>Nanti melecur kulit adik!

    Pelayar web anda seharusnya menunjukkan begini:

      Omak oiii!
      Kenapa diisi dengan air panas?
      Nanti melecur kulit adik!

    Sila buka fail pelajaran dahulu menggunakan Note Pad dan gantikan ayat yang sedia ada dengan arahan di bawah. Simpan dan lihat dokumen HTML ini menggunakan pelayar web. Apa yang anda lihat?
      <P>Laaa... kenapa main gincu ni dik?
      <P>Gunanya di bibir sayang oi...
      <P>Bukan di kening! hehe...

    Pelayar web anda seharusnya menunjukkan begini:

    d. Ruang (space) Dan Lain-lain

    Akhir sekali kita belajar mengenai arahan untuk mendapatkan ruang kosong (space). Ambil perhatian bahawa pelayar web hanya dapat memahami SATU ketukan space bar sahaja. Pelayar web tidak memahami ketukan space bar lebih daripada itu. Oleh hal yang demikian, untuk mendapatkan ruang kosong, anda hendaklah memberikan arahan yang difaham oleh Pelayar Web. Arahan yang dimaksudkan ialah:

      &nbsp;

    nbsp bermaksud ruang tak terpisah atau non-breaking space, sementara & di hadapan nbsp itu adalah pembuka arahan khas dan ; pula adalah penutupnya. Perhatikan penggunaan & dan ; pada arahan-arahan khas berikut:
      Arahan Pelayar Web Memaparkan Maksud Arahan
      &lt; < Lebih Kecil (less-than)
      &gt; > Lebih Besar (greater-than)
      &amp; & Dan (ampersand)
      &quot; " Ungkapan (quotation)
      &shy; - Sengkang atau sempang (hyphen)

    Sila buka fail pelajaran dahulu menggunakan Note Pad dan gantikan ayat yang sedia ada dengan arahan di bawah. Simpan dan lihat dokumen HTML ini menggunakan pelayar web. Apa yang anda lihat?

      <P><u>Coba anda jawab &quot;teka-teki&quot; ini:</u>
      <BR>Apakah yang ada pada pokok kelapa itu yang tidak boleh digunakan?
      <BR>&lt;a&gt; akar;
      <BR>&lt;b&gt; buah kelapa komeng &shy; buah kelapa tidak berisi;
      <BR>&lt;c&gt; kulit batang kelapa; atau
      <BR>&lt;d&gt; selipar buruk di celah pelepah kelapa.

Jadi macama?

Jangan bingung. Jangan putus asa. Cuba ulang baca. Saya harap anda semua dapat memahami (tidak perlu mengingatinya!) arahan-arahan yang difahami oleh Pelayar Web.

Jangan cepat mengaku kalah! Cubalah sampai dapat dapat. Tak cuba, tak tahu sejauh mana bakat anda. Hehe...Saya pun mulanya pening juga apabila mula-mula nak memahaminya, tetapi setelah beberapa kali mencuba, alhamdulillah, boleh pula saya cuba terangkan dalam bahasa Melayu. Saya mempelajarinya melalui trial 'n error, maklumlah saya tak belajar hal-hal mengenai komputer ini secara formal. Semuanya melalui pengalaman dan kesungguhan.

Mungkin ramai yang tidak percaya bahawa hanya setelah dua bulan melayari web saya sudah pun mampu membuat HP untuk lain orang. Tetapi tidaklah untuk tatapan umum, kerana saya tidak meletakkan nama saya di situ. Hehe...

Selamat mencuba!

SILA AMBIL PERHATIAN BAHAWA SEMUA ARAHAN KEPADA PELAYAR WEB
(kecuali arahan global)
HENDAKLAH DITULIS DI ANTARA PASANGAN TAG BODY.
DOKUMEN HTML ANDA SEHARUSNYA KELIHATAN BEGINI:
<HTML>
<HEAD>
<TITLE>Membina Halaman Peribadi<TITLE>
</HEAD>
<BODY>
DISINI
DISINI
DISINI
</BODY>
</HTML>
Undur Setapak Maju Selangkah
1