LANGKAH –LANGKAH MEMBUAT WEBSITE

Sebagai tambahan di dalam bab ini saya akan menjelaskan langkah pertama dan paling awal dalam membuat website. Secara garis besar di bab ini anda akan membuat sebuah domain, mempersiapkan sebuah hosting, dan menghubungkan sebuah domain ke hosting. Untuk itu persiapkanlah semua keperluannya sepertikomputer dan modem anda sebagai sarana pendukung yang dibutuhkan.

A. Mempersiapkan hostingMemiliki domain sudah, sekarang saatnya mempersiapkan tempat file website kita berteduh. Hosting yang saya rujuk ini mempunyai program yang menarik. Selain GRATIS, anda juga berkesempatan mendapatkan hadiah bila mengikutiprogram afiliasinya. Dan yang paling menggiurkan, hostingini berkapasitas 2GB dengan bandwidth 100GB. Sungguh benar – benar mantap untuk sebuah hosting gratisan.Langkah – langkah yang harus dilakukan adalah sebagai berikut :

1. Silahkan anada buka www.hosting-mantap.tk . ketika halaman utamanya tampil, anda klik tulisan buat akun yangada di bagian kanan atas halaman.

2. Akan muncul sebuah form pendaftaran. Silahkan anda isi sesuai ketentuan sebagai berikut.

Nama Anda : silahkan ketikan nama anda. E-mail anda : ketik alamat e-mail anda. Password : ketik password anda minimal 6 karakter.

“perhatian, sisipkan minimal 1 karakter angka ketikamengetik password”.

Ulangi password anda : ketik ulang password anda. Verifikasi kode : ketik hutuf sesuai kode diatasnya. Jangan lupa untuk checklist kotak dialog

persetujuan. Setelah semua data terisi, klik tombol ‘buat akun’.

3. Setelah itu akan muncul halaman pemberitahuan untuk segera mengecek email anda.

4. Silahkan buka e-mail anda dan cek di folder inbox. Kalau tidak ada di folder inbox, coba periksa di folderspam e-mail anda. Isi dari email tersebut sebagai berikut.

5. Silahkan klik tulisan yang saya lingkari.6. Nanti akan keluar halaman yang memberitahukan bahwa

proses verifikasi sudah selesai. Dihalaman ini juga

anada dapat langsung membuat akun hostingnya. Silahkan isi form dengan ketentuan sebagai berikut :

Klik radio button “subdomain” . Subdomain www : isi dengan alamat website yang anda

inginkan. Isi dengan apa saja, misalkan “cyberprince”.

Password : ketik password minimal 6 karakter. Password ini nantinya dugunakan untuk login ke halaman pengaturan website.

Ulangi password : ulangi password yang anda ketik tadi.

Tuliskan karakter dari gambar : ketik huruf seperti gambar dibawahnya.

Jika semua data telah terisi, klik tombol “buat”.7. Silahkan tunggu beberapa saat. Kalau hosting anda sudah

jadi akan muncul pemberitahuan di sebelah kanan bawah layar anda. Seperti ini pemberitahuannya :

8. Akan muncul halaman yang menunjukkan status akun hosting anda, coba lihat gambar di bawah ini :

9. Silahkan catat domain yang telah diberikan hosting. Selamat, sampai disini anda telah berhasil membuat hosting dimana sebagai tempat website anda berteduh.

B. Mengenal FTP (File Transfer Protocol)Tahukah anda arti dari istilah di atas. File Transfer Protocol (FTP) adalah sebuah aturan yang digunakan untuk tukar – menukar file melalui internet. Bingung ?

Lebih singkatnya, FTP boleh anda artikan sebagai softwareuntuk mengirimkan file ke website. File apa ? yah file untuk menunjang pembangunan website anda. Misalkan anda ingin menyisipka lagu ke website, maka anda memerlukan bantuan software FTP untuk mengirimkan lagu tersebut ke website.

Kenapa pakai FTP? Karena kalau anda upload melalui browser prosesnya akan lama. Beda kalau anda memakai FTP.Lebih cepat proses pengirimanya. Banyak merek FTP yang tersedia di internet. Merek FTP yang kita akan gunakan saat ini adalah filezilla. Mengapa pakai filezilla? Apalagi kalau bukan GRATIS.

