SINTAKS INPUT OUTPUT JAVA, JAVASCRIPT, PHP dan KOD ATUR CARA JAVASCRIPT, PHP

Read More

Handwritten note... ASK T1 HTML

 

ASK T1 : HTML : Ruang Komen dan Frame

1. Create New Folder di Desktop:

2. Nanti, kita akan simpan semua fail HTML dan imej dalam folder ini.

3. Buka perisian Notepad untuk kita taip kod HTML. 

- Cari gambar bunga raya di google dan save ke dalam folder tadi dengan nama bungaraya. (Biasanya format *.jpg atau .jpeg)

Save fail sebagai bungaraya.html

<html>

<head>

<title>BUNGA RAYA</title>

</head>

<body>

<h1>BUNGA RAYA</H1>

<img src="bungaraya.jpg" width="200" height="220">

<img src="bungaraya.gif" width="190" height="230">

<p>

Bunga raya juga dikenali sebagai kembang sepatu. <br>

Selepas mencapai kemerdekaan, Kementerian Pertanian telah mencadangkan bunga yang 

sesuai untuk dipilih sebagai bunga kebangsaan.<br>

Pada 28 Julai 1960, Bunga Raya telah diisytiharkan sebagai Bunga Kebangsaan Malaysia.

</p>

</body>

</html>

4. Apabila dilihat di pelayar web, paparan ini akan terhasil.

5. Sekarang, kita create laman web yang kedua iaitu nasiayam.html. 

-Buka perisian Notepad. File -- New-- taipkan kod di bawah ini.

<html>

<head>

<title>RESEPI NASI AYAM</title>

</head>

<body>

<h1>RESEPI NASI AYAM</h1>

<img src="nasiayam.jpeg" width="300" height="280">

<p>Lauk Ayam:<br>

1 ekor ayam<br>

2 inci halia<br>

4 ulas bawang putih<br>

5-6 ulas bawang merah<br>

</P>

<p>Bahan perap:<br>

1 sudu besar sos tiram<br>

1-2 sudu besar kicap cair<br>

1 sudu besar kicap manis<br>

1-2 sudu besar madu<br>

1 sudu besar minyak bijan<br>

</p>

<p>Kisar halia dan bawang putih dan bawang merah. <br>

Perap ayam dengan bahan kisar selama 30 minit. Ini cuma anggaran. <br>

Kalau belum cukup kerana saiz ayam besar, boleh tambah.<br>

Didihkan air di dalam periuk dan masukkan ayam tadi dan perlahankan api sehingga ayam setengah masak.<br>

Selepas itu angkat ayam tadi dan perapkan dengan bahan perap seketika.<br>

Lumur rata dan gantungkan ayam sekurang kurangnya satu jam.

</p>

<form method="post">

Taipkan komen anda:

<br>

<textarea name="komen" id="komen" cols="30" rows="10">

</textarea>

<br>

<input type="submit" value="HANTAR">

</body>

</html>

6. Paparan pada pelayar web.

7. Pada perisian Notepad, klik File --New --Taipkan kod HTML untuk membina frame 2 lajur; 

Save sebagai frame2lajur.html

<html>

<head><title>ASK T1 : BELAJAR FRAME 2 LAJUR</title>

</head>

<frameset cols="*,*">

<frame src="bungaraya.html" name="menu">

<frame src="nasiayam.html" name="main">

</frameset> 

<body>

</body>

</html>

8. Paparan yang terhasil pada pelayar web.

9. Pada perisian Notepad, klik File --New --Taipkan kod HTML untuk membina banner. 

Save sebagai banner.html

<html>

<head><title>ASK T1 : BELAJAR FRAME MUDAH</title>

</head>

<banner>

<img src="banner.gif" width="1330" height="135">

</banner>

<body>

</body>

</html>

10. Paparan untuk banner.

11. Pada perisian Notepad, klik File--New--Taipkan kod HTML untuk mencipta frame3 baris

.

<html>

<head><title>ASK T1 : BELAJAR FRAME MUDAH</title>

</head>

<frameset rows="40%,*">

  <frame src="banner.html" name="banner">

  <frameset cols="45%,55%">

    <frame src="bungaraya.html" name="kiri">

    <frame src="nasiayam.html" name="kanan">

  </frameset>

</frameset>

<body>

</body>

</html>

12. Paparan yang terhasil.

13. Pada perisian Notepad, klik File--New--Taipkan kod HTML untuk mencipta 3 frame.

<html>

<head><title>ASK T1 : BELAJAR FRAME MUDAH</title>

</head>

<frameset rows="30%,70%">

  <frame src="banner.html" name="banner">

  <frameset cols="25%,75%">

    <frame src="bunga.html" name="kiri">

    <frame src="nasiayam.html" name="kanan">

  </frameset>

</frameset>

<body>

</body>

</html>

14. Paparan 3 frame akan kelihatan seperti berikut:

ASK T1 : 4.2.1 PAPAN CERITA

 Buku Teks ms 112 - 113

https://docs.google.com/presentation/d/e/2PACX-1vR0dwReb-HgTGLCj3FKB8bz_2krY6syDzoFi0EEX80yQ2FtSekbt6n8wYkbnw0gMuoUxle8YpBP76PC/pub?start=true&loop=false&delayms=10000

