ASAS-ASAS HTML
Objektif
2.1 Pengenalan kepada HTML 2.5 Stail tag
2.2 Kod-kod HTML 2.6 Garis melintang
2.3 Format tek HTML 2.7 Imej (grafik)
2.4 Tag berstruktur 2.8 Pautan (linking)
* Klik pada tajuk untuk keterangan selanjutnya*
F3026 – WEB AUTHORING 1
Asas-asas HTML
Objektif
• Memahami HTML, peraturan tag HTML, tag berstruktur, stail
tag dan bagaimana untuk memautkan laman web.
• Menulis kod HTML yang asas berdasarkan struktur asas dan
stail tag HTML.
F3026 – WEB AUTHORING 2
Asas-asas HTML
2.1 Pengenalan kepada HTML
Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk
membina dokumen berasaskan web.
Dicipta oleh Tim Berners-Lee, seorang ahli fizik di CERN, Geneva.
Bahasa ini difahami oleh semua sistem komputer yang mempunyai sistem
pengoperasian yang berbeza.
HTML boleh ditaip di Notepad di Windows, Bbedit di Macintosh dan Emac
atau vi di Unix.
Fail HTML diakhiri dengan format .HTML.
Pelayar web seperti Netscape membaca dokumen HTML dan menentukan
bagaimana ia akan dipaparkan di skrin.
HTML bergantung kepada tag bertanda (markup tags) untuk mengenalpasti
blok perkataan.
F3026 – WEB AUTHORING 3
Asas-asas HTML
2.2 Kod-kod HTML
Dokuman HTML adalah fail teks biasa, bezanya ialah ia mempunyai kod-kod
tertentu yang di namakan tag HTML yang boleh di terjemahkan oleh pelayar
web sebagai sekumpulan arahan.
2.2.1 Tag HTML
Tag menentukan teks yang mana satu akan dipaparkan sebagai tajuk,
bagaimana perenggan di format, di mana grafik akan ditempatkan, dan
bagaimana untuk membuat pautan (link) ke halaman WWW yang lain.
Contoh: <B> This text will be displayed in Bold </B>
Teks ini akan dipaparkan sebagai tulian tebal (bold) oleh pelayar web di skrin
F3026 – WEB AUTHORING 4
Asas-asas HTML
Tag bertanda selalunya berpasangan.
Tag Pembuka : Dimulakan dengan simbol “kurang daripada” (<), nama tag,
diikuti dengan simbol “lebih besar daripada” (>).
Contohnya <B>.
Tag Penutup : Dimulakan dengan simbol “kurang daripada” (<),
simbol palang (/),nama tag, diikuti dengan simbol “lebih besar
daripada” (>). Contohnya </B>.
F3026 – WEB AUTHORING 5
Asas-asas HTML
2.2.2 Asas HTML
Setiap dokumen HTML mesti mengandungi:
(1) Head
Mengandungi tajuk dan keterangan tentang dokumen tersebut.
Terletak diantara tag <HEAD> dan </HEAD>.
(1)Body
Mengandungi teks, senarai, jadual, imej, tag penanda dan elemen-
elemen lain.
Terletak diantara tag <BODY> dan </BODY>.
Tag-tag asas yang diperlukan oleh pelayar web ialah <HTML>,
<HEAD>, <TITLE> dan <BODY>.
F3026 – WEB AUTHORING 6
Asas-asas HTML
2.2.2.1 Tag <HTML>
Taip tag <HTML> di bahagian paling atas di dalam fail anda.
Ia memberitahu pelayar web bahawa dokumen ini ditulis di dalam
HTML.
Kedua- dua tag di bawah mesti berada di setiap dokumen HTML.
<HTML>
</HTML>
F3026 – WEB AUTHORING 7
Asas-asas HTML
2.2.2.2 Tag <HEAD>
Mengenal pasti serta menanda maklumat di dalam dokumen HTML
sebagai tajuk dokumen.
Tag-tag HTML yang dibenarkan berada di antara tag <HEAD> dan
</HEAD> ialah <TITLE>, <BASE>, <META>, <STYLE>, dan <LINK>.
Taip tag <HEAD> selepas tag <HTML> diikuti dengan tag </HEAD>
dibaris seterusnya.
<HTML>
<HEAD>
</HEAD>
</HTML>
F3026 – WEB AUTHORING 8
Asas-asas HTML
2.2.2.3 <TITLE>
Untuk mencipta tajuk di dokumen HTML.
Tajuk tersebut akan dipaparkan di bar tajuk pelayar web.
Terletak diantara tag <HEAD> dan </HEAD>.
Contoh: <TITLE> Laman Web Pertama </TITLE>.
<HTML> Output terpapar di bar
<HEAD> tajuk pelayar
<TITLE> Laman Web Pertama
</TITLE>
</HEAD>
</HTML>
F3026 – WEB AUTHORING 9
Asas-asas HTML
2.2.2.4 Tag <BODY>
Semua isi kandungan tapak web (web site) ditempatkan di sini.
Taip tag <BODY> selepas tag </HEAD>.
Akhiri seksyen dengan menaip tag </BODY> sebelum tag </HTML>.
Tag-tag dan kod-kod HTML akan ditempatkan di antara kedua-dua tag ini.
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY> Kedudukan tag <BODY>
</BODY>
</HTML>
F3026 – WEB AUTHORING 10
Asas-asas HTML
Sekarang, dokumen HTML anda telah diformat tetapi tidak mengandungi isi
kandungan.
Taip teks diantara tag <BODY>…..</BODY>. Contoh: Selamat Datang…
<HTML>
<HEAD>
<TITLE> Laman Web Pertama
</TITLE>
</HEAD>
<BODY>
Selamat Datang…
</BODY>
</HTML>
Output yang terhasil apabila
perkataan Selamat Datang…
diletakkan di antara <BODY> dan
</BODY>
F3026 – WEB AUTHORING 11
Asas-asas HTML
2.3 Format teks HTML
Berikut ialah tag stail fizikal dan tag stail logikal untuk memformat teks HTML:
Stail Fizikal – Digunakan untuk menakrif atribut seperti menebalkan (bold),
condong (italic), dan bergaris (underline).
Stail Logikal – digunakan di dalam badan (body) dokumen untuk
menunjukkan atribut seperti tajuk utama (heading), justifikasi perenggan
dan penggunaan pra-format.
F3026 – WEB AUTHORING 12
Asas-asas HTML
2.3.1 Memformat teks HTML – stail fizikal
2.3.1.1 Penggunaan Tag B
Digunakan untuk tajuk, sub tajuk atau sebagai salah satu cara untuk menarik
perhatian pembaca.
Teks yang berada di antara tag-tag ini akan dipaparkan sebagai huruf tebal.
Kod HTML: Taip teks di antara tag <B> dan </B>.
Contoh:
<HTML>
<HEAD>
<TITLE> Laman Web Pertama
</TITLE>
</HEAD>
<BODY>
<B> Selamat Datang... </B>
</BODY> Teks Selamat Datang…
</HTML> telah ditebalkan
F3026 – WEB AUTHORING 13
Asas-asas HTML 14
2.3.1.2 Penggunaan tag I
Untuk mengubah teks menjadi condong.
Taip teks di antara tag <I> dan </I>.
Contoh:
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY>
<I> Selamat Datang... </I>
</BODY>
</HTML> Teks Selamat datang…
telah dicondongkan
F3026 – WEB AUTHORING
Asas-asas HTML 15
2.3.1.3 Penggunaan tag U
Untuk menggariskan teks di dalam laman web.
Kod HTML: Taip teks di antara tag <U> dan </U>.
Tidak semua pelayar web menyokong penggunaan tag ini.
Contoh:
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY>
<U> Selamat Datang... </U>
</BODY> Teks Selamat Datang…
</HTML> telah digariskan
F3026 – WEB AUTHORING
Asas-asas HTML
2.3.1.4 Penggunaan tag SUP
Teks akan diformat sebagai superscript ( Saiz teks lebih kecil dan
kedudukannya lebih tinggi daripada baris teks biasa).
Selalu digunakan di dalam persamaan matematik atau nota kaki.
Kod HTML: Taip teks di antara tag <SUP> dan </SUP>.
Contoh:
<HTML>
<HEAD>
<TITLE> Second Web page </TITLE>
</HEAD>
<BODY>
Keluasan : 200 m <SUP> 2 </SUP>
<BODY>
</HTML>
Teks Superscript 16
F3026 – WEB AUTHORING
Asas-asas HTML
2.3.1.5 Penggunaan tag SUB
Teks akan diformat sebagai subscript ( Saiz teks lebih kecil dan
kedudukannya lebih rendah daripada baris teks biasa).
Selalu digunakan di dalam formula saintifik.
Kod HTML: Taip teks di antara tag <SUB> dan </SUB>.
Contoh:
<HTML> Output
<HEAD>
<TITLE> Second Web Page </TITLE>
</HEAD>
<BODY>
Math equation : 2Y<SUB>2</SUB>-4
</BODY>
</HTML>
Teks Subscript
F3026 – WEB AUTHORING 17
Asas-asas HTML
2.3.2 Memformat teks HTML – stail logikal
Cara pengguna memaparkan teks berdasarkan kecenderungan
mereka.
Menjadikan dokumen anda mudah untuk di fahami dan
dikemaskini.
Setiap pelayar web menentukan bagaimana tag stail logikal akan
dipaparkan.
Setiap pelayar web mungkin menafsirkannya berbeza.
Sekiranya teks tersebut tidak berubah di skrin, ia bermakna
pelayar web yang anda gunakan tidak menyokong stail itu.
F3026 – WEB AUTHORING 18
Asas-asas HTML
2.3.2.1 Penggunaan tag H Contoh:
Digunakan untuk membuat tajuk <HTML>
utama (heading). <HEAD>
Tajuk utama akan mengasingkan <TITLE> Laman Web Pertama </TITLE>
seksyen di dalam satu </HEAD>
mukasurat. <BODY>
Tajuk utama mempunyai <H1> Tajuk Utama Saiz 1 </H1>
peringkat 1 hingga 6. <H2> Tajuk Utama Saiz 2 </H2>
Panjang tajuk utama tiada had, ia <H3> Tajuk Utama Saiz 3 </H3>
akan turun ke barisan seterusnya <H4> Tajuk Utama Saiz 4 </H4>
sekiranya teks melebihi saiz <H5> Tajuk Utama Saiz 5 </H5>
tetingkap . <H6> Tajuk Utama Saiz 6 </H6>
Sekiranya anda lupa menaip tag </BODY>
penutup, semua teks akan </HTML>
menjadi sebahagian daripada
kepala (header). Output
* Sila klik pada perkataan output untuk melihat output yang dihasilkan* 19
F3026 – WEB AUTHORING
Asas-asas HTML
2.3.2.2 Penggunaan tag P
Digunakan untuk membuat perenggan.
Tanpa tag <P>, semua teks akan menjadi satu perenggan sahaja.
Ia beritahu pelayar web untuk selang satu baris dan mulakan dengan
perenggan baru.
Contoh:
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY>
<P>Secara ringkasnya ada dua teknologi yang memberi
tenaga kepada internet: HTTP dan HTML. <P> HTTP ialah
singkatan kepada Protokol Alihan Hyperteks dan HTML
merupakan singkatan kepada Hypertext Markup Language.
</BODY>
</HTML>
Output * Sila klik pada perkataan output untuk melihat output yang dihasilkan*
F3026 – WEB AUTHORING 20
Asas-asas HTML
2.3.2.3 Penggunaan tag ALIGN
Digunakan untuk menukar justifikasi perenggan atau teks.
Taip ALIGN diikuti dengan justifikasi.
Memformat perenggan menjadi justifikasi-kanan (right-justified):
Taip <P ALIGN=RIGHT>
Memformat perenggan menjadi justifikasi-kiri (left-justified):
Taip <P ALIGN=LEFT>
Memformat perenggan ditengah-tengah (centered):
Taip <P ALIGN=CENTER>
Memformat perenggan menjadi selari (justified):
Taip <P ALIGN=JUSTIFY>
Sambungan…
F3026 – WEB AUTHORING 21
Asas-asas HTML
Contoh:
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY>
<P ALIGN=RIGHT>Secara ringkasnya ada dua teknologi yang memberi
tenaga kepada
internet: HTTP dan HTML. <P ALIGN=LEFT> HTTP ialah singkatan
kepada ProtokolAlihan Hyperteks dan HTML merupakan singkatan
kepada Hypertext Markup Language. <P ALIGN=CENTER> Protokol
HTTP digunakan untuk memancarkan laman web dari pelayan web
agar dapat dilihat melalui komputer lain.<P ALIGN=JUSTIFY>HTML
pula digunakan untuk membina laman web.
</BODY>
</HTML>
Output
* Sila klik pada perkataan output untuk melihat output yang dihasilkan* 22
F3026 – WEB AUTHORING
Asas-asas HTML
2.3.2.4 Penggunaan tag BR
Tag baris henti (line break) menghasilkan baris kosong di mana
sahaja ia berada.
Teks seterusnya akan muncul di margin sebelah kiri baris
selepasnya.
Tiada baris kosong akan ditambah.
Baris henti boleh diletakkan di dalam mana-mana tag seperti tajuk
utama dan senarai item.
Tag tiada henti (no break) akan menghalang baris dipisah-
pisahkan oleh pelayar.
Contoh: <nobr> Taip teks disini </nobr>.
Kod HTML: Taip teks diantara tag <BR> dan </BR>.
Sambungan…
F3026 – WEB AUTHORING 23
Asas-asas HTML
Contoh: Output
<HTML>
<HEAD>
<TITLE> PANTUN </TITLE>
</HEAD>
<BODY>
Buah cempedak di luar pagar, <BR>
Ambil galah tolong jolokkan, <BR>
Kami budak baru belajar, <BR>
Kalau salah tolong tunjukkan.
</BODY>
</HTML>
F3026 – WEB AUTHORING 24
Asas-asas HTML
2.3.2.5 Penggunaan tag PRE
Gunakan teks pra-format (preformatted) sekiranya anda mahu susunan teks di
dalam fail HTML anda kelihatan sama seperti dalam pelayar WWW.
Semua tag yang terletak diantara tag <PRE> dan </PRE> akan muncul sama
seperti di Netscape dan di Internet Explorer.
Tajuk utama dan perenggan tidak beroperasi di dalam tag pra-format.
Contoh: Output
<HTML> <HEAD>
<TITLE> Markah Terkini - DMA 501
</TITLE>
</HEAD> <BODY>
<PRE>
<B> NAMA KUIZ(10%) UJIAN (20%) </B>
Nur Huda 8 18
Amirul 7 15
Fatini 5 16
</PRE>
</BODY>
</HTML>
F3026 – WEB AUTHORING 25
Asas-asas HTML
2.4 Tag berstruktur
Tag berstruktur ialah tag yang melabel beberapa jenis isi kandungan,
pelayar atau stail lampiran (custom style sheets), ia mengawal bagaimana ia
akan kelihatan di tetingkap pelayar.
2.4.1 Senarai definisi (definition list) 26
Tag pembuka <DL> dan tag penutup </DL>.
Setiap item mempunyai satu tag pembuka. Tiada tag penutup.
Pelayar akan memaparkan istilah (term) dalam satu baris manakala
definasi di baris yang lain.
Tag-tag yang terlibat:
<DL> - Membuka senarai definisi (definition list)
<DT> - Membuka setiap definisi istilah (definition term)
<DD> - Membuka definisi bagi setiap istilah (term)
</DL> - Menutup senarai definisi (definition list)
F3026 – WEB AUTHORING
Asas-asas HTML
Contoh:
<HTML>
<HEAD>
<TITLE> SENARAI </TITLE>
</HEAD>
<BODY>
<DL>
<DT> Tag DL <DD> Membuka senarai definisi.
<DT> Tag DT <DD> Membuka setiap definisi istilah.
</DL>
</BODY>
</HTML>
Output
Istilah
Definisi
F3026 – WEB AUTHORING 27
Asas-asas HTML 28
2.4.2 Senarai yang tidak tersusun atau senarai bullet
• Digunakan untuk memaparkan item dalam bentuk
nota.
• Memasukkan bullet berbentuk grafik di hadapan
setiap item.
• Saiz dan jenis bullet yang digunakan ditentukan oleh
pelayar web.
• Untuk membuat senarai tajuk utama, taip
<HL>…</HL>.
• Tag pembuka ialah <UL>.
• Setiap item dibuka dengan tag <LI>.
• Tag <LI> tiada tag penutup.
• Setiap item di set dengan bullet.
• Senarai ini ditutup dengan tag </UL>.
F3026 – WEB AUTHORING
Asas-asas HTML
2.4.2 Senarai yang tidak tersusun atau senarai bullet
Digunakan untuk memaparkan Contoh:
item dalam bentuk nota.
Memasukkan bullet berbentuk <HTML> <HEAD>
grafik di hadapan setiap item. <TITLE> SENARAI </TITLE>
Saiz dan jenis bullet yang </HEAD> <BODY>
digunakan ditentukan oleh <HL> Produk-produk Macromedia: </HL>
pelayar web. <UL>
Untuk membuat senarai tajuk <LI> Dreamweaver 4.0
utama, taip <HL>…</HL>. <LI> Fireworks 4.0
Tag pembuka ialah <UL>. <LI> Flash 5.0
Setiap item dibuka dengan tag </UL>
<LI>. </BODY> </HTML>
Tag <LI> tiada tag penutup.
Setiap item di set dengan bullet. Output
Senarai ini ditutup dengan tag
</UL>.
F3026 – WEB AUTHORING 29
Asas-asas HTML
2.4.3 Senarai tersusun 30
Senarai tersusun digunakan untuk menyusun maklumat.
Nombor atau aksara akan ditambah secara automatik di hadapan
setiap item.
Taip <HL>…</HL> untuk membuat tajuk utama senarai.
Tag pembuka ialah <OL>.
Untuk menukar senarai penomboran yang sedia ada, taip kata kunci
TYPE di dalam tag <OL>. Berikut ialah lima jenis senarai yang boleh
digunakan sebagai sistem penomboran:
- <OL TYPE=1> : Sistem penomboran yang piawai (1,2,3…)
- <OL TYPE=A> : Huruf besar (A,B,C…)
- <OL TYPE=a> : Huruf kecil (a,b,c…)
- <OL TYPE=I> : Sistem penomboran Roman – huruf besar.
(I,II,III…)
- <OL TYPE=i> : Sistem penomboran Roman – huruf besar
(i,ii,iii,iv..)
Setiap item dibuka dengan tag <LI>.
Tag <LI> tidak mempunyai tag penutup.
Senarai ini ditutup dangan tag </OL>.
F3026 – WEB AUTHORING
Asas-asas HTML
Contoh 1: Menggunakan sistem pernomboran yang piawai (1,2,3…).
<HTML> <HEAD>
<TITLE> RESIPI </TITLE>
</HEAD> <BODY>
<HL> Cara-cara membuat air limau ais </HL>
<OL>
<LI> Ambil sedikit perahan limau kasturi.
<LI> Campurkan perahan limau kasturi bersama-sama dengan air gula dan air.
<LI> Masukkan ais dan boleh dihidang.
</OL>
</BODY> </HTML>
Output 31
F3026 – WEB AUTHORING
Asas-asas HTML
Contoh 2: Menggunakan Sistem Penomboran Roman (i,ii,iii).
<HTML> <HEAD>
<TITLE> RESIPI </TITLE>
</HEAD> <BODY>
<HL> Cara-cara membuat air limau ais </HL>
<OL TYPE=i>
<LI> Ambil sedikit perahan limau kasturi.
<LI> Campurkan perahan limau kasturi bersama-sama dengan air gula dan air.
<LI> Masukkan ais dan boleh dihidang.
</OL>
</BODY> </HTML>
Output
F3026 – WEB AUTHORING 32
Asas-asas HTML
2.4.4 Senarai di dalam senarai
Membenarkan anda membentuk senarai yang berperingkat.
Contoh: untuk membentuk item atau garis bentuk
(outline) berhirarki.
Prosesnya sama seperti membuat senarai tunggal (single list).
Taip <HL>…</HL> untuk membuat senarai tajuk utama.
Anda boleh gunakan tag <OL> atau <UL> untuk membuka senarai.
Kemudian, masukkan senarai satu persatu menggunakan tag <LI>.
Tekan kekunci tab setiap kali anda ingin membuka senarai di peringkat
seterusnya di dalam fail HTML.
Pastikan anda taip tag </UL> untuk menutup setiap subsenarai dan
senarai utama.
Sambungan…
F3026 – WEB AUTHORING 33
Asas-asas HTML
<HTML> <HEAD> Output
<TITLE> Senarai Bersarang </TITLE>
</HEAD> <BODY>
<HL> Jenis-jenis haiwan:</HL>
<OL>
<LI> Mamalia
<UL>
<LI>Kucing
<LI>Lembu
</UL>
<LI> Reptilia
<UL>
<LI>Ular
<LI>Cicak
</UL>
</OL>
</BODY> </HTML>
F3026 – WEB AUTHORING 34
Asas-asas HTML
2.5 Stail tag
Tag yang memberi arahan-arahan khas tentang penampilan elemen. Contoh:
- Baris henti (line breaks)<BR> <NOBR> <WBR>
- Tulisan (font) <FONT face=>
- Saiz tulisan <BIG> <SMALL> <FONT size=>
- Warna tulisan <BODY alink=> <BODY link=> <BODY text => <FONT color=>
- Stail tulisan <B> <I> <S> <STRIKE> <SUB> <SUP> <TT> <U>
- Placement <CENTER> <IMG align=>
Warna di fail HTML direkabentuk oleh nilai RGB (Hexadecimal color code):
Warna Kod Warna Kod
Hitam #000000 Kelabu #C0C0C0
Putih #FFFFFF Merah hati #8E046B
Kuning #FFFF00 Hijau #00FF00
Merah #FF0000 Merah Lembayung (Magenta) #880088
Biru #0000FF Biru firus (Cyan) #008888
F3026 – WEB AUTHORING 35
Asas-asas HTML
2.5.1 Menukar warna teks
Pelayar membenarkan anda memilih 16 warna yang berbeza. Warna-warna
tersebut ialah: Hitam, Biru tua (Navy), Perak, Biru, Merah hati, Ungu, Merah,
Fuchsia, hijau, Teal, Lime, Aqua, Olive, kelabu, kuning dan putih.
Anda boleh mencipta warna baru dengan menggabungkan warna hijau,
merah dan biru.
Contoh 1: Menukar warna teks yang dikehendaki.
<HTML> Output
<HEAD>
<TITLE>Peribahasa </TITLE>
</HEAD>
<BODY>
<B> " Yang dikejar tak dapat,
yang dikendong berciciran" </B>
<HR>
<I> <FONT COLOR = BLUE>
Peribahasa Melayu</FONT> </I>
</BODY>
</HTML>
F3026 – WEB AUTHORING 36
Asas-asas HTML
Contoh 2: Menukar warna teks bagi keseluruhan halaman.
Taip TEXT=keyword di dalam tag BODY seperti contoh berikut:
<BODY TEXT=RED>.
<HTML> Output
<HEAD>
<TITLE>Peribahasa </TITLE>
</HEAD>
<BODY TEXT = RED>
<B>" Yang dikejar tak dapat, yang
dikendong berciciran"</B>
<HR>
<I> Peribahasa Melayu</I>
</BODY>
</HTML>
F3026 – WEB AUTHORING 37
Asas-asas HTML
2.5.2 Membuat latarbelakang
Warna boleh digunakan sebagai latarbelakang untuk dokumen HTML.
Anda juga boleh gunakan grafik sebagai latarbelakang.
Kod-kod HTML:
Tag Pembuka Tag Penutup Fungsi
<BODY BGCOLOR=#FFFFFF> </BODY> BGCOLOR set warna
latarbelakang.
<BODY BACKGROUND=background.jpg> </BODY> BACKGROUND set
grafik sebagai
latarbelakang.
F3026 – WEB AUTHORING Sambungan…
38
Asas-asas HTML
Contoh:
<HTML> <HEAD>
<TITLE>Peribahasa </TITLE>
</HEAD>
<BODY BGCOLOR=#FFFF00>
<B> " Yang dikejar tak dapat, yang dikendong berciciran" </B>
<HR>
<I> Peribahasa Melayu</I>
</BODY> </HTML>
Output
F3026 – WEB AUTHORING 39
Asas-asas HTML
2.5.3 Saiz tulisan
Teks boleh dipaparkan dalam tujuh saiz yang berbeza bermula daripada 1
(terkecil) hingga 7 (terbesar).
Saiz tulisan yang ditetapkan ialah 3.
Taip teks di antara tag <FONT SIZE=5> dan </FONT>.
Contoh:
<HTML><HEAD> Output
<TITLE>Saiz </TITLE>
</HEAD><BODY>
<FONT SIZE=7> Teks ini bersaiz 7</FONT><BR>
<FONT SIZE=6> Teks ini bersaiz 6</FONT><BR>
<FONT SIZE=5> Teks ini bersaiz 5</FONT><BR>
<FONT SIZE=4> Teks ini bersaiz 4</FONT><BR>
<FONT SIZE=3> Teks ini bersaiz 3</FONT><BR>
<FONT SIZE=2> Teks ini bersaiz 2</FONT><BR>
<FONT SIZE=1> Teks ini bersaiz 1</FONT><BR>
</BODY></HTML>
*Klik pada perkataan Output untuk melihat output yang dihasilkan* 40
F3026 – WEB AUTHORING
Asas-asas HTML
2.5.4 Menukar jenis tulisan
Membenarkan pengguna menukar jenis tulisan.
Taip teks di antara tag <FONT FACE=”WINGDINGS”> dan </FONT>.
Contoh :
<HTML>
<HEAD>
<TITLE>Saiz </TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial"> Teks ini ditulis dalam tulisan berjenis Arial</FONT>
</BODY>
</HTML>
Output
F3026 – WEB AUTHORING 41
Asas-asas HTML
2.6 Garis melintang (horizontal rule)
Anda boleh memasukkan garis melintang (horizontal line) di dalam laman
web untuk mengasingkan grafik dan teks.
Tag Pembuka: <HR>, Tag Penutup: Tiada
Satu garis melintang akan terhasil merentangi skrin. Contoh: tag <HR>
selalunya di letakkan di atas alamat e-mel di laman web untuk
mengasingkannya daripada teks biasa.
Ia boleh diletakkan di mana-mana sahaja di dalam seksyen Body dokumen
HTML.
Salah satu teknik pengurusan laman web yang popular.
Panjang dan ketebalan garisan boleh diubah.
Atribut Size, Width, Align dan Noshade boleh dilaksanakan di Netscape
tetapi tidak di pelayar web yang lain.
Sambungan… 42
F3026 – WEB AUTHORING
Asas-asas HTML
Contoh 1: Satu garis lurus Output
<HTML> <HEAD>
<TITLE>Peribahasa </TITLE>
</HEAD> <BODY>
<B>" Yang dikejar tak dapat, yang dikendong berciciran"</B>
<HR>
<I> Peribahasa Melayu</I>
</BODY> </HTML>
Contoh 2: Atribut size (piksel) digunakan untuk menentukan ketebalan garisan
<HTML> <HEAD> Output
<TITLE>Peribahasa </TITLE>
</HEAD> <BODY>
<B> " Yang dikejar tak dapat, yang dikendong berciciran"</B>
<HR SIZE =10>
<I> Peribahasa Melayu</I>
</BODY> </HTML>
*Klik pada perkataan Output untuk melihat output yang dihasilkan* Sambungan…
F3026 – WEB AUTHORING 43
Asas-asas HTML
Contoh 3 : Atribut width diberi dalam bentuk peratus. Output
<HTML> <HEAD>
<TITLE>Peribahasa </TITLE>
</HEAD> <BODY>
<B>" Yang dikejar tak dapat, yang dikendong berciciran"</B>
<HR WIDTH =60%>
<I> Peribahasa Melayu</I>
</BODY> </HTML>
Contoh 4 : Atribut align digunakan untuk mengubah kedudukan teks sama ada
kiri, kanan atau tengah.
<HTML> <HEAD> Output
<TITLE>Peribahasa </TITLE>
</HEAD> <BODY>
<B>" Yang dikejar tak dapat, yang dikendong berciciran"</B>
<HR WIDTH =60% ALIGN=RIGHT>
<I> Peribahasa Melayu</I>
</BODY> </HTML>
*Klik pada perkataan Output untuk melihat output yang dihasilkan* 44
F3026 – WEB AUTHORING
Asas-asas HTML
2.7 Imej (grafik)
Anda boleh gunakan dua jenis grafik dalam format GIF dan JPG.
Taip tag <IMG> apabila anda ingin memasukkan gambar atau animasi
ke dalam laman web.
Pastikan lokasi imej sama seperti rujukan di dalam tag <IMG>.
Kod HTML :
Tag Pembuka Tag Penutup Fungsi
<IMG SRC=”graphic_file”> Tiada Memasukkan grafik ke dalam laman
web.
Sambungan… 45
F3026 – WEB AUTHORING
Asas-asas HTML
Contoh :
<HTML> <HEAD>
<TITLE>Peribahasa </TITLE>
</HEAD> <BODY>
<IMG
SRC="D:\LectureNotes\WEBAUTHORING(NEW_VERSION)\mentol.jpg">
<B> " Yang dikejar tak dapat, yang dikendong berciciran"
</B>
<HR>
<I> Peribahasa Melayu</I>
</BODY> </HTML>
Output
F3026 – WEB AUTHORING 46
Asas-asas HTML
2.8 Pautan (linking)
Pautan (link) terdiri daripada teks atau grafik, lokasi baru (laman web) akan
dipaparkan sebaik sahaja anda klik pada pautan.
Tag anchor <A> digunakan untuk membuat hyperlink di dalam dokumen HTML.
Kod HTML : <A HREF =”Target”> </A>
Pastikan sertakan pautan kembali ke halaman asal (back link) untuk
memudahkan pelawat kembali ke halaman asal.
Dua jenis pautan (link):
(1) Pautan Teks
Ditunjukkan dalam bentuk teks berwarna biru dan bergaris. Apabila ia
disentuh oleh penuding tetikus, kursor akan berubah menjadi penuding jari
(pointing finger). Klik pada pautan dan laman web yang lain akan
dipaparkan.
(2) Pautan grafik
Dikenal pasti apabila penuding tetikus berubah daripada arrowhead kepada
penuding jari apabila penuding tetikus menyentuh grafik tersebut.
Sambungan… 47
F3026 – WEB AUTHORING
Asas-asas HTML
Contoh 1: Pautan teks.
<HTML> <HEAD>
<TITLE> Pautan </TITLE>
</HEAD> <BODY>
<H4> Pengenalan Kepada HTML </H4>
HTML digunakan untuk membangunkan
<A HREF="pautan2.html">laman web</A>
</BODY> </HTML>
<HTML> <HEAD> Output
<TITLE> Pautan </TITLE>
</HEAD> <BODY>
<H4> LAMAN WEB </H4>
Laman web merupakan dokumen eletronik yang
mengandungi kombinasi teks, suara
dan grafik.
</BODY> </HTML>
*Klik pada perkataan Output untuk melihat output yang dihasilkan* 48
F3026 – WEB AUTHORING
Asas-asas HTML
Contoh 2 : Pautan grafik
<HTML> <HEAD>
<TITLE> Pautan </TITLE>
</HEAD> <BODY>
Untuk melihat grafik, sila klik <A HREF ="mentol.jpg"> di sini.</A>
</BODY> </HTML>
Output
*Klik pada perkataan Output untuk melihat output yang dihasilkan* 49
F3026 – WEB AUTHORING
Asas-asas HTML
2.8.1 Menukar warna hyperteks
Anda boleh menukar warna hyperteks di pelayar web.
Kebiasaannya, hyperteks yang belum dilawati berwarna biru, hyperteks
yang telah dilawati berwarna ungu, dan hyperteks yang aktif berwarna
merah (dipaparkan dalam status aktif apabila pengguna klik pada
hyperteks).
Langkah-langkah untuk mengubah warna hyperteks:
Taip LINK=# diikuti dengan nilai RGB di dalam tag <BODY>.
Mengubah warna hyperteks yang telah dilawati :
Taip VLINK=# diikuti dengan nilai RGB di dalam tag <BODY>.
Mengubah warna hyperteks yang aktif :
Taip ALINK=# diikuti dengan nilai RGB di dalam tag <BODY>.
F3026 – WEB AUTHORING 50
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
asas HTML
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
asas HTML
- 1 - 50
Pages: