Membuat Website Statis Pribadi

Pengenalan Internet Membuat Web Site Pribadi (Statis) Untuk Kalangan Sendiri AMIK Catur Sakti Kendari [email protected]

MEMBUAT WEBSITE STATIS PRIBADI (PERSONAL HOMEPAGE)

Kebanyakan orang jika baru mengenal HTML maka ia akan membuat website tentang profil dirinya sendiri. Hal ini dikarenakan ia tidak tahu apa yang harus ia publikasikan. Kali ini kita akan mencoba membuat sebuah personal homepage sederhana yang bersifat statis. I. PERSIAPAN Sebelum melakukan pendesainan lakukan beberapa hal berikut ini :

· Buatlah sebuah folder di drive C: dengan nama PERSONAL HOMEPAGE. · Buat sebuah folder di dalam folder C:\PERSONAL HOMEPAGE dengan nama

GAMBAR. Semua file HTML yang berhubungan dengan latihan ini akan kita simpan pada folder PERSONAL HOMEPAGE. Begitu pula dengan gambar-gambar yang berhubungan dengan latihan ini akan kita simpan di folder C:\PERSONAL HOMEPAGE\GAMBAR. II. SKETSA PROYEK

· Website yang akan kita buat adalah website pribadi yang berisi tentang profil data Anda. · Anda ingin pada website tersebut terdapat foto diri, keluarga atau rumah Anda. · Anda ingin profil data terletak pada halaman berbeda. · Anda ingin terdapat link-link di website yang akan dibuat.

Ketika mendesain website biasakan untuk membuat sketsa kasarnya terlebih dahulu. Ini berguna agar pekerjaan kita menjadi lebih terfokus. Tidak masalah jika nantinya anda melakukan perubahan pada tahap akhir yang penting sketsanya sudah ada. Untuk membuat sketsa desain anda bisa menggambar di sehelai kertas atau pada program pengolah gambar pada komputer. Yang namanya sketsa tidak harus bagus yang penting gambaran umumnya saja. Contoh sketsa untuk proyek kita kali ini dapat anda lihat pada gambar dibawah ini :

Foto Pribadi

Menu

Halaman Utama

III. LANGKAH-LANGKAH PEMBUATAN Seperti yang dapat anda lihat pada gambar sketsa di atas, pada website tersebut memiliki 1 tabel utama dan 2 tabel anak yaitu tabel foto dan tabel menu. Tabel utama terdiri dari 2 kolom dan 1 baris. Sedangkan pada tabel foto dan menu masing-masing memiliki 1 kolom dan 1 baris. 1. Membuat Halaman Utama (Index.html) Baiklah sekarang kita mulai bekerja. Berikut langkah-langkah untuk membuat halaman utama :

1. Seperti biasa, buka Notepad. 2. Ketikkan kode HTML dibawah ini :

<html> <head> <title>Syaddad Taqiyuddin Website</title> </head> <body bgcolor="#D7E7F3"> <table border="0" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black"> <tr> <td width="20%">  <table border="0" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black"> <tr> <td align="center"><img border="0" height="100 " width="150" src="gambar/foto.jpg"></td> </tr> </table> <hr>   <table border="0" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black"> <tr>

<td> <ul> <li><a href="profil.html">Profil</a></li>

<li><a href="kegiatan.html">Kegiatan</a></li> <li><a href="foto.html">Foto-foto</a></li> <li><a href="mailto: [email protected]">Email saya</a></li> </ul>

</td>

</tr> </table> </td>  <td valign="top">

SELAMAT DATANG DI WEBSITE SYADDAD TAQIYUDDIN

Saya ucapkan terima kasih atas kunjungan anda ke website saya. Pada website ini anda dapat melihat profil data diri saya dan kegiatan-kegiatan yang saya lakukan. Di bawah ini adalah puisi yang saya buat beberapa waktu lalu. Inspirasi puisi ini datang ketika saya termenung sendirian dan memandang langit nan luas.

