DISUSUN OLEH :

Mega Priyanto Andy Prasetyo Tian Maulana Fransisco

(12110443) (12111292) (1211____) (1211____)

KATA PENGANTAR

Makalah yang berjudul Pembuatan Website Jenis HTML merupakan makalah yang di buat untuk memenuhi salah satu tugas pada mata kuliah Perkembangan Teknologi Informasi dan Komunikasi Pada program Diploma 3,Akademik Manajemen Informatika di Bina Sarana Informatika. Judul makalah yang di presentasikan adalah Pembuatan Website Jenis HTML alasan saya sebagai penulis memilih judul tesebut adalah mencoba memberitahukan bagaimana cara membuat atau mendesign website jenis HTML yang mungkin sebagian orang sudah bisa,namun pasti ada yang masih belum mengerti bagaimana cara pembuatan website itu sendiri.Makalah ini juga menerangkan cara untuk meng-online-kan website dengan gratis yang tentunya cukup berguna untuk pemula jika ingin mencoba membuat websitenya sendiri. Lewat uraian dalam makalah ini juga, penulis berusaha meluruskan sebagian besar cara mengupload website tanpa mengeluarkan uang yang cukup banyak untuk menyewa domain-domain yang berbayar dengan kualitas yang tidak jauh berbeda dengan domain yang berbayar agar si membuat website tidak takut dengan kesalahan yang terjadi bila nantinya website tersebut ada beberapa kesalahan dalam pembuatannya.Setiap rancangan website berupa template yang saya gunakan juga berdasarkan hasil download di internet dan di dalam makalah ini di buat sebisa mungkin mudah di pelajari bagi yang membacanya. Makalah ini terdiri dari tiga bab yaitu pendahuluan, Isi dan Penutup.

Jakarta, 10 Mei 2011 Mega Priyanto

DAFTAR ISI

KATA PENGANTAR.................................................................. I DAFTAR ISI............................................................................... II 1.PENDAHULUAN

1.1 Latar Belakang...................................................................... 1 1.2 Tujuan.................................................................................. 2 1.3 Bahasan Masalah................................................................. 2

2.ISI MAKALAH
2.1 Langkah Awal Pembuatan website........................................ 3 2.2 Tahap Perancangan Website................................................. 5 2.3 Memilih Nama Domain.......................................................... 7 2.4 Memilih Web Hosting............................................................ 9 2.5 ADD-ON Domain.................................................................... 14 2.6 Meng-Upload File ke Server Hosting...................................... 17

3.PENUTUP
3.1 Kesimpulan............................................................................ 19 3.2 Saran..................................................................................... 19

DAFTAR PUSTAKA

II

PENDAHULUAN

1.1 Latar Belakang

Semakin hari dunia internet semakin akrab dengan kehidupan masyarakat. Bahkan saat ini banyak perangkat sudah dikonvergensikan agar bisa terhubung dengan jaringan internet. Di masa yang akan datang internet akan menjadi kebutuhan mendasar bagi setiap orang, sama seperti kebutuhan orang akan sarana telekomunikasi saat ini. Bahkan diprediksikan bahwa bisnis masa depan sangat bergantung kepada jaringan internet, saat inipun sudah kelihatan. Berbagai kemudahan bisa didapatkan dari internet. Akses yang tidak terbatas 24 jam sehari, jangkauan yang luas ke seluruh dunia, dan kecepatan menjadi kekuatan yang hanya bisa diberikan oleh internet. Kelebihan internet ini juga dimanfaatkan oleh banyak pengguna internet untuk menghasilkan uang dari internet. Ini bukan rahasia umum lagi. Beberapa orang muncul sebagai Milyarder karena internet. Sebutlah Jeff Bezos si pemilik toko buku online Amazon.com sebagai salah satu multi jutawan yang berhasil memanfaatkan kekuatan internet. Di Indonesia juga sudah muncul banyak nama, sebutlah misalnya Anne Ahira, Cosa Aranda, Joko Susilo, G.M. Susanto, Welly Mulia, Peter Kohar. Saat ini ratusan bahkan ribuan situs-situs baru bermunculan setiap hari di internet. Hal ini didukung oleh semakin banyaknya fasilitas penyedia pembuatan situs baik gratis maupun berbayar. Juga semakin baiknya infrastruktur internet karena kebijakan pemerintah yang cukup mendukung. Pernahkah anda membayangkan memiliki situs sendiri? Umumnya orang berpikiran bahwa untuk memiliki sebuah website membutuhkan biaya yang mahal, dan kalau membuatnya sendiri cukup rumit. Padahal, dengan memanfaatkan fasilitas dan tools gratis di internet, ternyata anda bisa membuat dan memiliki website professional dengan gratis. Nah, melalui makalah ini saya akan berusaha menjelaskan dari nol bagaimana membuat situs gratis dengan studi kasus situs saya sendiri www.webcoolinformatika.co.cc. Anda tidak perlu beli domain, sewa hosting, dan membayar web desainer untuk membuatkan situs untuk anda. Saya berusaha semaksimal mungkin agar pembaca dapat dengan mudah memahami dan mempraktekkan langsung apa yang saya tulis di sini. Saya lengkapi langkah demi langkah dengan screenshot gambar.

1.2

Tujuan
Adapun tujuan pembuatan makalah ini adalah :

1. Memberikan gambaran pada semua mengenai cara pembuatan website dan memiliki website itu sendiri. 2. Memberitahukan cara membuat website secara gratis untuk mereka yang ingin membuat website professional tanpa mengeluarkan uang yang banyak

1.3

Bahasan Masalah

Sesuai dengan judul dan pembuatan makalah ini,maka isi pada makalah ini terperincikan pokok pembahasan sebagai berikut :

1. 2. 3. 4. 5. 6.

Langkah awal pembuatan website Tahap perancangan website Memilih nama domain Memilih web hosting ADD-ON Domain Meng-upload file ke server hosting

ISI MAKALAH

2.1. Langkah Awal Pembuatan Website

Sebagai langkah awal dalam membuat sebuah situs, anda harus menentukan terlebih dahulu hal-hal sebagai berikut: 1. Situs jenis apa yang ingin anda buat: situs content atau minisite, pakai bahasa html atau php, menjual produk atau sekadar artikel, dll. 2. Tema website anda : apakah berhubungan dengan teknologi, kesehatan, gaya hidup, dll. 3. Target pengunjung yang diharapkan : dari dalam negeri atau luar negeri, laki-laki atau perempuan, pemula atau expert, tua atau muda, dll. 4. Aktifitas pengunjung di situs anda : membeli atau menitip nama dan e-mail mendownload, ikut polling/survey, pasang iklan, dll. 5. Tujuan atau manfaat situs tersebut buat anda : membangun list, menjual produk, memajang artikel agar mudah ditemukan di search engine, dll. Untuk situs www.webcoolinformatika.co.cc saya rencanakan di awal sebagai berikut: 1. Situs jenis minisite dengan tampilan desain minimalis dan menggunakan bahasa pemrograman html (statis). 2. website : situs download e-book tutorial 3. Target pengunjung dari dalam negeri untuk semua umur dan jenis kelamin. 4. Aktifitas pengunjung di situs : mengundang teman dan mendownload ebook 5. Tujuan yang ingin dicapai : membangun list dan kredibilitas.

Nah setelah anda mempunyai gambaran tentang situs anda seperti di atas, selanjutnya anda buat kerangka atau outline tentang situs yang akan anda buat. Anda bisa bikin outline ini di selembar kertas dengan menggunakan pensil atau pulpen. Cara yang biasa saya gunakan adalah seperti membuat bagan alir (flowchart), menghubungkan antara satu halaman dengan halaman lainnya. Sebagai contoh saya merencanakan situs www.webcoolinformatika.co.cc ini menggunakan 5 (lima) halaman, maka saya membuat bagan alirnya sebagai berikut:

