~> Step-Step Dalam Membuat Website <~

Website merupakan salah satu kebutuhan orang banyak saat ini misalkan dalam dunia kerja, perkuliahan, juga sekolah karena mafaatnya yang sangat besar yaitu untuk membuat situs masing-masing sekolah, universitas, ataupun perkantoran. Akan tetapi, masih banyak orang belum mengetahui dalam pembuatan atau cara membuatnya. Mungkin karna keterbatasan pengetahuan juga pengenalan internet yang masih minim. Oleh karena itu, disini akan dijelaskan tata cara dalam pembuatan website yang kita inginkan. Dalam pembuatan website banyak sekali caranya dari beberapa bantuan aplikasi seperti PHP, Joombla, Fromtpage T, Corel WebDesignerT. Berikut pembahasan dalam pembuatan websitenya terlebih dahulu sebelum kita mendesainnya untuk menjadikannya lebih baik : 1. Dalam segi pengalamatan seperti singkatan dari WWW. WWW merupakan singkatan dari Word Wide Web yang merupakan beberapa kumpulan dari beberapa informasi yang terhubung dari beberapa server internet yang satu dengan yang lain dalam jaringan internet. Dalam setiap web pasti mempunyai link untuk saling berbagi informasi yang kita punya antara yang satu dengan yang lain. Pada link ini sudah memiliki tanda-tanda khusus oleh pembuatnya seperti dalam bentuk gambar, template, icon ataupun tulisan bergaris bawah. Apabila kita ingin mengetahui apakah gambar atau icon tersebut merupakan link yang dibuatnya itu lihatlah dari perubahan pada pointer mouse. 2. HTML (Hypertext Markup Language) HTML merupakan salah satu format data yang digunakan untuk membuat Hypertext pada pembuatan web yang bisa dibaca dari satu platform komputer ke platform komputer lainnya. 3. Home Page Home Page Merupakan salah satu halaman utama dari website yang didalamnya berisi banyak Informasi yang telah dibuat oleh pemilik website. Didalam home page itu juga terdapat beberapa Informasi dari link-link yang dibuat untuk menghubungkan dokumen yang satu dengan dokumen yang lain. Secara pribadi setiap perusahaan memiliki informasi dari World Wide Web yang memerlukan alamat atau URL khusus untuk dijadikan sebagai link dari perusahaan tersebut. 4. HyperText Transfer Protocol ( HTTP ) HTTP merupakan protocol yang dijadikan sebagai salah satu sarana untuk menentukan aturan-aturan yang harus diikuti oleh Web browser yaitu seperti dalam meminta atau mengambil suatu dokumen dari Web server dalam menyediakan dokumen yang diminta. Pada saat anda sedang menjelajahi salah satu Web dan pada alamat tersebut ada tulisan

http://www.indowebster.com, ini merupakan satu contoh dalam penggunaan protokol HTTP dalam Website. 5. Uniform Resource Locater (URL) URL merupakan sarana dalam menentukan lokasi informasi tu berada pada web server. Terdapat beberapa Format umum yang dimiliki URL adalah sebagai berikut : Protokol transfer ://nama host/path/nama file

Protokol transfer merupakan protocol yang digunakan oleh web browser untuk mengambil informasi dari web tersebut. Nama host adalah nama dari komputer tersebut dimana informasi itu berada. Path/nama file adalah jalur dari nama file dalam informasi.

6. Protokol Transfer Protokol transfer digunakan sebagai protocol untuk mengirim informasi dari Internet yang satu ke internet yang lain. Terdapat beberapa protokol lainnya sebagai berikut :

FTP (File Transfer Protokol). Protokol dirancang untuk para pemakai yang digunakan untuk mentransfer file dalam format teks maupun biner dalam server komputer dalam Internet. Contoh : ftp.usma.edu/pub/msdos/. Gopher. Protokol yang digunakan untuk mengakses server gopher. Contoh : gopher://wiretrap.spies.com/. News (Network News Transfer Protokol). Protokol yang digunakn untuk mendistribusikan berita di Usenet. Usenet itu sendiri merupakan salah satu sistem yang dirancang untuk forum diskusi yang didasarkan pada topik-topik yang disebut juga sebagai newsgroup. Contoh : news:comp.infosystems.www.announce. Telnet. Protokol yang digunakan untuk login ke suatu server komputer.

