Oleh Jack21
Pelajaran 4
Maklumat Tambahan:
Pengenalan Pelajaran 1 Pelajaran 2 Pelajaran 3 Pelajaran 4 FAQ
Membuat Garis Lintang

Untuk melukis garis lintang, sila buka Note Pad dan cuba tuliskan ini:

    <HR SIZE=1 NOSHADE WIDTH="60%">
    <CENTER><HR SIZE=2 NOSHADE WIDTH="300"></CENTER>
    <HR SIZE=3 WIDTH="500">


Merangkai Imej ataupun Teks

Imej atau teks berangkai (linked image or text) bermaksud imej atau teks berkenaan dirangkai dengan mana-mana bahagian atau lain-lain dokumen HTML. Lazimnya imej berangkai menggunakan butang (button) sementara teks berangkai ditandai pula oleh garis bawah dan mempunyai warna berbeza dari warna teks global. Contohnya, butang "Undur Setapak" dan "Maju Selangkah" yang anda lihat di bawah mukasurat ini saya rangkai ke "Pelajaran 3" dan "FAQ".

Merangkai sebenarnya adalah kerja mudah, kerana anda hanya perlu menuliskan pasangan tag pada imej yang dimaksudkan, seperti ini;

    <A HREF="ikan.html"><IMG SRC="ikan.gif" BORDER=0 HEIGHT=102 WIDTH=254></A>

    atau pada teks seperti ini;

    Masakan kegemaran saya ialah <A HREF="ikan.html">ikan</A>parang digulai asam pedas.


Rangkai dan Rujuk

Rangkai dan rujuk? -- apa maksudnya? Maksudnya merangkai sesuatu teks atau imej ke mana-mana bahagian dokumen HTML, sama ada dalam dokumen yang sedang dipaparkan atau ke suatu bahagian tertentu di lain dokumen.

Contohnya begini.

  • Apabila anda klik DI SINI anda akan melihat beberapa perenggan berhuruf condong di suatu bahagian dokumen yang sekarang anda tatap.
  • Apabila anda klik KE SANA pula, anda akan dibawa ke suatu bahagian khas satu lagi dokumen HTML.
Bagaimana menulis arahan mengenainya? Anda hanya perlaku melakukan dua (2) perkara, iaitu:
    Langkah Pertama

    Letakkan tanda rujuk di bahagian teks atau imej yang mahu dirujuk. Pada awal teks atau imej itu hendaklah dituliskan

      <A NAME="rujuk"><A>.

    Maksudnya anda telah menamakan tanda itu sebagai "rujuk." Seelok-eloknya anda gunakan perkataan pertama teks di tanda rujuk itu atau nama imej itu sebagai tanda rujuk.

    Langkah Kedua

    Pada teks atau imej yang anda kehendaki, tuliskan rangkaian yang akan mengarahkan pelyar web membawa pelawat pergi ke tanda rujuk yang dimaksudkan. Jikalau rangkaian dan tanda rujuk terletak pada satu dokumen, tulis begini:

      <A HREF="#rujuk">Lihat di sini </A>

    Jikalau rangkaian dan tanda rujuk berada di satu lokasi (hp) dan sampul tetapi di lain dokumen, tulis nama dokumen diikuti dengan tanda rujuk yang dimaksudkan:

      <A HREF="tajulmuluk.html#rujuk">Lihat di sini </A>

    Apabila rangkaian dan tanda rujuk berada di lokasi (URL) berbeza, tulis lokasi, nama dan tanda rujuk dengan betul:

      <A HREF="http://www.drthat.home.ml.org/ceramah-agama.html#rujuk">Lihat di sini </A>.


Membuat Senarai

