Pengenalan Kepada HTML
(HyperText Markup Language)
HTML bukanlah merupakan bahasa pengaturcaraan prosedural seperti C, Fotran, Cobol, atau Pascal. HTML digunakan untuk memformat teks dan dokumen. Modul ini menggunakan JavaScript dan HTML bagi membolehkan anda memperkenalkan pengaturcaraan berorientasikan aksi (action-oriented programming) ke dalam halaman HTML berasaskan Web.Kaedah ini akan membolehkan halaman tersebut come alive bagi mereka yang melihatnya.
Dalam HTML, teks ditanda dengan elemen, dituliskan melalui tag iaitu katakunci yang berada dalam kurungan tajam. Contohnya, elemen HTML sendiri yang menunjukkan bahawa kita menulis laman Web dan di render melalui browser bermula dengan tag <HTML> dan diakhiri dengan tag </HTML>.
Fail HTML (juga dipanggil dokumen HTML) dibina menggunakan penyunting teks. Notepad yang dibina di dalam Windows boleh digunakan sebagai penyunting teks. . Ia boleh diperolehi di dalam panel Accessories dalam senarai Program pada menu Start.
Semua fail HTML biasanya mempunya sambungan .htm atau .html. Berikut adalah contoh skrip fail HTML.
|
|
|
|
1 |
<html> |
|
2 |
|
|
3 |
<!---Laman Web
Pertama Saya --> |
|
4 |
|
|
5 |
<head> |
|
6 |
<title>HyperText
Markup Language</title> |
|
7 |
</head> |
|
8 |
|
|
9 |
<body> |
|
10 |
<P>Selamat
Datang ke Laman Web Saya</P> |
|
11 |
</body> |
|
12 |
</html> |
|
|
|
· Baris 3 iaitu <!---Laman Web Pertama Saya --> merupakan komen dalam HTML. Pelayar (browser) akan mengabaikan teks dan/atau tag yang terletak di dalam komen.
· Baris 5 hingga 7 iaitu
<head>
<title>HyperText
Markup Language</title>
</head>
Menunjukkan bahagian header laman Web. Memasukan title adalah mandatori dalam setiap dokumen HTML.
· Baris 9 iaitu <body> akan membuka elemen BODY. BODY pada dokumen HTML adalah kawasan di mana anda letakkan semua kandungan yang hendak dipaparkan.
· Baris 10 iaitu <P>Selamat Datang ke Laman Web Saya</P> menunjukkan teks yang diletakkan pada satu perenggan iaitu antara tag <P> dan </P>.
· Baris 11 dan 12 iaitu </body></html> menutup bahagian body dan dokumen HTML. Tag penutup </body> ditempatkan sebelum tag <html>.
|
|
|
|
1 |
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
|
2 |
|
|
3 |
<html> |
|
4 |
<head> |
|
5 |
<title>First
Java Program in JavaScript</title> |
|
6 |
|
|
7 |
<script
language = "JavaScript"> |
|
8 |
document.writeln("<h1>Aturcara
JavaScript Pertama</h1>"); |
|
9 |
</script> |
|
10 |
|
|
11 |
</head> |
|
12 |
<body></body> |
|
13 |
</html> |
|
|
|
· Pernyataan DOCTYPE pada baris 1 menunjukkan bahawa jenis dokumen adalah HTML.
· Tag <html> pada baris 3 menunjukkan bahagian permulaan dokumen HTML.
· Baris 4 menunjukkan permulaan bahagian <head>. Sebagai permulaan, JavaScript yang kita tulis akan kelihatan dalam bahagian <head>. Bahagian <head> akan dilaksanakan dahulu sebelum bahagian <body>.
· Baris 5 iaitu <title>First Java Program in JavaScript</title>
menyatakan tajuk dokumen HTML.
· Baris 7 iaitu <script language = “JavaScript”>
menggunakan tag <script> yang menunjukkan teks selepasnya merupakan bahagian skrip.
·
Baris 8 iaitu
document.writeln("<h1>Aturcara
JavaScript Pertama</h1>");
mengarahkah penterjemah JavaScript memaparkah aksara rentetan yang berada dalam tanda pembuka kata (“). document adalah objek yang membolehkan pengaturcara memaparkan teks HTML pada dokumen HTML. writeln adalah method bagi menulis sebaris teks HTML dalam dokumen HTML.
· Tag </script> pada baris 9 menunjukkan akhiran skrip.
· Tag </head> pada baris 11 menunjukkan bahagian akhir <head>
· Tag <body> dan </body> pada baris 12 dalam aturcara ini menunjukkan dokumen ini tidak mengandungi sebarang isi. Baris 13 menunjukkan bahagian akhir dokumen HTML.
Latihan:
Dengan menggunakan tag HTML, paparkan perkataan Aturcara javaScript Pertama pada baris yang berlainan.
Aktiviti 2 : Memaparkan dialog boxes.
|
|
|
|
1 |
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
|
2 |
<html> |
|
3 |
|
|
4 |
<head> |
|
5 |
<title>Mencetak
Beberapa Baris Dalam Dialog Box</title> |
|
6 |
|
|
7 |
<script
language = "JavaScript"> |
|
8 |
window.alert("Aturcara\nJavaScript\nPertama"); |
|
9 |
</script> |
|
10 |
|
|
11 |
</head> |
|
12 |
<body></body> |
|
13 |
</html> |
|
|
|
· Baris 8 dalam skrip iaitu
window.alert("Aturcara\nJavaScript\nPertama");
menggunakan objek window untuk memaparkan dialog box. Method allert bagi objek window diperlukan untuk memaparkan mesej.
· Aksara “\” adalah aksara escape yang menggambarkan aksara khas akan digunakan pada rentetan.
· Aksara \n merupakan aksara baris baru.
Aktiviti 3 : Memaparkan prompt dialog
|
|
|
|
1 |
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
|
2 |
<html> |
|
3 |
|
|
4 |
<head> |
|
5 |
<title>Memaparkan
Prompt Dialog</title> |
|
6 |
|
|
7 |
<script
language = "JavaScript"> |
|
8 |
var nama; |
|
9 |
|
|
10 |
// membaca nama dari pengguna sebagai suatu
rentetan |
|
11 |
nama = window.prompt(“Masukkan nama anda”,”
“); |
|
12 |
|
|
13 |
// memaparkan nama |
|
14 |
Document.writeln(“<h1>Nama anda ialah
“+nama+”</h1>” |
|
15 |
</script> |
|
16 |
|
|
17 |
</head> |
|
18 |
<body></body> |
|
19 |
</html> |
|
|
|
· Baris 8 dalam skrip iaitu Var nama; adalah merupakan pengisytiharan. Katakunci var pada permulaan pernyataan menunjukkan bahawa perkataan nama adalah nama bagi pembolehubah. JavaScript adalah case sensitive – uppercase dan lowercase adalah berbeza.
· Baris 10 dalam skrip iaitu
//
membaca nama dari pengguna sebagai suatu rentetan
merupakan komen sebaris pada JavaScript yang menyatakan maksud pernyataan pada baris 10.
· Baris 11 dalam skrip iaitu nama = window.prompt(“Masukkan nama anda”,” “); membenarkan penggunakan memasukan rentetan. Method prompt objek window memaparkan rentetan yang dimasukkan dalam prompt dialog.
Latihan:
Tuliskan satu aturcara yang dapat menerima input nama, umur dan pekerjaan serta memaparkannya semula dalam bentuk yang sesuai.
Aktiviti 4 : Menjumlahkan dua integer
|
|
|
|
1 |
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
|
2 |
<html> |
|
3 |
|
|
4 |
<head> |
|
5 |
<title>Menjumlahkan
Dua Integer</title> |
|
6 |
|
|
7 |
<script
language = "JavaScript"> |
|
8 |
var nomborPertama, |
|
9 |
nomborKedua, |
|
10 |
nombor1, |
|
11 |
nombor2, |
|
12 |
jumlah; |
|
13 |
|
|
14 |
// membaca nombor pertama sebagai suatu
rentetan |
|
15 |
nomborPertama = window.prompt(“Masukkan
nombor pertama”,” “); |
|
16 |
|
|
17 |
// membaca nombor kedua sebagai suatu
rentetan |
|
18 |
nomborKedua = window.prompt(“Masukkan nombor
kedua”,” “); |
|
19 |
|
|
20 |
// mengubah nombor dari rentetan kepada
integer |
|
21 |
nombor1 = parseInt(nomborPertama); |
|
22 |
nombor2 = parseInt(nomborKedua); |
|
23 |
|
|
24 |
// membaca nombor kedua sebagai suatu
rentetan |
|
25 |
jumlah = nombor1 + nombor2; |
|
26 |
|
|
27 |
// memaparkan hasiltambah |
|
28 |
document.writeln(“<h1>Hasiltambah
ialah “+jumlah+”</h1>”); |
|
29 |
</script> |
|
30 |
|
|
31 |
</head> |
|
32 |
<body></body> |
|
33 |
</html> |
|
|
|
· Baris 8 dan 9 dalam skrip iaitu
nombor1 = parseInt(nomborPertama);
nombor2 = parseInt(nomborKedua);
mengubah dua input rentetan dari pengguna kepada nilai int yang boleh digunakan dalam pengiraan. Fungsi parseInt mengubahkan argumen rentetan kepada integer. Integer yang dikembalikan oleh parseInt akan diumpukkan kepada pembolehubah-pembolehubah nombor1 dan nombor2.
· Pernyataan umpukan pada baris 25 iaitu jumlah = nombor1 + nombor2;
mengira hasiltambah pembolehubah nombor1 dan nombor2 seterusnya mengumpukkan hasilnya kepada pembolehubah jumlah menggunakan operator umpukan =.
· Baris 28 dalam skrip iaitu
document.writeln(“<h1>Hasiltambah
ialah “+jumlah+”</h1>”);
memaparkan hasil penambahan.
Latihan :
Tuliskan satu aturcara yang dapat menerima input tiga nombor dan memaparkan hasildarab ketiga-tiga nombor tersebut.