Dengan protokol-protokol yang ada diatas browser kita dapat bertindak sebagai client dari protokol-protokol tersebut. 7. Domain Name System (DNS) Dari Komputer-komputer yang berada di Internet menggunakan format penamaan standar untuk mempermudah dalam pengelolaan server dari komputer di Internet. Dalam sistem penamaannya server komputer yaitu Domain Name System (DNS). DNS yang membuat suatu tingkatan domain yang merupakan kelompok yang terhubung ke Internet. Terdapat beberapa nama-nama domain beserta organisasinya yang dimiliki antara lain adalah : Nama Domain Com Edu Gov Jenis Organsiasi Organisasi Komersial Contoh: www.google.com Lembaga Pendidikan Contoh: www.usc.edu Lembaga Pemerintah

Int Mil Net Org Au At Be Ca Ch Cz De Dk Es Id

Organisasi International Organisasi Militer Provider Internet Contoh indosat.net Organisai Umum Organisasi Komputer di Australia Organisasi Komputer di Austria Organisasi Komputer di Belgia Organisasi Komputer di Kanada Organisasi Komputer di Swiss Organisasi Komputer di Checna Organisasi Komputer di Jerman Organisasi Komputer di Denmark Organisasi Komputer di Spanyol Organisasi Komputer di Indonesia

Urutan membuat website secara garis besar

Dalam membuat website, sebenarnya tidak terlalu sulit. Ada beberapa hal ya harus disiapkan. Namun secara garis besar untuk membuat website, anda harus punya dulu domain dan hosting, kemudian mengkonfigurasi keduanya. lalu memilih engine website apakah blog, portal, ecommerce, dll. dan install engine tersebut. Jadilah website anda. Mungkin lebih gampangnya lihat urutan-urutan secara garis besar bagaimana membuat website di bawah ini: 1. Menyiapkan domain dan hosting. Anda menyewa domain dan hosting dulu di penyedia layanan tersebut. Untuk domain harganya mulai 79.000-95.000. Sedangkan hosting bervariasi mulai dari 50000-jutaan rupiah. Atau jika anda ingin belajar-belajar saja bisa menggunakan hosting gratisan. 2. Konfigurasi domain dan hosting. Setelah anda menyewa domain dan hosting, saatnya mengkonfigurasi domain dan hostingnya. tujuannya untuk menghubungkan nama domain dan hosting. Caranya dengan memasukkan Name Server di domainnya. 3. Memilih engine website. Memilih engine ini bisa juga dilakukan awal-awal sebelum anda membuat domain dan hosting. Engine website ini bermacam-macam, seperti blog, portal, forum, dan lain-lain.

Contohnya adalah seperti WordPress, joomla, drupal, opencart, oscommerce, phpbb, dan lain sebagainya. Pilih sesuai jenis website yang ingin anda buat. 4. Install engine website di hosting. Setelah anda memilih engine website, saatnya anda menginstallnya di server atau hosting. Ada 2 cara menginstall engine website. Yang pertama adalah secara manual dengan mengupload menggunakan software FTP. Lalu anda konfigurasi dengan memasukkan username dan password MySql serta nama databasenya. Yang kedua adalah menggunakan fitur install otomatis dengan fantastico. Dengan fantastico anda hanya cukup memasukkan nama database lalu username dan password databasenya. Kemudian klik tombol install, web anda sudaj jadi tanpa harus upload pakai FTP. 5. Manage website anda. Setelah jadi, yang anda lakukan sekarang memanage dan memasukkan konten di dalam website. dan melakukan perawatan rutin kepada website.

*Tutorial Step-step membuat Website *

Setelah mengikuti tutorial ini diharapkan dapat menguasai : 1. Bagaimana cara memanggil Css dari html 2. Membuat form sederhana 3. Membuat folder-folder untuk membuat website 4. Mengetahui fungsi beberapa tags Untuk hasil akhirnya seperti pada gambar dibawah ini.

