Makmal 2: HTML/XHTML menggunakan ADCS3

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


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.


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 />


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


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)


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


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…


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


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.


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.


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


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.


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


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


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


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> …


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


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> …

Makmal 2: HTML/XHTML menggunakan ADCS3

Documents

Transcript of Makmal 2: HTML/XHTML menggunakan ADCS3