Tutorial cara membuat website statis (part 8) | Cara buat layout di HTML
Setelah beberapa hari saya istirahat dari dunia blogging, kini saatnya saya mencoba melanjutkan apa yang sudah saya mulai untuk membuat web statis.
Setelah pada tutorial sebelumnya softholic mania belajar dasar HTML baik itu untuk membuat tabel, memasukkan gambar, order list, ataupun tag dasar pada HTML, kini saya akan coba mengajarkan cara membuat layout yang nantinya menjadi kerangka dasar dari web itu sendiri. Layout dalam web bisa dibangun dengan 2 cara yaitu :
- Menggunakan tabel
Membangung website dengan memanfaatkan tabel untuk membuat kerangkanya. - Tanpa menggunakan tabel atau biasa disebut tableless
Membangun layout website tanpa menggunakan tag tabel.
Secara umum perkembangan website sekarang dalam membuat layout sudah tidak menggunakan tabel sebagai kerangkannya hal itu dikarenakan tabel sebenarnya diperuntukan dalam menampilkan data. Hal tersebut juga didasari dengan berkembangnya CSS (Cascade Style Sheet) yang memungkinkan pembuatan layout tanpa mempergunakan tabel.
Pada tutorial cara membuat website statis ( part 8 ) ini saya akan menjelaskan cara membuat layout web dengan mempergunakan tabel dahulu, untuk yang tableless akan saya bahas pada tutorial yang akan datang.
Ok, langsung saja softholic mania jalankan editor untuk mulai membuat layout. Pada editor tersebut ketik atau copy paste script dibawah ini
<html>
<head>
<title>Tutorial cara membuat layout</title>
</head>
<body>
<table border='1px' align='center' width='800px'>
<tr><td colspan='2' height='200px'>Header website</td></tr>
<tr><td colspan='2' height='25px'>Menu website</td></tr>
<tr><td width='300px' height='500px'>Sidebar website</td><td width='500px'>isi website</td></tr>
<tr><td colspan='2' height='100px'>Footer</td></tr>
</table>
</body>
</html>
Simpan file tadi dengan nama layout.html lalu jalankan pada web browser softholic mania. Jika softholic mania menjalankannya maka akan mendapatkan tampilan pada web browser seperti gambar 1.1
gambar 1.1
Dari gambar 1.1 saya membuat layout website dengan satu (1) sidebar dibagian kiri website. Ini merupakan standar layout yang sering softholic mania jumpai di internet. Akan tetapi jika softholic mania ingin bereksploarsi dalam membuat layout bisa dengan menambahkan tabel sesuai dengan keinginan softholic mania.
Saya rasa penjelasan singkat saya tentang cara membuat website statis sudah cukup jelas. Semoga tutorial kali ini bisa bermanfaat buat softholic mania.
Related Posts
- Tutorial cara membuat website statis (part 18) | Finishing website statis
- Tutorial cara membuat website statis part (17) | Validasi form contact dengan javascript
- Tutorial cara membuat website statis (part 16) | Pengenalan dasar javascript
- Tutorial cara membuat website statis (part 15) | Membuat contact form pada layout website
- Tutorial cara membuat website statis (part 14) | Pembuatan form dengan HTML
- Tutorial cara membuat website statis (part 13) | Menggabungkan HTML dengan CSS
- Tutorial cara membuat website statis (part 12) | Belajar membuat CSS
- Tutorial cara membuat website statis (part 11) | Pengenalan dasar CSS
- Tutorial cara membuat website statis (part 10) | Membuat isi website
- Tutorial cara membuat website statis (part 9) | Memasukkan gambar pada layout
