Pada saat ini materi membahas membuat desain layout website menggunakan tag div. Sebelum melangkah lebih lanjut ada sebaiknya mempelajari dahulu cara membuat design layout website dengan tabel, hal ini untuk memudahkan dalam mempelajari materi saat ini.
Penggunaan tag div lebih efisien dibandingkan dengan tag tabel, karena tidak menggunakan banyak tag di dalamnya. Layout dapat kita sesuaikan keinginan kita dengan menambahkan css di dalamnya. Contoh seperti coding berikut ini :
Buat file dengan nama index.html
<html>
<head>
<title>Desain Web dengan DIV</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div id="badan_utama">
<div id="header">
<h2>Selamat Datang Di Web Kami</h2>
</div>
<div id="menu">
<ul class="list_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul> </div> <div id="wrapper">
<div id="content">
<h3>6 JENIS BAHASA PEMROGRAMAN TERPOPULER DI INDONESIA</h3>
<p align="justify">
Secara definitif, bahasa pemrograman dapat dipahami sebagai serangkaian kata-kata
berupa instruksi yang biasanya terdiri dari banyak baris dan dipahami oleh perangkat komputer.
</p>
<p align="center">
Hal ini wajib dikuasai jika Anda ingin mengembangkan aplikasi atau perangkat lunak
sehingga program yang Anda buat dapat beroperasi dengan lancar dan bisa dioperasikan oleh banyak orang.
</p>
<p align="left">
Jika Anda merupakan seorang developer atau orang yang sudah lama bergelut dengan bahasa pemrograman,
tentu Anda mengetahui beberapa jenis bahasa yang dapat digunakan.
</p>
<strong>Berikut beberapa jenis bahasa pemrograman yang sangat populer dan sering digunakan oleh developer :</strong>
<br>
<ol>
<li>Java</li>
<li>Bahasa C</li>
<li>PHP</li>
<li>Visual Basic</li>
<li>Phyton</li>
<li>C++</li>
</ol>
</div>
<div id="sidebar">
<h3>Informasi</h3>
<p>Pelatihan pemograman web akan dilaksanakan pada hari Kamis, 28 Januari 2021
<h3>Galeri Photo</h3>
<img src="images/gambar.jpg" width="180" height="120">
</div>
</div>
<div id="footer">
Copyright By The Letter
</div>
</div>
</body>
</html>
Ketika file index.html tersebut dijalankan maka akan tampil seperti berikut :
Tampilan di atas tidak menarik dan tampak acak-acakan, tidak udah khawatir yang penting kerangka layout menggunakan div tersebut sudah benar. Untuk mempercantik tampilannya kita buat file CSS seperti berikut ini dan namai style.css :
#badan_utama{
height:auto;
width:800px;
vertical-align:middle;
box-shadow:0px 0px 5px #000;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
margin-top:0;
}
#header{
background-color:#FFF999;
text-align:left;
padding-left:10px;
height:100px;
z-index:3;
overflow:hidden;
}
#menu{
background-color:#999999;
height:40px;
width:100%;
margin-top:5px;
margin-bottom:5px;
}
#wrapper{
width:100%;
z-index:3;
background-color:#FFFFFF;
height:auto;
}
#content{
float:left;
height:auto;
width:580px;
padding:5px;
margin-right:6px;
z-index:4;
font-size:12px;
}
#sidebar{
height:auto;
background-color:#FFFFFF;
text-align:left;
width:200px;
z-index:5;
float:left;
overflow:hidden;
}
#footer{
clear:both;
height:20px;
width:100%;
z-index:7;
background-color:#0099FF;
font-size:11px;
text-align:center;
font-weight:bolder;
}
#header h2{
text-shadow:0px 0px 2px #000;
}
.list_menu{
float:left;
margin:0px;
padding:0px;
width:100%;
}
.list_menu li{
padding:10px;
height:auto;
list-style-type:none;
float:left;
border-right-width:1px;
border-right-style:solid;
border-right-color:#FFFFFF;
width:auto; text-align:center;
}
.list_menu li a{
text-decoration:none;
}
.list_menu li a:hover{
font-weight:bold;
color:#h1h1h1;
text-shadow:0px 0px 2px #000;
}
.list_menu li:hover{
background-color:#FFFFFF;
}
h3,h4,h5{
color:#FF0999;
font-family:Georgia,"Times New Roman",Serif;
font-size:14px;
margin-bottom:5px;
margin-left:5px;
margin-top:5px;
}
Jalankan file index.html di browser kemudian hasilnya akan tampak sebagai berikut :
Demikian tutorial desain layout web dengan tad div, selamat mencoba dan semoga bermanfaat. Untuk warna posisi dan sebagainya bisa menyesuaikan dengan selera masing-masing.
Be the first to comment