TP2543 – ADOBE DREAMWEAVER CS3
1
Makmal 2: HTML/XHTML menggunakan ADCS3
Apa itu HTML/XHTML?
1. HTML (HyperText Markup Language) ialah bahasa markup yang dominan untuk dokumen web.
HTML yang terkini adalah versi 4.0.1 (versi 5.0 masih dalam deraf). Piawaian HTML dikawalselia
oleh World Wide Web Consortium (W3C).
2. HTML ditulis dengan menggunakan tag, sebagai contoh:
<title>Katem FTSM UKM</title>
3. HTML membolehkan dokumen web:
a. Distruktur secara semantik menggunakan tag seperti head <head>, paragraph <p> dan
tag‐tag lain
b. Diformat untuk persembahan menggunakan tag seperti font <font> dan italic <i>
(walau bagaimanapun, tag‐tag ini kebanyakannya sudah digantikan oleh CSS)
c. Disertakan dengan fail imej atau objek multimedia lain
d. Dihubungkan dengan skrip lain seperti CSS dan JavaScript
4. XHTML (Extensible HyperText Markup Language) pula ialah bahasa markup XML yang
merupakan pengembangan daripada HTML. XHTML mempunyai piawaian yang lebih strict untuk
tag, jujukan tag, penulisan elemen dan atribut tag dan penggunaan tanda kutip.
a
b
c
d
TP2543 – ADOBE DREAMWEAVER CS3
2
Struktur dan Elemen HTML/XHTML
1. Kebiasaannya, satu fail HTML/XHTML terstruktur kepada 3 bahagian. Bahagian‐bahagian ini
adalah:
a. Maklumat versi HTML (memperihalkan DTD dan versi HTML)
b. Bahagian <head> (metadata, <title>, <script> dan lain lain)
c. Bahagian <body> (kandungan fail HTML/XHTML)
2. Elemen HTML terdiri daripada:
<p>Ini adalah contoh perenggan.</p>
3. Elemen HTML juga boleh mempunyai attribut:
<a href=”www.ukm.my”>UKM</a>
4. Satu contoh mudah kod HTML/XHTML yang boleh dihasilkan di ADCS3 dan hasilnya di paparan
pelayar web adalah seperti dibawah:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Laman Web Saya</title> </head> <body> Selamat datang ke Laman Web Saya! </body> </html>
Tag pembuka Kandungan elemen Tag penutup
Nama attribut Nilai attribut
Dokumen boleh dipreviu mengikut
pilihan pelayar web menggunakan
kekunci F12.
TP2543 – ADOBE DREAMWEAVER CS3
3
Elemen Headings
1. Tag Headings (Tajuk) digunakan untuk mengindeks dan menstruktur satu halaman web.
2. Headings menggunakan tag <h1>, <h2> hingga <h6> di mana <h1> bersaiz paling besar dan
<h6> paling kecil.
3. Dalam ADCS3, tandakan teks dan gunakan drop‐down menu format di panel Properties untuk
menukar teks kepada elemen headings:
a. Tandakan teks pada dokumen
b. Pilih jenis Headings daripada drop‐down menu Properties
c. Kod HTML yang dijana untuk Headings
Elemen Paragraph dan Line Breaks
1. Tag Paragraph (Perenggan) digunakan untuk mencipta perenggan teks. Paragraph menggunakan
tag <p>…</p>. Secara default, ADCS3 akan membuat perenggan baru apabila kekunci Enter
ditekan pada Document Window.
2. Bahagian teks juga boleh ditanda di dokumen dan gunakan drop‐down menu untuk Format pada
Properties Panel.
3. Untuk memisahkan bahagian teks tanpa menggunakan tag paragraph, tag line breaks <br />.
Tag line breaks tidak mempunyai tag penutup. Untuk membuat line break, gunakan kombinasi
kekunci Shift‐Enter.
a
b
c
Tag perenggan <p>
Tag line break <br />
TP2543 – ADOBE DREAMWEAVER CS3
4
Elemen Unordered List dan Ordered List
1. Tag Unordered List <ul>…</ul>. dan Ordered List <ol>…</ol> boleh digunakan untuk
membuat senarai (list). Tag ordered list menghasilkan senarai berjujukan (1,2,3… atau i, ii, iii)
manakala unordered list menghasilkan senarai tidak berjujukan (seperti senarai bullet points).
2. Kod HTML/XHTML yang dijana untuk senarai adalah seperti contoh berikut (contoh senarai
berjujukan):
… <p>Rukun Islam</p> <ol> <li>Mengucap 2 kalimah syahadah</li> <li>Solat 5 waktu</li> <li>Puasa di bulan Ramadhan</li> <li>Membayar zakat</li> <li>Mengerjakan Haji</li> </ol> …
3. Elemen list ini boleh dihasilkan menggunakan ADCS3:
a. Tandakan teks yang ingin dijadikan senarai pada dokumen
b. Pilih sama ada ordered list atau unordered list
a
b
TP2543 – ADOBE DREAMWEAVER CS3
5
4. Format list boleh diubah dengan menanda list pada dokumen, dan kemudian memilih Text > List
> Properties… pada Menu Bar.
Tambahan
Pelbagai jenis penstailan senarai berjujukan/tidak berjujukan:
Senarai (list) boleh dimanipulasi menjadi
drop‐down menu menggunakan CSS dan
JavaScript (Bab 4 dan Bab 6)
TP2543 – ADOBE DREAMWEAVER CS3
6
Format dan Gaya Teks
1. Format dan gaya elemen seperti teks dalam dokumen. Antara gaya yang boleh diaplikasikan
ialah seperti teks tebal (bold), sendeng (italik), saiz, warna dan jenis font.
2. Antaramuka di bawah menunjukkan format teks yang digunakan pada dokumen dalam ADCS3:
a. Bold (untuk teks tebal)
b. Italik (untuk teks sendeng)
c. Jenis font
d. Saiz teks
e. Warna teks
f. Jajaran kiri, tengah atau kanan
3. Walau bagaimanapun, kebanyakan tag untuk gaya format seperti <font> sudah tidak dijadikan
piawaian (deprecated). Tag untuk format dan gaya digantikan dengan penggunaan Cascading
Style Sheet (CSS) yang akan diterangkan dalam Bab 4.
a b
c d e f
TP2543 – ADOBE DREAMWEAVER CS3
7
4. Terdapat juga tag untuk kesan/gaya lain seperti superscript <sup>, subscript <sub>,
strikethrough <strike>, underline <u> dan lain‐lain. Tag ini boleh dimasukkan secara manual
ke dalam code area dokumen atau di masukkan melalui fungsi ADCS3:
a. Pilih Insert pada Menu Bar
b. Pilih Tag…
c. Pada Tag Chooser window, pilih jenis tag yang ingin dimasukkan
5. Untuk memasukkan aksara khas (special character) ke dalam dokumen, pilih Insert > HTML >
Special Characters dan pilih daripada senarai. Untuk aksara khas lain, pilih Other…
TP2543 – ADOBE DREAMWEAVER CS3
8
Elemen Multimedia
1. Elemen multimedia seperti fail imej, video, audio dan animasi boleh dimasukkan ke dalam
dokumen HTML/XHTML. Fail multimedia akan diselitkan dalam dokumen HTML/XHTML . Oleh
itu, sebaiknya fail‐fail ini disalin ke dalam site yang menempatkan dokumen‐dokumen projek.
2. Untuk menyelitkan fail imej ke dalam dokumen:
a. Tandakan posisi dimana fail imej akan dimasukkan
b. Pilih Insert > Image daripada Menu Bar
c. Pilih fail imej yang akan dimasukkan pada tetingkap Select Image Source.
Previu fail imej
TP2543 – ADOBE DREAMWEAVER CS3
9
d. Masukkan maklumat tambahan jika mahu pada tetingkap Image Tag Accessibility
Attributes.
e. Imej akan dipaparkan pada dokumen dalam Document Window.
3. Untuk menyelitkan fail animasi Flash ke dalam dokumen:
a. Tandakan posisi dimana fail imej akan dimasukkan (seperti langkah untuk menyelitkan
fail imej). Kemudian, pilih Insert > Media > Flash pada Menu Bar.
TP2543 – ADOBE DREAMWEAVER CS3
10
b. Pilih fail animasi Flash daripada tetingkap Select File. Selepas dipilih dan klik OK,
masukkan atribut jika perlu pada tetingkap Object Tag Accessibility Attributes
seterusnya.
c. Placeholder untuk banner animasi Flash akan dipaparkan pada dokumen.
d. Sekiranya wujud, ADCS3 juga akan meminta pengguna menyimpan fail fail JavaScript
yang telah dicipta secara otomatik untuk memaparkan fail animasi/multimedia yang
telah diselitkan. Fail ini akan disimpan dalam folder Scripts di dalam site.
TP2543 – ADOBE DREAMWEAVER CS3
11
Edit Atribut Elemen Multimedia
1. Selepas fail imej atau fail multimedia lain diselit dalam dokumen, beberapa atribut fail boleh
diedit. Contohnya, atribut fail imej yang telah diselit di dalam dokumen boleh ditukar pada
bahagian berikut pada Panel Properties:
a. Beri ID kepada fail imej
b. W/H ‐ Ubah lebar (W) dan tinggi (H) fail imej (dalam piksel)
c. Src ‐ Ubah fail imej lain (gunakan fungsi heret atau folder browse)
d. Link ‐ Jadikan imej sebagai pautan dengan meletakkan URL di sini (diterangkan
seterusnya pada bahagian Pautan HTML/XHTML)
e. Alt ‐ Memberi alternate text kepada imej untuk deskripsi
f. Edit ‐ Fungsi untuk mengedit atribut imej menggunakan Adobe Photoshop: edit,
optimize, crop, resample, ubah brightness/contrast, dan sharpen
g. Border ‐ Ubah atribut border imej (garisan pada perimeter imej)
h. Align ‐ Ubah atribut jajaran imej (left/right/center) serta jajaran vertical
(top/middle/bottom…)
i. Map ‐ mencipta hotspot untuk menjadikan imej sebagai image maps (diterangkan
seterusnya pada bahagian Pautan HTML/XHTML)
a b c
d
e
f g
h i
TP2543 – ADOBE DREAMWEAVER CS3
12
Pautan HTML/XHTML
1. Pautan (hyperlinks) ialah teks atau objek dalam dokumen web yang boleh menghubungkan satu
dokumen kepada bahagian dokumen lain atau kepada dokumen yang lain. Pautan dicipta
menggunakan tag anchor <a>.
2. Terdapat beberapa jenis pautan yang boleh dicipta:
a. Pautan ke dokumen/URL lain dengan tag anchor <a>
b. Pautan ke bahagian dokumen menggunakan named anchor
c. Pautan mailto untuk mel‐elektronik
d. Pautan menggunakan image maps
Tag Anchor <a>
1. Pautan dengan tag anchor <a> membolehkan dokumen dihubungkan ke satu sumber
berdasarkan URL nya. Sebagai contoh, satu pautan ke website Google.com dihasilkan dengan
kod HTML dibawah:
<a href="www.google.com" title="Google" target="_blank"> Klik di sini untuk Google</a>
2. Pautan boleh dicipta dalam dokumen melalui langkah ini:
a. Tandakan teks atau imej yang ingin dijadikan pautan
b. Masukkan pautan yang dikehendaki ke Link di Properties. Pilih opsyen Target: _blank
untuk membuka pautan di tetingkap baru, _parent untuk membuka link ke parent
frame, _self untuk membuka pada tetingkap/frame yang sama, dan _top untuk
membuka fail ke frame paling atas.
TP2543 – ADOBE DREAMWEAVER CS3
13
3. Hyperlink juga boleh digunakan untuk menghubungkan dua dokumen web yang telah dihasilkan:
a. Contohnya, satu pautan dibuat untuk membuka fail2 daripada fail1 dibawah dengan
pautan teks “Link ke fail2.html”
b. Tandakan teks yang ingin dijadikan pautan
c. Klik dan heret ikon Point to File ke fail2 di panel Files (juga boleh masukkan nama fail
secara manual di textfield atau gunakan fungsi browse) dan teks akan berubah menjadi
pautan
TP2543 – ADOBE DREAMWEAVER CS3
14
Tag Anchor <a> dan Named Anchor
1. Pautan dengan tag anchor <a> juga boleh digunakan untuk menanda dokumen dengan
beberapa poin navigasi yang dipanggil named anchor. Ini membolehkan navigasi dibuat pada
mukasurat yang sama tetapi pada seksyen teks yang berbeza.
2. Gambar di bawah menunjukkan contoh satu halaman web yang memaparkan artikel yang
dibahagikan kepada tiga subtopik. Pautan untuk ke subtopik diletakkan di bahagian atas artikel
untuk membolehkan pengunjung menavigasi ke named anchor di subtopik dengan lebih mudah:
3. Untuk membolehkan pautan berfungsi sebagai navigasi ke bahagian berbeza:
a. Tandakan lokasi untuk named anchor [a] dan cipta named anchor dengan memilih Insert
> Named Anchor [b].
a b
TP2543 – ADOBE DREAMWEAVER CS3
15
b. Masukkan nama anchor pada tetingkap Named Anchor. Satu ikon anchor akan
dipaparkan di dokumen pada Design View untuk menandakan lokasi named anchor yang
dicipta.
c. Tandakan teks untuk dijadikan pautan dan pada panel Properties, heret butang Point to
File kepada ikon anchor dalam dokumen. Teks akan bertukar menjadi pautan ke named
anchor.
Pautan Mailto untuk Mel Elektronik
1. Hyperlink boleh digunakan bersama nilai atribut mailto untuk membolehkan pautan mel
elektonik dicipta. Contohnya kod di bawah:
<a href="mailto:[email protected]"> Klik untuk email saya</a>
2. Pautan ini akan melancarkan klien email yang telah ditetapkan pada computer seperti aplikasi
Microsoft Outlook, Outlook Express, Mozilla Thunderbird dan lain‐lain.
3. Untuk mencipta pautan mailto:
a. Tandakan teks untuk dijadikan pautan dan pilih Insert > Email Link
TP2543 – ADOBE DREAMWEAVER CS3
16
b. Masukkan alamat email di tetingkap Email Link
Pautan dengan Image Maps
1. Image maps membolehkan satu fail imej ditandakan dengan beberapa hotspots yang berfungsi
sebagai pautan.
2. Sebagai contoh, fail imej Menara Eiffel dibawah telah dimuatkan ke dalam satu fail HTML, dan
kemudiannya ditandakan dengan 2 hotspots yang berfungsi sebagai pautan. Kod HTML untuk
image map yang dijana adalah seperti di bawah.
… <map name="Map" id="Map"> <area shape="rect" coords="142,246,262,329" href="file1.html" alt="first" /> <area shape="circle" coords="199,428,46" href="file2.html" alt="second" /> </map> …
TP2543 – ADOBE DREAMWEAVER CS3
17
3. Image map boleh dicipta dengan langkah‐langkah berikut:
a. Masukkan fail imej yang ingin dijadikan image map dalam dokumen (Insert > Image)
b. Tandakan imej dan bahagian bawah panel Properties akan memaparkan fungsi untuk
membina image map. 3 jenis bentuk hotspot boleh dihasilkan pada bahagian hotspot
tool [a] iaitu berbentuk empat segi, bulatan dan poligon.
c. Klik pada Rectangle Hotspot Tool [a] dan lukiskan hotspot pada imej [b]. Pautan untuk
hotspot boleh dimasukkan di [c].
Sumber imej: Jabatan Kerja Raya Malaysia
(http://www2.jkr.gov.my/v2/malay/ourServices
/malaysiaRoadmaps.htm)
a
a
b
c
TP2543 – ADOBE DREAMWEAVER CS3
18
d. Hasil akhir dengan menambah beberapa lagi hotspot dengan pautan dan bentuk
berbeza boleh dilihat dibawah. Kod HTML yang dijana juga dipaparkan.
… <img src="malaysianMap1.gif" width="387" height="451" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="poly" coords="300,330,292,305,292,279,276,243,254,229,211,198,162,205,174,259,208,295,247,323" href="www.pahang.gov.my" /> <area shape="poly" coords="295,217,282,230,264,214,251,190,222,147,240,122,270,149,290,175" href="www.terengganu.com.my" /> <area shape="poly" coords="159,259,148,218,147,179,159,153,143,115,118,131,98,159,96,191,107,230,128,255" href="www.perak.net" /> </map> …