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