Berikut ini akan saya kenalkan cara kerjanya. Sebelumnya silahkan anda install softwarenya terlebih dahulu. Setelah di install, buka programnya. Akan tampil halaman awal ketika pertama kali anda menjalankan aplikasi ini seperti berikut.

Terlihat pada gambar ada tiga field yang perlu anda isi, yaitu :

Mesin : isi dengan host name yang didapat dari hosting.

Nama pengguna : isi dengan username FTP yang didapatdari hosting.

Kata kunci : isi dengan password ketika anda mendaftar pada hosting.

Port : biarkan kosong. Darimana saya bisa mendapat host name dan user FTP dari hosting ? coba cek kembali e-mail anda. Biasanya hosting telah mengirimkan tiga buah e-mail. Salah satunya memuat tentang informasi name server. Seperti ini isi emailnya :

Setelah anda dapat, silahkan isi field tersebut. Lalu klik tombol ‘koneksi cepat’. Nantinya kotak yang tadinya kosong akan terisi file-file dari hosting.

Lalu bagaimana cara meng-upload file kedalam hosting? Mudah, anda tinggal memilih file yang ada di kotak kiri. Kotak kiri tersebut berisikan file-file dan folder dari komputer anda. Silahkan cari file yang ingin anda upload dikotak kiri tersebut.

Setelah ketemu filenya, klik kanan pada file tersebut lalu pilih ‘upload’. Secara otomatis file anda akan di-upload ke hosting. Sebelum mengupload pastikan terlebih dahulu anda berada dalam folder public_html di direktori hosting. Karena aturan hosting mengharuskan kita meletakkan file difolder itu.

Bagaimana kita bisa tahu kalau berada difolder public_html? Mudah saja, klik ganda folder public_html dan perhatikan bagian pada situs remote, setelah yakin anda berada ditempat yang benar, baru anda upload filenya.

Mudah bukan? Dengan software ini anda juga bisa mendownload file dari hosting ke komputer kita. Caranya sama saja ketika anda mengupload file.

MEMBUAT WEBSITE DENGAN DREAMWEAVER CS4

Pada adobe dreamweaver cs4, untuk membuat website yang merupakan lokasi atau tempat untuk mengumpulkan file – file dokumen web dapat dibuat dengan mudah. Sebelum membuat website, anda dapat menggunakan Site Definition Wizard melaluikotak dialog Manage Sites. Untuk menampilkan kotak dialog manage sites dapat dilakukan salah satu cara berikut :

Pada menu bar, klik site > manage sites. Pada file panel, klik toombol anak panah ke bawah, maka

akan muncul menu ke bawah (drop down menu), pilih manage sites. Setelah manage site anda pilih maka akan tampil kotak dialog manage sites.

New berfungsi untuk membuat site baru. Edit berfungsi untuk mengedit atau mengubah site yang

telah dibuat. Duplicate digunakan untuk meg-copy site yang telah

dipilih. Remove berfungsi untuk menghapus site dan tidak dapat

dikembalikan lagi. Export digunakan untuk mengekspor suatu pengaturan site

sebagai file XML (*.ste).

MENGGUNAKAN SITE DEFINITION WIZARD

Hal yang harus dilakukan untuk mendefinisikan site baru melalui Site definition Wizard dalam dreamweaver. Langkah – langkah untuk membuat site baru adalah sebagai beriikut :

1. Pada kotak dialog manage sites, pilih tombol new.

2. Memilih new site dapat juga dilakukan melalui menu bar dengan cara klik site > new site.

3. Akan tampil kotak dialog Site Definition. Isikan nama site pada kotak What would you like to name your site? Nama ini berfungsi sebagai identitas site yang akan anda buat. Dalam contoh digunakan nama site websiteku.

4. Pada kotak what is the HTTP address (URL) of your site?, isikan alamat URL dari site tersebut. Jika dalam komputeranda sudah diinstall software web server seperti apache,zampp,wamp, atau PHPTriad,pada kotak tersebut anda

isikan alamat sebagai berikut http://localhost/websiteku/. Apabila anda mempunyai alamat domain di internet, isikan langsung alamat domainnya, kmudian klik tombol next.

