Modul HTML

Asas Sains Komputer ( ASK ) DRAF
MEMBINA LAMAN WEB MENGGUNAKAN KOD ARAHAN HTML

(Hypertext Markup Language)
PENGENALAN Tapak Web dan Laman Web

Tapak Web (Web-site) atau disebut Web adalah paduan atau gabungan
dokumen-dokumen hyperteks yang mengandungi teks, grafik, animasi,
video dan bunyi
HTML
HTML digunakan untuk membina laman web ( home page ).
Ia adalah bahasa komputer yang sangat ringkas.
HTML agak berbeza dengan bahasa komputer yang lain.
Digunakan untuk menerangkan bagaimana peluncur Internet patut
menayangkan laman web anda.
Bahasa penerangan atau bahasa memformat laman web.
Menggunakan tanda format yang diletakkan di antara tanda lebih
kecil dari < dan lebih besarl dari >.
Boleh juga dikaitkan dengan servis internet yang lain seperti e-mel,
enjian carian, borak dan FTP melalui rantaian atau link.
Contoh-contoh home page atau laman web

6.1 Menggunakan tags dalam aturcara HTML

Tags atau tanda kod HTML yang lazim digunakan dalam membina laman
web (sangat penting)
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>
A. MEMBINA FAIL DOKUMEN HTML YANG PALING ASAS
Menyunting fail HTML pertama
Langkah-langkah :
1. Buka program NotePad

2. Pilih menu File/ New
3. Taipkan baris kod seperti di bawah
< HTML>
< HEAD >
< TITLE> DOKUMEN PERTAMA HTML
< /TITLE
>
< /HEAD>
< BODY>
Taipkan nama anda di sini
< /BODY>
< /HTML>
4. Setelah selesai, pilih menu File/ Save As

5. Simpan (save) fail sebagai DOKUMEN PERTAMA HTML.html
6. Buka fail DOKUMEN PERTAMA HTML.html menggunakan peluncur
web mozila firefox atau internet explorer (IE)
B. MEMFORMAT PERENGGAN
Tanda kod Tanda kod Kegunaan
pembuka penutup
<P> </P> Paragraph
(perenggan), Ia bermula dengan baris
baru dengan baris sebelumnya
kosong. Terdapat yang ketara
<BR> Break
Baris baru tanpa baris kosong
sebelumnya.
Memasukkan teks <body>
Langkah-langkah :
1. Buka fail DOKUMEN PERTAMA HTML.html dengan menggunakan

program NotePad. 2. Kemudian, taipkan teks berikut di ruangan
<BODY>
< HTML>
< HEAD >
< TITLE> PELANCONGAN GEMILANG < /TITLE
>
< /HEAD>
< BODY>
Pelancongan Gemilang adalah
-satunya
satu keperluan percutian anda. Dari servis tiket ke
maklumat destinasi. Kami jadikan percutian anda paling indah di musim cuti ini.
Telefon sekarang!
03-123 1234
< /BODY
>
< /HTML
>
3. Simpan fail dengan dengan Save As sebagai index.html

4. Buka fail ini menggunakan peluncur Mozilla Firefox atau Internet
Explorer
5. Lihat perubahan yang berlaku pada paparan.
6. Tambahkan tanda kod <P> di hadapan teks Telefon sekarang! Dan
kod penutup </P> seperti berkut.
< P>Telefon sekarang

!
03-123 1234/P<
>
7. Reload atau refresh Mozilla atau IE.

8. Di hadapan teks Dari servis, masukkan tanda kod <BR> seperti
berikut
Pelancongan Gemilang adalah

- satunya
satu keperluan percutian anda. <BR> Dari servis
tiket ke maklumat destinasi. Kami jadikan percutianindah
andadi
paling
musim cuti ini.
!
03-123 1234/P<
>
9. Reload semula web browser

10. Simpan fail (Save file)
C. MEMBINA TEKS TAJUK HEADING
Tanda kod Tanda kod Kegunaan

pembuka penutup
<H1> </H1> Format baris sebagai teks bertajuk

terbesar (aras 1)
<H2> </H2> Format baris teks sebagai teks tajuk
aras 2. (aras 2). Saiznya kecil sedikit
dari aras 1.
<H3> </H3> Format teks sebagai teks tajuk aras 3
CONTOH :
HEADING 1
HEADING 2
HEADING 3
HEADING 4
HEADING 5
Langkah-langkah :
1. Buka fail indeks.html dengan menggunakan Notepad

2. Masukkan teks berikut selepas teks <BODY> seperti di bawah.
< HTML>
< HEAD>
< TITLE> PELANCONGAN GEMILANG </TITLE
>
< /HEAD>
< BODY>
< H1>PELANCONGAN GEMILANG</H 1>
Pelancongan Gemilang
adalah satu
- satunya keperluan percutian anda. <BR>Dari servis tik
ke maklumat destinasi. Kami jadikan percutian anda paling indah di musim cuti in
!
03-123 1234/P<
>
< /BODY
>
< /HTML
>
3. Save fail dan refresh web browser