Aku dan Tuhanku Ketika aku memandang langit aku bertanya pada pada diriku aku... siapakah aku sebenarnya? darimanakah aku berasal? jauhkah aku dari Tuhanku? aku.... Tuhan... betapa kuasanya engkau menciptakan langit dan bumi untuk menghidupi orang-orang seperti aku aku... apakah aku sudah mengabdi kepadamu? rasanya hanya aku dan Engkau yang tahu 

</td> </tr> </table> </body> </html>

3. Setelah selesai simpan kode diatas dengan nama index.html dan letakkan di folder

C:\PERSONAL HOMEPAGE. Perlu diketahui file utama untuk sebuah website memiliki nama index.html. Server pertama kali akan mencari file bernama index.html. Jika ia tidak menemukan maka server akan menampilkan pesan error.

4. Test kode HTML yang sudah Anda buat. 5. Copy-kan foto pribadi Anda kedalam folder C:\PERSONAL HOMEPAGE\GAMBAR. 6. Test lagi hasil pekerjaan Anda.

7. Selesailah sudah untuk halaman utama. 2. Membuat Halam Profil (profil.html) Selanjutnya kita akan membuat file profil.html yang akan menampilkan daftar riwayat hidup Anda. File profil.html terdiri dari 1 tabel dan memiliki 2 kolom dengan banyak baris. Berikut langkah-langkahnya :

1. Buka Notepad kemudian pilih File – New. 2. Ketikkan kode HTML berikut ini :

<html> <head> <title>Profil David Joko</title> </head> <body bgcolor="#D7E7F3"> <table border="0" cellpadding="8" bordercolor="black"> <tr> <td colspan="2" align="center">DATA PRIBADI<hr></td> </tr> <tr> <td align="right">Nama: </td> <td>Syaddad Taqiyuddin</td> </tr> <td align="right">Tempat/Taggal lahir: </td> <td>Unaaha, 21 Oktober 2006</td> </tr> <td align="right">Agama: </td> <td>Islam</td> </tr> <tr>

<td align="right">Gol. Darah: </td> <td>O</td> </tr> <tr> <td align="right">Pekerjaan: </td> <td>Swasta</td> </tr> <tr> <td align="right">Hobi: </td> <td>Traveling, Mancing, Komputer</td> </tr> <tr> <td colspan="2" align="center"><a href="index.html">Kembali ke halaman utama</a></td> </tr> </table> </body> </html>

3. Simpan kode HTML Anda dengan nama profil.html dalam folder C:\PERSONAL

HOMEPAGE. 4. Test hasil pekerjaan Anda.

NB : Pada kode diatas terdapat atribut colspan=”2” pada tag <td>. Ini dikarenakan kita ingin menjadikan 2 kolom menjadi 1 kolom untuk judul DATA PRIBADI. Karena jumlah kolomnya 2 maka isi colspan=”2” jika kolomnya 4 maka isinya 4 juga.

5. Membuat Halaman Kegiatan (kegiatan.html) Wih..., tidak terasa materi kita sudah jauh rupanya. Bagaimana, menyenangkan bukan bermain dengan kode langsung daripada program WYSIWYG. Sekarang kita akan membuat file kegiatan.html yang berisi tentang kegiatan-kegiatan yang Anda lakukan. Desain kegitan.html terdiri dari 2 kolom dan 3 baris untuk setiap kegiatan. Kolom 1 berisi gambar dan kolom 2 berisi keterangan. Berikut langkah-langkah yang harus Anda lakukan :

1. Copylah sebuah file gambar ke folder C:\PERSONAL HOMEPAGE\GAMBAR. Gambar ini yang akan menampilkan/mewakili kegiatan yang kita lakukan.

2. Buka Notepad. Pilih menu File – New. 3. Ketikkan kode HTML dibawah ini :

