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