Di sini kita akan mempelajari bagaimana browser melaksanakan
tugasnya.
Pertama kita lihat contoh di bawah...
<BODY BGCOLOR="#FFFFFF">
Sesuatu yang menyoronokkan
umpama berada di pesta!
</BODY>
 Sesuatu yang menyeronokkan
seperti berada di pesta! |
<BODY BGCOLOR="#FFFFFF">
Hai!
Apa
yang
berlaku
di sini??
</BODY>
| Hai! Apa yang berlaku
di sini?? |
Browser tidak mengenali `formatting' kecuali ia diberitahu. Sekiranya
tidak diberitahu ia akan memaparkan tulisan itu di dalam satu barisan panjang
meskipun hasrat anda sebenarnya hendak menulis di dalam beberapa garisan,
bukan satu. Jika anda ingin ke barisan lain, sila tentukan dengan menggunakan
tag <BR>.
<BODY BGCOLOR="#FFFFFF">
Hai!<BR>
Apa<BR>
yang<BR>
berlaku<BR>
di sini??
</BODY>
Hai!
Apa
yang
berlaku
di sini?? |
<BR> bermaksud- mula dengan baris baru. Satu lagi tag ialah
<P>. Ia bertindak serupa dengan <BR> iaitu pergi ke barisan
lain, tetapi tambah lagi satu baris kosong.
<BODY BGCOLOR="#FFFFFF">
Hai!<P>
Apa<P>
yang<P>
berlaku<P>
di sini??
</BODY>
| Hai!
Apa
yang
berlaku
di sini?? |
<BR> dan <P> adalah contoh-contoh tag yang berdiri sendiri, maksudnya
ia tidak perlu kepada tag penutup.
Bagaimana pula nak menjarakkan perkataan?
Cuba lihat...
<BODY BGCOLOR="#FFFFFF">
Sesuatu
yang menyeronokkkan
</BODY>
| Sesuatu yang menyeronokkan |
Browser tak mengenali ruang jarak yang melebihi satu kecuali di arahkan.
Terdapat satu kod kecil untuk arahan jarak ruang dan digunakan secara
berturut-turut jika lebih besar jarak ruang yang hendak ditunjukkan iaitu
->
Kita cuba...
<BODY BGCOLOR="#FFFFFF">
Sesuatu
yang
menyeronokkan
</BODY>
| Sesuatu
yang menyeronokkan |
Tanda & bermaksud kita sedang memulakan
satu simbol baru manakala ; bermaksud tamat penggunaan simbol
tersebut. Terdapat enam simbol istimewa (Nota:- ia perlu ditulis di dalam
huruf kecil)
-
(ruang jarak antara perkataan)
-
< (< simbol kurang daripada)
-
> (> simbol besar daripada)
-
& (& ampersand)
-
" (" pengikat kata)
-
­ ( sempang)
Terdapat juga beberapa simbol istimewa yang lain
untuk rujukan anda.
Mengketengahkan teks. Cuba lihat di bawah:-
<BODY BGCOLOR="#FFFFFF">
<CENTER>Sesuatu yang menyeronokkan!</CENTER>
</BODY>
|
Sesuatu yang menyeronokkan!
|
Anda boleh ketengahkan satu huruf, perkataan, ayat atau keseluruhan
halaman tertakluk dimana tag <CENTER> bermula dan di mana anda
letakkan tag akhirnya </CENTER>.
Sekarang kita belajar bagaimana memasukkan imej ke dalam laman web.
Kita gunakan imej ini sebagai contoh.
Anda boleh tentukan pemasukan imej dengan tag <IMG>.
<BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>
Kodnya:-
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="zura.jpg">
</BODY>
Seperti yang dipaparkan, imej itu akan bersaiz sama seperti
imej sebenar. Cuba lihat pula yang ini:-
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="zura.jpg" WIDTH=200 HEIGHT=68>
</BODY>
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="zura.jpg" WIDTH=20 HEIGHT=100>
</BODY>
Anda boleh menentukan sebarang ukuran yang sesuai untuk mengubah ukuran
asal sesuatu imej. Dan ia ada kegunaannya. Cuba lihat contoh di bawah iaitu
dengan satu titik merah yang kecil ->
<-. Ia adalah segiempat tepat 2x2. Perhatikan apa yang berlaku...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5><P>
<CENTER><IMG SRC="red_dot.gif"
WIDTH=2 HEIGHT=200></CENTER>
</BODY>
Sedikit nota tentang imej
Browser hanya mengenali imej yang berada di dalam format gif atau jpg.
Jika anda menggunakan format yang lain ianya perlu ditukarkan ke dalam
bentuk gif atau jpg. Hal ini akan diterangkan lebih lanjut di pelajaran
akan datang.
LATIHAN ULANGKAJI
- Lancarkan
Notepad dan bina sebuah fail HTML berikut .
|
<HTML>
<HEAD>
<TITLE>
Ulangkaji Pelajaran 3
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">LAMAN WEB PERCUBAAN</H1>
<br>
<br>
<FONT COLOR="#FF0000" FACE="ARIAL"
SIZE="4">Ini adalah <B>pengalaman
pertama</B> saya membina <U>Laman
Web</U>!</FONT>
<br>
<br>
<FONT COLOR="#000000" FACE="ARIAL"
SIZE="4">Menjadi atau tidak, <I>kita tunggu dan
lihat sebentar lagi</I></FONT>
</BODY>
</HTML>
|
2.
Simpan fail dengan nama “fail3.html” dan lancarkan di browser anda.
3.
Buka semula fail “fail3.html” di Notepad dan tambahkan kod-kod
berkenaan.
|
<HTML>
<HEAD>
<TITLE>
Ulangkaji Pelajaran 3
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">LAMAN WEB PERCUBAAN 1</H1>
<br>
<br>
<FONT COLOR="#FF0000" FACE="ARIAL"
SIZE="4">Ini adalah <B>pengalaman
pertama</B> saya membina <U>Laman
Web</U>!</FONT>
<br>
<br>
<FONT COLOR="#000000" FACE="ARIAL"
SIZE="4">Menjadi atau tidak, <I>kita tunggu dan
lihat sebentar lagi</I></FONT>
<br>
<br>
<center>
Namun saya yakin saya akan berjaya
seandainya saya berusaha bersungguh-sungguh untuk memahami bahasa HTML
ini.
</center>
</BODY>
</HTML> |
4. Simpan semula fail anda dengan nama yang sama
(fail3.html) dan lancarkan di browser anda.
5.
Untuk latihan ini, anda dikehendaki menyimpan sekeping gambar berformat
gif atau jpg di direktori html anda dan kita mengambil contoh gambar zura.jpg.
Buka semula fail3.html di Notepad dan tambahkan
kod berikut:-
|
<HTML>
<HEAD>
<TITLE>
Ulangkaji Pelajaran 3
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">LAMAN WEB PERCUBAAN </H1>
<br>
<br>
<FONT COLOR="#FF0000" FACE="ARIAL"
SIZE="4">Ini adalah <B>pengalaman
pertama</B> saya membina <U>Laman
Web</U>!</FONT>
<br>
<IMG
SRC="zura.jpg">
<br>
<FONT COLOR="#000000" FACE="ARIAL"
SIZE="4">Menjadi atau tidak, <I>kita tunggu dan
lihat sebentar lagi</I></FONT>
<br>
<br>
<center>
Namun saya yakin saya akan berjaya seandainya saya berusaha
bersungguh-sungguh untuk memahami bahasa HTML ini.
</center>
</BODY>
</HTML> |