<html> <head> <title>Kegiatan Syaddad Taqiyuddin</title> </head> <body bgcolor="#D7E7F3"> Kegiatan Syaddad Taqiyuddin<hr> <center> <table border="0" style="border-collapse: collapse" cellpadding="8" bordercolor="black" width="80%"> <tr> <td><img src="gambar/masjid.jpg" width="231" height="149"></td> <td bgcolor="">Kegiatan Religi Bersama KeluargaPada akhir tahun 2012 nanti saya dan seluruh keluarga mempunyai rencana naik haji. Rencananya kami di Arab Saudi selama kurang lebih 2 bulan untuk melaksanakan perintah haji ini. Doakan ya…semoga menjadi haji mabrur. Amin…</td> </tr> <tr> <td><img src="gambar/kuda.jpg" width="231" height="149"></td> <td bgcolor="">Kegiatan Akhir Tahun Bersama KeluargaPada akhir tahun 2009 nanti saya dan seluruh keluarga mempunyai rencana akhir tahun di Yogyakarta. Kata Abi sich beliau sekalian reuni dengan kawan-kawan lamanya yang ada disana. Kangan sama Yogya katanya. Rencananya kami di Yogyakarta selama kurang lebih 3 minggu dari tanggal 31 Desember 2009 sampai 15 Januari 2010.</td> </tr> <tr> <td align="center" colspan="3"><a href="index.html">Kembali ke halaman utama</a></td> </tr>

</table> </center> </body> </html>

4. Simpan kode HTML Anda dengan nama kegiatan.html di dalam folder C:\PERSONAL

HOMEPAGE. 5. Test hasil pekerjaan Anda.

6. Membuat Halaman Foto (foto.html) Pada halaman ini nantinya akan kita tampilkan foto-foto yang ada maupun yang belum ada pada website Anda. Desain halaman terdiri dari 2 kolom dan 2 baris untuk setiap 2 buah gambar. Berikut langkah-langkahnya :

1. Copylah beberapa gambar ke dalam folder C:\PERSONAL HOMEPAGE\GAMBAR. 2. Buka Notepad. Pilih menu File – New. 3. Ketikkan kode HTML dibawah ini :

<html> <head> <title>Foto-Foto</title> </head> <body bgcolor="#D7E7F3"> Foto-Foto Koleksi Syaddad<hr>

<center> <table border="0" style="border-collapse: collapse" width="80%" cellpadding="8" bordercolor="black"> <tr> <td align="center"><img src="gambar/masjid.jpg" height="149" width="231"></td> <td align="center"><img src="gambar/kuda.jpg" height="149" width="231"></td> </tr> <tr> <td align="center">Masjid Tepi Danau</td> <td align="center">Kuda Perang Para Mujahid</td> </table> <table border="0" style="border-collapse: collapse" width="80%" cellpadding="8" bordercolor="black"> <tr> <td align="center"><img src="gambar/malam.jpg" height="149" width="231"></td> <td align="center"><img src="gambar/orang.jpg" height="149" width="231"></td> </tr> <tr> <td align="center">Qiyamul Lail</td> <td align="center">Siapa ya ???</td> </table> <a href="index.html">Kembali ke halaman utama</a> </center> </body> </html>

4. Simpan kode HTML Anda dengan nama foto.html di dalam folder C:\PERSONAL HOMEPAGE.

5. Test hasil pekerjaan Anda.

IV. Meng-Upload File ke Server Web Hosting Upload? Bukannya download. Tunggu dulu, ada download ada pula upload. Lantas apa upload itu. Sebenarnya upload tidak berbeda dari download yaitu pengiriman file. Hanya saja jika download adalah proses pengiriman file dari server ke komputer kita. Sedangkan upload adalah proses pengiriman file dari komputer kita ke server. Server adalah komputer yang menangani request (permintaan) dari komputer klien dalam hal ini pengguna internet. Contohnya ketika mengunjungi google misalnya maka komputer kita

