Make your own free website on Tripod.com

 

 

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

 

 

Aktiviti 1 : Mencetak Teks dalam Laman Web

 

 

 

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.