Cara membina website

Kembali ke Menu Utama 

Bab 3: Cara membina website

Sekarang kita pergi kebahagian yang lebih menarik. Bahagian buat website. Sebelum anda belajar membina website, anda terlebih dahulu perlu download perisian NVU dan FileZilla. 

Masih ingat apa guna NVU dan FIleZilla. Saya ulang disini, NVU adalah perisian untuk membina website dan FileZilla adalah perisian untuk menghantar file yang kita telah bina dengan NVU didalam komputer/laptop kita ke webhosting..

1. Download NVU. Klik Disini
2. Download FileZilla. Klik Disini

OK, sekarang yang kita perlukan adalah webhosting. Sudahkah anda memiliki webhosting? Kalau belum saya cadangkan anda guna blogger.com sebab PERCUMA saja. Tak perlu bayar sewa 



3.1 TEKNIK ASAS yang wajib dipelajari. 

Pelajaran 1:

Cara untuk memasukkan perkataan kedalam website anda, Lihat Video.

Cara setting file Zilla untuk transfer file ke tapak hosting. Lihat Video.

Pelajaran pertama adalah bagaimana anda memasukkan perkataan atau huruf-huruf kedalam website anda. Ia juga dipanggil text formating. Cara memasukkan jenis-jenis font, untuk bold, italic, underline, aligment, size besar atau kecil untuk text dengan menggunakan NVU. Selepas itu anda akan diajar bagaimana untuk kali pertamanya anda tranfer file tersebut ke tapak hosting dengan menggunakan filezilla. Teknik transfer ini merupakan asas untuk anda membuat tranfer pada pelajaran-pelajaran seterusnya.

Pelajaran 2:
Memasukkan gambar orang lain kedalam website anda. Lihat Video.

Terdapat dua jenis gambar yang ada perlu anda ketahui. Pertama adalah gambar yang banyak sekali didalam internet, seperti didalam google image, atau gambar didalam website orang lain. Oleh itu anda perlu tahu cara memasukkan gambar yang ada didalam internet kedalam website anda. Disini saya akan tunjukkan cara memasukkan gambar dari dalam internet dengan menggunakan url pada gambar tersebut.

Pelajaran 3:
Cara memasukan video kedalam website anda. Lihat Video.

Video merupakan salah satu perkara yang amat penting untuk menambak nilai website kita. Jika website kita mempunyai video yang dapat menerangkan sesuatu produk, atau sesuatu perkara, ia akan menjadi aset penting kepada website tersebut. Didalam video-video pelajaran seterusnya nanti anda akan sering mendengar tekni embed.

Teknik Embed adalah:
Teknik Embed
1. Dapatkan HTML Code
2. Sediakan table didalam NVU
3. Klik sekali didalam table tersebut, klik Insert, klik HTML
4. Dan PASTE kan code tadi.

Pelajaran 4:
Cara memasukkan gambar dari komputer anda kedalam website. Lihat Video.

Sebelum ini anda sudah mempelajari cara-cara memasukkan gambar yang ada didalam internet kedalam website anda, dan sekarang anda perlu belajar cara memasukkan gambar yang ada didalam komputer atau didalam simpanan anda sendiri. Kedua-dua jenis gambar ini, anda perlu memasukkannya menggunakan URL gambar tersebut.

Pelajaran 5:
Cara menggunakan tableLihat Video.

Kesemua website yang kita lihat didalam internet hari bermula dengan table. Table adalah tempat untuk kita menyusun supaya website kita tersusun, kemas dan menarik untuk dilihat. Semasa kita belajar sebelum ini, kita hanya masukkan tulisan, gambar, video dari atas kebawah, maka kita website kita kurang menarik. Maka disini kita akan belajar segala sifat asas untuk membina table didalam website.

Pelajaran 6:
Cara buat page kedua, ketiga dan seterusnya. Lihat Video.

Kita telah pelajari membuat satu page dengan filenamenya adalah index.html. Disini kita akan pelajari untuk buat banyak lagi page, dengan satu hosting ini berapa banyak pun page kita boleh buat. Bergantung kepada size page tersebut dan bergantung besarnya size tapak hosting yang kita sewa. 


Kalau kita sewa hosting di GDI, mereka berikan size sebesar 100Mb. Cukup tu kalau nak buat sampai 100 page sekali pun. 