Materi Home Trims Kontak

Daftar Materi

Profil

Dengan adanya bagan alir ini akan sangat membantu untuk memvisualisasikan isi setiap halaman dan navigasi antara halaman-halaman web yang akan dibuat. Di samping itu, bagan alir juga dapat mempermudah pemeliharaan dan update (pembaharuan) isi atau content situs setiap saat apabila dibutuhkan. Selanjutnya agar situs anda bisa online dan diakses dari seluruh dunia maka anda membutuhkan:

1. Lahan (hosting) untuk menyimpan file situs anda 2. Nama (domain) untuk memanggil/menampilkan situs anda di browser internet. 3. Desain tampilan dan content (isi) yang akan dilihat oleh pengunjung

2.2. Tahap Perancangan Website

Sebelum merancang website, ada beberapa hal yang perlu anda lakukan : 1. Mengumpulkan atau membuat gambar (image) yang akan ditampilkan di web. 2. Mengumpulkan atau membuat materi/isi (content) web. 3. Merancang desain web atau mencari template gratis di internet. 4. Mencari script yang mendukung. Lalu anda siapkan juga program atau software yang akan membantu anda membuat dan mengedit website anda. Saya sendiri menggunakan : 1. Microsoft Frontpage 2003 untuk membuat dan mengedit halaman web. 2. Adobe Photo Shop untuk mengedit image (gambar). Nah, sekarang saya ingin tunjukkan bagaimana cara saya mendapatkan template gratis yang cocok dengan website yang ingin saya rancang. Seperti yang saya uraikan sebelumnya bahwa saya ingin membuat situs jenis minisite, untuk itu saya mencari situs yang menyediakan template minisite gratis di Google. Dari beberapa situs hasil pencarian google, akhirnya saya memilih salah satu situs penyedia template gratis yang memenuhi kriteria yang saya harapkan, yaitu www.minisitegallery.com. Situs ini menyediakan template minisite dengan desain professional dan bernilai jual tinggi tapi tetap diberikan gratis.

Cara mendownload Template :

1. Buka www.minisitegallery.com 2. Bawa kursor ke atas gambar template yang anda ingin download 3. Klik details dari template tersebut, maka akan muncul halaman baru yang menguraikan lebih detail tentang template tersebut. 4. Klik link Register untuk melakukan pendaftaran terlebih dahulu. Bila anda sudah pernah mendaftar sebelumnya cukup klik link logged in untuk login dan mendownload template yang diinginkan. 5. Lalu akan terbuka halaman login wordpress untuk melakukan pendaftaran seperti pada gambar berikut.

6. Masukkan Username yang anda inginkan ke kotak isian username. 7. Masukkan alamat e-mail anda yang masih aktif, karena mereka akan mengirimkan data login serta password anda ke alamat e-mail yang anda daftarkan tersebut. 8. Masukkan angka pada kotak isian. Pada contoh gambar di atas, masukkan angka 8 karena 7 + 1 = 8. 9. Klik tombol Register untuk mengirimkan pendaftaran anda. 10. Selanjutnya cek e-mail anda dan cari subject e-mail seperti ini : [MiniSiteGallery.com] Your username and password. Anda akan mendapatkan username sesuai yang anda daftarkan, dan password sementara. Blok dan copy password sementara tersebut. 11. Klik link minisitegallery.com/wp-login.php yang disertakan dalam e-mail tersebut, lalu akan terbuka halaman login wordpress. 12. Silakan masukkan username dan password sementara pada kotak isian yang tersedia. Selanjutnya anda akan login ke halaman member area. Langkah pertama yang harus anda lakukan adalah mengganti password sementara tersebut dengan password baru yang anda tentukan sendiri. 13. Klik menu Your Profile lalu geser layar ke bawah dan temukan kotak isian New Password, isi dengan password baru anda lalu klik tombol Update Profile. 14. Selanjutnya anda kembali ke situs www.minisitegallery.com dan mendownload template yang anda inginkan.

