PROGRAM LATIHAN GURU

ASAS SAINS KOMPUTER TINGKATAN 1

BAHAGIAN PENDIDIKAN GURU
KEMENTERIAN PENDIDIKAN MALAYSIA

4.0 KOD ARAHAN

Tajuk

4.2 KOD ARAHAN HTML

Topik
A. Objektif
Pada akhir sesi ini, guru dapat:

1. Melakar papan cerita untuk membina laman sesawang yang menggunakan kod arahan
HTML.
2. Menggunakan tags dalam atur cara HTML.
3. Menggunakan paragraph heading dalam atur cara HTML yang dibina.
4. Menggunakan atur cara HTML untuk menghasilkan Banner, Frame dan Menu,
5. Membina pautan teks dan imej dalam atur cara HTML.
6. Menulis atur cara untuk memasukkan imej dalam atur cara HTML.
7. Menghasilkan pull down menu memalui atur cara HTML.
8. Menghasilkan ruang komen melalui atur cara HTML.
9. Mengesan sebarang ralat yang berlaku dalam atur cara HTML yang dibina.
10. Membina lama sesawang interaktif yang memaparkan Banner, Menu, Ruangan Komen,
Frame dan Pull down menu.
B. Kandungan Pengajaran
4.2.1

Papan Cerita Laman Sesawang Menggunakan Kod Arahan

4.2.2

Penggunaan Tags Dalam Atur Cara HTML

4.2.3

Penggunaan Paragraph Heading Dalam Atur Cara HTML

4.2.4

Penghasilan Banner, Frame Dan Menu Dalam Atur Cara HTML

4.2.5

Pembinaan Pautan Teks Dan Imej dalam Atur Cara HTML

4.2.6

Penulisan Atur Cara Untuk Memasukkan Imej Dalam Atur Cara HTML

4.2.7

Penghasilan Pull Down Menu Melalui Atur Cara HTML

4.2.8

Penghasilan Ruangan Komen Dalam Atur Cara HTML

4.2.9

Pengesanan Ralat Dalam Atur Cara HTML

4.2.10

Pembinaan Laman Sesawang Menggunakan Atur Cara HTML

ASAS SAINS KOMPUTER TINGKATAN 1

2016

KOD ARAHAN
4.1 PENGENALAN KOD ARAHAN HTML
HTML pertama kali diciptakan oleh IBM pada tahun 1980. Saat itu tercetus idea untuk
menempatkan elemen elemen yang berguna untuk menandai bahagian suatu dokumen seperti
judul, alamat dan isi dokumen. Pada akhirnya elemen-element tersebut dibentuk menjadi
suatu program untuk melakukan pemformatan dokumen secara automatik. Bahasa
pemprograman untuk melakukan tugas ini disebut sebagai bahasa markup. IBM menamai
program ini sebagai Generalized Markup Language.

Pada tahun 1986, konsep ini disetujui oleh ISO (International Standard Organization)
sebagai standar untuk pembuatan dokumen. Bahasa ini dinamai oleh ISO sebagai Standard
Generalized Markup Language (SGML) HTML sendiri, adalah bahagian dari SGML. Tim
Berners-Lee dari CERN mengemukakan sebuah idea tentang pembuatan skrip bahasa
pemprograman dan dokumen yang dapat diakes oleh semua komputer tanpa melihat jenis
platformnya. Sejak saat itu HTML menjadi lebih popular di bandingkan SGML.

HTML adalah singkatan dari Hyper Text Markup Language. Apabila kita menjelajah
internet, membuka laman web kita akan bertemu dengan HTML. Ini adalah kerana
semua laman sesawang (web) dibina menggunakan bahasa pengaturcaraan HTML.
HyperText adalah metod di mana kita berpindah di sekeliling web, dengan mengklik
sebuah teks yang bernama hyperlink. Hyperlink adalah sebuah teks khusus di internet,
di mana saat teks tersebut diklik, akan membawa kita ke halaman sesawang
selanjutnya/halaman web lain yang telah ditentukan.

Markup adalah hal yang dilakukan oleh tag HTML kepada teks yang ada di dalamnya.
HTML menandai teks yang berada di dalamnya sebagai tip teks tertentu. Misalnya jika
kita menandai sebuah teks dengan tag html <i> maka teks tersebut akan berubah
menjadi italic (huruf miring). Sedangkan jika kita menandainya dengan <b> maka teks
tersebut akan berubah menjadi bold (huruf tebal).

Language bererti bahasa. HTML adalah sebuah bahasa pengaturcaraan. HTML

mempunyai kod dan syntax sepertimana bahasa pengaturcaraan lain.

MODUL KOD ARAHAN HTML

ASAS SAINS KOMPUTER TINGKATAN 1

2016

Bahasa HTML ini masih terus dikembangkan dari masa ke semasa kerana bahasa ini
boleh dipertingkatkan untuk memenuhi keperluan penciptaan laman web mengikut
kehendak pengguna.
4.2 FUNGSI DAN KEGUNAAN HTML
Sebagai bahasa markup internet, HTML memiliki banyak fungsi dan kegunaan. Berberapa
manfaat dari HTML di antaranya
Untuk membina halaman web. Bahasa HTML digunakan untuk membuat laman web.
Semua halaman web pasti dibuat dengan menggunakan HTML.

Sebagai asas sebuah laman web. HTML adalah asas sebelum kita dapat
mengimplementasikan bahasa lainnya seperti CSS (bahasa untuk merekabentuk laman
web), Javascript (bahasa untuk menambah kepelbagaian perilaku laman web) dan PHP
(bahasa programming server laman web).
Untuk menandai teks pada Halaman web. Misalnya, kita dapat menandai sebuah teks
menjadi bergaris bawah dengan menggunakan tag html <u>.
Untuk menandai elemen/bahagian pada halaman web. Sebuah laman sesawang
memiliki berberapa bahagian seperti header, navigasi, main dan footer. Kita dapat
menandai setiap bahagian dengan HTML.
Untuk menampilkan informasi dalam bentuk jadual.
Untuk menambahkan objek seperti banner, menu, frame, pull down menu, imej, audio,
video dan lain-lain ke dalam laman sesawang.
Untuk membina borang dan ruangan komen secara dalam talian.

