Bagaimana Nak Buat Laman Web

Struktur Dokumen HTML
Heading
Perenggan (Paragraph)
Properties Untuk Format Text
Kegunaan 'ALIGN'
Garis Pemisah (Line Break)
TAGS
Garis Horizontal
Teks Pra-Format

Struktur Dokumen HTML

HTML hanyalah satu text-file biasa je... selalunya di'extension'kan dengan .htm, .html, .shtml dan lain-lain.HTML ada dua bahagian, iaitu HEAD dan BODY. Bahagian HEAD mengandungi tajuk/'Title' dan bahagian BODY pula mengandungi ape saje...

Contoh untuk membuat dokumen HTML.
1. Mula-mula buka NotePad atau Word ke ape ke asal dia tu pemproses perkataan sudah.
2. pas tu taip je kod seperti di bawah nie :

<html>
<head>
<title> Tajuk disini </title>
</head>
<body>
Isi disini
</body>
</html>

3. Save file sebagai test1.html ataupun nama yang lain asalkan extension dia .html
4. Buka Windows Explorer.
5. Double Click file yang anda dah save tersebut

{ Go Back }

Heading

Satu command yang penting gak ni. Kira macam tajuk besar le atau kepala cerita yang hendak disampaikan dalam HomePage ni. Dia command ialah <Hy>....</Hy> dimana y ialah size Heading dari 1 sampai 6. 1 besar hingga 6 yang kecil.

Contoh le :

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>
<h6>Heading 6</h6>

{ Go Back }

Perenggan (Paragraph)

Biasala kan bila habis satu perenggan mesti le kite kena skip satu line. Command dia cuma <P> pas tu penutupnya pula </P>. Contoh le :
<P>Azimah ialah kawan kepada Solehin.</P>
<P>Tapi kekasih Solehin ialah Rogaya.</P>

Hasilnye :

Azimah ialah kawan kepada Solehin.

Tapi kekasih Solehin ialah Rogaya.

{ Go Back }

Properties Untuk Format Text

Dalam HTML ada dia punya format text sendiri. Antaranya :

<U>...</U> Underline
<B>...</B> Bold
<I>...</I> Italicized
<tt>...</tt> Tulisan Type Writer
<font size=n>...</font> Turut juga ade kepentingan untuk format text.

Contoh :
<font size=+1>Tuk</font> <font size=+2>Guru</font> <font size=+3>Solehin</font> <font size=+2>akan</font> <font size=+1>cuba</font> ajar<font size=-1> anda semua.</font>

Hasil :
Tuk Guru Solehin akan cuba ajar anda semua.

{ Go Back }

Kegunaan 'ALIGN'

Takkan tak biase kot dengan ayat nie... kira dalam bahasa melayu ialah penjajaran... command ini tujuannya ialah untuk kita beritahu samada text yang ditulis adalah jajaran kanan, jajaran tengah atau pun jajaran kiri.

Contoh ade dibawah :

<h1 align=left>Jajaran Kiri</h1>

Jajaran Kiri

<h1 align=center>Jajaran Tengah</h1>

Jajaran Tengah

<h1 align=right>Jajaran Kanan</h1>

Jajaran Kanan

{ Go Back }

Garis Pemisah (Line Break)

Command nie kira macam enter le. Tanpa 'line break' ayat yang kita taip dalam Notepad akan jadi satu line walaupun dah masuk enter. Gunakan command ini
. Contoh le kalau awak taip dalam notepad seperti :
Try 1.
Try 2.
Try 3.
tapi bila view dalam html ia akan jadi seperti ini :

Try 1. Try 2. Try 3.

Untuk mengelakkan terjadi begitu, maka guna command <BR> pada setiap pengakhiran garis.

Contoh :
Try 1.<br> Try 2.<br> Try 3.<br>

Hasil dalam browser... :
Try 1.
Try 2.
Try 3.

{ Go Back }

TAGS

Html sebenarnya hanyalah text file yang dipenuhi dengan 'TAG' sebagai penanda arahan. Alaaa... macam wordstar zaman dulu tu... lebih kurang gitu le... aku rasa memang dia orang ambik konsep yang sama. HTML maknanya 'Hyper Text Markup Language'.

Contoh :
Ko boleh <b>Boldkan</b> dia, dan <I>Italicizedkan</I> dia, <font size=+2>Besarkan</font> dia dan <font size=-2> kecilkan</font> dia atau pun <tt>tulisan mesin taip</tt>.

Hasilnya :
Ko boleh Boldkan dia, dan Italicizedkan dia, Besarkan dia dan kecilkan dia atau pun tulisan mesin taip.

Tanda '<' dan '>' ialah tempat dimana antaranya terletak 'TAG' ni.
Contoh :
<b> » ialah untuk memulakan tulisan bold.
</b>» ialah untuk akhiri tulisan bold.
Tanda '/' maknanya end of command dalam bahasa melayunya... pengakhir command.
Kebanyakan 'TAG' perlukan penutupnya contoh le... bla bla bla tapi ade setengah-setengah tu tak perlukan penutup.

Warning :
Jangan silangkan arahan-arahan yang diberikan nanti HTML tak paham.. tengok le contoh dibawah... :
Betul : Nama <i> saya <b> Azmi </b> cikgu </i> anda.
Salah : Nama <b> saya <i> Azmi </b> cikgu </i> anda.

Hasilnya :
Betul : Nama saya Azmi cikgu anda.
Salah : Nama saya Azmi cikgu anda.

{ Go Back }

Garis Horizontal

Kegunaan Garis horizontal nie ialah untuk membuat pembahagian pada Hompage ko. Kira macam garisan Biasa. Tapi Ingat!!! command nie tak de penutup.

Contoh : <HR>
Hasilnya :

Dalam tag tu ade le option lain boleh letak seperti :
WIDTH = n, n ialah size pixel.
WIDTH = n%, n% ialah peratus panjang daripada saiz screen.
SIZE = n, n ialah ketebalan garisan yang dibuat.
NOSHADE, ialah untuk hilangkan dia punya shade atau bayang2.

Contoh : <hr width=50% size=5>
Hasilnya :

{ Go Back }

Teks Pra-Format

Jika ko orang nak menyusun ayat tanpa menggunakan <BR> ataupun <P>, ko boleh gunakan command <PRE>...</PRE> iaitu Preformatting Text.
Contoh le kalau dalam Kod HTML ko tulis macam nie :
Woooiii!!!! Boleh ke ko tolong       aku.
              Apala.....        tu pun tak
                            boleh buat ke??
Hasilnya :
Woooiii!!!! Boleh ke ko tolong aku. Apala..... tu pun tak boleh buat ke??
Tapi kalau ko guna <PRE></PRE> lihat ape terjadi :
<PRE>Woooiii!!!! Boleh ke ko tolong       aku.
              Apala.....        tu pun tak
                            boleh buat ke??</PRE>
Hasilnya : 
Woooiii!!!! Boleh ke ko tolong       aku.
              Apala.....        tu pun tak
                            boleh buat ke??

{ Go Back }


© 2002 Cikgu Azmi Jaaffar