5. Selanjutnya akan tampil editing file, part 2 dengan sebuah dialog konfirmasi Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP? Yang memungkinkan anda untuk memilih apakah dokumen web yang akan dibuat menggunakan server-side, atau tidak. Jika dokumen web yang akan dibuat hanya menggunakan HTML biasa atau halaman web statis, maka pilih No,I do not want to use a server technology. Tetapijika anda menggunakan server-side atau halaman web dinamis yang memerlukan database, maka pilih Yes, I want to use a server technology. Pada which server technology?Pilih server yang akan digunakan dalam contoh yang digunakan PHP MySQL. Setelah mengisikan pilih server, klik next.

6. Pada editing file, part 3 terdapat dialog konfirmasi mengenai cara pengelolaan file – file dokumen web dan alamat web yang akan disimpan. Jika web server anda berada di komputer pribadi, anda disarankan untuk memilihEdit Directly on remote testing server using local network.

7. Tekan tombol yang ada di sebelah kanan kotak dialog Where are your files on the network? Untuk memilih lokasifile. Akan muncul kotak dialog Choose local root folder, pilih lokasi, lalu klik tombol Select. Selanjutnya kembali kembali ke jendela editing files, part 3, dan klik tombol next untuk ke tahap berikutnya.

8. Pada testing files yang ada, isikan alamat URL yang digunakan dalam komputer lokal pada kotak pertanyaan WhatURL would you use to browse to the root of your site?.

9. Klik tombol test URL untuk mengetahui apakah URL sudah tepat, atau belum. Jika alamat URL tersebut tepat, maka

akan muncul pesan konfirmasi The URL Prefix test was successful.

10. Selanjutnya klik tombol next, maka akan tampil Summery yang memberikan informasi dari pendefinisian site, atau pembuatan site baru. Setelah semua tahap ini selesai, klik tombol Done.

11. Hasilnya dapat anda lihat pada Files Panel yang menampilkan nama website yang telah dibuat ditandai dengan folder warna hijau.

MEMBUAT DOKUMEN HTML

Dalam dreamweaver, anda dapat membuat dokumen HTML kosong, sehingga anda dapat mendesain halaman web sesuai yang anda inginkan didalamnya. Langkah –langkah untuk membuat dokumen HTML adalah sebagai berikut :

1. Pilihan pertama, dapat anda lakukan melalui starter page.Pada kategori create new, pilih HTML.

2. Pilihan kedua adalah melalui menu bar dengan cara klik file > new.

3. Kemudian akan muncul kotak dialog new document pada bagian sebelah kiri pilih blank page.

4. Pada kolom page type, pilih HTML.5. Pada kolom layout, pilih <none>.

6. Setelah itu, lakukan salah satu cara berikut ini : Klik tombol create. Klik ganda item HTML pada kategori page type. Tekan tombol enter pada keyboard.

MEMBUAT DESAIN WEBSITE

Website anda pastinya membutuhkan yang namanya sebauah desain.Dengan desain yang berkualitas, website anda akan ramai dikunjungi. Banyak manfaat kalau website anda banyak dikunjungi. Selain membuat hati senang, orang lain pun akan merasakan manfaat saat berkunjung ke website anda, sehingga brand anda sebagai pemilik website akan mantap.

Berikut ini adalah langkah – langkah mendesain sebuah website :

1. Buat dokumen HTML kosong terlebih dahulu.2. Pilih insert panel dengan cara pilih Insert Div Tag

pada tab Common.

3. Ketika muncul jendela Insert Div Tag, pilih new css rule kemudian klik Ok.

4. Akan tampil sebuah jendela new css rule. Ketikan sebuah nama pada “choose or enter a name for your selector” (bebas terserah anda). Lalu klik Ok.

5. Akan tampil “css rule definition for.prince” pilih positioning. Isikan sesuai perintah berikut dan jika sudah boleh anda klik OK.

Position : isikan relative. Width : isi 900 px Height : isi 700 px Left : isi 250 px

6. Kemudian akan muncul jendela Insert Div Tag, langsung saja pilih OK.

7. Ketika slesai smuanya akan muncul tampilan berikut ini pada halaman kosong HTML.

