bann
pendidik
quest
TOP 5 of CARI  
 PANDUAN MEMBINA LAMAN WEB
Klik di sini sekiranya anda ingin menghubungi penulis memberikan ceramah / kursus berkenaan dengan Pembinaan Laman Web di tempat anda atau menelefon terus talian 09-6184777/888/999
 
 PENGENALAN
M enciptakan dokumen untuk Web bukanlah suatu hal yang hanya dapat dilakukan oleh para profesor maupun sarjana lulusan ilmu komputer sahaja. Ini karena, untuk membina dokumen untuk Web, anda hanya perlu mempelajari bahasa yang digunakan untuk membuat dokumen tersebut yaitu HTML, atau Hypertext Markup Language. HTML adalah sebuah bahasa yang mudah untuk dipelajari dan diciptakan supaya orang awam yang profesinya bukan di bidang komputer dapat menguasainya dengan cepat.
LEMBARAN ini hanya berhasrat untuk dijadikan rujukan - dan tidak sebagai sebuah buku teks. Sepastinya ia tidak dapat menampung untuk menjawab semua persoalan anda berhubung dengan HOMEPAGE. Namun risalah kecil HTML ini amat berguna sebagai satu titik permulaan di dalam penjelajahan dunia INTERNET yang amat luas. SELAMAT MENCUBA!!!

Anda Sudah Bersedia?
Kita lihat dahulu INDEKS

TUTORIAL I - PANDUAN MENULIS HTML

