Professional Documents
Culture Documents
Asas - Asas HTML
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*
Objektif
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.
Teks ini akan dipaparkan sebagai tulian tebal (bold) oleh pelayar web di skrin
(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
<HTML>
</HTML>
<HTML>
<HEAD>
</HEAD>
</HTML>
2.2.2.3 <TITLE>
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY>
Kedudukan tag <BODY>
</BODY>
</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>
Berikut ialah tag stail fizikal dan tag stail logikal untuk memformat teks HTML:
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
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY>
<I> Selamat Datang... </I>
</BODY>
</HTML> Teks Selamat datang
telah dicondongkan
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY>
<U> Selamat Datang... </U>
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
F3026 WEB AUTHORING 16
Asas-asas HTML
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>
<HEAD>
<TITLE> Second Web Page </TITLE> Output
</HEAD>
<BODY>
Math equation : 2Y<SUB>2</SUB>-4
</BODY>
</HTML>
Teks Subscript
* Sila klik pada perkataan output untuk melihat output yang dihasilkan*
Output * Sila klik pada perkataan output untuk melihat output yang dihasilkan*
Sambungan
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*
Sambungan
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>
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.
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
Output
F3026 WEB AUTHORING 31
Asas-asas HTML
Output
Sambungan
<HTML> <HEAD>
<TITLE> Senarai Bersarang </TITLE> Output
</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>
Warna di fail HTML direkabentuk oleh nilai RGB (Hexadecimal color code):
Warna Kod Warna Kod
<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>
<HTML>
<HEAD> Output
<TITLE>Peribahasa </TITLE>
</HEAD>
<BODY TEXT = RED>
<B>" Yang dikejar tak dapat, yang
dikendong berciciran"</B>
<HR>
<I> Peribahasa Melayu</I>
</BODY>
</HTML>
Sambungan
F3026 WEB AUTHORING 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
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>
<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> Output
<FONT SIZE=2> Teks ini bersaiz 2</FONT><BR>
<FONT SIZE=1> Teks ini bersaiz 1</FONT><BR>
</BODY></HTML>
Output
Sambungan
F3026 WEB AUTHORING 42
Asas-asas HTML
*Klik pada perkataan Output untuk melihat output yang dihasilkan* Sambungan
F3026 WEB AUTHORING 43
Asas-asas HTML
Contoh 4 : Atribut align digunakan untuk mengubah kedudukan teks sama ada
kiri, kanan atau tengah.
<HTML> <HEAD>
<TITLE>Peribahasa </TITLE>
</HEAD> <BODY>
<B>" Yang dikejar tak dapat, yang dikendong berciciran"</B>
<HR WIDTH =60% ALIGN=RIGHT>
<I> Peribahasa Melayu</I> Output
</BODY> </HTML>
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 :
Sambungan
F3026 WEB AUTHORING 45
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
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):
<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>
<TITLE> Pautan </TITLE>
</HEAD> <BODY>
<H4> LAMAN WEB </H4>
Laman web merupakan dokumen eletronik yang
mengandungi kombinasi teks, suara
dan grafik. Output
</BODY> </HTML>
<HTML> <HEAD>
<TITLE> Pautan </TITLE>
</HEAD> <BODY>
Untuk melihat grafik, sila klik <A HREF ="mentol.jpg"> di sini.</A>
</BODY> </HTML>
Output