2.3 Menghasilkan banner melalui aturcara
HTML Langkah-langkah :
1. Buka fail index.html menggunakan Notepad

2. Buat satu folder baru -> index.files
3. Buka Mozilla firefox untuk mencari wallpaper merah (red wallpaper),
klik kanan pada mouse dan klik Save image As. Simpan wallpaper
dalam folder index_files
4. Masukkan atur cara seperti di bawah
<HTML>
<HEAD>
<TITLE> PELANCONGAN GEMILANG </TITLE>
</HEAD>
<BODY>
<img src= index_files\index.jpg width= 1020 height= 198>
<H1>PELANCONGAN GEMILANG</H1>
Pelancongan Gemilang adalah satu-satunya keperluan percutian anda. <BR>Dari servis tiket ke
maklumat destinasi. Kami jadikan percutian anda paling indah di musim cuti ini. <P>Telefon
sekarang!
03-123 1234 </P>
</BODY>
</HTML>
5. Save fail. Buka fail index.html menggunakan Mozilla.
2.4 menghasilkan frame melalui aturcara HTML
Langkah-langkah :
1. Buka fail index.html menggunakan Notepad

2. Tambahkan aturcara di bawah untuk menghasilkan frame dalam web
<HTML>
<HEAD>
</HEAD>
<BODY>
<iframe src index.html width= 200 height= 200> </iframe>
Pelancongan Gemilang adalah satu-satunya keperluan percutian anda. <BR>Dari servis tiket ke
maklumat destinasi. Kami jadikan percutian anda paling indah di musim cuti ini. <P>Telefon
sekarang!
03-123 1234 </P>
</BODY>
</HTML>
3. Save fail
2.5 Menghasilkan menu melalui atur cara HTML
Langkah-langkah
1. Tambahkan aturcara di bawah untuk menghasilkan menu

<HTML>
<HEAD>
</HEAD>
<BODY>
<img src= index_files\index.jpg width= 1020 height= 198> <iframe

src index.html width= 200 height= 200> </iframe>
<ul>
<li><a href= #home>Home</a></li>
<li><a href= #news>News</a></li>
<li><a href= #contact>Contact</a></li>
<li><a href= #about>About</a></li> </ul>
Pelancongan Gemilang adalah satu-satunya keperluan percutian anda. <BR>Dari servis tiket
ke maklumat destinasi. Kami jadikan percutian anda paling indah di musim cuti ini.
<P>Telefon sekarang!
03-123 1234 </P>
</BODY>
</HTML>
2. Save fail
2.6 Membina pautan dalam dokumen dan luar dokumen dalam

atur cara HTML
Langkah-langkah :
1. Masukkan atur cara di

bawah 2. Save fail dan
refresh Mozilla
<HTML>
<HEAD>
</HEAD>
<BODY>

<iframe src index.html width= 200 height= 200> </iframe>
<ul>
<li><a href= #about>About</a></li> </ul>
Pelancongan Gemilang adalah satu-satunya keperluan percutian anda.
<BR>Dari servis tiket ke maklumat destinasi. Kami jadikan percutian anda
paling indah di musim cuti ini. <P>Telefon sekarang!
03-123 1234 </P>
<br><a href= http://www.smkparitbunga.com/>Layari laman web kami</a>

<br><a href= http://www.smkparitbunga.com/ target= _blank>Layari laman
web kami</a>
</BODY>
</HTML>
2.7
Menulis aturcara untuk memasukkan imej dalam
atur cara HTML
Langkah-langkah :
1. Buka fail index.html meggunakan

Notepad 2. Masukkan atur cara di
bawah
<HTML>
<HEAD>
</HEAD>
<BODY>

<ul>
<li><a href= #about>About</a></li>
</ul>
03-123 1234 </P>
<center><img src="index_files\03.jpg" alt="" width="128" height="128"></a>

</center>
<br><a href= http://www.smkparitbunga.com/>Layari laman web kami</a> <br><a

href= http://www.smkparitbunga.com/ target= _blank>Layari laman web
kami</a>
</BODY>
</HTML>
3. Save fail
2.8
Menulis Atur Cara Untuk Memasukkan Imej Dan Pautan Serentak

Dalam Atur Cara HTML
Langkah-langkah :
1. Masukkan atur cara di bawah bag menghasilkan imej

<HTML>
<HEAD>
</HEAD>
<BODY>

<ul>
</ul>
03-123 1234 </P>

</center>
<br><center><a href="http://www.smkparitbunga.com">
<img src="index_files\url.jpg" alt="" >
</a></center>

<br><a href= http://www.smkparitbunga.com/ target= _blank>Layari laman web
kami</a>
</BODY>
</HTML>
2. Save fail
2.9
Menghasilkan pull down menu melalui atur cara HTML
Langkah-langkah :
1. Masukkan atur cara di bawah bag menghasilkan pull down menu

2.10
<HTML>
<HEAD>
</HEAD>
<BODY>

<ul>
</ul>
03-123 1234 </P>

