Cara Membuat Web

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.

Dalam membuat website dibutuhkan domain dan juga hosting. Apa yang di maksud dengan domain dan apakah hosting itu ? Domain adalah nama situs anda, atau alamat situs contohnya www.nijuukakkoi.com Domain bisa di dapat atau di beli dengan cara di daftarkan di jasa register domain, biaya nya juga termasuk murah, rata-rata sekitar 100 ribu untuk 1 domain selama 1 tahun.Hosting adalah tempat Anda menyimpan file-file atau data mengenai website Anda. misalnya Jika anda ingin siapapun yang mengakses domain atau situs anda maka pengunjung tersebut akan melihat photo anda di halaman situs tersebut, maka anda tinggal letakkan photo anda di hosting tersebut.Sudah tahu kan apa itu domain dan apa itu hosting, langsung saja saya beri tahu tentang cara membuat website dengan HTML(Hypertext Markup Language). HTML adalah suatu format data yang digunakan untuk membuat dokumen Hypertext yang dapat dibaca dari satu Platform komputer ke Platform komputer lain tanpa perlu melakukan perubahan apapun. Dokumen HTML dapat disebut juga Markup Language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen.

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 . kemudian tags di tutup 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 :

huruf atau angka yang berada di antara tags ini akan berada di tengah-tengah halaman, penutup tags nya adalah

Posisi di kiri : huruf atau angka yang berada di antara tags ini akan berada di kiri halaman situs, penutup tags nya adalah

Posisi di kanan : huruf atau angka yang berada di antara tags ini akan berada di kanan halaman situs. Penutup tags nya adalah

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 : huruf atau angka yang berada di antara tags ini akan bergerak dari kiri ke kanan di layar, Penutup tags nya adalah

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 nijuukakkoi.com.

----------------------------------------------------------------------------------------------------------------------------------------------------

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

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 Ajax

Berikut 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 kode 
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");







Setelah kita membuat objek XMLHttpRequest sekarang kita membuat fungsi untuk mengambil file dan menampilkannya. Disini kita membuat fungsi
 function getpages



(url,centercol), yang didalamnya terdapat 
xmlHttp.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.responseText
 Dimana ini berarti kita menampilkannya di  obj, sementara variabel obj telah kita isi dengan  centercol, ini kode ketika kita mengisi obj dengan centercol,

var obj = document.getElementById(centercol).









Terakhir Kita memanggil fungsi 
getpages pada 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