4.2 Kod Arahan HTMLPPTX

4.
2
KOD ARAHAN HTML
PENGENALAN
 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.
4.2.1
MELAKAR PAPAN CERITA UNTUK
MEMBINA LAMAN SESAWANG
YANG MENGGUNAKAN KOD
ARAHAN HTML
4.2.2
MENGGUNAKAN TAGS DALAM
ATURCARA HTML :
<HEAD>; <TITLE>; <BODY>;
DAN <PARAGRAPH>
A. TAG-TAG/TANDA KOD HTML
Tanda kod Tanda kod Kegunaan
pembuka penutup
<HTML> </HTML> Arahan yang digunakan sebagai asas HTML.
<HEAD> </HEAD> Tag HEAD akan menyebabkan satu tajuk akan kelihatan dikepala
browser pada komputer pengguna.
<TITLE> </TITLE> Tajuk yang hendak dipaparkan di kepala browser yang menerangkan
isi kandungan browser.
<BODY> </BODY> BODY ialah dokumen HTML di mana segala maklumat yang hendak
dopaparkan akan diletakan di sini seperti teks, imej, link, dan
sebarang aturcara istimewa dan multimedia.
pembuka penutup
<P> </P> Paragraph. Ia bermula dengan garis baru dengan baris sebelumnaya
kosong. Atau, digunakan untuk mengasingkan paragraph. Sama
dengan 2 kali enter.
<br> Break. Baris baru tanpa baris kosong sebelumnya

B. ATURCARA HTML
<HTML>
<HEAD>
<TITLE> …………….
</TITLE>
</HEAD>
<BODY>
.
.
.
</BODY>
</HTML>
C. MEMBINA FAIL DOKUMEN HTML
YANG
PALING ASAS
Langkah-langkah menyunting fail HTML kali pertama :
 Buka program NotePad
 Pilih menu File/ New
 Taipkan baris kod seperti di berikut :

<HTML>
<HEAD>
<TITLE> DOKUMEN PERTAMA HTML </TITLE>
</HEAD>
<BODY>
Taipkan nama anda di sini
</BODY>
</HTML>
 Setelah selesai, pilih menu File/ Save As
 Simpan (save) fail sebagai DOKUMEN PERTAMA HTML.html
 Buka fail DOKUMEN PERTAMA HTML.html menggunakan peluncur web
mozila firefox atau internet explorer (IE)
D. Contoh Aturcara HTML
(Membina Head, Title, Body, Paragraph)
<HTML>
<HEAD>
<TITLE> PELANCONGAN GEMILANG</TITLE>
</HEAD>
<BODY>
Pelancongan Gemilang adalah satu-satu keperluan percutian anda.
Dari servis tiket ke maklumat destinasi. Kami jadikan percutian anda
paling indah di musim ini.
Telefon sekarang !
03-123 1234
</BODY>
</HTML>
<HTML>
<HEAD>
Lihat <TITLE> PELANCONGAN GEMILANG</TITLE>
perbezaan
apabila </HEAD>
paragraph <BODY>
(<p>)
digunakan. Pelancongan Gemilang adalah satu-satu keperluan percutian anda. Dari
servis tiket ke maklumat destinasi. Kami jadikan percutian anda paling
indah di musim ini.
<p>Telefon sekarang !
03-123 1234</p>
</BODY>
</HTML>
<HTML>
<HEAD>
Lihat
perbezaan </HEAD>
apabila break
(<br>) <BODY>
digunakan.
Pelancongan Gemilang adalah satu-satu keperluan percutian anda.
<br>Dari servis tiket ke maklumat destinasi. Kami jadikan percutian
anda paling indah di musim ini.
03-123 1234</p>
</BODY>
</HTML>
4.2.3
MENGGUNAKAN PARAGRAPH
HEADINGS DALAM ATURCARA
HTML YANG DIBINA
A. MEMBINA TEKS TAJUK - HEADING

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

B. CONTOH TEKS TAJUK - HEADING
<HTML>
<HEAD>
<TITLE>LAMAN</TITLE>
</HEAD>
<BODY>
<H1>TAJUK TAHAP 1</H1>

</BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
Penggunaan
tajuk heading. </HEAD>
<BODY>
<H1> PELANCONGAN GEMILANG</H1>
Pelancongan Gemilang adalah satu-satu keperluan percutian anda. <BR>Dari servis
tiket ke maklumat destinasi. Kami jadikan percutian anda paling indah di musim ini.
03-123 1234</p>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>LAMAN</TITLE>
Contoh lain. </HEAD>
<BODY>
<H1>Laman Pengajaran Dan Pembelajaran Mata Pelajaran Asas Sains Komputer</H1>

<P>
<H5>Melalui laman ini anda akan diajar bagaimana membina paragraph dalam kod
html. Diakhiri pembelajaran anda dapat menghasilkan paragraph mengikut keperluan
anda
</H5>
<P>
<H5>Adakah anda berjaya membina paragraph</H5>

</BODY>
</HTML>
4.2.4
MENGGUNAKAN ATUR CARA HTML
UNTUK MENGHASILKAN
BANNER, FRAME DAN MENU
A. Membina Frame dan Banner
Tanda kod pembuka Tanda kod Kegunaan

penutup
<Table border> </table Tag yang digunakan untuk menghasilkan baris dan
border> lajur /menghasilkan border/banner
<tr> </tr> Menyediakan baris dalam jadual
<td> </td> Menyediakan sel dalam baris

<HTML>
<HEAD>
</HEAD>
<BODY>
<table border=1>
<tr><td><h3><center>Laman Pelancongan Malaysia
</center></h3></td></tr>
</table border>

Pelancongan Gemilang adalah satu-satu keperluan percutian anda. <BR>Dari servis tiket ke maklumat
destinasi. Kami jadikan percutian anda paling indah di musim ini.
03-123 1234</p>
</BODY>
</HTML>
B. Membina Menu

penutup
<UL> </UL> Tag yang digunakan untuk menghasilkan senarai yang

tidak mengikut susunan
<LI> </LI> Tag bagi senarai item

<HTML>
<HEAD>
</HEAD>
<BODY>
<table border=1>
</table border>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact<</li>
<li>About</li>
</ul>

Pelancongan Gemilang adalah satu-satu keperluan percutian anda. <BR>Dari servis tiket ke
maklumat destinasi. Kami jadikan percutian anda paling indah di
4.2.5
MEMBINA PAUTAN TEKS DAN IMEJ
DALAM ATURCARA HTML
A. Memasukkan imej

penutup
<img src=“pic.gif”> Mendapatkan fail imej dan memasukkan ke dalam

halaman.
<HTML>
<HEAD>
</HEAD>
<BODY>
<table border=1>
</table border>
<img src="F:\KSSM ASK TINGKATAN 1\HTML 2\melawat malaysia.jpg" width=

"388" height= "160">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact<</li>
<li>About</li>
</ul>

B. Membina pautan teks dan imej serentak

penutup
<a> </a> Untuk pautan
<a href= </a> Untuk pautan kepada laman tertentu

“www.wikipedia.co
m”>
<HTML>
<HEAD>
</HEAD>
<BODY>
<table border=1>
</table border>
<a href=“https://ms.wikipedia.org/wiki/Tahun_Melawat_Malaysia”>
<img src="F:\KSSM ASK TINGKATAN 1\HTML 2\melawat malaysia.jpg" width= "388"
height= "160"></a>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact<</li>
<li>About</li>
</ul>

<HTML>
<HEAD>
</HEAD>
<BODY>
<table border=1>
</table border>
<a href=“https://ms.wikipedia.org/wiki/Tahun_Melawat_Malaysia”>
<img src="F:\KSSM ASK TINGKATAN 1\HTML 2\melawat malaysia.jpg" width= "388"
height= "160"></a>
<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>

4.2.6
MENULIS ATURCARA UNTUK
MEMASUKKAN IMEJ DALAM ATUR
CARA HTML
4.2.7
MENGHASILKAN PULL DOWN
MENU MELALUI ATUR CARA HTML
Membina Pull Down Menu

