Membuat Layout dengan Elemen Div

Oleh Unknown

Sunday, April 26, 2015

Membuat layout dengan Elemen div - Apa kabar konco sinahu? Semoga tetap semangat bergulat dengan kode-kode yang pastinya semakin ke sini akan semakin rumit. Semua butuh proses, kesabaran, ketekunan, dan semangat. Pada kesempatan kali ini, sinahu coding akan membahas tentang contoh kerangka membuat layout dengan <div>.

Kita pasti sering melihat website dengan tampilan susunan antarmuka terdiri dari beberapa kolom, multiple columns. Misalnya pada web Majalah, Surat kabar, dan portal-portal online lainnya.

Apa itu <div> ?

Tag <div> berfungsi untuk mendefinisikan suatu bagian dalam dokumen HTML. Tag <div> juga digunakan untuk mengelompokkan atau menggolongkan bagian-bagian elemen tertentu untuk diformat dengan CSS.

Nah, elemen <div> ini sering digunakan untuk mengatur dan membuat layout pada template web semacam itu. Mengapa? Karena pengaturan layout dengan menggunakan elemen <div> ini akan lebih mudah diatur posisinya melalui kode style CSS.

Agar konco sinahu tidak sekedar membayangkan kira-kira seperti apa, di bawah ini akan ditampilkan contoh membuat layout beberapa kolom (multiple column layout) dengan empat elemen <div> yang terdiri dari header, menu navigasi, isi, dan juga footer. Perhatikan baik-baik.

Contoh Membuat Layout dengan Tag Div


<!DOCTYPE html>
<html>
<head>
<style>
#header {
    background-color:blue;
    color:white;
    text-align:center;
    padding:5px;
}
#navigasi {
    line-height:30px;
    background-color:yellow;
    height:300px;
    width:100px;
    float:left;
    padding:5px;       
}
#section {
    width:350px;
    float:left;
    padding:10px;    
}
#footer {
    background-color:blue;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;    
}
</style>
</head>
<body>

<div id="header">
<h1>Kota-kota Besar</h1>
</div>

<div id="navigasi">
DIY<br>
Semarang<br>
Surabaya<br>
</div>

<div id="section">
<h2>DIY</h2>
<p>
DIY adalah sebutan untuk Daerah Istimewa Yogyakarta. Yaitu daerah Istimewa setingkat provinsi di Indonesia yang terletak di bagian selatan Pulau Jawa bagian tengah.
</p>
<p>
Daerah Istimewa ini terkenal di tingkat nasional,dan internasional, terutama sebagai tempattujuan wisata andalan. Daerah Istimewa Yogyakarta mengalami beberapa bencana alam besar termasuk bencana gempa pada tanggal 27 Mei 2006, dan erupsi Gunung Merapi pada media Oktober-November 2010.
</p>
</div>

<div id="footer">
Copyright © sinahu-coding.com
</div>

</body>
</html>

Maka hasil dari syntax kode tersebut adalah seperti ini :

DIY
Semarang
Surabaya

DIY

DIY adalah sebutan untuk Daerah Istimewa Yogyakarta. Yaitu daerah Istimewa setingkat provinsi di Indonesia yang terletak di bagian selatan Pulau Jawa bagian tengah.

Daerah Istimewa ini terkenal di tingkat nasional,dan internasional, terutama sebagai tempat tujuan wisata andalan. Daerah Istimewa Yogyakarta mengalami beberapa bencana alam besar termasuk bencana gempa pada tanggal 27 Mei 2006, dan erupsi Gunung Merapi pada medio Oktober-November 2010.

Yang perlu konco sinahu perhatikan adalah pada format penulisan kodenya. Simbol dan tandanya. Nanti akan sedikit berbeda dengan membuat layout ala html5 yang akan kita bahas selanjutnya.

Itu saja untuk kali ini. Semoga sedikit pembahasan tentang membuat layout ini bisa memupuk wawasan konco sinahu dan menumbuhkan rasa cinta untuk belajar coding. hehe..