Indeks

  • Meletakkan Pembilang Pengunjung. 
  • Melompat di dalam satu dokumen yang sama. 
  • Melompat ke satu dokumen di dalam komputer yang sama. 
  • Melompat ke dokumen di dalam komputer yang berlainan. 
  • Menambahkan grafik dan lukisan pada halaman anda. 
  • Penyunting-penyunting HTML. 
  • Sambungan Rujukan HTML . 
  • Di Mana Hendak Memperolehi Sumber Imej dan Grafik. 
  • TIPS (index). 
  • Melihat beberapa Home Page Yang Mudah. 
    		•

    Apa itu HTML?

    HTML adalah ringkasan daripada Hypertext Markup Language. Gunanya arahan HTML di dalam sebuah dokumen Web adalah untuk mengatur struktur tampilan dokumen tersebut dan juga untuk menampilkan "links" atau sambungan ke lokasi di internet yang lain. Sebenarnya, sebuah dokumen HTML atau Web, hanyalah sebuah dokumen teks yang berisi arahan-arahan HTML. Biasanya sebuah dokumen HTML disimpan dengan menggunakan nama belakang .html (bagi sistem operasi UNIX, Macintosh® dan Windows95®) atau .htm (bagi Windows® 3.1). Untuk membuka sebuah dokumen HTML, bukalah menu File di browser anda dan klik Open File.

    Untuk membuat sebuah dokumen HTML, anda harus mengerti sintaks dari HTML itu sendiri. Sebuah instruksi HTML biasanya berbentuk seperti ini:

    <TAG>OBJEK</TAG>

    atau

    <TAG> <==> TAG pembuka
    OBJEK
    </TAG> <==> TAG penutup

    Dari contoh di atas, TAG adalah instruksi(arahan) yang akan dilaksanakan oleh si Web browser ke atas OBJEK. Jika ada TAG pembuka, selalu ada TAG penutup kecuali dalam beberapa kes tertentu. TAG penutup harus selalu diawali dengan "/". Untuk lebih mengerti apa pengaruh TAG terhadap OBJEK, mari kita lihat contoh di bawah ini:

    <CUCI>BAJU</CUCI>

    atau

    <CUCI>
    BAJU
    </CUCI>

    Di sini TAG diganti dengan CUCI dan OBJEK diganti dengan BAJU. Jika Web browser anda dapat mencuci baju, pada waktu ia membaca arahan ini, ia akan mencuci baju. Dalam dunia HTML, biasanya TAG adalah arahan untuk tampilan sesuatu OBJEK.

    Pergi Ke Indeks.

    WARNA

    Warna, Imej Latarbelakang, dan lain-lain ciri adalah di kawal oleh tag-tag <BODY.

    Anda boleh mengawal atau menukar warna Latar belakang, teks, and juga sambungan-sambungan di dalam Home Page anda dengan menggunakan tag-tag </BODY ini. Untuk mendapatkan warna tertentu, tag <BODY ditulis seperti ini : <BODY bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">

    Anda boleh menulis semua tag di atas (bgcolor, text, link, vlink or alink) atau hanya mengambil sebahagian yang diperlukan sahaja. xxxxxx digantikan dengan nombor atau abjad atau campuran kedua-duanya yang akan menghasilkan satu warna tertentu seperti:

    Nilai-nilai ini mewakili nilai hexidecimal kombinasi merah/hijau/biru yang menentukan pula warna berikutnya. Anda boleh merujuk ke SINI untuk meklihat nilai-nilai hex bagi 216 warna yang lazim. Penerangan yang lanjut amat terbatas di sini, justeru itu dicadangkan anda ke hexidecimal color converter. Dengan kombinasi yang betul, pelbagai warna dapat diwujudkan.

    MENGGUNAKAN IMEJ SEBAGAI LATARBELAKANG
    Imej boleh digunakan sebagai latarbelakang untuk menjadi Laman Web anda lebih menarik. Imej mesti di dalam bentuk gif atau jpg. Kodnya berbeza sedikit iaitu BODY BGCOLOR digantikan dengan BODY BACKGROUND. Contohnya.

    <BODY BACKGROUND="imej1.gif" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx">

    INGATAN: Seandainya imej anda terang, gunakan warna TEKS yang gelap, begitulah sebaliknya seandainya imej anda gelap gunakan warna TEKS yang terang.
    Cuba lihat contoh-contoh yang saya sediakan ini:-
    1) CUBAAN PERTAMA
    2) CUBAAN KEDUA
     

    DI MANA HENDAK MEMPEROLEHI GRAFIK?
    Anda boleh mendapatkan grafik untuk latarbelakang di sini:-
    ZUL's COLLECTION

    CADANGAN: Mulakan dengan meletakkan the tag <BODY BGCOLOR="#ffffff" sebagai item pertama di tetingkap isi teks. Ini akan memberikan anda kombinasi warna yang digunakan di halaman ini. Bila anda berjaya, anda boleh mencuba menggunakan warna-warna lain dengan menukar kodnya.

    Pergi Ke Indeks

    GARISAN LINTANG

    Anda boleh memasukkan satu garis melintang (garis pemisah di dalam dokumen anda dengan menyelitkan tag <HR. Nilai mantapnya bersaiz penuh, nipis dan berlorek seperti berikut:

    Memperindahkan tag ini, seperti yang telah disokong oleh kebanyakan browser masakini telah memungkinkan penampilan garis-garis yang lebih menarik. Dengan menambah LINE=NOMBOR, ketebalan garis ini dapat diubah. Jajaran juga dapat dikawal mudah dengan penambahan ALIGN=LEFT/RIGHT/CENTER. Ketebalan garis boleh diubah dengan menambahkan WIDTH=PERATUS. Satu garis hitam boleh dibuat dengan meletakkan arahan:NOSHADE.

    Kombinasi pembaharuan-pembaharuan ini, <HR ALIGN=LEFT WIDTH="50%" SIZE=10 NOSHADE> akan mewujudkan satu garis hitam yang tebal di sebelah kira, sepanjang separuh halaman.

    Nota: Garis-garis "fancy" yang banyak digunakan di dalam halaman-halaman Web tidaklah menggunakan tag ini <HR. Sebaliknya mereka menggunakan imej grafik yang dibentuk terlebih dahulu. .

    Pergi Ke Indeks

    LIS BERNOKTAH

    Anda boleh mencipta lis bernoktah dengan menggunakan tag <UL (unordered list). Formatnya ialah:

    <UL>
    <LI> item satu
    <LI> item dua
    <LI> item tiga
    </UL>

    Lis tersebut akan kelihatan seperti berikut:

    Pergi Ke Indeks.

    LIS BERNOMBOR

    Anda boleh mencipta lis bernombor dengan menggunakan tag <OL (ordered list) tag. Formatnya ialah::

    <OL>
    <LI> item satu
    <LI> item dua
    <LI> item tiga
    </OL>

    Lis itu akan kelihatan seperti ini:

    1. item satu
    2. item dua
    3. item tiga
    Pergi Ke Indeks.

    MENCIPTA LIS DEFINASI

    Cara paling mudah untuk menerangkan Lis Definasi ini ialah dengan mengemukakan anda satu contoh: Ia kelihatan seperti ini:
    Kereta
    Ialah sebuah kenderaan beroda empat dan menggunakan kuasa enjin. Ia boleh membawa biasanya empat orang penumpang selain drebar.
    Motorsikal
    Ialah sebuah kenderaan beroda dua yang juga menggunakan kuasa enjin. Ia hanya boleh membawa seorang penumpang selain pemandu.
    Ini adalah lis yang serupa tetapi dengan disertakan tag-tagnya:

    <dl>
    <dt>Kereta
    <dd>Ialah sebuah kenderaan beroda empat dan menggunakan kuasa enjin. Ia boleh membawa biasanya empat orang penumpang selain drebar.
    <dt>Motorsikal
    <dd>Ialah sebuah kenderaan beroda dua yang juga menggunakan kuasa enjin. Ia hanya boleh membawa seorang penumpang selain pemandu.
    </dl>

    Pergi Ke Indeks

    TAJUK

    Browser Web mengenali 3 tahap Tajuk

    <H1>Tajuk Tahap 1 </H1>
    <H2>Tajuk Tahap 2 </H2>
    <H3>Tajuk Tahap 3 </H3>
    <H4>Tajuk Tahap 4 </H4>
    <H5>Tajuk Tahap 5 </H5>
    <H6>Tajuk Tahap 6 </H6>

    yang akan kelihatan sepeti berikut:
     

    Tajuk Tahap 1

    Tajuk Tahap 2

    Tajuk Tahap 3

    Tajuk Tahap 4

    Tajuk Tahap 5
    Tajuk Tahap 6
    Pergi Ke Indeks.

    MENGKETENGAHKAN TEKS

    Anda boleh mengketengahkan teks dengan mengikat teks-teks anda yang hendak diketengahkan dengan tag <CENTER> </CENTER>.

    Lihat baris ini:

    <CENTER> Barisan ini sekadar contoh </CENTER>

    Ia akan kelihatan seperti berikut:

    Barisan ini sekadar contoh

    Sekiranya lebih dari satu baris teks diikat di dalam tag-tag ini <CENTER kesemua barisan tersebut akan diketengahkan.

    Pergi Ke Indeks.

    HURUF TEBAL DAN CONDONG.

    Anda boleh membuat huruf tebal atau condong dengan mengikat teks-teks berkenaan dengan tag-tag tertentu.

    <B>Huruf Tebal </B>

    akan terpapar seperti ini:

    Huruf Tebal

    <I>Huruf Condong </I>

    akan kelihatan seperti ini:

    Huruf Condong

    <B> <I>Huruf Tebal dan Condong </I> </B>

    akan terpapar seperti berikut:

    Huruf Tebal dan Condong

    Pergi Ke Indeks

    PEMISAHAN PERENGGAN DAN BARIS

    Dengan menyelitkan tag <BR> akan mengakibatkan sesuatu baris tersebut berakhir dan barisan baru mengambil tempat. Dengan menyelitkan tag <P pula, akan menyebabkan barisan yang ada berakhir dan satu barisan kosong akan diselitkan.
    Pergi Ke Indeks.

    TEKS YANG DIFORMAT TERLEBIH AWAL

    Terdapat situasi dimana anda ingin teks anda kelihatan sepertimana yang anda taip. Untuk tujuan itu anda boleh meletakkan tag <PRE> di permulaan dan </PRE> pengakhiran teks.Teks anda akan kelihatan di dalam bentuk tulisan yang dihasilkan oleh mesin taip dengan mengekalkan hentian tab yang ada serta lain-lain ciri yang dilakukan ke atas teks tersebut. Misalnya: 
                    Dua tiga kucing berlari
                  Mana nak sama si kucing belang
                Dua tiga boleh kucari
                  Mana nak sama si adik seorang.
    Pergi Ke Indeks.

    MENJADIKAN TEKS BERKELIP

    Anda boleh menghasilkan teks berkelip dengan mengikat teks tersebut dengan tag <BLINK></BLINK>

    Kodnya <BLINK> Saya berkelip-kelip!</BLINK> akan kelihatan seperti berikut:

    Saya berkelip-kelip!

    Namun berhati-hati menggunakan arahan ini, jangan berlebihan-lebihan dan tidak sesuai untuk teks yang panjang kerana ia kana menyukarkan pembacaan!

    Pergi Ke Indeks.

    Memasukkan Pembilang Pengunjung

    Anda ingin mengetahui berapa ramai pengunjung yang telah sudi `bertandang' ke Home Page anda. Hal ini dapat dilakukan sekiranga anda mempunyai Pembilang Pengunjung di Home Page anda. Ianya amat ringkas dan indah apabila diselitkan di mana-mana sudut di Home Page anda. Anda boleh memperolehi Pembilang Pengunjung ini di alamat berikut:
    The Web Counter atau anda boleh memilih mana-mana pembilang pengunjung percuma di Halaman ini di bahagian Free Counter
    Pergi Ke Indeks.

    Mencipta Satu Lompatan di Dalam Dokumen Yang Sama

    Amat mudah untuk mencipta satu `sambungan' didalam dokumen yang serupa yang hanya boleh dilakukan secara mengklik di tetikus anda. Terdapat dua langkah yang perlu.
    1. SELITKAN TARGET titik dimana anda hendak melompat. Target tersebut akan kelihatan seperti berikut:

      2. <A NAME="nama_target_di_sini">teks yang ditarget </A>

    2. SELITKAN SAMBUNGANNYA untuk diklik yang akan menghasilkan lompatan tersebut. Sambungan itu akan kelihatan seperti ini:
    <A HREF="#nama_target_di_ sini_">Teks Yang Disambungkan </A> Teks Yang Disambungkan itu akan kelihatan bergaris dan didalam warna yang ditentukan pada awalnya. Apabila anda mengklik di Sambungan tersebut, browser melompat ke teks yang ditarget. Pergi Ke Indeks. adalah contoh terbaik satu-satu Sambungan yang saya gunakan di halaman ini. Gunakan VIEW SOURCE browser anda untuk melihat tag-tag HTML sambungan-sambungan dan teks yang ditarget pada kepala Indeks.

    Melompat ke Satu Fail Yang Lain Di dalam Komputer yang sama

    Juga satu hal yang mudah untuk mencipta satu sambungan yang akan menyebabkan browser anda membuka fail yang lain di dalam server yang sama. Format tag untuk jenis ini adalah:

    <A HREF="Kedudukan laluan dan nama fail">Teks Penghubung </A>

    Jika fail itu berada di direktori yang serupa, hanya perlu tentukan nama failnya sahaja. Jika fail yang dihubungkan itu berada di direktori yang berbeza maka tuliskan "direktori penuh" dimana fail tersebut berada. Contohnya fail yang sedang digunakan ialah "Asia.html" dan nama fail yang hendak dipanggil ialah "Surabaya.html" yang berada di subdirektori "Asia/Indonesia", maka tagnya adalah seperti berikut: A HREF="/Indonesia/Surabaya.html".

    Pergi Ke Indeks.

    Melompat Ke Dokumen Di Server Yang Berlainan

    Mencipta satu hubungan yang melompat ke dokumen di server yang berlainan di dalam satu rangkaian internet adalah serupa dengan di atas. Bezanya ialah "direktori" yang menentukan kedudukan fail digantikan dengan URL (uniform resource locator, or "internet address"). Hubungannya:

    <A HREF="http://www.geocities.com/Athens/7556/"> Pergi Ke "Institut Merlimau Computers" </A>

    akan membawa anda ke halaman yang dipanggil IMCOMP yang terletak di http://www.geocities.com/Athens/7556. Anda boleh ke sana dan kemudian balik semula ke sini dengan menekan butang Back di Browser anda nanti.

    Pergi ke "Halaman INSTITUT MERLIMAU COMPUTERS"

    Pergi Ke Indeks.

    Meletakkan Imej Grafik Di Halaman Anda

    Anda boleh meletakkan imej grafik di halaman Home Page anda. Format fail tersebut hendaklah yang boleh dibaca oleh kebanyakan browser contohnya GIF atau JPG. Tag untuk meletakkan imej grafik ialah:

    <IMG SRC="flash.gif">

    Tag ini akan menyebabkan fail grafik yang bernama "flash.gif", yang terletak di direktori yang serupa akan dipaparkan seperti berikut:

    Anda boleh mengawal kedudukan letak imej tersebut dengan ikatan-ikatan tag tertentu. Contohnya

    Penyunting-Penyunting HTML

    Untuk memudahkan anda membina sebuah HOME PAGE adalah amat penting bagi anda memiliki satu Editor HTML yang baik.

    Ini kerana seandainya anda menggunakan Pemproses Perkataan yang convensional seperti Write atau Word for Windows, anda sukar hendak menulis tag-tag yang diperlukan atau ingin melihat paparan sebenar sewaktu anda mencipta dokumen HTML. Saya mencadangkan agar anda mempunyai HTML Assistant atau Coffee Cup HTML Editor. Ia bukan sahaja mudah untuk digunakan malah meringkaskan kerja anda. Apatah lagi untuk mereka yan gtelah mahir - yang ingin memasukkan Skrip Java. Gunakanlah Editor yang berserba kebolehan seperti Claris Editor.
    HotDog Web Editor
    Kini telah ada browser yang mempunyai "HTML Editor"nya sendiri seperti Netscape 3.0 Gold, Netscape Communicator 4.0x, IExplorer 4.0, malah Word 97 juga mendokong penciptaan fail-fail HTML. Anda boleh mendapatkannya daripada TUCOWS

    Pergi Ke Indeks.

    Maklumat Berkenaan HTML

    Untuk maklumat lanjut silalah cuba hubungan ini:-
    Pergi Ke Indeks

    Di Mana Hendak Memperolehi Grafik

    Kalau anda seorang yang tidak pernah melukis sebarang grafik sebelum ini, atau seandainya anda melukis tak pernah ianya menjadi sebuah lukisan yang boleh dibanggakan dihadapan teman, anda tidak perlu khuatir. Ini adalah kerana di Internet, terdapat ramai pelukis-pelukis handalan yang secara murah hati mengizinkan kita menggunakan imej grafik mereka secara PERCUMA. Tetapi harus anda ingat bahawa imej grafik yang diambil dari Internet hendaklah dimasukkan ke dalam direktori yang tertentu. Dan yang paling penting lihatlah waktu-waktu yang sambungan talian anda adalah mudah kerana grafik-grafik yang besar memerlukan masa yang panjang untuk sampai ke komputer anda.
    Nah! Apa lagi ditunggu...
    ZUL'S COLLECTIONS
    Backgrounds, Textures, and Clipart Wonderland
    Kira's icons: background textures
    Pergi Ke Indeks

    Melihat Contoh Home Page

    Terdapat banyak Home Page di Internet dihasilkan oleh jutaan manusia dari pelbagai pelosok dunia. Di Malaysia sahaja kini, terdapat lebih 600-700 Home Pages yang disenaraikan di Jaring. Sila lihat: PERSONAL HOMEPAGE in Malaysian World Wide Sites

    Pergi Ke Indeks SELAMAT MENCUBA DAN KITA KETEMU LAGI DI INTERNET.
    SEANDAINYA ANDA MEMPUNYAI APA-APA JUA KEMUSYKILAN DI DALAM MENULIS HTML, SILA EMAIL KEPADA SAYA. SAYA AKAN MEMULAKAN TUTORIAL PEMETAAN IMEJ(MAPPING IMEJ) SELEPAS INI.
    Copyright © Zulkifli Mohamed,1998
    Sekiranya anda ingin membuat sambungan halaman ini ke homepage anda, alamat bagi halaman ini ialah: https://members.tripod.com/~komgrafik/tutodepan.html.
    Anda juga dijemput untuk melihat homepage-homepage di bawah ini:
     
    Go back to:-