Membuat web sulit? siapa yang bilang. Orang yang membuat web itu orang yang jenius? Tidak juga. Kita pun dapat membuat web kita sendiri. Asalkan kita mau usaha. Ada beberapa cara membuat Web, membuat web dengan menggunakan HTML, Dreamweaver dan Ajax. Disini akan dibahas itu semua. Semoga bermanfaat ^_^.
1. Membuat web menggunakan HTML
World Wide Web, atau yang biasa disebut Web, adalah suatu kumpulan informasi pada beberapa server komputer yang terhubung antara satu dengan yang lain dalam jaringan Internet.
1. Belajar Bikin Text dan Mengubah Font ( huruf ).
code html itu selalu di mulai dan di tutup dengan Tags.
Tags pertama selalu di mulai dengan
Contoh, misalnya saya ingin membuat huruf tebal pada kalimat Selamat Datang, kemudian kita harus menggunakan tags sebagai pembuka tags, dan sebagai penutup tags.
Maka code html untuk membuat cetak tebal pada huruf selamat datang adalah seperti ini : Selamat Datang di situs saya. Maka hasil nya nanti nya akan seperti ini : Selamat datang di situs saya.
Seperti yang anda lihat, hanya kalimat Selamat Datang saja yang di cetak tebal di karenakan tags di buka dan di tutup pada kalimat tersebut. Pastikan anda selalu menutup tags yang anda buka, karena jika anda lupa bisa-bisa seluruh text di halaman situs Anda nantinya akan tercetak tebal semua.
Berikut adalah daftar-daftar Tags yang perlu Anda ketahui :
Paragraph baru : akan membuka Paragraph baru. penutup tags ini adalah
Baris Baru :
akan membuat baris baru untuk halaman situs anda, mirip perintah enter di word. penutup tags ini adalah
Cetak tebal : akan membuat huruf di cetak tebal, penutupnya adalah
Garis Bawah : huruf atau angka yang berada di antara tags ini akan mempunyai garis bawah. penutup tags nya adalah
Garis miring : huruf atau angka yang berada di antara tags ini akan terbentuk miring ( garis miring ) .penutup tags nya adalah
Posisi di tengah :
Posisi di kiri :
Posisi di kanan :
Ubah warna : huruf atau angka yang berada di antara tags ini akan berwarna merah. Penutup tags nya adalah
Mengubah bentuk huruf : huruf atau angka yang berada di antara tags ini menggunakan Bentuk Arial, Penutup tags nya adalah
Mengubah ukuran text : Penutup tags nya adalah
Text berjalan :
catatan: tags marquee hanya berjalan jika halaman situs yang menggunakan tags ini di lihat dengan menggunakan internet explorer.
2. Structure dasar dari halaman HTML.
Ini adalah contoh dari halaman HTML.
----------------------------------------------------------------------------------------------------------------------------------------------------
Halo ini adalah halaman situs pertama saya. Jika Anda butuh bantuan membuat situs, silahkan klik
----------------------------------------------------------------------------------------------------------------------------------------------------
Penjelasan dari kode HTML di atas adalah :
Tags hanya mengatakan kepada browser anda di bagian mana HTML code di mulai.
tags
adalah bagian agar mesin pencari seperti google agar bisa menampilkan deskripsi singkat mengenai situs Anda
adalah isi dari website Anda, setelah tags
3. Membuat HYPERLINK ( link ke situs )
- hyperlink adalah sebuah link yang bisa Anda klik untuk menuju ke halaman lainnya dari situs Anda, atau menuju ke situs lain.
contoh :
Nama link tersebut maka hasilnya adalah : Nama link tersebut bila link ini di klik, maka akan menuju ke situs semuabisnis.com
Membuka link dengan windows baru ( new windows )
- Jika anda ingin link yang di klik akan terbuka dengan windows baru, maka codenya
adalah : Nama link tersebut
Mengubah warna dari link tersebut
: contoh di atas akan membuat link berwarna hijau, dan link yang sudah di klik akan berwarna merah.
Membuat email link
- Membuat email link sangat sederhana, anda hanya perlu menuliskan code mailto:emailanda@emailanda.com
contoh : Kirim email ke saya
http://semuabisnis.com/cara_membuat_website.html
Membuat web dengan menggunakan Dreamwaver
Dreamwaver adalah salah satu software web design. Kita mulai saja bagaimana cara membuat web dengan dreamwaver.
1. Jalankan program Dreamwaver, jika belum ada dreamwaver bisa didownload terlebih dahulu.
2. Pada menu utama, pilih File --> New, maka akan muncul tampilan pilihan jenis dokumen baru yang ingin kita buat. Maksudnya adalah kita memilih apakah ingin membuat halaman web basic (statis), web dinamis (biasanya untuk web berbasis database), halaman template, dan lain-lain. Setiap kategori terdiri dari beberapa jenis dokumen. Menurut saya jenis ini dibedakan berdasarkan bahasa dan fungsi yang akan digunakan untuk halaman website yang akan kita buat. Karena saat ini kita mencoba belajar yang dasar terlebih dahulu, maka silahkan pilih kategori Basic Page dan jenisnya HTML.
3. Tampilan layar desain Dreamweaver terdiri dari 3 jenis, yaitu code, split, dan design.
Layar Code berfungsi sebagai tempat kita membuat halaman web dengan mengetik bahasa pemograman secara langsung. Artinya, layar inilah yang menampilkan struktur bahasa pemograman web yang dipakai pada halaman web yang sedang kita buat. Pada bagian design, kita membuat website dengan menggunakan menu-menu yang tersedia, misalnya menu menambahkan gambar, membuat tabel, mengatur tampilan tulisan, dan lain-lain. Kita tidak perlu mengetik bahasa pemograman halaman web yang kita buat karena secara otomatis, setiap kita menambahkan sebuah elemen, maka dreamweaver akan menerjemaahkannya kedalam kalimat-kalimat bahasa pemograman yang kita gunakan. Inilah keunggulan dreamweaver dibanding notepad, frontpage, dan mungkin yang lainnya. Karena pada dreamweaver sudah tersedia menu-menu yang siap pakai untuk mendesain halaman web. Selain itu, interface-nya juga sangat bagus dan mudah digunakan. Bagian split berguna untuk membagi halaman kerja dreamweaver menjadi 2, separuh untuk menampilkan layar code, dan separuh lagi menampilkan layar design. Hal ini berguna jika kita ingin mendesain halaman melalui layar design namun ingin melihat perubahan kode bahasa webnya, dan juga sebaliknya. Sebagai contoh struktur:
dimana struktur tersebut berfungsi untuk mendefenisikan judul halaman web kita yang akan muncul di title bar browser.
4. Dibagian kiri atas dibawah menu File, terdapat menu dropdown yang terdiri dari beberapa pilihan. Pilihan ini berguna untuk memilih menu-menu desain yang akan kita gunakan. Misalnya kita ingin menambah gambar, maka pilih Common, maka disebelah kanannya akan muncul menu-menu bergambar yang bisa kita gunakan, salah satunya untuk memasukkan gambar ke halaman website.
5. Coba masuk ke layar design seperti pada poin 3. Setelah memilih bagian tersebut,anda akan melihat properties yang berfungsi untuk mengatur tampilan dari elemen-elemen yang kita tambahkan ke dalam halaman web yang kita buat. Menu-menu properties hanya terlihat jika kita bekerja pada layar design.
6. Di bagian samping, terdapat panel. Salah satu fungsi dari panel tersebut adalah untuk mengatur file-file web yang telah kita buat.
7. Di bagian atas ada kotak isian bernama Title.Bagian ini berfungsi untuk memberikan judul halaman web yang sedang kita buat yang akan muncul pada title bar browser.
Fungsi ini sama seperti yang dijelaskan pada poin 3 diatas mengenai tag title. Coba pembaca ganti tulisan yang ada di kotak tersebut menjadi misalnya "Tutorial Website Dengan Dreamweaver". Setelah itu, kembali ke layar code dan lihat perubahan yang terjadi pada bagian tag
Cara Membuat Web dengan Ajax
AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web tapi bukan merupakan bahasa pemrograman yang baru. Sejak telah dikembangkan sekitar 2-3 tahun yang lalu, AJAX mulai dilirik oleh para web desainer dan web programmer. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke page yang lain. AJAX dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll.
Contoh aplikasi Ajax
Pada artikel ini saya akan coba memberikan contoh ajax yang paling sederhana karena aplikasi-aplikasi website yang besar dimulai dari sesuatau yang sederhana. Untuk memulainnya silahkan anda buat sebuah File HTML dan tuliskan kode dibawah ini lalu simpan dengan nama index.html
Contoh AJAX title>
Request File Dari HTML
File request.html akan ditampilkan disini
Sekarang buat file HTML dengan nama request.html yang disimpan dengan folder yang sama dengan File diatas kemudian isilah dengan text berikut ini:
Text ini ditampilkan dengan metode proses request AjaxBerikut saya terangkan secara mendetail
Awalnya kita perlu membuat object XMLHttpRequest, objek ini wajib ada dalam website yang menggunakan Ajax. Untuk memanggilnya kita perlu menggunakan fungsi berikut ini:
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
//Untuk Browser Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Untuk Browser Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}Pertama-tama kita set xmlHttp=null tidak aktif, kemudian baru kita aktifkan lagi dengan membuat objek yang baru
xmlHttp =
new XMLHttpRequest(); Khusus untuk Internet Explorer, karena menggunakan ActiveX
untuk membuat XMLHttpRequest kita harus membuat kodexmlHttp = new ActiveXObject("Microsoft.XMLHttp");
Setelah kita membuat objek XMLHttpRequest sekarang kita membuat fungsi untuk mengambil file dan menampilkannya. Disini kita membuat fungsifunction getpages
(url,centercol), yang didalamnya terdapatxmlHttp.open
("GET", url); yang berarti kita mengambil url dengan method get. dengan menggunakan method get maka kita harus mengirimkan sesuatu keserver, tapi karena
kita tidak mengirim apa-apa maka kita kirimkan saja nilai kosong dengan kode:
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() merupakan sebuah fungsi
dimana nanti kita akan memperoleh status dari request file yang telah kita lakukan.
xmlHttp.readyState memiliki 4 status yaitu:
- 0 Request kita belum dibuat
- 1 Request kita sedang dalam proses (biasanya kita menggunakan gambar loading dengan ini)
- 2 Request kita sudah dikirim tapi hasil belum diterima
- 3 Request kita sedang diproses dikomputer klien
- 4 Request sudah sukses dikirim dan kita sudah sukses menerimanya
xmlHttp.status merupakan status http. Jika
statusnya 200 berarti file html nya ada dan siap ditampilkan. Sehingga kita perlu mengecek
kedua status tersebut dengan kode
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)Jika kedua statusnya oke, maka kita perlu menampilkannya dengan perintah
obj.innerHTML = xmlHttp.responseTextvar obj = document.getElementById(centercol).Terakhir Kita memanggil fungsi
getpagespada tombol serta mengirim url yang akan ditampilkan. Inilah kode yang digunakan untuk memanggil fungsi getpages:
untuk lebih jelas silahkan mengunjungi
http://www.w3function.com/blog/?p=det&idn=23