2.3. MEMILIH NAMA DOMAIN

Apalah arti sebuah nama. Begitu pujangga William Shakespeare menisbikan arti penting nama dalam kehidupan. Namun, pujangga romantis ini ternyata tidak sepenuhnya benar. Dalam dunia bisnis online, nama menjadi sangatlah penting. Nama domain (domain name) selain sebagai alamat anda di cyberspace, ia sekaligus juga berperan sebagai brand bisnis atau diri Anda. Karena pentingnya nama di dunia maya, maka sangat disarankan untuk memilih domain name yang singkat, mudah dilafalkan atau diucapkan, unik, mudah untuk diingat, dan mengandung keyword yang anda target. Untuk memiliki nama domain, anda bisa memilih yang berbayar atau gratis. Yang berbayar tentu memiliki berbagai kelebihan, namun sebagai pemula tidak ada salahnya memanfaatkan fasilitas domain gratis seperti yang akan saya uraikan lebih lanjut melalui e-book ini.

Berikut adalah beberapa penyedia nama domain gratis di internet: 1. www.domain.co.nr 2. www.dot.tk 3. www.co.cc Dari ketiga penyedia nama domain tersebut, saya paling menyukai co.cc karena adanya fasilitas DNS server sehingga bisa di add-on ke web server yang kita gunakan. Sedangkan dot.tk dan co.nr hanya berfungsi sebagai redirect url. Dalam tutorial ini hanya akan saya jelaskan cara mendapatkan domain gratis dari www.co.cc, format nama domain yang anda dapatkan adalah www.namadomain.co.cc Cara Mendapatkan Domain : 1. Buka www.co.cc, lalu ketikkan nama domain yang anda inginkan di kotak isian yang tersedia, lalu klik tombol Check availability untuk mengecek apakah domain yang anda inginkan belum diambil/ didaftarkan oleh orang lain.

Nah, sekarang anda bisa memiliki nama domain yang cukup keren dan semiprofesional dengan biaya nol rupiah. Bandingkan bila anda beli domain berbayar, maka anda harus merogoh kocek antara Rp.65.000,- sampai Rp.120.000,- yang dibayar per tahun. Di co.cc bahkan anda bisa mendapatkan 2 (dua) domain gratis untuk setiap alamat e-mail yang anda daftarkan. Namun, bila dalam 30 hari web anda yang menggunakan domain tersebut belum anda online-kan, maka domain anda otomatis dinon-aktifkan dan bisa diambil oleh orang lain yang mendaftar kemudian. Untuk itulah anda harus segera merancang website anda, seperti yang sudah saya jelaskan sebelumnya, lalu anda upload ke webhosting gratisan yang akan saya jelaskan berikut ini.

2.4. MEMILIH WEB HOSTING

Web hosting adalah salah satu komponen utama yang diperlukan agar file kita bisa diakses melalui web browser. Web hosting atau web server adalah tempat untuk menyimpan file website yang kita buat agar bisa ditampilkan di internet. Dari segi biaya, webhosting juga terbagi dua, yakni ada hosting berbayar dan ada pula hosting gratisan. Pada tutorial ini saya akan menguraikan bagaimana mendapatkan fasilitas webhosting gratisan semi professional dengan berbagai fitur yang hampir sama dengan yang berbayar. Adapun fitur-fitur tersebut di antaranya: 1. Kapasitas space yang cukup besar untuk menyimpan file yakni sebesar 243 MB. 2. Bandwidth bulanan yang cukup besar yakni sebesar 20 GB lebih. 3. Vista Control Panel yang mirip dengan cPanel pada hosting berbayar 4. Support PHP dan MySQL Automatic Script Installer yang mirip dengan Fantastico di hosting berbayar 5. Gratis unlimited e-mail 6. Fasilitas addon domain dan parked domain 7. Support FTP transfer menggunakan software FTP Client. dan berbagai fitur lainnya. Cara Mendapatkan Account Hosting di ByetHost.com : 1. Sebelum mendaftar, pastikan anda menggunakan browser Mozilla Firefox, jangan menggunakan browser Internet Explorer. Lalu buka situs www.byethost.com akan terbuka halaman seperti berikut ini.