penutup
<select> </select>
<option value> </option>

<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-satu keperluan percutian anda. <BR>Dari servis tiket ke
maklumat destinasi. Kami jadikan percutian anda paling indah di musim ini.
03-123 1234</p>
SILA PILIH TEMPAT YANG INGIN DILAWATI

<select>
<option value=“PAHANG“>PAHANG</option>
<option value=“KELANTAN">KELANTAN</option>
<option value=“KEDAH">KEDAH</option>
<option value=“MELAKA">MELAKA </option>
<option value=“TERENGGANU">TEREANGGANU </option>
</select>
4.2.8
MENGHASILKAN RUANG KOMEN
MELALUI ATUR CARA HTML
Membina RUANG KOMEN

penutup
<textarea name=“ “ </textarea>

rows=“ “ cols=“ “>
Pelancongan Gemilang adalah satu-satu keperluan percutian anda. <BR>Dari servis tiket
ke maklumat destinasi. Kami jadikan percutian anda paling indah di musim ini.
03-123 1234</p>
SILA PILIH TEMPAT YANG INGIN DILAWATI

<select>
<option value=“PAHANG“>PAHANG</option>
<option value=“KELANTAN">KELANTAN</option>
<option value=“KEDAH">KEDAH</option>
<option value=“MELAKA">MELAKA </option>
<option value=“TERENGGANU">TEREANGGANU </option>
</select>
<P>Komen anda :
<textarea name="message" rows="10" cols="30">
Sila komen disini
</textarea>
4.2.9
MENGESAN SEBARANG RALAT
YANG BERLAKU DALAM ATUR
CARA HTML YANG DIBINA
4.2.10
MEMBINA LAMAN SESAWANG
INTERAKTIF YANG MEMAPARKAN
BANNER, MENU, RUANGAN KOMEN,
FRAME DAN PULL DOWN MENU.

4.2 Kod Arahan HTMLPPTX

Diunggah oleh

Informasi Dokumen

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

4.2 Kod Arahan HTMLPPTX

Diunggah oleh

Hak Cipta:

Format Tersedia

4.

<br> Break. Baris baru tanpa baris kosong sebelumnya

Tanda kod Tanda kod Kegunaan

<H3> </H3> Format teks sebagai teks tajuk aras 3

<H1>TAJUK TAHAP 1</H1>

<H1>Laman Pengajaran Dan Pembelajaran Mata Pelajaran Asas Sains Komputer</H1>

<H5>Adakah anda berjaya membina paragraph</H5>

Tanda kod pembuka Tanda kod Kegunaan

<tr> </tr> Menyediakan baris dalam jadual

<td> </td> Menyediakan sel dalam baris

<H1> PELANCONGAN GEMILANG</H1>

Tanda kod pembuka Tanda kod Kegunaan

<UL> </UL> Tag yang digunakan untuk menghasilkan senarai yang

<LI> </LI> Tag bagi senarai item

<H1> PELANCONGAN GEMILANG</H1>

Tanda kod pembuka Tanda kod Kegunaan

<img src=“pic.gif”> Mendapatkan fail imej dan memasukkan ke dalam

<img src="F:\KSSM ASK TINGKATAN 1\HTML 2\melawat malaysia.jpg" width=

<H1> PELANCONGAN GEMILANG</H1>

Tanda kod pembuka Tanda kod Kegunaan

<a> </a> Untuk pautan

<a href= </a> Untuk pautan kepada laman tertentu

<H1> PELANCONGAN GEMILANG</H1>

<H1> PELANCONGAN GEMILANG</H1>

Tanda kod pembuka Tanda kod Kegunaan

<option value> </option>

SILA PILIH TEMPAT YANG INGIN DILAWATI

Tanda kod pembuka Tanda kod Kegunaan

<textarea name=“ “ </textarea>

SILA PILIH TEMPAT YANG INGIN DILAWATI

Anda mungkin juga menyukai