Step 1 Untuk tutorial ini saya tidak akan memberitahu bagaimana cara menginstal XAMPP, saya anggap kita sudah mengetahui menggunakan XAMPP ok langsung saja membuat folder untuk memanggil file-file html nya. Misal folder instalasi XAMPP nya berada di C:\xampp\htdocs\music, pada contoh ini kita membuat folder dengan nama music seperti contoh di atas. Di dalam folder music ini terdiri dari 3 files diantaranya index.html, style.css dan folder images, untuk membuat file index.html dan style.css bisa menggunakan notepad atau lainnya tapi disarankan menggunakan Notepad ++. Sehingga susunan foldernya seperti gambar di bawah ini.

Step 2 a.Basic Mark Up Sebelum kita melangkah ke step berikutnya kita perlu mengetahui fungsi-fungsi tags di atas. 1. <!DOCTYPE html> Doctype yang singkat sebagai ciri khas HTML5 2. <html> dan </html> Tags yang harus ada untuk memberitahu browsers kalau type dokumen ini bertype html, yang perlu diperhatikan semua tag html harus ada pembuka dan penutup, maksudnya seperti <tags> harus diakhiri dengan tag penutup </tags>.

3. Tag <title>Judul Website Kita</title> Judul Website Kita Tags ini untuk memberitahu apa judul dari website. 4. <body></body> Bagian Body adalah isi dari dokumen HTML yang didalamnya telah disusun kode kode sehingga akan menampilkan website yang anda hendaki.

b. Memasukan script pendukung ke dalam bagian Body html Persis di bawah tag <body> masukan kode berikut </pre> <div id="wrapper"> <div id="header"></div> <div id="main"><form action="" method="post"> <label class="push-top" for="name">name:</label><input id="name" class="push-top" type="text" name="name" value="" /> <label for="email">email:</label><input id="email" type="text" name="email" value="" /> <input id="button" /></form></div> </div> <pre> 1. File index.html Sehingga script lengkap untuk contoh di atas adalah sebagai berikut, silahkan copy ke Notepad ++ atau lainnnya kemudian simpan dengan nama index.html di folder music. class="push-bottom" type="submit" name="button" value=""

<!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Memorabilia4Music</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="main"> <form action="" method="post">

<p><label for="name">name:</label><input value=""/></p> <p><label for="email">email:</label><input value=""/></p>

id="name" id="email"

name="name" name="email"

type="text" type="text"

<p><input type="submit" name="button" id="button" value="" /></p> </form> </div> </div> </body> </html>

2. File style.css

@charset "UTF-8"; /* CSS Document Panghaidar.wordpress.com */ body { background-image: url(images/back.png); background-repeat: repeat-x; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #wrapper { width:960px; margin:auto; } #header { background-image:url(images/logo.png); background-repeat:no-repeat; height:145px; } #main {

position:relative; background-image:url(images/main.png); background-repeat:no-repeat; height:455px; } form { position:absolute; top:140px; left:711px; height:185px; background-image:url(images/send-form.png); width:228px; } label { float:left; margin-left:15px; width:40px; } input { border:none; background-color:transparent; background-image:url(images/input.png); line-height:20px; padding:4px 0; width:162px; } textarea { border:none; background-color:transparent; background-image:url(images/textarea.png); width:162px; line-height:20px; } p{ margin:5px 0; } .push-top { margin-top:40px;

} .push-bottom { background-image:url(images/enquiry.png); height:38px; width:209px; margin:15px 0 0 10px; } #main form p { position:relative; } #main form p .errors { display:block; position:absolute; left:-170px; padding:5px; background-color:white; color:red; border:1px solid; top:0px; width:auto !important; } 3. Folder Images

Setelah semua terkumpul di folder music yang terdiri dari file index.html, style.css dan folder images kini saatnya kita memanggil di browser dengan mengetikan url http://localhost/music Untuk memanggil file css kita perlu menambahkan script ini di bawah tag <title> <link href="style.css" rel="stylesheet" type="text/css" />