KOD
DAN TAJUK MODUL
|
HTML
PROGRAMMING
|
TAJUK
DAN SUBTAJUK
|
1. UTILISE HTML
1.1 Define HTML
1.2 List HTML tag
to create web page.
|
OBJEKTIF
PENCAPAIAN
|
1.1.1
Define the HTML coding to HTML code
standard.
1.1.2
Specify basic HTML tag to create web page
•
HTML
•
Head
•
Title
•
Body
according to HTML code
standard
1.2.1
State HTML tag for
•
Inserting Image, audio, video
•
Creating Hyperlink
•
Creating Button
•
Creating Form
•
Creating Table
according to HTML code standard
|
Hypertext
Markup Language (HTML) adalah sebuah bahasa untuk menghasilkan kandungan di
dalam Web. HTML sendiri adalah bahasa pemprograman yang bebas, maksudnya
tidak dimiliki oleh sesiapapun, perkembangannya dilakukan oleh banyak pihak
di seluruh negara dan boleh dikatakan sebagai suatu bahasa yang dikembangkan
bersama-sama secara global.
Sebuah dokumen HTML sendiri adalah dokumen teks yang boleh
diedit oleh editor teks. Dokumen HTML mempunyai beberapa elemen yang
dikelilingi oleh tag-tag yang bermula dengan symbol < dan berakhir dengan
sebuah symbol >.
Contoh tag adalah <img src=”gambar.gif”/>.Tag ini
fungsinya menampilkan gambar dari fail yang bernama “gambar.gif”. Kemudian,
gambar akan ditampilkan jika fail HTML ini dibuka pada browser.
Contoh
program dan hasilnya.
STRUKTUR
ASAS HTML
Dokumen HTML terdiri atas unsur
html, ditandakan dengan tag <html> awal
dan diakhiri dengan tag html penutup berupa </html>. Dokumen
HTML biasanya mengandungi HEAD dan elemen BODY. HEAD ini di dalamnya mengandungi
tajuk atau <title>. Tajuk akan muncul di bahagian title bar pada
browser.
Kod HTML boleh ditaip
menggunakan sebarang editor teks. Paling mudah adalah menggunakan Notepad
yang merupakan aplikasi dari Microsoft Windows.
1.
Taip kod ini di Notepad.
2.
Klik CTRL + S atau Fail >
Save untuk menyimpan.
3.
Kemudian, pilih All Files di combo box Save as type.
4.
Isikan nama fail HTML
dengan lanjutan .html pada File name. Hasilnya dapat dilihat
setelah klik dua kali pada fail tersebut.
 