Kemudian hapus saja tulisan yang ada pada Div tag tersebut.

8. Jika sudah, buat lah table dengan cara Pilih insert panel dengan cara pilih Table pada tab Common.

9. Pada jendela table, yang muncul ketikan sesuai perintah berikut :

Row : isi 1 Coloums : isi 1 Table width : isikan 200 Sisanya kosongkan saja Lalu klik ok

10. Tarik table tersebut hingga batas yg sudah tersedia.Kemudian langsung saja sisipkan sebuah gambar untuk membuat sebuat Heading website menggunakan gambar.

11. Pilih insert panel dengan cara pilih Table pada tab Common.

12. Akan muncul jendela select image source, lalu pilih file photo mana yang akan digunakan sebagai heading website, kemudian klik OK.

13. Jika sudah tampil, maka langkah selanjutnya adalah membuat table lagi dengan ketentuan :

Row : isi 1 Coloums : isi 5 Table width : isikan 200 Border thickness : 1 Sisanya kosongkan saja Lalu klik ok

14. Isikan pada setiap tabel yang ada dengan ketentuan :Home,cybercrime,cyberlaw,cases, dan about me

15. Blok salah satu tulisan yang ada pada table, kmudianpada layar properties dibagian paling bawah pilih CSS, pilih rata tengah

16. Jika semuanya sudah anda lakukan, anda save, dan anda save as.

MEMILIH BACKGROUND IMAGE

Background image merupakan gambar yang digunakan sebagai gambar latar belakang dari halaman web. Untuk menyisipkan background image dilakukan melalui page properties, pemberian background image pada page properties disini dilakukan melaluikategori Appearance(CSS). Menggunakan cara sebagai berikut :

1. Bukalah page properties melalui property inspector.2. Pada kotak dialog page properties, pilih kategori

Appearance(CSS).3. Pada kotak background image, klik tombol browse untuk

memilih gambar yang akan dijadikan sebagai background halaman web.

4. Muncul kotak dialog select image source, cari lokasi gambar, kemudian pilih lokasi gambar yang akan dijadikan sebagai background image.

5. Setelah memilih gambar, pilih tombol OK.

6. Kemudian kembali ke kotak dialog page properties. Pada kotak reapet, anda dapat mengisikan pilihan reapet diantaranya :

No-reapet : gambar background tidak ditampilkan secara berulang – ulang.

Reapet : gambar background akan ditampilkan secara berulang – ulang hingga memenuhi halaman web.

Reapet-x : gambar background akan ditampilkan secaraberulang ke arah samping (horizontal)dalam satu baris.

Reapet-y : gambar background akan ditampilkan secaraberulang ke bawah (vertikal)dalam satu kolom.

MEMBERIKAN HEADINGS

Heading merupakan pengaturan ukuran font atau teks yang biasanya digunakan untuk teks judul dan sub judul. Terdapat enam format heading yang dimulai dari <H1>, yaitu untuk font dengan ukuran yang paling besar, sampai dengan <H6> untuk ukuran font yang paling kecil.

Untuk mengatur format heading melalui page properties, anda dapat mengikuti langkah – langkah sebagai berikut :

1. Buka page properties.2. Pilih heading (CSS) pada bagian Category.3. Pada kotak heading font, tentukan jenis font yang akan

digunakan.4. Pada kotak heading 1 sampai heading 6, isikan ukuran font

yang akan digunakan.5. Setelah selesai mengatur headings, tekan tombol OK.6. Untuk menerapkannya pada halaman web, sebagai contoh tuliskan

kata pada halaman web yang kosong, misal teks heading 1 sampaiteks heading 6.

7. Kemudian seleksi atau blok tiap – tiap teks tersebut. Dalam property inspector pada bagian format, pilih heading 1 untuk

kata teks heading 1. Untuk teks yang lain berikan format heading sesuai dengan nama teksnya.

8. Apabila semua teks telah diberi format heading, simpan dokumenweb tersebut, dan lihat hasilnya melalui browser dengan menekan tombol F12 pada keyboard.

MENAMBAHKAN VIDEO PADA HALAMAN WEB

Pada adobe dreamweaver CS4, anda dapat memasukan video ke dalam halaman web untuk kemudian dimainkan menggunakan swf.

