Cari Tulisan

Senin, 23 Februari 2009

css Tutorial

Senin, 16 Februari 2009

Membuat Website sendiri (part 6)

-- sambungan tulisan Membuat Website sendiri (part 5)--
-- seperti tulisan lain, tulisan ini pun dapat anda copy, edit dan sebarkan sesuka anda --

Ternyata, membuat website tidak susah ya.... Dan bisa pakai notepad lagi.
Jika anda telah sampai ke bab ini, maka itu tandanya anda telah bisa membuat web sendiri dan siap untuk mempublikasikannya di internet.
Untuk mempublikasikan web, anda harus memiliki domain dan server. Kedengarannya seperti sesuatu yg mahal ya...? Tidak, tidak mahal kok. Di internet telah banyak penyedia web domain dan web server (web host) GRATIS.
Apa itu web domain?
Web domain merupakan suatu mesin yang menerjemahkan nama domain kita ke IP dimana kita menyimpan file html. Dari web domain kita kan mendapatkan domain name (nama website). Contoh domain name misalnya google.com atau 110mb.com. Web domain menerjemahkan nama ini dan memberikan alamat IP dari domain name yang bersangkutan. Misalkan, IP dari domain 110mb.com adalah 195.242.99.84. Sehingga jika anda tuliskan IP tsb di browser anda maka hasilnya sama dengan 110mb.com. Jadi web domain mempermudah kita mengingat alamat sebuah website, karena akan susah mengingat IP dari pada nama domain.
Apa itu web server (web host)?
Web server merupakan komputer dimana file html kita simpan. Tentu saja komputer tersebut harus memiliki akses ke internet setiap saat dan memiliki IP publik. Web server bisa berupa PC server milik kita sendiri yang koneksi tiap saat ke internet. Namun tentunya pc server bukan hal yg murah. Namun untungnya ada penyedia web server GRATIS. Yang kita perlukan hanyalah mendaftarkan dan upload file kita ke sana.
Di mana mendapatkan domain name dan web server GRATIS?
Domain name dan web server GRATIS banyak tersedia di internet. Ada yang menyediakan domain name saja, ada yang menyediakan web server saja, dan ada yang menyediakan keduanya. Untuk mempermudah lebih baik menggunakan yang menyediakan keduanya. Anda bisa cari di google dengan keyword "free web host." Saya sendiri memilih 110mb.com.
Untuk mendapatkan domain dan web sever, terlebih dahulu anda harus masuk ke website 110mb.com, bisa dengan klik di sini. Setelah masuk, anda harus membuat account di 110mb.com, cukup klik tombol START NOW atau register, dan anda akan dibawa ke halaman pendaftaran seperti gambar di bawah.
110mb.gif

  1. Username, merupakan nama domain anda. Masukkan nama domain yang anda inginkan. Nama tersebut haruslah belum digunakan oleh orang lain. Jika sudah ada yang menggunakan maka nantinya anda akan mendapatkan peringatan bahwa nama tersebut telah digunakan, dan anda harus memasukkan nama baru.

  2. Password, merupakan kata kunci untuk masuk ke web domain sebagai admin. Jadi untuk upload ke web site yg telah kita buat nantinya, kita harus masuk ke 110mb.com dengan memasukkan nama domain dan password, baru kita bisa upload file.

  3. Primary Email Address, merupakan alamat e-mail kita sebagai konfirmasi dan penyampaian password baru jika kita lupa password. Jika anda belum memiliki email, anda bisa mendapatkannya gratis di www.gmail.com.

  4. Terms of Service - Signature, anda harus memasukkan kalimat yang anda dapatkan setelah klik tombol TOS. Setelah klik tombol TOS, anda akan ke halaman baru, kalimat yang harus dimasukkan berada di bagian bawah halaman (anda harus scroll ke bawah).

  5. Human Validation:, pada isian ini masukkan huruf yang tertera di bawahnya. Untuk contoh gambar di atas adalah 1A8RW7


Setelah lengkap, klik tombol Create My Account Now!. Jika isian benar semua, anda akan dibawa ke halaman selanjutnya yang menyatakan bahwa account telah berhasil didaftarkan dan e-mail konfirmasi telah dikirimkan ke e-mail kita (e-mail yg telah kita isikan di primary email address).
Langkah selanjutnya adalah masuk ke e-mail anda, misalkan di gmail. Cari email dari 110mb.server dengan subject "please verify your 110mb account...". Buka email tersebut dan klik link yang telah diberikan. Maka anda akan dibawa ke halaman pendaftaran tahap 2 yang isinya seperti gambar di bawah.
110mb.gif

  1. Your FIRST name, masukkan nama depan anda

  2. Your LAST name, masukkan nama belakang anda

  3. City you live in, masukkan kota anda, misal jakarta

  4. Country, pilih negara, misal Indonesia