TAG-TAG
HTML
1)
Imej / Gambar
<img
src="c:\folder\folder\folder\image.jpg" alt="altname"
height="px" width="px">
·
Lokasi gambar boleh berupa
lokasi di www (seperti www.lokasigambar.com/gambar.jpg) ataupun lokasi yang relatif dari halaman terbuka (seperti
/gambar/gambarlogo.jpg).
Contoh coding meletakkan imej yang diambil dari sumber F iaitu
USB pendrive.
Hasil gambar terpapar bersaiz default kerana nilai saiz
tidak diisytiharkan.
2)
Audio/Bunyi
·
Audio atau bunyi-bunyian
boleh diletakkan (embed) dalam
halaman HTML dengan pelbagai kaedah. Bagaimanapun, memainkan audio tidak
mudah kerana perlu dipastikan fail audio tersebut boleh dimainkan oleh
browsers (Internet Explorer, Chrome, Firefox) dan di semua perkakasan (hardware) seperti PC, Mac, iPad dan
iPhone.
·
Plug-ins merupakan sebuah
program di dalam komputer yang membantu menyokong fungsi-fungsi standard bagi
sesuatu browser. Ianya boleh ditambahkan ke dalam halaman HTML dengan
menggunakan tag <object>
atau <embed>.
HTML
Audio dengan tag <embed> dan <object>
Ø Tag <embed> dan <object> digunakan untuk
‘mengisi’ kandungan luaran (external)
iaitu non-HTML.
Ø Fragmen kod berikut hendaklah dimainkan di dalam fail MP3 yang
telah diletakkan (embedded) di
laman web.
Contoh
tag <embed>: <embed
height= “50” width= “100” src= “horse.mp3”>
Contoh
tag <object>: <object
height= “50” width= “100” data= “horse.mp3></object>
Kekangan :
v Browser yang berlainan akan menyokong (support) format audio yang berlainan juga.
v Sekiranya browser tidak support
format fail tersebut, audio tidak dapat dimainkan (play) tanpa plug-in.
v Audio juga tidak dapat dimainkan jika plug-in tidak dipasang (installed) di dalam komputer
pengguna.
Contoh coding Audio
menggunakan tag <object> yang datanya diambil dari sumber F iaitu
USB pendrive.
Hasilnya,muzik dapat dimainkan. Paparan terhasil setelah PC
diinstal dengan plug-in Windows Media Player Firefox Plugin 1.0.0.8.
3)
Video
·
Mempunyai persamaan dari
segi coding dan ‘platform’ seperti
audio.
·
Kedua-dua tag iaitu <embed> dan <object> masih digunakan bagi
tujuan ini.
Kekangan :
v
Sekiranya browser tidak support Flash, maka video tidak dapat dimainkan.
v
iPad dan iPhone tidak support video berformat Flash.
Contoh coding video
menggunakan tag <object> yang datanya diambil dari sumber F iaitu
USB pendrive.
Hasilnya,video
dapat dimainkan melalui penggunaan plug-in yang sama.
4)
Hyperlink (Link)
·
Tag HTML untuk
mendefinisikan hyperlink adalah <a>.
·
Hyperlink (Link) adalah
perkataan, sekumpulan perkataan, atau imej yang apabila diklik akan ‘pergi’ (jump) kepada dokumen lain yang telah
di ‘link’kan.
·
Atribut yang digunakan
untuk tag <a> ini adalah ‘href’ -- >indikator untuk ke
link berkenaan.
·
Link dapat dibezakan
melalui URL, iaitu :
·
Secara lalai (default), link-link akan terpapar
seperti berikut :
§ Unvisited – Bergarisan dan berwarna biru.
§ Visited – Bergarisan dan berwarna ungu.
§ Active – Bergarisan dan berwarna merah.
Contoh coding membuat link ke laman
web dan e-mel.
Paparan link-link ke web dan e-mel
5)
Jadual (Table)
·
Jadual merupakan sebuah
kotak yang terdiri daripada baris (row)
dan kolum (column).
·
Tag yang digunakan untuk
membuat jadual adalah <table> dan diakhiri dengan </table>.
·
Boleh menambah tanda-tanda
yang lain seperti menentukan border, warna dan sebagainya.
§ Tag <tr> -
Singkatan daripada table row unuk
menuliskan baris biasa pada jadual.
§ Tag <td> -
Singkatan table data untuk menulis
kotak di dalam baris, jadi tag <td> ada di dalam tag <tr>.
§ Tag <th>
-Singkatan daripada table header
untuk menulis kotak biasa seperti <td>, namun penggunaan untuk header
jadual.
Contoh coding membuat Jadual
Pembayaran Gaji
Paparan
jadual yang terhasil
6)
Borang (Form) dan Butang (Button)
·
Borang HTML digunakan
untuk menghantar data kepada pelayan (server).
·
Ianya terdiri daripada
elemen input seperti medan teks, checkboxes, radio-buttons,
submit-buttons, dan banyak lagi.
·
Juga boleh mengandungi
pilihan lists, textarea, fieldset, legend, dan elemen label.
·
Tag yang digunakan untuk mencipta
borang HTML adalah :
<form>
.
input elements
.
</form>
§ Borang HTML – Elemen Input
Ø Perkara paling penting dalam borang adalah elemen <input>.
Ø Elemen <input> digunakan untuk memilih maklumat yang
dimahukan oleh pengguna.
Ø Elemen <input> berbeza bergantung kepada jenis atribut
yang digunakan.
§ Text Fields
§ Password Field
§ Radio Buttons
§ Checkboxes
§ Submit Button
LAMPIRAN
   | |
Tutorial ( HTML PROGRAMMING )
Subscribe to:
Comments (Atom)
No comments:
Post a Comment