akan melakukan request ke server lalu server menjawabnya dengan mengirimkan sejumlah data yang diminta untuk ditampilkan oleh browser pada layar monitor. Server penyedia sebuah space (ruang) atau harddisk guna menyimpan file yang kita upload. Istilah kerennya dalam dunia internet adalah Web Hosting. Web Hosting juga dapat dibagi menjadi dua yaitu Web Hosting gratisan dan Web Hosting yang berbayar. Karena tujuan kita adalah “for testing only” maka cukup memakai web hosting gratisan macam Freehostia. Anda tidak harus menggunakan web hosting Freehostia karena ada ribuan web hosting gratisan lainnya yang ada di internet. Cukup ketikkan “Free Web Hosting” di google maka akan tampil ribuan link. Yang ingin saya tekankan disini hanyalah agar anda mengerti cara mengupload file dan memasang website di web hosting. 1. Persiapan

Sebelum dapat mengupload file di Freehostia anda harus mempunyai account terlebih dahulu. Berikut langkah-langkah untuk mendapatkan account di Freehostia : 1. Buka browser dan ketikkan alamat http://www.freehostia.com 2. Klik menu Hosting.

3. Selanjutnya akan ditampilkan beberapa penawaran paket web hosting dari Freehostia. Pilih paket Chocolate dan klik Sign Up.

4. Isilah formulir yang disediakan oleh Freehostia yang meliputi : a. Setup Your Plan

o Choose your web hosting plan: à pilih CHOCOLATE o 12 months period à pilih pilihan pertama o Pre-installed Script: à pilih NONE

o Add a Domain Name to Host: à pilih Use a subdomain kemudian ketikkan nama untuk website Ada.

b. Account Owner Details. Isilah sesuai permintaan

5. Klik CONTINUE. 6. Tunggu hingga proses registrasi selesai dilakukan. 7. Jika tidak ada pesan kesalahan atau error, periksalah E-Mail Anda untuk kofirmasi

pengaktifan account di Freehostia.

2. Langkah-Langkah Meng-Upload Karena website kita sudah jadi maka, kita hanya tinggal menguploadnya saja. Tidak perlu membuatnya di Freehostia, menghemat biaya internet bung!. Ingat server selalu mencari file yang bernama index.html pada setiap direktori. Jika file itu tidak ditemukan dan tidak ada file lain di direktori tersebut maka server akan menampilkan pesan ERROR. Jika file index.html tidak ditemukan namun didalam direktori tersebut terdapat satu atau lebih file maka server akan menampilkan list atau daftar nama-nama file tersebut. Berikut langkah-langkah untuk meng-upload file ke Freehostia :

1. Buka browser dan ketikkan alamat http://cp.freehostia.com 2. Masukkan username dan password. Untuk username dan password telah dikirim oleh

Freehostia ke email Anda sebelumnya.

3. Klik Login. 4. Dalam cPanel Freehostia, pilih menu File Manager.

5. Carilah nama web site Anda yang telah didaftarkan sebelumnya. Nama web site Anda akan menjadi nama sebuah folder. Kliklah folder tersebut.

6. Sekarang waktunya upload file. Klik tombol Browse yang ada dibagian bawah cPanel.

7. Pada kotak dialog File Upload, masuklah ke dalam folder C:\PERSONAL HOMEPAGE. Pilih file index.html kemudian klik tombol Open.

8. Klik tombol Upload File(s). 9. Biarkan proses upload hingga selesai kemudian klik tombol OK. 10. Ulangi langkah 6 sampai 9 untuk meng-upload file-file lainnya (profil.html,

kegiatan.html, foto.html).

11. Sekarang waktunya buat folder baru. Ketikkan gambar pada bagian Create New File/Folder kemudian klik tombol Create.

12. Klik folder gambar tersebut.

13. Sekarang waktunya upload file image. Klik tombol Browse yang ada dibagian bawah cPanel.

Klik disini

14. Pada kotak dialog File Upload, masuklah ke dalam folder C:\PERSONAL HOMEPAGE\GAMBAR. Pilih salah satu file image yang ada kemudian klik tombol Open.