Dan kalau domain kita bersesuaian, satu domain ini sahaja kita boleh buat banyak bisnes serentak, asalkan kita tahu nak design web tesebut.

Pelajaran 7:
Membuat link diantara website yang anda miliki. Lihat Video.

Cara untuk membuat link ke website yang lain atau ke dalam page kita sendiri. Tanpa link website kita akan jadi statik dan tidak menarik. Pelawat gemar memasuki sesebuah website yang lengkap dan penuh dengan maklumat yang diperlukan. 


Kesemua maklumat tersebut, tidak sesuai untuk diletakkan kesemuanya dalam satu page sahaja, contohnya, maklumat produk yang ingin kita tawarkan, bagaimana mereka ingin membuat pembayaran, bagaimana mereka ingin membuat feedback, atau mereka ingin menghubungi kita, maka ia perlukan kepada page-page yang lain. Oleh itu link merupakan satu keperluan asas untuk anda pelajarinya.

Pelajaran 8:
Kefahaman mengenai URL. Lihat Video.

URL ini asalnya adalah singkatan kepada "Uniform Resource Locator" atau untuk mudah kita faham adalah alamat penuh sesuatu website. Tanpa alamat penuh kita tidak boleh membuka website tersebut. URL perlu bermula dengan http:// dan cara menulis URL adalah http://domain/nama-file. Pengetahuan mengenai URL adalah penting sebagai asas untuk anda membina website.

Pelajaran 9:
Cara membina logo, banner atau header anda sendiri. Lihat Video.

Untuk menjadi seorang webmaster yang baik, anda perlu tahu membuat design sendiri, cepat, menarik dan mampu mencapai objektif website anda. Untuk mereka sesuatu desgin yang canggih, anda perlu belajar menggunakan photoshop, tetapi jika masih belum tahu menggunakan photoshop, paling kurang anda tahu menggunakan microsoft paint. 

Disini saya akan berkongsi satu teknik gabungan diantara paints, PowerPoints dan PrintScreen, yang saya namakan Teknik 3P, supaya anda dapat membina header, logo atau apa2 image dalam masa yang singkat.

Pelajaran 10:
Cara meletakkan background didalam website. Lihat Video.

Ada dua jenis background yang perlu anda tahu cara untuk memasukkannya. Pertama background utama website anda dan kedua background didalam table cell.

Pelajaran 11:
Cara meletakkan table ke tengah. Lihat Video.

Anda telah pun belajar meletakkan table ditengah, tetapi sebenarnya cara tersebut hanya sesuai untuk Mozilla dan Chrome. Tidak sesuai untuk Internet Explorer. Maka disini anda perlu belajar cara memasukkan html code <center> dan </center> supaya website anda akan betul-betul ditengah walau pun pelawat ke website anda menggunakan Internet Explorer.

Pelajaran 1 hingga 11 merupakan pelajaran asas yang mesti dipelajari oleh anda, dengan jika anda telah menguasai kesemua teknik diatas, sebenarnya anda sudah boleh membuat satu website yang amat cantik dan menarik, bergantung kepada kreativity anda untuk melakukannya.

Pelajaran 12:
Cara menyusun website dengan menggunakan table. Lihat Video.

Pelajaran 13:
Cara mengubah page title. Lihat Video.

Pelajaran 14:
Cara membuatkan perkataan berkelip-kelip. Lihat Video.

Pelajaran 15:
Cara meletak marquee tulisan atau gambar. Lihat Video.
<marquee behavior="scroll" direction="left" scrollamount="4">Masukkan Pesanan Anda disini</marquee>

Pelajaran 16:
Cara copy website orang lain. Lihat Video.

Pelajaran 17:
Cara meletakkan favicon. Lihat Video. 
<link rel="shortcut icon" href="URL image anda">

Pelajaran 18: 
Cara meletakkan tarikh dalam tulisan atau bentuk jam.

Siapkan satu table dan gunakan teknik embed, insert-html code yand diberikan disini. Klik Disini

Ia tidak akan kelihatan di NVU, tetapi akan dilihat di dalam internet selepas anda upload.

Pelajaran 19: 
Cara memasukan borang pesanan atau feedback.

Ikut arahan daripada website ini dan gunakan teknik embed. Klik Disini

Pelajaran 20: 
Cara memasukkan pengira pengunjung (Counter)