2. Klik tombol Not a member berwarna hijau seperti pada gambar di atas, lalu akan terbuka formulir pendaftaran. 3. Isi formulir pendaftaran sesuai dengan data yang sebenarnya, terutama alamat e-mail anda.

10

4. Klik tombol Register untuk melanjutkan ke step berikutnya. Kalau muncul halaman berikutnya seperti gambar berikut, maka langsung klik tombol Click Me To Continue untuk melanjutkan ke langkah berikutnya.

11

5. Setelah itu akan muncul captcha untuk mencegah pendaftaran ilegal, masukkan 2 kata tersebut ke kotak isian yang tersedia.

6. Klik tombol Register untuk mengirimkan formulir pendaftaran anda. Bila pendaftaran anda diterima, maka anda akan mendapatkan data byethost anda seperti berikut ini.

12

7. Jangan lupa menyimpan atau mencatat data-data tersebut karena akan digunakan selamanya. Dan harus diingat pula agar data tersebut terutama password tidak dilihat oleh siapa pun. Jadi, simpan baik-baik data ini di komputer anda. 13

Sekarang anda telah memiliki lahan (hosting) di dunia maya. Langkah selanjutnya adalah menghubungkan domain anda dengan web hosting anda. Untuk menghubungkan domain co.cc dan byethost maka kita gunakan fasilitas add-on domain di byethost.com.

2.5. ADD-ON DOMAIN

Secara default anda akan mendapatkan alamat sub-domain gratis dari byethost seperti ini http://username-anda-saat-daftar.byethostXX.com dimana XX adalah angka acak yang diberikan otomatis oleh byethost.com. Contoh : pada saat saya mendaftar, saya menggunakan username =webcoolinformatika, maka saya diberikan alamat sub-domain menjadi http://webcoolinformatika.byethost32.com. Alamat ini terasa kurang professional, lagipula kita sudah daftarkan domain di co.cc. Jadi lebih baik menggunakan domain semi-profesional dari co.cc saja. Cara Mengkoneksikan Domain (add-on domain) dengan Web Hosting : 1. Login ke Vista cPanel anda, buka www.byethost.com lalu klik menu Member Login Here seperti pada gambar berikut.

2. Masukkan username control panel dan password anda pada kotak isian yang tersedia, lalu klik tombol Login untuk masuk ke Vista cPanel anda. Username control panel adalah username yang diberikan oleh ByetHost pada saat mendaftar, formatnya seperti ini bXX_XXXXXXX dimana X adalah angka acak. Selanjutnya anda akan dibawa masuk ke halaman Vista cPanel anda seperti pada gambar berikut.

14

Di sebelah kiri (yang berwarna biru) adalah data informasi account webhosting anda, sedangkan sebelah kanan adalah menu-menu untuk mengelola webhosting anda. Di bagian atas ada iklan banner dan di tengah-tengah ada penawaran untuk meng-upgrade account anda menjadi Premium Hosting. Iklan penawaran ini diabaikan saja. 3. Selanjutnya anda klik menu Addons domain pada bagian Domains seperti pada gambar di bawah ini.

4. Akan terbuka halaman baru dengan kotak isian untuk memasukkan domain anda seperti pada gambar berikut.

15

Ketikkan nama domain co.cc anda di kotak isian yang tersedia lalu klik tombol Create Domain. Ketik domain anda tanpa menggunakan http dan www,selanjutnya akan muncul nama domain tersebut seperti pada gambar berikut. Anda bisa add-on domain sampai 5 (lima) buah dalam 1 (satu) account webhost.