MODUL KOD ARAHAN HTML

ASAS SAINS KOMPUTER TINGKATAN 1

4.2.1

2016

Papan Cerita Laman Sesawang Menggunakan Kod Arahan

Contoh: Anda dikehendaki melakar papan cerita yang logik untuk laman
sesawang yang hendak dibina.
i. Merancang berapa laman sesawang yang dicadangkan
ii. Merancang pada setiap laman sesawang apakah kandungan yang ingin
dipaparkan
iii. Merancang apakah audio, video dan imej yang ingin disisipkan

4.2.2

Penggunaan Tags Dalam Atur Cara HTML

Contoh: Anda dikehendaki memahami tags HTML berikut;

<head>
<title>
<body> dan
<paragraph>

Rajah 1: Menggunakan head dan title

MODUL KOD ARAHAN HTML

ASAS SAINS KOMPUTER TINGKATAN 1

4.2.3

2016

Penggunaan Paragraph Heading Dalam Atur Cara HTML

Rajah 2: Menggunakan body dan paragraph

MODUL KOD ARAHAN HTML

ASAS SAINS KOMPUTER TINGKATAN 1

4.2.4

2016

Penghasilan Banner, Frame Dan Menu Dalam Atur Cara HTML

Rajah 3: Membina frame dan banner

Rajah 4: Membina menu

MODUL KOD ARAHAN HTML

ASAS SAINS KOMPUTER TINGKATAN 1

4.2.5

2016

Pembinaan Pautan Teks Dan Imej dalam Atur Cara HTML

Rajah 5: Membina pautan teks

MODUL KOD ARAHAN HTML

ASAS SAINS KOMPUTER TINGKATAN 1

2016

Contoh 2: membina pautan imej

<HTML>
<Head>
<a href=www.google.com>
<img src=gambar1.gif width=100 height=80 </img src>
<a/>
</head>
</HTML>

4.2.6

Penulisan Atur Cara Untuk Memasukkan Imej Dalam Atur Cara HTML
<a href="http://www.duniailkom.com">
<img src=gambar1.gif width="200" height="80" </img src>
<a/>
</head>
</HTML>

<table border=1>

<tr><td><H3><center>Laman Pengajaran Dan Pembelajaran Mata Pelajaran Asas Sains

Komputer</center></H3></td></tr>
<p>
</table border=1>

<H5><a href="http://supriadi.blogs.unhas.ac.id/sejarah-html/">Sejarah HTML</H5></a>

<H5>Apakah HTML</H5>
<H5>Pengertian HTML</H5>
<H5>Fungsi HTML</H5>

<a href="http://www.duniailkom.com">
<img src=gambar1.gif width="200" height="80" </img src>
<a/>

</head>
</body>
</html>

MODUL KOD ARAHAN HTML

ASAS SAINS KOMPUTER TINGKATAN 1

2016

Rajah 6: Aturcara memasukkan imej

4.2.7

Penghasilan Pull Down Menu Melalui Atur Cara HTML

Rajah 7: Aturcara pull down menu

MODUL KOD ARAHAN HTML

ASAS SAINS KOMPUTER TINGKATAN 1

4.2.8

2016

Penghasilan Ruangan Komen Dalam Atur Cara HTML

<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<!-- tag form -->
<form action="finish.html" method="get">

Nama: <input type="text" name="nama" value="Nama Anda" />

<br />
<P>
Password: <input type="password" name="password" />
<br />
</P>
Jantina :
<input type="radio" name="jenis_kelamin" value="laki-laki" checked/>
Laki - Laki
<input type="radio" name="jenis_kelamin" value="perempuan" />
Perempuan
<br />

Hobi:
<input type="checkbox" name="hobi_baca" /> Membaca Buku
<input type="checkbox" name="hobi_nulis" checked /> Menulis
<input type="checkbox" name="hobi_mancing" /> Memancing
<br />
<p>
Tempat Lahir:
<select name="Selangor_Selangor" >
<option value="Selangor"> Negeri Sembilan</option>
<option>Melaka</option>
<option value="Johor" checked>Johor</option>
</select>
10

MODUL KOD ARAHAN HTML

ASAS SAINS KOMPUTER TINGKATAN 1

2016

<br />
<P>
Komen Anda:
<textarea name="komentar" rows="5" cols="20">
Sila komen diruangan ini</textarea>
<br />
</P>
<input type="submit" value="Mulai Proses!" >
</body>
</html>

Rajah 8: Aturcara ruangan komen

4.2.9

Pengesanan Ralat Dalam Atur Cara HTML

Aktiviti: Dengan menggunakan kod HTML sila bina satu laman sesawang Pengajaran anda
yang mengandungi;

a) Banner, Frame dan Menu.

b) Pautan teks dan imej
c) Menggunakan pull down menu dan
d) Menghasilkan satu ruangan komen

Apabila siap, anda dikehendaki membuat ujian dan mengesan sebarang ralat yang berlaku
dalam aturcara HTML tersebut.
11

MODUL KOD ARAHAN HTML

ASAS SAINS KOMPUTER TINGKATAN 1

2016

4.2.10 Pembinaan Laman Sesawang Menggunakan Atur Cara HTML

Aktiviti: Hasilkan satu laman sesawang berkaitan panitia anda.

12

MODUL KOD ARAHAN HTML