Untuk menambah musik ke dalam halaman web, ikuti langkah – langkah sebagai berikut :

1. Pada Menu Bar, klik Insert > Media > SWF yang digunakan untuk memasukkan video ke dalam halaman web.

2. Anda juga dapat memasukkan melalui insert panel dengan cara pilih Media pada tab Common, lalu pilih SWF.

3. Akan muncul kotak dialog select file. Pilih file video yang ada, lalu klik tombol Ok untuk memasukkannya ke dalam halaman web.

4. Kemudian pada halaman web akan tampil kotak icon swf yang menandakan bahwa file video telah dimasukkan ke dalam halaman web.

5. Simpan dokumen web tersebut dan lihat hasilnya melalui browser dengan menekan F12 pada keyboard.

MEMBUAT HYPERLINK

Hyperlink berfungsi untuk membuka alamat URL yang ada di internet ataupun membuka halaman web yang ada di web yang ada di dalam suatu website. Hyperlink yang ada di website biasanyaditerapkan pada teks, gambar ataupun menu.

Untuk menggunakan hyperlink pada teks, gunakan cara sebagai berikut :

1. Blok teks yang akan dijadikan hyperlink.2. Pada Menu Bar, klik Insert > Hyperlink.3. Muncul kotak Hyperlink yang berfungsi membuat link.

4. Isikan alamat URL yang akan dituju pada kotak Link. Jika link yang akan dituju adalah halaman web yang telah tersimpan dalam site, klik icon untuk mencari file halaman web yang dituju.

5. Pada kotak Target, anda dapat memilih model link yang akan digunakan untuk menampilkan halaman web yang menjaditujuan link.

_blank. Menampilkan alamat URL tujuan ke halaman browser yang baru.

_parent. Menampilkan alamat URL tujuan ke dalam frameset induk, atau bagian jendela frame yang berisikan link.

_self. Menampilkan alamat URL tujuan ke dalam frame yang sama.

_top. Menapilkan file halaman web yang diberikan link ke dalam browser secara penuh, dan menggeser semua frame.

6. Pada kotak kotak yang lain, anda dapat mengosonginya. Tekan tombol OK untuk menyimpan hyperlink tersebut.

7. Simpan dokumen web tersebut, dan hasilnya dapat anda lihat melalui browser dengan menekan F12 pada keyboard.

MEMBUAT E-MAIL LINK

E-mail link merupakan link yang digunakan untuk e-mail, berfungsi untuk mengirimkan suatu pesan ke alamat e-mail tersebut. E-mail link dikenal dengan nama mailto.

Untuk membuat e-mail link atau mailto, ikuti langkah – langkahberikut ini :

1. Blok teks yang akan dibuat mailto.2. Pada Menu Bar, klik Insert > E-mail link.3. Muncul kotak dialog E-mail Link, isikan alamat email

sebagai tujuan link pada kotak E-mail. Tekan tombol OK untuk membuat mailto.

4. Simpan dokumen web tersebut, dan hasilnya dapat anda lihat melalui browser dengan menekan F12 pada keyboard.

MEMBUAT ANCHOR LINK

Untuk membuat link dalam halaman web yang panjang, terlebih dahulu membuat anchor/jangkar. Pembuatan anchor link berfungsiuntuk menyusun daftar isi dokumen yang akan ditampilkan dalam halaman web.

Langkah – langkah untuk membuat anchor link adalah sebagai berikut :

1. Tentukan bagian tertentu pada halaman web yang akan dibuat anchor.

2. Pilih kata atau link yang akan diberi anchor, caranya dengan memblok kata tersebut menggunakan mouse.

3. Pada Menu Bar, klik Insert > Named Anchor.4. Muncul kotak dialog Named Anchor. Pada kotak Anchor Name

isikan nama anchor yang akan dibuat, lalu tekan tombol OK.

5. Pada halaman web yang akan muncul icon anchor yang apabila diklik akan terlihat namanya di kotak Name pada Property Inspector.

6. Anchor yang telah dibuat dapat digunakan sebagai bahan acuan untuk target sebuah link.

MEMBUAT LINK KE ANCHOR

