Dalam
dunia maya (internet) kita mengenal beberapa istilah tentang web, www,
website, web page dan home page. tapi saya tidak akan membahas
satu-persatu arti istilah tersebut. yang jelas istilah tersebut
merupakan satu-kesatuan yang tidak dapat dipisahkan dalam lingkup
internet. Dalam bahasan sekarang ini saya akan membahas tentang cara
membuat web sederhana, untuk menghasilkan web profesional.| » HALAMAN I |
Sebelum melangkah lebih jauh, pertama-tama saya akan membahas pendukung untuk membangun sebuah web. Untuk membangun web kali ini, kita tidak perlu menggunakan alat atau software khusus seperti dreamweaver atau lain sejenisnya. Jika anda membutuhkan anda bisa mendownload dreamwever portable grtis disini. Karena web yang akan kita buat hanya web sederhana, tentunya alat-alat pun cukup sederhana. Jika anda sudah paham dalam membuat web dasar yang sekarang akan saya bahas, Insya Allah jika anda membuat web profesional tidak akan sulit lagi. Untuk bahasan membuat web profesional akan saya bahas dalam bahasan selanjutnya yaitu HALAMAN II. Tapi bagi anda yang awam sebelum anda melangkah ke halaman selanjutnya anda wajib tau dasar-dasarnya dulu yang akan saya bahas sekarang ini.
Alat atau pendukung untuk membuat web kali ini antara lain:
- Notepad
Software ini sudah ada dalam window anda. Notepad digunakan untuk membuat template - Adobe photoshop
Software ini digunakan untuk mengedit gambar untuk ditampilkan pada web - Browser Internet
Software ini sudah ada dalam window kita yaitu internet explorer. Ini berpungsi untuk membuka atau menguji web yang telah kita buat, agar lebih cepat dalam membuka web atau browsing anda bisa menggunakan mozilla firefox, anda bisa mendownload gratis disini. - Software FTP
Software ini bisa anda download gratis disini, cari dan download Filezilla Clien. Software ini berpungsi untuk upload template web yang sudah jadi ke hosting. - Web Hosting
Webhosting yaitu sebuah tempat atau ruang di internet untuk menempatkan file atau template web kita, untuk belajar anda bisa memanfaatkan pasilitas gratis 000webhost.com, agar anda bisa menggunakan pasilitas 000webhost.com, anda pilih subdomain lalu lakukan pendaftaran.
Langsung saja kita mulai, buka notepad dengan halaman kosong muncul pada monitor. Selanjutnya copy coding html dibawah ini satu per satu menjadi tiga bagian.
- Mulai dengan yang pertama, copy coding html dibawah ini dan paste pada notepad yang telah dibuka sebelumnya.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>elektro4site</title>
<link href="images/icon-site.gif" rel="shortcut icon"/>
</head>
<body>
<br><font size="6"><b>elektro4site</b></font></a>
<br>|<a href="index.html"> Home </a>|<a href="profil.html"> Profil Saya </a>|<a href="foto.html"> Foto Saya </a>|
<br><br><table width="200" border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td align="justify">
<b>Selamat Datang</b>
<br>Ini adalah web pertama yang saya buat, web ini merupakan sebuah gambaran dasar dalam membuat website prpfesional. Tidak ada seorangpun yang pandai ilmu sebelum belajar dasar-dasar ilmu, karena dasar-dasar ilmu merupakan pondasi paling awal untuk membangun atau mencapai ilmu yang lebih tinggi. Seorang anak lahir tidak langsung berlari, tapi dengan tahapan tertentu anak bisa berlari, berguling dahulu, merangkak dahulu, baru berlari.
</td></tr></tbody></table>
</body>
</html>
Setelah tercopy, anda rubah yang bertanda merah saja. Tulisan elektro4site ganti dengan nama yang anda inginkan. Pada images/icon-site.gif anda harus membuat folder untuk memudahkan anda buat folder pada desktop dan didalam folder tersebut anda masukan sebuah gambar kecil atau sebuah icon, icon tersebut nantinya akan ditampilkan pada toolbar browser sebagai logo website anda. Untuk membuat icon anda gunakan adobe photoshop bisa juga dengan corel draw, ukurannya gambar 32x32 pixel agar proses loading gambar cepat. format gambar bisa jpg, gif, png setelah selesai dibuat, simpan pada folder images dengan nama icon-web, apabila gambar yang anda buat format png berarti cara penulisan pada code html menjadi images/icon-site.png
Setelah semua selesai, simpan coding yang telah anda rubah, klik seve as namai dengan index.html simpan pada desktop. Perhatian jangan namai halaman utama anda dengan nama lain contoh elektro4site.html, jika semua file yang anda buat sudah di upload kehosting maka akan terjadi masalah, yang akan terjadi jika anda akan membuka website misalkan pada browser anda mengetikan domain www.elektro4net.com halaman yang anda buat dengan nama elektro4web.html tidak akan terbaca, kecuali anda menulis lengkap pada browser contoh www.elektro4net.com/elektro4site.html jika demikian halaman awal akan terbuka. Oleh karena itu untuk halaman utama anda namai dengan index.html, walau anda mengetikan www.elektro4net.com halaman utama index.html anda dengan sendirinya akan terbuka. - Masih seperti yang pertama, buka notepad dengan halaman kosong, copy dan paste coding html berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>elektro4site :: Profil Saya</title>
<link href="images/icon-site.gif" rel="shortcut icon"/>
</head>
<body>
<br><font size="6"><b>elektro4site</b></font></a>
<br>|<a href="index.html"> Home </a>|<a href="profil.html"> Profil Saya </a>|<a href="foto.html"> Foto Saya </a>|
<br><br><table width="200" border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td align="justify">
<b>Profil Saya</b>
<br>Nama lengkap saya Iwan Setiawan, tapi banyak orang mengenal saya dengan sebutan Iwan Elektro. Saya mengenal website baru-baru ini, kiri-kira lima bulan kebelakang jelasnya bulan april 2009, saya belajar hanya dengan buku atau tutoril yang banyak beredar di internet. Saya juga belum begitu tau banyak tentang web, walau demikian mudah-mudahan web yang sangat sederhana ini bisa menjadi gambaran dalam belajar membuat web profesional.
</td></tr>
</tbody></table>
</body>
</html>
Seperti sebelumnya, rubah yang berwarna merah saja, untuk images/icon-site.gif samakan dengan yang pertama. setelah selesai simpan pada desktop namai dengan profil.html - Masih sama seperti sebelumnya, copy dan paste coding html berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>elektro4site :: Foto Saya</title>
<link href="images/icon-site.gif" rel="shortcut icon"/>
</head>
<body>
<br><font size="6"><b>elektro4site</b></font></a>
<br>|<a href="index.html"> Home </a>|<a href="profil.html"> Profil Saya </a>|<a href="foto.html"> Foto Saya </a>|
<br><br><table width="200" border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td align="justify">
<b>Foto Saya</b>
<br>Ini adalah foto saya.
<br><img width=”200px” height=”200px” src="images/foto-saya.jpg">
</td></tr></tbody></table>
</body>
</html>
Seperti yang sebelumnya, rubah yang bertanda merah saja. Untuk images/foto-saya.jpg caranya sama seperti membuat logo web yang sebelumnya telah saya bahas, bedanya anda tidak perlu lagi membuat folder, karena folder sudah dibuat sebelumnya, yang harus anda buat fotonya saja, cari foto anda, rubah ukuran menjadi 200 x 200 pixel, setelah itu simpan pada folder images dengan nama foto-saya.jpg. setelah semua anda rubah, simpan coding html tersebut pada desktop dengan nama foto.html.
Sekarang coba anda uji web yang telah anda buat tadi, caranya klik menu utama web yaitu index.html yang terdapat pada desktop. Maka pada browser anda akan muncul seperti gambar dibawah, mungkin untuk web dengan ukuran sekecil ini bisa tergolong kepada web mobile atau web cellular.
- Nomor 1 adalah sebuah hasil dari coding <title>elektro4site</title>
- Nomor 2 adalah sebuah hasil dari coding <link href="images/icon-site.gif" rel="shortcut icon"/>
- Nomor 3 adalah sebuah hasil dari coding <br><font ><b>elektro4site</b></font></a>
- Nomor 4 adalah sebuah hasil dari coding <br>|<a href="index.html"> Home </a>|<a href="profil.html"> Profil Saya </a>|<a href="foto.html"> Foto Saya </a>|
- Nomor 5 adalah sebuah hasil dari coding :
<br><br><table width="200" border="0" cellpadding="0" cellspacing="0">
<tbody><tr><td align="justify">
<b>Selamat Datang</b>
<br>Ini adalah web pertama yang saya buat, web ini merupakan sebuah gambaran dasar dalam membuat web profesional. Tidak ada seorangpun yang pandai ilmu sebelum belajar dasar-dasar ilmu, karena dasar-dasar ilmu merupakan pondasi paling awal untuk membangun atau mencapai ilmu yang lebih tinggi. Seorang anak lahir tidak langsung berlari, tapi dengan tahapan tertentu anak bisa berlari, berguling dahulu, merangkak dahulu, baru berlari.
</td></tr></tbody></table>
Sekarang anda coba klik satu persatu link text pada contoh 4 yang berpungsi sebagai navigasi tersebut, jika anda tidak salah mengubah coding, maka halaman akan terbuka sesuai text link atau navigasi yang anda klik, jika anda mau anda bisa menambahkan atau merubah navigasi text tersebut, misalkan web yang tadi dibuat akan dipakai web mobile, anda tambahkan lagi navigasi atau menu untuk download atau yang lainnya.
Setelah semua lancar, selanjutnya anda upload file yang telah anda buat tadi ke hosting untuk di onlinekan. Agar web anda bisa dibuka atau dibaca oleh semua orang pengguna internet diseluruh dunia.
Untuk uplod file untuk lebih memudahkan juga lebih praktis, kita menggunakan aplikasi FileZilla Clien, sebenarnya penyedia layanan juga sudah menyediakan sarana untuk uload file tapi proses kurang praktis, jika anda mau coba, cari dalam control panel hosting anda file manager. Tapi saya tidak akan membahas banyak tentang file manger pada hosting, yang akan saya bahas sekarang yaitu upload menggunakan aplikasi pembantu yaitu FileZilla Clien, Untuk itu baca detailnya sebagai berikut:
Jika anda sudah melewati proses tadi, yaitu membuat web sederhana, anda tidak akan lagi kesulitan membuat web professional, karena proses sama, yang beda hanya dalam pembuatan template juga dalam penggunaan code HTML, javasript dan semisal. Jika anda seorang awam yang masih 0,5 besar  ,
maksudnya tau sedikit tentang web, langsung membuat web profesional
dengan template ukuran sesungguhnya, anda akan rugi waktu dan rugi
biyaya.Oleh karena itu saya menyusun template sederhana, apabila diupload atau dibuat tidak memakan waktu dan biyaya banyak, setelah anda lancar atau website mini anda berfungsi normal dan sudah bisa dionlinekan dengan baik, anda sudah bisa melanjutkan ketingkat selanjutnya yaitu membuat web profesional. Untuk panduan membuat web professional anda bisa download filenya dalam format pdf berikut dibawah ini, agar file yang anda download bisa langsung terbaca, pastikan pada computer anda sudah terinslall adobe acrobat reader, untuk menyimpan klik File dan Save As ke hardisk anda. Bahasan ini terbagi dalam 5 bab, tutor ini ditulis oleh Bpk.Slamet Rianto alamat blog: http://slametrianto.net
| Setelah anda cukup mantap dan paham anda bisa menggunakan pasilitas web hosting yang berbayar, supaya web anda tidak terkesan gratisan
juga alamat web anda tidak numpang di hosting gratisan yang tentunya
domain anda juga hanya numpang alias dikasih subdomain saja, contoh
seperti namaanda.100mb.com atau namaanda.six6.net dan lainya. Jika anda
ingin punya hosting dengan domain pribadi yang tidak numpang seperti
namaanda.com anda bisa beli hosting murah indonesia tapi tentunya tidak
murahan pasilitas dan layanan bagus. jika anda punya keinginan anda bisa
beli hosting indonesia yang saya rekomendasikan dibawah yang saya urut
sesuai rengking terbaik:Jika disuatu saat anda perlu template bagus grtis anda bisa pilih disini, setelah didownload anda edit ulang sehingga jadi web buatan anda sendiri yang lebih profesional. Atau juga anda ingin langsung membuat web tanpa harus memikirkan membuat templates atau tanpa upload templates, anda kunjungi elektro4net.50webs.com dalam web sederhana saya tersebut ada banyak pilihan web hosting builder, dari webhosting builder untuk membuat forum, waphosting builder untuk web cellular, dan webhosting builder lainnya. Mungkin cukup sekian dari saya, walau web yang saya rancang sangat sederhana mudah-mudahan bisa membuka wawasan bagi anda juga menjadi pondasi untuk membangun web profesional agar bisa menjadi design web profesional dimasa yang akan datang. |
1 komentar:
makasih atas artikelnya mas...
Posting Komentar
Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.