</center>
</a></center>
<br><a href= http://www.smkparitbunga.com/ target= _blank>Layari laman web
kami</a>
SILA PILIH TINGKATAN ANDA
<select>
<option value="1 KAA">1 KAA</option>
<option value="1 AMANAH">1 AMANAH </option>
<option value="1 BESTARI">1 BESTARI l</option>
<option value="1 CENDEKIAWAN">1 CENDEKIAWAN </option>
<option value="1 DEDIKASI">1 DEDIKASI </option>
</select>
</BODY>
</HTML>
2. Save fail
Menghasilkan ruangan komen melalui atur cara HTML
2.11
Contoh :
<textarea name="message" rows="10" cols="30"> The cat was

playing in the garden. </textarea>
Langkah-langkah :
<HTML>
<HEAD>
</HEAD>
<BODY>

<ul>
</ul>
Pelancongan Gemilang adalah satu-satunya keperluan percutian anda. <BR>Dari servis tiket
ke maklumat destinasi. Kami jadikan percutian anda paling indah di musim cuti ini.
<P>Telefon sekarang!
03-123 1234 </P>
<center><img src="index_files\03.jpg" alt="" width="128" height="128"></a> </center>
</a></center>
<br><a href= http://www.smkparitbunga.com/>Layari laman web kami</a> <br><a
href= http://www.smkparitbunga.com/ target= _blank>Layari laman web
kami</a>
SILA PILIH TINGKATAN ANDA
<select>
<option value="1 KAA">1 KAA</option>
<option value="1 AMANAH">1 AMANAH </option>
<option value="1 BESTARI">1 BESTARI l</option>
<option value="1 CENDEKIAWAN">1 CENDEKIAWAN </option>
<option value="1 DEDIKASI">1 DEDIKASI </option>
</select>
2.12
<textarea name="message" rows="10" cols="30"> The

cat was playing in the garden.
</textarea>
</BODY> </HTML>

Modul HTML

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Asas Sains Komputer ( ASK ) DRAF

MEMBINA LAMAN WEB MENGGUNAKAN KOD ARAHAN HTML

PENGENALAN Tapak Web dan Laman Web

Contoh-contoh home page atau laman web

6.1 Menggunakan tags dalam aturcara HTML

A. MEMBINA FAIL DOKUMEN HTML YANG PALING ASAS

Menyunting fail HTML pertama

1. Buka program NotePad

4. Setelah selesai, pilih menu File/ Save As

Memasukkan teks <body>

1. Buka fail DOKUMEN PERTAMA HTML.html dengan menggunakan

3. Simpan fail dengan dengan Save As sebagai index.html

< P>Telefon sekarang

7. Reload atau refresh Mozilla atau IE.

Pelancongan Gemilang adalah

9. Reload semula web browser

C. MEMBINA TEKS TAJUK HEADING

Tanda kod Tanda kod Kegunaan

<H1> </H1> Format baris sebagai teks bertajuk

1. Buka fail indeks.html dengan menggunakan Notepad

3. Save fail dan refresh web browser

1. Buka fail index.html menggunakan Notepad

<img src= index_files\index.jpg width= 1020 height= 198>

5. Save fail. Buka fail index.html menggunakan Mozilla.

2.4 menghasilkan frame melalui aturcara HTML

1. Buka fail index.html menggunakan Notepad

<img src= index_files\index.jpg width= 1020 height= 198>

<iframe src index.html width= 200 height= 200> </iframe>

2.5 Menghasilkan menu melalui atur cara HTML

1. Tambahkan aturcara di bawah untuk menghasilkan menu

<img src= index_files\index.jpg width= 1020 height= 198> <iframe

2.6 Membina pautan dalam dokumen dan luar dokumen dalam

1. Masukkan atur cara di

<img src= index_files\index.jpg width= 1020 height= 198>

<br><a href= http://www.smkparitbunga.com/>Layari laman web kami</a>

1. Buka fail index.html meggunakan

<img src= index_files\index.jpg width= 1020 height= 198> <iframe

<center><img src="index_files\03.jpg" alt="" width="128" height="128"></a>

<br><a href= http://www.smkparitbunga.com/>Layari laman web kami</a> <br><a

Menulis Atur Cara Untuk Memasukkan Imej Dan Pautan Serentak

1. Masukkan atur cara di bawah bag menghasilkan imej

<img src= index_files\index.jpg width= 1020 height= 198> <iframe

<center><img src="index_files\03.jpg" alt="" width="128" height="128"></a>

<br><a href= http://www.smkparitbunga.com/>Layari laman web kami</a>

Menghasilkan pull down menu melalui atur cara HTML

1. Masukkan atur cara di bawah bag menghasilkan pull down menu

<img src= index_files\index.jpg width= 1020 height= 198> <iframe

<center><img src="index_files\03.jpg" alt="" width="128" height="128"></a>

<textarea name="message" rows="10" cols="30"> The cat was

<img src= index_files\index.jpg width= 1020 height= 198> <iframe

<center><img src="index_files\03.jpg" alt="" width="128" height="128"></a> </center>

<textarea name="message" rows="10" cols="30"> The

Anda mungkin juga menyukai