Académique Documents
Professionnel Documents
Culture Documents
Objektif
2.1 Pengenalan kepada HTML
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.
Asas-asas HTML
Asas-asas HTML
Teks ini akan dipaparkan sebagai tulian tebal (bold) oleh pelayar web di skrin
F3026 WEB AUTHORING
Asas-asas HTML
Asas-asas HTML
(1)Body
Mengandungi teks, senarai, jadual, imej, tag penanda dan elemenelemen lain.
Terletak diantara tag <BODY> dan </BODY>.
Tag-tag asas yang diperlukan oleh pelayar web ialah <HTML>,
<HEAD>, <TITLE> dan <BODY>.
F3026 WEB AUTHORING
Asas-asas HTML
Asas-asas HTML
<HTML>
<HEAD>
</HEAD>
</HTML>
F3026 WEB AUTHORING
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>
<HEAD>
<TITLE> Laman Web Pertama
</TITLE>
</HEAD>
</HTML>
Asas-asas HTML
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>
11
Asas-asas 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.
12
Asas-asas HTML
telah ditebalkan
13
Asas-asas HTML
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY>
<I> Selamat Datang... </I>
</BODY>
</HTML> Teks Selamat datang
telah dicondongkan
14
Asas-asas HTML
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY>
<U> Selamat Datang... </U>
</BODY>
</HTML>
15
Asas-asas HTML
Teks Superscript
F3026 WEB AUTHORING
16
Asas-asas HTML
Output
Teks Subscript
17
Asas-asas HTML
18
Asas-asas HTML
Contoh:
<HTML>
<HEAD>
<TITLE> Laman Web Pertama </TITLE>
</HEAD>
<BODY>
<H1> Tajuk Utama Saiz 1 </H1>
<H2> Tajuk Utama Saiz 2 </H2>
<H3> Tajuk Utama Saiz 3 </H3>
<H4> Tajuk Utama Saiz 4 </H4>
<H5> Tajuk Utama Saiz 5 </H5>
<H6> Tajuk Utama Saiz 6 </H6>
</BODY>
</HTML>
Output
* Sila klik pada perkataan output untuk melihat output yang dihasilkan*
19
Asas-asas HTML
Output
* Sila klik pada perkataan output untuk melihat output yang dihasilkan*
20
Asas-asas HTML
Sambungan
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
Asas-asas HTML
Sambungan
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>
24
Asas-asas HTML
25
Asas-asas HTML
26
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
27
Asas-asas HTML
28
Asas-asas HTML
Contoh:
<HTML> <HEAD>
<TITLE> SENARAI </TITLE>
</HEAD> <BODY>
<HL> Produk-produk Macromedia: </HL>
<UL>
<LI> Dreamweaver 4.0
<LI> Fireworks 4.0
<LI> Flash 5.0
</UL>
</BODY> </HTML>
Output
29
Asas-asas HTML
30
Asas-asas HTML
Output
F3026 WEB AUTHORING
31
Asas-asas HTML
Output
32
Asas-asas HTML
Sambungan
33
Asas-asas HTML
<HTML> <HEAD>
<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>
Output
34
Asas-asas HTML
#000000
#FFFFFF
#FFFF00
#FF0000
#0000FF
Kelabu
Merah hati
Hijau
Merah Lembayung (Magenta)
Biru firus (Cyan)
F3026 WEB AUTHORING
#C0C0C0
#8E046B
#00FF00
#880088
#008888
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>
<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>
Output
36
Asas-asas HTML
<HTML>
<HEAD>
<TITLE>Peribahasa </TITLE>
</HEAD>
<BODY TEXT = RED>
<B>" Yang dikejar tak dapat, yang
dikendong berciciran"</B>
<HR>
<I> Peribahasa Melayu</I>
</BODY>
</HTML>
Output
37
Asas-asas HTML
Tag Penutup
Fungsi
<BODY BGCOLOR=#FFFFFF>
</BODY>
<BODY BACKGROUND=background.jpg>
</BODY>
BACKGROUND set
grafik sebagai
latarbelakang.
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
39
Asas-asas HTML
bersaiz
bersaiz
bersaiz
bersaiz
bersaiz
bersaiz
bersaiz
7</FONT><BR>
6</FONT><BR>
5</FONT><BR>
4</FONT><BR>
3</FONT><BR>
2</FONT><BR>
1</FONT><BR>
Output
40
Asas-asas HTML
Output
41
Asas-asas HTML
Sambungan
42
Asas-asas HTML
Contoh 1: Satu garis lurus
<HTML> <HEAD>
<TITLE>Peribahasa </TITLE>
</HEAD> <BODY>
<B>" Yang dikejar tak dapat, yang dikendong berciciran"</B>
<HR>
<I> Peribahasa Melayu</I>
</BODY> </HTML>
Output
Output
Sambungan
43
Asas-asas HTML
Output
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>
</BODY> </HTML>
Output
44
Asas-asas HTML
Tag Penutup
Fungsi
<IMG SRC=graphic_file>
Tiada
Sambungan
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
46
Asas-asas HTML
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
Asas-asas HTML
<HTML> <HEAD>
<TITLE> Pautan </TITLE>
</HEAD> <BODY>
<H4> LAMAN WEB </H4>
Laman web merupakan dokumen eletronik yang
mengandungi kombinasi teks, suara
dan grafik.
</BODY> </HTML>
Output
48
Asas-asas HTML
Output
49
Asas-asas HTML
50