• Melukis Garis Lintang
• Cara Merangkai Imej ataupun Teks.
• Rangkai dan Rujuk
• Membuat Senarai;
• Membuat Kotak;
• Email; dan
• Audio.

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.

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.

• 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

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:

<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

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>

Maksud Arahan:

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)

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>

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>

<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;