hyper-text markup languagepsm.upm.edu.my/3100/bahan pembelajaran/3100 p7 lamanweb html.pdf ·...
TRANSCRIPT
Prepared by:
Assoc. Prof. Dr Bahaman Abu Samah Department of Professional Development and Continuing Education
Faculty of Educational Studies
Universiti Putra Malaysia
Serdang
Hyper-Text Markup Language
HTML
- HTML bermaksud HyperText
Markup Language
- Fail HTML adalah dokumen teks
mengandungi tag atau arahan
- Tag menentukan bagaimana suatu halaman
web dipaparkan dalam pelayar web
- Setiap fail HTML mesti mempunyai
sambungan .htm atau .html
- Fail HTML boleh disediakan menggunakan
Text Editor seperti Notepad
Tag HTML
► Setiap dokumen web mengandungi arahan
yang dipanggil “TAG”
► Setiap tag terdiri daripada: < , arahan dan >
dan ditulis sebagai <arahan>
► Format tag biasanya datang dalam pasangan
(pair):
Tag buka <arahan> Tag tutup </arahan>
► Contoh: <B> Bold </B>
<HTML>
<TITLE>Title</TITLE>
<BODY>
</BODY>
</HTML>
Body text
Tag Asas
<B> Bold
<I> Italic
<U> Underline
<CENTER> Centre
<BR> Line break
<P> Paragraph break
<HR> Horizontal line
Tag Fon dan Garis
Terdapat enam (6) arahan tajuk: <H1> hingga
<H6>
Tag Tajuk
Terdapat dua belas (12) arahan saiz font:
+6 hingga +1 dan -1 hingga -6
Tag Saiz Fon
► Kod warna Hexadecimal
► Nombor hex menggunakan 16 angka berikut:
0 1 2 3 4 5 6 7 8 9 A B C D E F
► Kombinasi angka di atas menghasilkan warna
tertentu
► Contoh arahan:
<font color="FF3366">Teks</font>
Tag Warna
Hex/RGB/MS Access
http://www.endprod.com/colors/
Carta warna Owens
http://owens4.com/colors.html
Kod Warna Hexadecimal
► Contoh capaian ke dokumen “pengenalan.htm”
<A HREF=“Pengenalan.htm">Pengenalan
</A>
► A = Anchor
► HREF = Hypertext REFerence
Tag Capaian Dokumen
► Contoh capaian ke laman web UPM:
<A HREF="http://www.upm.edu.my">UPM</A>
► A = Anchor
► HREF = Hypertext REFerence
Tag Capaian URL
► Contoh capaian eMel:
<A HREF="mailto:[email protected]">
Klik di sini</A>
► A = Anchor
► HREF = Hypertext REFerence
Tag Capaian eMel
► Masukkan grafik “upmlogo_ani.gif”
<IMG SRC=“Grafik/upmlogo_ani.gif“>
► IMG = Image
► SRC = Source
Tag Grafik
1. Wujudkan folder berikut:
− My Webs
− Grafik
− Muzik
Persediaan Awal
2. Muat turun grafik daripada laman
Web DCE 3001 dan simpan dalam
folder Grafik
3. Muat turun fail lagu daripada laman Web
DCE 3001 dan simpan dalam folder Muzik
4. Guna dua perisian aplikasi
− Notepad – bina halaman Web
− Internet Explorer – preview webpage
5. Taipkan elemen dan tag HTML dalam
Notepad:
− Ikut susunan
− Tak perlu ikut susunan; boleh ditaip di
mana-mana
Folder Document
Folder Grafik
Folder Muzik
Perisian
Taipkan arahan berikut dalam Notepad
<HTML>
<TITLE>Nama Anda</TITLE>
<BODY>
</BODY>
</HTML>
L1: Sediakan Tag Asas
L2: Save sebagai index.htm
► Dalam Internet Explorer, klik menu File | Open
► Pada kotak dialog Open, klik butang Browse
dan buka file index.htm
L3: Preview dalam IE
Hasilnya:
Anda akan masukkan satu arahan pada setiap
masa:
L1: Masukkan elemen dan arahan tambahan
dalam Notepad
L2: Savekan tambahan
L3: Preview hasil dalam Internet Explorer
Seterusnya …
Tag HTML …
<B>
<FONT SIZE=6 COLOR=blue>
Bahaman Abu Samah
</FONT> <BR>
<I>
<FONT SIZE=5 COLOR=red>
Homepage
</FONT>
</B></I>
Teks
<BODY BGCOLOR="#808080">
Warna
<BODY BACKGROUND= “Grafik/
whitemar.jpg">
Grafik
Tag HTML …
Latarbekalang
Grafik
<IMG SRC=“Grafik/upmlogo.gif">
Teks Marquee
<FONT SIZE=4 COLOR=green>
<MARQUEE>
S e l a m a t D a t a n g
</FONT>
</MARQUEE>
<BGSOUND SRC=“Muzik/Berzanji.mp3"
loop="-1">
Berterusan
<BGSOUND SRC=“Muzik/HotelCal.mid“
loop="1">
Bilangan pusingan
Tag HTML …
Muzik
<A HREF=“ProfilDiri.htm“>Profil Diri </A>
Teks
<A HREF=“ProfilDiri.htm">
<IMG SRC=“Grafik/earth2.gif“ BORDER=“0”>
</A>
Grafik
Tag HTML …
Capaian Dokumen
<A HREF= "http://www.upm.edu.my">
Universiti Putra Malaysia </A>
Teks
<A HREF=“http://www.upm.edu.my"> <IMG
SRC=“Grafik/upmlogo.gif"> </A>
Grafik
Tag HTML …
Capaian URL
<A HREF="mailto:[email protected]">
Webmaster</A>
Teks
<A HREF="mailto:[email protected]">
<IMG SRC=“Grafik/email3.gif">
</A>
Grafik
Tag HTML …
Capaian eMel
Hasilnya: