Jika kita berbicara mengenai web desain kita harus mengetahui fungsi atau element element pada HTML. Karena di dalam HTML sangat banyak memiliki element dan atribut yang akan digunakan dalam mendesain sebuah Web statis mau pun dinamis. Nah dalam perancangan web desain kita harus bisa menguasai atau setidaknya mempelajari mengenai element DIV Pada HTML. Karena element DIV inilah yang akan membagi beberapa layout pada web yang kita miliki dengan memfungsikan CSS agar tampilan lebih mempesona :3
Element DIV jika kita tuliskan akan menampilkan halaman kosong, dan jika memberi atribut lain seperti H1 di dalam DIV, dan Membuat DIV yang banyak akan menampilkan kebawah. Jika kita ingin membuat layout terpisah antara Header, Navigasi, Sidebar, Content dan Footer kita gunakan CSS dengan atribut "float".
misal kita tuliskan di HTML sebagai berikut :
<html>
<head>
<style type="text/css">
.wrp{
margin: 0auto;
}
.h1{
background: teal;
width: 960px;
height: 100px;
font-size: 50px
}
.h2{
font-family: consolas;
background: maroon;
width: 960px;
height: 100px;
font-size: 50px
}
.h3{
background: aqua;
width: 300px;
height: 300px;
font-size: 50px
}
.h4{
background: blue;
width: 600px;
height: 600px;
font-size: 50px
}
.h5{
background: yellow;
width: 960px;
height: 100px;
font-size: 50px
}
</style>
<title>MUDATEK</title>
<body>
<div class="wrp">
<div class="h1">Header</div>
<div class="h2">Navigasi</div>
<div class="h3">Sidebar</div>
<div class="h4">Konten</div>
<div class="h5">Footer</div>
</div>
</head>
</body>
</html>
<head>
<style type="text/css">
.wrp{
margin: 0auto;
}
.h1{
background: teal;
width: 960px;
height: 100px;
font-size: 50px
}
.h2{
font-family: consolas;
background: maroon;
width: 960px;
height: 100px;
font-size: 50px
}
.h3{
background: aqua;
width: 300px;
height: 300px;
font-size: 50px
}
.h4{
background: blue;
width: 600px;
height: 600px;
font-size: 50px
}
.h5{
background: yellow;
width: 960px;
height: 100px;
font-size: 50px
}
</style>
<title>MUDATEK</title>
<body>
<div class="wrp">
<div class="h1">Header</div>
<div class="h2">Navigasi</div>
<div class="h3">Sidebar</div>
<div class="h4">Konten</div>
<div class="h5">Footer</div>
</div>
</head>
</body>
</html>
maka akan menampilkan hasil seperti berikut :
Nah, Jika kita ingin membuat hasil Footer menjadi ke samping, gunakan CSS dengan Atribut float, tambahkan pada class footer h5 di css menjadi seperti berikut:
.h5{
background: yellow;
width: 960px;
height: 100px;
float: left;
}
Jika sudah maka tampilan akan menjadi seperti berikut :
Jadi pada prinsip nya fungsi Float: Left; pada CSS yaitu memindahkan yang di bawah ke atasnya, untuk desain selanjutnya kalian bisa membuat sesuai keingin kalian. Dengan menggunakan Fungsi DIV di HTML akan lebih memudahkan kita untuk membuat beberapa layout dari pada harus menggunakan Frame yang membutuhkan banyak file html lainnya.
Sekian Artikel mengenai Element DIV di HML. Semoga Artikel ini bisa bermanfaat bagi kalian. Jangan Lupa untuk share ke teman teman kalian, dan berikan komentar mengenai artikel ini maupun mengenai kamu.
Terima Kasih Telah Berkunjung.
Berkomentarlah yang sopan dan jelas