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:
Langsung saja kita mulai, buka notepad dengan halaman kosong muncul pada monitor. Selanjutnya copy coding html dibawah ini satu per satu menjadi tiga bagian.
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.
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.
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 gratis000webhost.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 elektro4siteganti 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. Untukimages/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.
Keterangan bagian-bagian gambar:
- 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>
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.
sumber:http://elektro4net.blogspot.com/