Setelah itu klik tombol Create My Account Now!
Jika berhasil maka anda akan dibawa ke halaman bahwa account kita telah berhasil dibuat. Dan setelah 5 detik akan di bawa ke halaman depan 110mb.com.
Yang harus anda lakukan adalah login, dengan mengisi form control panel login yang berada di pojok kanan atas. Pada gambar orang, masukkan domain name anda, misal khasanahilmu. Pada gambar kunci masukkan password. Setelah itu klik tombol login.
Maka anda akan dibawa ke halaman CPANEL. Klik icon komputer pada File Manager seperti gambar di bawah ini.
110mb.gif
Maka akan tampil daftar file di directory kita, seperti gambar dibawah ini.
110mb.gif
Untuk pertama kalinya, kita sudah diberikan 1 file yakni index.htm. File index.htm inilah yang dibuka jika kita membuka website misalkan khasanahilmu.110mb.com. Oleh karenanya jika anda ingin file htm anda menjadi default tampilan web anda, maka anda harus memberi nama index.htm.
Untuk mempublikasikan file yang telah anda buat, anda harus meng-upload-nya ke sini dengan cara klik Upload files, dan tampilannya akan seperti gambar berikut,
110mb.gif
Klik Telusuri/browse dan pilih file anda. Untuk uploadnya klik tombol upload. Setelah proses selesai maka file htm anda telah mendunia.


Tulisan terkait:
prev : Membuat website sendiri (part 5)

Membuat Website sendiri (part 5)

-- sambungan tulisan Membuat Website sendiri (part 4)--
-- seperti tulisan lain, tulisan ini pun dapat anda copy, edit dan sebarkan sesuka anda --


Ternyata, membuat website tidak susah ya.... Dan bisa pakai notepad lagi.
Pada tulisan sebelumnya (Membuat Website sendiri (part 4))telah diperkenalkan tag untuk membuat tabel. Pada perkembangannya tag tabel banyak digunakan, selain untuk membuat tabel, juga untuk membuat layout tampilan halaman HTML. Oleh karenanya tag table akan dibahas lebih lanjut. Saya tekankan lagi bahwa tidak ada seorang pun yang mahir membuat web hanya dengan membaca tutorial html ini. Yang terpenting adalah berlatih dan membuat web sendiri berdasarkan apa yang sudah anda pelajari.
Pada contoh tabel di tulisan sebelumnya menunjukkan tabel dengan sel 2x2. Sesungguhnya jumlah sel yang bisa dibuat adalah tak terbatas, dan juga bisa dibuat bingkai (border). Perhatikan contoh berikut;

<table border="1">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
<tr>
<td>Sel 5</td>
<td>Sel 6</td>
<td>Sel 7</td>
<td>Sel 8</td>
</tr>
<tr>
<td>Sel 9</td>
<td>Sel 10</td>
<td>Sel 11</td>
<td>Sel 12</td>
</tr>
</table>

Dan tampilan di browser kurang lebih sebagai berikut (coba tulis sendiri dan ganti nilai bordernya untuk lebih memahaminya),

Sel 1Sel 2Sel 3Sel 4
Sel 5Sel 6Sel 7Sel 8
Sel 9Sel 10Sel 11Sel 12


Jumlah sel tiap barisnya pun bisa tidak sama. Untuk itu digunakan atribut colspan. Perhatikan contoh berikut;

<table border="1">
<tr>
<td>No</td>
<td>Barang</td>
<td colspan="2">Jumlah</td>
</tr>
<tr>
<td>1</td>
<td>Buku tulis</td>
<td>20</td>
<td>buah</td>
</tr>
<tr>
<td>2</td>
<td>Bolpoint</td>
<td>3</td>
<td>lusin</td>
</tr>
</table>

Dan tampilan di browser kurang lebih sebagai berikut,

NoBarangJumlah
1Buku tulis20buah
2Bolpoint3lusin


Ukuran selnya pun bisa ditentukan. Untuk itu digunakan atribut width. Perhatikan contoh berikut;

<table border="1" width="450">
<tr>
<td width="10%">No</td>
<td width="55%">Barang</td>
<td colspan="2" width="35%">Jumlah</td>
</tr>
<tr>
<td>1</td>
<td>Buku tulis</td>
<td>20</td>
<td>buah</td>
</tr>
<tr>
<td>2</td>
<td>Bolpoint</td>
<td>3</td>
<td>lusin</td>
</tr>
</table>

Dan tampilan di browser kurang lebih sebagai berikut,

NoBarangJumlah
1Buku tulis20buah
2Bolpoint3lusin


Dan bisa juga dibuat rata tengah atau kanan. Untuk itu digunakan atribut align. Perhatikan contoh berikut.