Sumber imej daripada google.

ASK T1 : Sub 4.2 Kod Arahan HTML (Pengenalan)

Rujuk buku teks ASK tingkatan 1 mukasurat 111

https://docs.google.com/presentation/d/e/2PACX-1vR0dwReb-HgTGLCj3FKB8bz_2krY6syDzoFi0EEX80yQ2FtSekbt6n8wYkbnw0gMuoUxle8YpBP76PC/pub?start=true&loop=false&delayms=10000

SK T5 : PENGENALAN HTML, CSS, JAVASCRIPT

Get the idea:

Mahir (2021) | Menengah Atas - Sains Komputer, Tajuk : Menengah Atas - Sains Komputer

CSS dan HTML oleh Cikgu Che Noor Ashikin Binti Zakaria

https://www.youtube.com/watch?v=9ocqCWkx_9s

Mahir (2021) | Menengah Atas : Sains Computer Laman Web Interaktif (Siri 2) : JAVASCRIPT

Guru : Wan Rafik Bin Wan Ismail

https://www.youtube.com/watch?v=wCetC1X_JkA&t=427s

https://www.youtube.com/watch?v=nFHXxJODkbo

https://www.youtube.com/watch?v=sG3Z0tmNkj4

https://www.youtube.com/watch?v=hSkjAZXjI1s

https://www.youtube.com/watch?v=GWB1zJCeBT0

https://www.youtube.com/watch?v=1wAbUzHBu3Y

HTML (Hypertext Mark up Language)

HTML atau Hypertext Markup Language ialah bahasa markup standard yang digunakan oleh pereka web profesional bagi mereka bentuk laman web.

Dokumen HTML adalah mengenai konsep bagaimana dokumen dipaparkan. 

Dokumen HTML juga ialah konsep bagaimana elemen teks, audio, video serta grafik disusun agar mudah dibaca dan difahami oleh pelawat laman web. 

Untuk menerangkan struktur bagi setiap laman web, kod HTML atau elemen HTML digunakan. 

Elemen biasanya terdiri daripada dua tag yang berpasangan, iaitu: start tag dan close tag. 

Kandungan yang akan dipaparkan pada web akan berada di antara start tag dengan close tag.

Semua elemen HTML mengandungi atribut. Atribut mengandungi maklumat tambahan bagi setiap elemen HTML dan biasanya ditempatkan di start tag. Terdapat dua bahagian atribut:

Atribut nama 

Atribut nilai

Sumber : https://dlpng.com/png/7183819

Sumber : http://web.simmons.edu/~grabiner/comm244/weekone/html-attributes.html

Sumber : https://www.pinterest.com/pin/33847434675371242/

CSS (Cascading Style Sheets)

Cascading Style Sheet (CSS) ialah salah satu bahasa pengaturcaraan yang merupakan tambahan (extension) kepada HTML. 

CSS membenarkan perubahan kepada gaya sesuatu halaman web dan menerangkan persembahan bagi sesuatu dokumen HTML.

HTML dengan CSS (kiri) dan tanpa CSS (kanan)
Sumber : https://www.dummies.com/programming/what-does-css-do/

Sumber : https://jorcus.com/getting-started-with-css/

Laman web yang bagus untuk bacaan tentang Inline CSS, Internal CSS dan External CSS.

Sintaks CSS terdiri daripada selector dan declaration block. 

Selector ialah apa/bahagian tag HTML mana yang kita hendak style/hias.

Elemen dalam declaration block memberitahu bagaimana untuk stylekan/hiaskan. Cth warna, saiz dll.

Setiap declaration block mengandungi property dan value(nilai).

Sumber : https://wordpress.com/support/css-basics/

Sumber : https://blitzen.com/blog/how-to-learn-to-css-style-code-in-15-minutes-or-less/

Declaration block boleh ada satu atau lebih declaration(property dan value) dan diasingkan menggunakan semikolon (;)

CSS declaration mesti berakhir dengan semikolon, dan declaration block mesti berada dalam curly braces {}

Sumber : https://puzzleweb.ru/en/css/1_css_syntax.php

Sumber : https://www.wwp.northeastern.edu/outreach/seminars/xslt_2011-06/presentations/xslt/mdh_css-for-xhtml-intro_10.xhtml

JAVASCRIPT

JavaScript menyediakan keupayaan pengaturcaraan untuk memproses sesuatu tugas berdasarkan permohonan yang diterima daripada klien.

Kod JavaScript akan ditulis bersama-sama dalam kod HTML. 

Jika HTML tidak mempunyai sebarang skrip yang ditulis di dalamnya, browser akan menghasilkan laman web berdasarkan kod HTML tersebut.

Kod JavaScript ditulis di antara tag ‘<script>’ dengan ‘</script>’

Terdapat dua cara kod JavaScript ditulis dalam HTML:

1 Explicit embedding - kod JavaScript diletakkan dalam atau bersama-sama kod HTML

2 Implicit embedding - meletakkan kod JavaScript dalam satu fail sendiri

yang mempunyai extension “.js” seperti contoh myScript.js dan akan dipanggil jika ingin digunakan.