Buka google.com dan search untuk key words "Free html counter" dan anda boleh pilih mana2 website yang memberikan counter percuma. Juga gunakan teknik embed.

Contohnya dari website ini: http://www.supercounters.com/

Web Counter
MY4684ID263US155CA16Newest:INYou:MYToday:1Month:117Total:5211Supercounters.com

Pelajaran 21: 
Cara memasukkan Dropdown Menu. 

Juga gunakan teknik embed. Klik disini untuk HTML Code
Gantikan "Menu" kepada menu anda dan gantikan urlAnda kepada mana url yang ingin anda bawakan. Jika tak cukup copy lagi dari option value ke option.

Hasilnya adalah seperti ini:





Pelajaran 22: 
Cara memasukkan Scroll Box. 
Juga gunakan teknik embed. Klik disini untuk HTML Code

Nanti hasilnya seperti dibawah ini

Masukkan penerangan anda yang panjang disini. Gunakan teknik embed. Buatkan satu kotak (table), masukkan diruangan ini. Untuk lebih mudah copy paste di notepad dahulu. Selepas siap maklumat yang ingin anda masukkan disini, sila gunakan teknik embed, iaitu klik insert dan klik html. Masukkan kesemua kod ini.




Pelajaran 23: 
Cara divert ke website yang lain.

Ini mungkin terjadi sekiranya anda tidak lagi menggunakan URL anda.Sebagai contoh :
http://www.domainanda.com/kedaionline tetapi anda telah menutup jualan melalui URL tersebut dan dalam masa yang sama anda ingin mempromosikan produk anda yang lain. Jangan buang folder tersebut, sebaliknya anda gantikan dengan 1 page yang akan membawa pelawat website anda ke URL yang anda kehendaki.

HTML Code:
<meta http-equiv="Refresh" content="0; URL=masukkan URL yang ingin anda bawa di sini">
Paste kan kod html di atas di antara <head> dan </head> di bahagian source, kemudian savekan page itu dan upload.

Pelajaran 24: 
Cara mengurangkan saiz image supaya mudah untuk dimasukkan kedalam website anda. Lihat Video. 

Pelajaran 25: 
Kesilapan yang sering dilakukan diperingkat awal semasa belajar cara buat website seperti tidak boleh connect didalam file ZIlla, tidak menjumpai didalam internet website yang anda cipta, salah taip url atau upload salah fail dan juga dan juga gambar tidak keluar setelah upload ke tapak domain. Lihat Video1 dan Lihat Video2

Pelajaran 26: 
Untuk membuat video kita autoplay apabila orang buka website kita.

Maksudnya jika orang masuk dalam website kita yang ada video, video tersebut terus play secara automatik tanpa perlu mereka klik play. Caranya adalah, ambil html code video tersebut dan tampalkan di notepad terlebih dahulu.
Contohnya, katalah html code dibawah ini adalah code yang saya ambil dari embed html code youtube:

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/XG9kpt2OKgw?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XG9kpt2OKgw?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Jika code diatas terus saya embed kedalam website, maka hasilnya sama seperti apa yang telah kita pelajari di Pelajaran 3, tetapi jika code diatas saya ubah sedikit, maka ia akan menjadi autoplay. Untuk menjadikan autoplay, tukarkan rel=0 kepadaautoplay=1 menjadi:

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/XG9kpt2OKgw?version=3&amp;hl=en_US&amp;autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XG9kpt2OKgw?version=3&amp;hl=en_US&amp;autoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Jika anda faham teknik ini, maka mungkin ada perasan bagaimana webmaster menggunakan cara pintas ini untuk memasukkan muzik kedalam website mereka. Bila buka sahaja website mereka terus ada muzik, tetapi kita tidak nampak apa-apa video. Caranya mudah sahaja, tukarkan rel=0 kepada autoplay=1, tukarkan width dan height menjadi 0, maka video akan menjadi tidak kelihatan, cuma suara sahaja yang keluar secara autoplay.

Pelajaran 27:

Teknik untuk memasukkan FREE FLAQ COUNTER ke dalam website anda.



Dapatkan html code dan gunakan teknik embed kedalam website anda.
Nanti didalam website anda akan mempunyai counter flag seperti ini
AutoMLMAnda buat website dan online marketing



* Perhatian:
Pelajaran terbaru akan di update dari semasa kesemasa.