Ada beberapa jenis senarai mudah yang boleh anda gunakan. Contohnya;

    Jikalau begini sahaja dipanggil indented.
  • Jikalau begini dipanggil senarai (list).
    • Ini gabungan kedua-duanya sekali iaitu senarai indented.

    Cara menulisnya mudah iaitu;

      Untuk indented tuliskan begini:
      <UL>"gulai lemak cili api"</UL>

      Untuk senarai pula tuliskan begini
      <LI>"kari kambing"</LI>

      Untuk menggunakan kedua-duanya sekali, tuliskan begini;
      <UL><LI>"hirup budu begitu sahaja?"</LI></UL>

    Latihan (Tulis di Note Pad):

    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?

    Antara perumpamaan yang kerap-kali kita dengar; <br>
    <ul> "sekilas ikan di air sudah ku kenal jantan-betinanya" <br>
    "kalau kail panjang sejengkal, lautan dalam jangan diduga" dan <br>
    "air tenang jangan disangka tiada buaya." </ul>

    Nota: Jangan terkejut ya, saya tulis arahan menggunakan huruf kecil (lower case fonts). Pelayar web memahami arahan tulisan HURUF BESAR ataupun huruf kecil, tetapi jangan pula dicampur antara BESAR dan kecil!

    Pelayar web anda seharusnya memaparkan ini

    Antara perumpamaan yang kerap-kali kita dengar;
      "sekilas ikan di air sudah ku kenal jantan-betinanya"
      "kalau kail panjang sejengkal, lautan dalam jangan diduga" dan
      "air tenang jangan disangka tiada buaya."
    Nota: Perhatikan langkau perenggan yang secara automatik dipaparkan oleh pelayar web apabila anda memberikan arahan indented. Hal yang sama TIDAK berlaku apabila anda arahkan penyenaraian (listing).

    Latihan (Tulis di Note Pad):

    <u>Perkara-perkara yang tidak saya gemari: </u>
    <li>cakap besar; </li>
    <li>sombong; dan </li>
    <li>suka mengumpat."</li>

    Pelayar web anda seharusnya memaparkan ini:

    Perkara-perkara yang tidak saya gemari:
  • cakap besar;
  • sombong; dan
  • suka mengumpat.
  • Latihan (Tulis di Note Pad):

    <b>Antara lagu-lagu kegemaran saya; </b>
    <ul>
    <li>lagu tema "Pink Panther" </li>
    <li>"Cindai" versi rock oleh Kumpulan Search dan </li>
    <li>"Chalte... Chalte" sebuah lagu Hindi. </li>
    </ul>

    Pelayar web anda seharusnya memaparkan ini

    Antara lagu-lagu kegemaran saya;
    • lagu tema "Pink Panther"
    • "Cindai" versi rock oleh Kumpulan Search dan
    • "Chalte... Chalte" sebuah lagu Hindi.
    Nota: Jikalau pelayar web anda tidak menunjukkan contoh yang saya berikan, sila semak semula susunan arahan yang anda tulis. Apabila ada lebih dari satu arahan diberikan pada mana-mana perkataan, ayat ataupun perenggan, pastikan susunan arahan adalah serasi iaitu dalam susunan AB????BA, ABC????CBA, ABCDE????EDCBA dan sebagainya.


    Bagaimana Membuat Kotak

    Tentu anda dapat melihat bahawa saya menggunakan dua (2) kotak berbeza di bahagian atas muka surat ini. Jikalau anda klik "File" dan klik "Edit page" tentu anda dapat lihat sebenarnya saya menggunakan banyak kotak. Saya telah arahkan kepada pelayar web anda supaya tidak menunjukkannya kebanyakan kotak itu.

    Umumnya untuk membuat kotak yang mempunyai satu (1) RUANG anda harus memberikan arahan begini;

      <TABLE BORDER=? CELLSPACING=? CELLPADDING=? WIDTH="?">
      <TR>
      <TD>

      Isikan teks atau imej di sini...

      </TD>
      </TR>
      </TABLE>

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

    Maksud Arahan:

    <TABLE> Arahan Buka Kotak
    BORDER Garis Tepi Kotak (ukuran pixel)
    CELLSPACING Ruang Dalam Sempadan (ukuran pixel)
    CELLSPADDING Ruang Antara Teks Atau Imej Dengan Garisan (ukuran pixel)
    WIDTH Lebar kotak (unit pixel ataupun peratus lebar monitor pc)
    <TD> Arahan Buka Table Division atau Kolum Kotak
    <TR> Arahan Buka Table Row atau Baris Kotak
    </TR> Arahan Tutup Baris
    </TD> Arahan Tutup Kolum
    </TABLE> Arahan Tutup Kotak

    Sila perhatikan:

    • Jikalau menggunakan ukuran peratus untuk TABLE WIDTH pastikan jumlah semua ukuran lebar kolum (TD WIDTH) tidak melebihi ukuran TABLE WIDTH
    • Buangkan terus tanda =? pada BORDER jikalau tidak mahu sempadan kotak 3D (3 dimensi)
    Untuk membuat kotak yang mempunyai satu baris tetapi lebih dari satu (1) kolum (columns);

    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?

      <TABLE BORDER=? CELLSPACING=? CELLPADDING=? WIDTH="?">
      <TR>
      <TD>

      <TD ALIGN=? VALIGN=? WIDTH="?">
      Isikan teks atau imej di sini
      </TD>

      <TD ALIGN=? VALIGN=? WIDTH="?">
      Isikan teks atau imej di sini...
      </TD>

      <TD ALIGN=? VALIGN=? WIDTH="?">
      Isikan teks atau imej di sini...
      </TD>

      </TD>
      </TR>
      </TABLE>

    Untuk membuat kotak yang mempunyai lebih dari satu (1) kolum (columns dan lebih dari satu (1) baris (rows), tuliskan begini contohnya;

    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?

      <TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH="450">
      <TR>
      <TD WIDTH="33%">Baris Satu Kolum Satu </TD>
      <TD WIDTH="33%">Baris Satu Kolum Dua </TD>
      <TD WIDTH="33%">Baris Satu Kolum Tiga </TD>
      </TR>

      <TR> <TD>Baris Dua Kolum Satu </TD>
      <TD>Baris Dua Kolum Dua </TD>
      <TD>Baris Dua Kolum Tiga </TD>
      </TR>

      <TR>
      <TD>Baris Tiga Kolum Satu </TD>
      <TD>Baris Tiga Kolum Dua </TD>
      <TD>Baris Tiga Kolum Tiga </TD>
      </TR>
      </TABLE>

    Pelayar web anda seharusnya menunjukkan kotak yang sekurang-kurangnya begini:

    Baris Satu Kolum Satu Baris Satu Kolum Dua Baris Satu Kolum Tiga
    Baris Dua Kolum Satu Baris Dua Kolum Dua Baris Dua Kolum Tiga
    Baris Tiga Kolum Satu Baris Tiga Kolum Dua Baris Tiga Kolum Tiga

    Arahan Tambahan:

    • Secara default semua teks atau imej akan dipaparkan oleh pelayar web di bahagian kiri baris dan bahagian tengah kolum. Lihat kotak di atas.
    • Untuk meletak teks atau imej pada posisi yang anda kehendaki tambah arahan yang sesuai mengenainya. Arahan WIDTH hendaklah ditulis pada baris pertama setiap kolum, sementara arahan untuk posisi perlu ditulis pada setiap kolum ataupun baris. Arahan mengenainya adalah seperti berikut:
      • Untuk posisi pada baris dan kolum pertama tulis begini <TD ALIGN=? VALIGN=? WIDTH="?">. Pada baris dan kolum seterusnya, arahan WIDTH hendaklah sewajarnya ditinggalkan, supaya tidak menimbulkan konflik antara arahan-arahan yang diberikan.
      • Maksud ALIGN=? ialah posisi baris melintang sementara VALIGN=? pula posisi kolum tegak.
      • Untuk baris melintang (ALIGN) anda boleh gunakan LEFT (kiri), CENTER (tengah) ataupun RIGHT (kanan).
      • Bagi kolum tegak (VALIGN) pula pilih antara TOP (atas), CENTER (tengah) atau BOTTOM (bawah).


    Bagaimana Merangkai Email

    Cara yang paling mudah untuk merangkai email pada teks atau imej ialah dengan mengarahkan pelayar web membuka perisian default pelawat untuk menghantar email. Jikalau pelawat menggunakan Netscape Navigator atau Communicator, Mail Composer akan dibuka. Misalnya, cuba klik di sini. Arahan yang saya berikan adalah seperti berikut;

      <A HREF="mailto:jack21_1997@usa.net">di sini</A>
    Jikalau anda mahu sesuatu imej itu dirangkai kepada email anda, tuliskan sahaja begini;
      <A HREF="mailto:ciksiti@mailcity.com">nama dan sumber imej</A>


    Bagaimana Meletak Audio

    Arahan-arahan asas yang diperlukan untuk audio format seperti midi, wav, mp3 dan mod adalah seperti berikut;

      <EMBED SRC="bujang-lapuk.mid" LOOP="true" VOLUME="50"
      CONTROLS=SMALLCONSOLE>
      Perkara-perkara yang harus anda perhatikan ialah;
    Sumber Audio <EMBED SRC="bujang-lapuk.mid"
    Arahan Mula AUTOSTART="false"
    Audio berbunyi apabila tetikus digunakan.
    Jikalau anda tidak menuliskan arahan AUTOSTART pelayar akan membunyikan audio secara automatik
    Sukatan Bunyi VOLUME="1 hingga 100"
    Status Bunyi LOOP="true" atau LOOP="false"
    Gunakan apabila AUTOSTART tidak ditulis. Gunakan LOOP="true" supaya audio terus dibunyikan tanpa henti dan sebaliknya apabila ditulis LOOP="false"
    Status Pemain Audio HIDDEN="true"
    Arahan supaya pemain audio tidak ditunjukkan oleh pelayar web.
    Saiz Pemain Audio WIDTH="50" HEIGHT="16" atau CONTROLS=SMALLCONSOLE
    Tulis ukuran mengikut saiz pemain audio yang digunakan (dalam kiraan pixel atau point.) Jikalau anda tuliskan CONTROLS=SMALLCONSOLE sahaja (tanpa menuliskan saiz) pelayar web akan paparkan saiz default ukuran kecil yang digunapakai oleh plug-in pelayar pelawat.
    Audio dan video dalam format Real Audio (ra dan ram) memerlukan perisian khas yang disediakan oleh Real Audio.

    Undur Setapak Maju Selangkah

    1