15. Klik tombol Upload File(s). 16. Biarkan proses upload hingga selesai kemudian klik tombol OK. 17. Ulangi langkah 13 sampai 16 untuk meng-upload file-file image lainnya. 18. Selesai sudah meng-upload seluruh file yang telah Anda kerjakan. Keluarlah dari cPanel

Freehostia dengan meng-klik Logout yang ada pada pojok kanan halaman cPanel. 19. Sekarang ketikkan alamat web site Anda pada browser untuk melihat hasil pekerjaan

Anda. Contoh http://syaddad.freehostia.com

V. Mendapatkan Domain Pengertian Nama domain atau biasa disebut dengan Domain Name atau URL adalah alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah website, atau dengan kata lain domain name adalah alamat yang digunakan untuk menemukan sebuah website pada dunia internet. Misal : satriawebhost.com, rattanland.com, dsb. Nama domain diperjualbelikan secara bebas di internet dengan status sewa tahunan. Selain yang diperjualbelikan, ada pula domain yang bersifat GRATIS. Nama domain sendiri mempunyai identifikasi ekstensi/akhiran sesuai dengan kepentingan dan lokasi keberadaan website tersebut. Contoh nama domain ber-ekstensi internasional adalah com, net, org, info, biz, name, ws. Contoh nama domain ber-ekstensi lokasi Negara Indonesia adalah co.id (untuk nama domain website perusahaan), ac.id (nama domain website pendidikan), go.id (nama domain website instansi pemerintah), or.id (nama domain website organisasi).

Sebagai contoh, alamat website IdeBagus adalah www.idebagus.com dan yang biasanya disebut nama domain adalah idebagus.com (tanpa www).

Domain dengan sendirinya hanya berupa alamat web. Agar domain dapat berfungsi sebagai alamat email atau website, maka dibutuhkan hosting.

Berikut adalah langkah-langkah untuk mendapatkan domain GRATIS di Internet : 1. Buka browser dan ketikkan alamat http://www.freedomain.co.nr 2. Pada bagian Check if your free .CO.NR Domain Name is still available masukkan

nama domain Anda, kemudian klik tombol Check!.

3. Jika nama domain yang Anda masukkan belum digunakan oleh orang lain maka Anda akan mendapatakan pesan seperti yang tampak pada gambar berikut :

4. Klik tombol I Want to Signup for This Domain yang ada pada bagian bawah halaman.

5. Selanjutnya jawablah 3 buah pertanyaan yang diajukan kemudian klik tombol Next Step.

6. Beri tanda contreng pada bagian I have read and understood everything mentioned above kemudian klik tombol I have read and I Agree !.

7. Selanjutnya masukkan informasi profil Anda. Untuk Country, Indonesia belum tercantum dalam daftar. Untuk mengantisipasinya pilihlah negara lain, misalnya Malaysia.

8. Masukkan password yang akan anda pakai nantinya. Untuk Target URL, masukkan alamat URL yang telah Anda dapat sebelumnya dari Freehostia.com. Kemudian klik tombol Next Step.

9. Selanjutnya isi lagi informasi untuk profil domain Anda seperti yang tampak pada contoh gambar dibawah ini kemudian klik tombol Next Step.

10. Jika tidak ada kesalahan atau error pengisian data, klik tombol Complete.

11. Periksalah email Anda. Email konfirmasi untuk aktivasi domain telah dikirim oleh Freedomain.co.nr.

12. Klik URL Link aktivasi freedomain.co.nr untuk mengaktifkan domain Anda. 13. Pada halaman aktivasi account, masukkan username, password dan activation

code. Kemudian klik tombol Activate!. Username, password dan Activation Code telah dikirimkan ke Email Anda.

14. Selesailah sudah pendaftaran untuk mendapatkan domain GRATIS. Sekarang Anda bisa menggunakan domain tersebut.

15. Untuk menguji domain Anda, ketikkan alamat domain Anda pada address bar browser.

Membuat Website Statis Pribadi

Documents

Transcript of Membuat Website Statis Pribadi