Cara membuat Layout website dasar dengan menggunakan table part 2

Mari kita lanjut membuat isi layout nya.

Masih di program yang telah kita buat sebelumnya ( layout.html ), jika belum membaca part 1 nya, silahkan klik disini  Cara membuat Layout website sederhana dengan menggunakan table part 1

Pastikan kamu masih di layout.html

Lalu ikuti langkah-langkah dibawah ini :

Kita mulai dari footer terlebih dahulu, perhatikan kode program yang telah kamu buat yang seperti ini :

<th height="107" colspan="2">Header</th>

Outputnya :

 

 

Perhatikan, kita bisa memberikan warna, atau pun foto di header tersebut agar menjadi lebih menarik, dengan cara menambah sedikit saja kode programnya dengan img src atau dengan bgcolor, mari kita coba.

<th height="107" colspan="2" bgcolor="#99CC00">Header</th>

Outputnya :

Hapus tulisan header pada program menjadi seperti ini :

<th height="107" colspan="2" bgcolor="#99CC00"><font size="36">MamU.com</font></th>

Outputnya :

 

Setelah headernya selesai, sekarang kita lanjut ke menu nya.

Perhatikan kode program seperti ini :

<th width="196" height="483">Menu</th> 

Outputnya :

Sekarang edit kode programnya menjadi seperti ini :

<th width="196" height="483" valign="top" align="left"><p>Home</p> <p>Artikel </p> <p>Download</p></th>

Outputnya :

Kamu bisa menambahkan warna bagroundnya dengan bgcolor seperti ini :

<th width="196" height="483" valign="top" align="left" bgcolor="#CCFF99"><p>Home</p> <p>Artikel </p> <p>Download</p></th>

Outputnya :

Oke selanjutnya untuk content, silahkan cari kode seperti ini :

<th width="818" height="483" >Content</th>

Outputnya :

Lalu rubah menjadi seperti ini :

<th width="818" height="483" valign="top" align="left"><p>Selamat Datang di mamu.com</p>

 

  <p></p>

  <p>Mamu adalah sebuah perusahan yang bergerak di Bidang Eksport dan Import barang. Perusahaan ini bergerak semenjak Tahun 2009, yang didirikan oleh Rian Farta Wijaya dan di saksikan oleh teman-temannya.</p>

  </th>

Outputnya :

Berikan warna bacgroundnya dengan bgcolor, seperti ini :

<th width="818" height="483" valign="top" align="left" bgcolor="#CCFF99"><p>Selamat Datang di mamu.com</p>

 

  <p></p>

  <p>Mamu adalah sebuah perusahan yang bergerak di Bidang Eksport dan Import barang. Perusahaan ini bergerak semenjak Tahun 2009, yang didirikan oleh Rian Farta Wijaya dan di saksikan oleh teman-temannya.</p>

  </th>

Outputnya :

dan terakhir footer nya, cari kode program seperti ini :

<th height="53" colspan="2" >footer</th>

Outputnya :

Silahkan rubah menjadi :

<th height="53" colspan="2" bgcolor="#99CC00">Copyright 2014 by Rian Farta Wijaya</th>

Outputnya :

Silahkan simpan / ctrl+s

Coba buka modzilla firefox kamu, lalu ketik di web addressnya localhost/layoutbuatanku/layout.html

Sekarang kamu sudah menjadi anak Keren, karena kamu sudah bisa membuat layout, heheheheee

Hasil akhirnya :

Jadi programmer itu gak mesti menghapal semua kode program, akan tetapi, seorang programmer itu adalah orang yang mengerti kode program yang ia gunakan.

Salam sukses.

Mari Belajar Teknologi Informasi