<table border="1" width="450">
<tr>
<td width="10%">No</td>
<td width="55%" align="center">Barang</td>
<td colspan="2" width="35%" align="center">Jumlah</td>
</tr>
<tr>
<td align="right">1</td>
<td>Buku tulis</td>
<td align="right">20</td>
<td>buah</td>
</tr>
<tr>
<td align="right">2</td>
<td>Bolpoint</td>
<td align="right">3</td>
<td>lusin</td>
</tr>
</table>

Dan tampilan di browser kurang lebih sebagai berikut,

NoBarangJumlah
1Buku tulis20buah
2Bolpoint3lusin


Kalo ada colspan tentunya ada rowspan ya? Tentu, perhatikan contoh berikut.

<table border="1" width="450">
<tr>
<td width="10%">No</td>
<td width="55%" align="center">Barang</td>
<td width="35%" align="center">Warna</td>
</tr>
<tr>
<td align="right">1</td>
<td rowspan="3">Buku tulis</td>
<td>Merah</td>
</tr>
<tr>
<td align="right">2</td>
<td>Biru</td>
</tr>
<tr>
<td align="right">3</td>
<td>Hijau</td>
</tr>
</table>

Dan tampilan di browser kurang lebih sebagai berikut,

NoBarangJumlah
1Buku tulisMerah
2Biru
3Hijau


Masih bingung dengan colspan dan rowspan? Mungkin ada baiknya anda gambarkan tabel yang ingin dibuat di secarik kertas baru menuliskan kodenya. Kalau sudah paham, ada baiknya anda coba membuat beberapa tabel dengan kombinasi colspan dan rowspan


Bersambung.....

Jumat, 13 Februari 2009

Membuat website sendiri (part 4)

-- sambungan tulisan Membuat Website sendiri (part 3)--
-- seperti tulisan lain, tulisan ini pun dapat anda copy, edit dan sebarkan sesuka anda --

Ternyata, membuat website tidak susah ya.... Dan bisa pakai notepad lagi.
Pada tulisan sebelumnya telah diperkenalkan tag untuk membuat judul, paragraf, list dan menampilkan gambar.
Masih ada yang lain....?. Tentu saja. Saya tekankan lagi bahwa tidak ada seorang pun yang mahir membuat web hanya dengan membaca tutorial html ini. Yang terpenting adalah berlatih dan membuat web sendiri berdasarkan apa yang sudah anda pelajari.

Beberapa tag html (lagi)

Keempat tag membuat link <a>...</a>. Link merupakan fasilitas semacam short cut yang jika kita klik pada link tersebut akan menuju ke suatu halaman yang lain. Contoh link adalah menu yang ada di web ini.
Penjelasan yang paling mudah untuk tag dan <a> adalah dengan langsung pada contoh penggunaannya. Untuk itu mari kita perhatikan contoh berikut ini,

<p>Lihat latihanku</p>
<p><a href="latihan1.htm">Latihan 1</a></p>
<p><a href="latihan2.htm">Latihan 2</a></p>
<p>Sumber:<a href="http://khasanahilmu.110mb.com"><img src="khasanahilmu.png" alt="khasanah ilmu" /></a></p>

Ketik pada notepad dan simpan dengan
nama coba5.htm (letakkan satu folder dengan file latihan yang lain). Selanjutnya buka dengan IE, maka hasilnya kurang lebih seperti berikut,

Latihanku
Latihan 1
Latihan 2
Sumber:khasanah ilmu

Kelima, tag membuat tabel. Tabel merupakan informasi yang disajikan dalam bentuk baris dan kolom. Tabel dapat dibuat di HTML dengan menggunakan tag khusus untuk pembuatan tabel.

<table>
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
</table>

Tuliskan kode html di atas di notepad anda. Lalu simpan dengan nama coba6.htm. Hasil dari kode tersebut kira-kira seperti berikut,

Sel 1Sel 2
Sel 3Sel 4


Mungkin contoh tabel di atas merupakan contoh yang paling rumit dari pada contoh-contoh sebelumnya. Oleh karenanya mari kita lihat satu per satu.
Untuk membuat sebuah tabel digunakan 3 tag yakni;

  • Tag <table> digunakan untuk memulai sebuah tabel, dan tag </table> digunakan untuk mengakhiri sebuah tabel

  • Tag <tr> dan </tr> digunakan untuk memulai dan mengakhiri baris dalam tabel.

  • Tag <td> dan </td> digunakan untuk membuat setiap sel (kolom) dalam satu baris. Jelas kan...?


Untuk kasus contoh tabel di atas, tabel diawali dengan tag <table>, kemudian diikuti dg tag <tr> yang menunjukkan permulaan dari baris baru. Di baris ini kita buat dua buah sel yakni <td>Sel 1</td> dan <td>Sel 2</td>. Baris ini kemudian ditutup menggunakan tag </tr>. Lalu baris kedua dibuat dengan tag <tr>, dan dua buah sel juga dibuat di baris ini. Setelah baris ditutup oleh tag </tr>, tabel pun diakhiri dengan tag </table>.

Bersambung.....