16

Nah, setelah melalui langkah-langkah di atas berarti anda telah memiliki tempat hosting dan domain name sebagai alamat anda di dunia maya. Sekarang saatnya memasukkan (upload) file web ke server hosting anda agar situs anda segera online.

2.6. MENG-UPLOAD FILE KE SERVER HOSTING

Setelah anda memiliki hosting dan domain, langkah selanjutnya adalah memindahkan file situs yang telah anda rancang di komputer ke web hosting tersebut. Proses pemindahan atau transfer file dari komputer ke jaringan internet ini disebut upload. Untuk meng-upload file, anda bisa menggunakan 2 (dua) cara, yaitu dengan menggunakan software FTP client dan atau tanpa menggunakan software (upload langsung menggunakan fasilitas file manager di vista control panel byethost.com). Kalau mau pakai software FTP, anda bisa gunakan software gratisan seperti FileZilla atau SmartFTP, silahkan cari panduan cara menggunakan software tersebut di google. Di makalah ini saya hanya akan menjelaskan cara mengupload file tanpa menggunakan software, cukup melalui file manager saja. Cara yang biasa dilakukan adalah mengupload file satu demi satu secara manual ke server byethost, tetapi ini tidak perlu anda lakukan karena makan waktu dan cukup repot. Dan juga kalau kita upload file satu demi satu terkadang ada file yang terlupakan sehingga tentu saja website kita tidak akan tampil sebagaimana yang diharapkan. Misalnya, ada file gambar yang tidak ikut atau lupa diupload, maka otomatis di web kita tidak akan tampil gambar tersebut. Yang muncul hanya gambar kotak segi empat yang mengurangi keelokan tampilan website kita. Nah, agar itu tidak terjadi maka sebaiknya kumpulan file web tersebut kita kompres atau di-zip terlebih dahulu sebelum diupload. File-file yang akan ditempatkan satu folder di web, di-zip menjadi 1 (satu) file saja. Cara Mengupload File ke Server ByetHost : 1. Login ke Vista cPanel Byethost anda. 2. Setelah masuk ke control panel, klik menu File manager di bagian FTP Manager atau Site Management (lihat kotak merah di gambar).

17

Berhubung saya belum pernah meng-online-kan jadi saya tidak bisa memberikan rinciannya di makalah ini.

18

3. PENUTUP

3.1.

KESIMPULAN

Akhirnya, sampailah juga kita pada kesimpulan tentang makalah pembuatan web ini. Tentu saja anda tidak akan langsung menguasai panduan ini dengan sekali baca, terutama kepada anda yang benar-benar masih pemula dalam pembuatan website. Untuk itulah, saya berharap anda bisa membaca berulang-ulang sampai anda betul-betul menguasai tutorial ini. Dan akan lebih baik lagi bila anda membaca tutorial ini sambil praktek langsung secara online. Harapan saya semoga makalah ini bermanfaat bagi anda para pembaca sekalian, terutama buat diri saya pribadi sebagai bahan untuk berbagi pengetahuan dan pengalaman kepada para pembaca.

3.2.

SARAN

Pembuatan website ini hanya baru tahap HTML,untuk anda yang ingin mengembangkannya lebih baik,anda bisa mempelajari panduan-panduan untuk pembuatan website dinamis atau website jenis HTML. Berhubung saya hanya menjelaskan bagaimana pembuatan jenis HTML mka saya tidak bisa menjelaskan pembuatan jenis PHP, Karna pembuatan jenis PHP harus mempunyai server offline atau localhost yang anda bisa gunakan Database MYSQL.

19

DAFTAR PUSTAKA

Asnawi,ST.2007 Tutorial Pembuatan Website Gratis.Jakarta. 67 hal

Kadir Abdul. 2010 .Membuat Aplikasi Web Dengan PHP dan Database MySQL. Penerbit Andi.jakarta. 286 hal