ASAS HTML
Pelajaran 2
Untuk mengelakkan kekeliruan di sini, saya hanya akan menumpukan tag <BODY> . Sementara tag-tag <HTML>, <HEAD> & <TITLE> ditinggalkan. Tetapi jangan pula padam atau lupa  untuk menulisnya setiap kali anda menulis fail html. Jika tidak fail HTML anda tidak menjadi sepenuhnya. 

Pastikan juga tag berikut masih terkandung di dalam fail html anda.

 <BODY>
</BODY>

Kesemua isi dan tag-tag lain akan ditulis di antara kedua-dua tag ini iaitu <BODY>
</BODY>.

 

PENTING
Jika anda telah membuka tag <BODY> dan anda telah memasukkan sesuatu bahan atau tag-tag yang lain selepas itu, jangan terlalu gopoh untuk menutupnya dengan </BODY>. Ini kerana tag penutup </BODY> ditulis hanya jika fail HTML itu akan berakhir, ertinya anda sudah pasti bahawa tidak ada apa-apa lagi yang ditulis di dalam fail tersebut. Jika tidak, anda kena membuka/menulis semula tag  <BODY> pada setiap kali hendak memasukkan perkara baru, dan ianya tentulah menjenuhkan dan menyulitkan.

Taipkan sesuatu di antara tag pembuka dan tag penutup tersebut.

 <BODY>
Sesuatu yang menyeronokkan!
</BODY>
 
Sesuatu yang menyeronokkan!

Bila-bila saja anda mengubah dokumen anda, jangan lupa menyimpannya dan kemudian tekan butang RELOAD pada browser anda. Kadang-kala menekan butang tersebut tidak mendatangkan hasil yang dikehendaki, tetapi sebaliknya tekan SHIFT- Reload.

Saya kira  sudah sewajarnya kita belajar bagaimana untuk menukar warna latarbelakang.

<BODY BGCOLOR="#FFFFFF">
Sesuatu yang menyeronokkan!
</BODY>
 
Sesuatu yang menyeronokkan!
FFFFFF ialah kodganti bagi warna putih. Di sini anda akan perolehi beberapa kod lagi..
 

Di dalam mod 256 warna Netscape mengkelaskan kesemua imej kepada warna-warna ini. Seandainya warna latarbelakang yang ditentukan itu tidak ada di dalam senarai tersebut, Netscape lazimnya akan memilih warna yang terhampir untuk digunakan. Meskipun tidak berapa penting untuk mengetahui bagaimana browser dan warna berinteraksi di antara satu sama lain pada ketika ini, namun anda boleh melihat halaman yang dinyatakan tadi dan kembali semula ke sini selepas itu iaitu di 216 warna Netscape yang masyur.

Anda juga boleh memilih imej sebagai latarbelakang.

<BODY BACKGROUND="swirlies.gif">
Sesuatu yang menyeronokkan!
</BODY>
 

Ini imej latarbelakangnya


Anda akan dapati imej ini (swirlies.gif) di dalam folder yang serupa dengan folder fail html untuk pemudahan pembelajaran. Jika anda melihat tutorial ini melalui Netscape, anda boleh menyimpan imej ini dengan mengklik butang kanan tetikus anda di atas imej dan pilih Save Image As...

Kadang-kadang latarbelakang menjadi lebih menarik bila kita menggunakan imej berpetak seperti di bawah:-

 <BODY BACKGROUND="bluebar.gif">
Sesuatu yang menyeronokkan!
</BODY>
 

Inilah imej latarbelakangnya
 

Mari kita kembali ke halaman yang tidak menggunakan imej seperti yang mula-mula tadi, iaitu latarbelakang berwarna putih (FFFFFF).

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang menyeronokkan!
</BODY>
 
Sesuatu yang menyeronokkan!

Kita boleh menghasilkan huruf tebal (bold).

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <B>menyeronokkan!</B>
</BODY>
 
Sesuatu yang menyeronokkan!
Apa yang kita telah arahkan kepada browser ialah: di <B> mula hasilkan perkataan-perkataan huruf tebal sehinggalah di </B> di mana berhenti dari menghasilkan huruf tebal tersebut. 

Prinsip yang serupa digunakan terhadap huruf condong....

 <BODY BGCOLOR="#FFFFFF">
Sesuatu <I>yang</I> <B>menyeronokkan</B>
</BODY>
 
Sesuatu yang menyeronokkan

...dan bergaris-bawah.

 <BODY BGCOLOR="#FFFFFF">
<U>Sesuatu</U> <I>yang</I> <B>menyeronokkan!</B>
</BODY>
 

Sesuatu yang menyeronokkan!

Kembali semula ke skrin putih tadi.

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang menyeronokkan!
</BODY>
 
Sesuatu yang menyeronokkan!

Kita boleh gunakan tag-tag ini serentak di dalam satu kombinasi:-

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <I><B>menyeronokkan!</B></I>
</BODY>
 
Sesuatu yang menyeronokkan!
Ini ada satu contoh `tag bersarang' (nested tags). Jika anda ingin menggunakan kombinasi tag-tag, elakkan dari mengelirukan browser, dan dilakukan dengan sarang, bukan bertidih. Izinkan saya terangkannya...

    <INI><ITU></INI></ITU>    Tag-tag bertindih.... tidak bagus
   <INI><ITU></ITU></INI>   Tag-tag bersarang... bagus

Satu jenis kesan teks ialah apa yang dinamakan `mono-spaced font', atau TeleType.

 <BODY BGCOLOR="#FFFFFF">
<TT>Sesuatu yang menyeronokkan!</TT>
</BODY>
 
Sesuatu yang menyeronokkan!

Setiap satu huruf menggunakan jarak ruang melintang yang sama.
 
 

Ini ialah jenis biasa -> iiiiiiiiii
oooooooooo
mmmmmmmmmm
Ini ialah jenis monospaced -> iiiiiiiiii
oooooooooo
mmmmmmmmmm

Kita boleh menukar  saiz font  juga... Mudah saja!

 Pertama kita tambah tag <FONT>...

<BODY BGCOLOR="#FFFFFF">
Sesuatu yang <FONT>menyeronokkan</FONT>
</BODY>

 Kemudian tentukan ciri SIZE.

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <FONT SIZE=6>menyeronokkan</FONT>
</BODY>
 
Sesuatu yang menyeronokkan
Font mempunyai  7 saiz:

amat kecil kecil biasa sederhana besar amat besar &  paling besar!
1 2 3 4 5 6 7
Dua perkara yang ingin saya sentuh sekarang. Pertama, <TAG> mengarahkan browser untuk melakukan sesuatu. Sementara ATTRIBUTE masuk ke dalam<TAG> dan memberitahu bagaimana untuk melakukannya.
Perkara kedua ialah nilai mantap. Mungkin anda ketahui, nilai mantap ialah nilai yang browser mengandaikannya jika anda tidak memberitahu perkara-perkara lain.  Satu contoh yang baik ialah saiz font. Nilai mantapnya ialah 3. Jika anda tidak menentukan saiznya, maka nilainya ialah  3.

Setiap browser mempunyai ketentuan mantap sesuatu font - nama font, saiz dan warna. Kecuali jika ianya telah diubah nilai mantapnya ialah Times New Roman 12pt (yang di dalam penerangan saya ialah 3) dan warnanya hitam. Dengan penggunaan browser Netscape 3.0 dan ke atas kita boleh tentukan nama font selain dari nilai mantapnya seperti ARIAL dan COMIC SANS.

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <FONT FACE="ARIAL">menyeronokkan!</FONT>
</BODY>
 
Sesuatu yang menyeronokkan!
Font ini akan hanya kelihatan jika pelayar web mempunyai font berkenaan di dalam komputernya. Izinkan saya ulangi... Jika sesiapa yang melayar web itu tidak mempunyai font yang anda telah tentukan di dalam laman web anda, maka mereka hanya akan dapat melihat nilai mantap sahaja. Jadi berhati-hati sewaktu membuat pilihan jenis font. Arial dan Comic Sans MS mungkin tidak menjadi masalah kerana ramai yang mempunyai kerana kedua-duanya terpasang di dalam Windows. Begitu juga  font bernama:- Impact!.
 
 

Satu lagi tag yang perlu dinyatakan di sini ialah tentang kepala bagi bahagian tertentu (section headings). Ia mempunyai 6 saiz dari1-6. 

<H1>Sesuatu yang menyeronokkan</H1>
<H2>Sesuatu yang menyeronokkan</H2>
<H3>Sesuatu yang menyeronokkan</H3>
<H4>Sesuatu yang menyeronokkan</H4>
<H5>Sesuatu yang menyeronokkan</H5>
<H6>Sesuatu yang menyeronokkan</H6>
 

Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan
Sesuatu yang menyeronokkan
 
 
Satu arahan lain ke atas kepala bahagian  ialah ALIGN... 
<H2 ALIGN="left">Sesuatu yang menyeronokkan</H2>
<H2 ALIGN="center">Sesuatu yang menyeronokkan</H2>
<H2 ALIGN="right">Sesuatu yang menyeronokkan</H2>
 


Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan

Sekarang tiba masanya untuk saya terangkan sedikit mengenai syntax. Anda perhatikan di sana sini saya gunakan tanda petikan (quotation marks), ini penting. Kesilapan yang kecil terutama di dalam menulis arahan akan menyebabkan arahan bercelaru dan laman web akan menjadi huru hara contohnya tertinggal satu tanda > .  Dan tentang penggunaan HURUF BESAR terhadap arahan-arahan di dalam tag. Ini tidak menjadi masalah kerana ia adalah pilihan peribadi sahaja kerana saya mendapati lebih kemas saya menulis arahan tag di dalam HURUF BESAR. Tidak menjadi kesalahan pula jika saya menulis <font> selain daripada <FONT>. Malah saya boleh menulis begini:- <fOnT> .
 

Anda boleh menukar warna font jika anda suka.

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <FONT COLOR="#FF0000"menyeronokkan!</FONT>
</BODY>
 
Sesuatu yang menyeronokkan!

Kita boleh, menggunakan lebih dari satu ATTRIBUTE di dalam satu <TAG>...

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">menyeronokkan!</FONT>
</BODY>
 
Sesuatu yang menyeronokkan

Lagi!

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang<U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">menyeronokkan</FONT></B></I></U>
</BODY>
 
Sesuatu yang menyeronokkan
Saya kira perlu saya jelaskan sekali lagi tentang perlukan tag-tag yang bermacam-macam itu disarangkan.
 
 

<TAG3><TAG2><TAG1>Haaha!</TAG1></TAG2></TAG3>

Tak kira tag yang mana di tulis dahulu. Bagi contoh di atas anda boleh menulisnya begini:-
 

<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>

Atau (tetapi yang ini bertindih),
 
 

<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>

Satu perkara lagi sebelum tamat pelajaran ini ialah tenatang warna-warna capaian. Setiap browser mempunyai setting mantapnya untuk warna teks, warna capaian, warna capaian aktif dan warna capaian yang telah dilawati. Nilai mantapnya ialah...
 
 

Teks ialah hitam
Capaian ialah biru
Capaian aktif ialah merah
Capaian yang telah dilawati ialah ungu

Anda boleh menukarkannya di tag <BODY>.

 <BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
Sesuatu yang menyeronokkan!
</BODY>
 

Sesuatu yang menyeronokkan
Kadang-kadang kita perlu menukarkan warnanya supaya ianya dapat disesuaikan dengan latarbelakang yang kita gunakan dan begitu juga warna-warna capaian. Kita akan belajar perkara ini nanti di pelajaran akan datang di bab CAPAIAN.


    Tulisan berwarna kuning amat jelas di atas latarbelakang hitam.
    Capaian sekarang berwarna merah
    Capaian telah dilawati berwarna coklat
    Dan capaian aktif berwarna hijau.

 

Demikian! Anda telah ketahui tentang bagaimana memanipulasikan teks di dalam dokumen anda. Anda sekarang boleh menghasilkan Huruf merah yang besar atau huruf kecil yang tebal. Anda juga boleh menggunakan Font-font yang lain, atau font-font monospaced.
Malah anda  boleh menulis semacam satu  rollercoaster!

Kod untuk  roller coaster  di sini  jika anda berminat.

LATIHAN ULANGKAJI 

 

  1. Lancarkan Notepad dan bina sebuah fail HTML berikut .
<HTML>
<HEAD>
<TITLE>
Ulangkaji pelajaran 1
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1 ALIGN="center">LAMAN WEB PERCUBAAN<H1>
</BODY>
</HTML>

 

2.    Namakan fail anda, “fail2.html” dan perlihatkan di browser anda.

3.     Buka semula fail “fail2.html” di Notepad dan tukarkan kod BGCOLOR dengan BACKGROUND. (Pastikan anda telah terlebih dahulu menyimpan fail “swirlies.gif” di dalam direktori fail html anda).

 

<HTML>
<HEAD>
<TITLE>
Ulangkaji pelajaran 2
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">LAMAN WEB PERCUBAAN<H1>
</BODY>
</HTML>

4. Simpan semula fail2.html dan kemudian lancarkan di browser


Pel 1 Pel 2 Pel 3 Pel 4 Pel 5 Pel 6 Indeks
TUTORIAL ASAS HTML

[Tutorial Jadual][Tutorial Borang] [Tutorial Bingkai] [Tutorial Pemetaan Imej]
[Java & Javaskrip][Muzik Latarbelakang] [Sumber Lain]
ZULKIPLY HARUN'S ONLINE PORTFOLIO