Area yang telah dibuat anchor dapat dijadikan sebagai target link. Anda dapat membuat link yang mengarah ke lokasi anchor tersebut.

Untuk membuat link ke anchor, gunakan cara sebagai berikut :

1. Pilih teks yang akan dibuat link, blok teks tersebut.2. Di bagian link pada Property Inspector, klik icon Point

to File kemudian tarik ke lokasi yang telah dibuat anchor. Hasilnya pada kotak link akan tampil nama anchor.

3. Kemudian teks pada halaman web akan ditandai dengan adanya link, sedangkan dibagian link pada property inspector akan tampil nama anchor yang telah dibuat link.

4. Simpan dokumen web tersebut, dan hasilnya dapat anda lihat melalui browser dengan menekan F12 pada keyboard.

5. Jika teks tersebut diklik, halaman akan berpindah ke tempat yang dituju sesuai dengan alamat link yang telah dibuat.

MENDAFTARKAN WEBSITE KE SEARCH ENGINE

Tibalah saatnya mengenalkan website yang baru dibuat. Mengapa promosi perlu? Karena sebagus apapun desain website dan kontennya, jika tidak ada yang melihat tidak akan berarti apa-apa. Agar website kita ramai dikunjungi, promosi adalah tindakan yang perlu dilakukan.

Metode promosi banyak sekali caranya, bisa melalui jejaring sosial (facebook,twiter, dan lainnya), forum, e-mail, SEO, PPC, blog, dan sebagainya. Pilih mana yang lebih efektif, tergantung kebutuhan. Bila saya bahas satu persatu tentu tidakpraktis dan memakan waktu yang cukup lama.

Agar praktis saya akan menjelaskan beberapa teknik promosi yang mendasar, meliputi :

a. Mendaftarkan situs ke search enginePertama kita akan melakukan pendaftaran website ke google. Setelah itu kita akan mendaftarkan ke SEO (SearchEngine Optimation).

Untuk mendaftarkan website ke google, sebelumnya anda harus mempunyai sebuah akun di google. Silahkan anda mendaftar terlebih dahulu untuk mendapatkan akunnya. Sayayakin anda dapat melakukannya sendiri.

Setelah anda mempunyai akun di google. Saatnya untuk mendaftarkan website kita. Inilah langkah – langkahnya :

1. Buka alamat www.google.com/addurl . Jika anda belum login, silahkan anda login dengan menggunakan akun

google anda. Biasanya setelah login akan terihat halaman seperti ini.

2. Silahkan anda masukkan domain website anda seperti yangada pada gambar dibawah. Setelah itu ketikan captcha (kode konfirmasi) dan sekarang langsung anda kirim permintaan.

b. Mendaftarkan situs ke SEOSetelah terdaftar di search engine, kita akan menggunakanSEO. Apa itu SEO? SEO adalah teknik untuk mendapatkan peringkat bagus di search engine. Kalau anda biasa menggunakan google, ketika mengetikan sebuah kata kunci akan muncul daftar website yang memuat kata kunci tersebut. Nah, SEO digunakan agar website kita mendapatkan peringkat bagus dalam daftar pencarian pada kata kunci tertentu.

Banyak sekali teknik SEO yang dapat mengantarkan website kita ke peringkat satu. Semua ada kelebihan dan kekurangannya masing – masing. Namun teknik SEO yang akansaya bahas disini hanya yang bersifat GRATIS dan PRAKTIS.

Biar begitu efeknya cukup ampuh kalau anda rutin melakukannya.Google Ping adalah salah satu cara teknik SEO. Pengertiandari google ping adalah memberitahu kepada search engine google bahwa anda telah membuat artikel baru.

Bagaimana caranya? Simaklah caranya sebagai berikut :

1. Buka alamat www.googleping.com . akan terlihat tampilanberikut

2. Isikan bagian details dengan ketentuan sebagai berikuta. Blog name : nama website andab. Blog home page : alamat website anda

c. RSS URL : biarkan kosongd. E-mail : isikan e-mail anda

3. Klik check all, isikan captcha, lalu klik send pings.

Nantinya website anda akan dikirim sinyal ping kesemua situs yang terdaftar pada google ping. Sampai disini tunggu saja efeknya terhadap trafik kunjungan website kita.