Ilmu Pengetahuan

Perhatikan desain diatas, terdapat 4 bagian yang akan kita buat. Sebaiknya untuk nama id pada masing-masing division diberi nama sesuai desain supaya mudah dipahami.


Untuk yang pertama, kita akan membuat sel bagian header . Berikut ini style untuk bagian header yang saya buat
#header {
padding : 40px; /* jarak teks dari tepi kotak */
border: 3px solid black ; /* membuat gariss tepi 1 pixel */
background-color : yellow; /* membuat warna latar */
}
Dengan style diatas, tampilan header sudah agak lebih bagus (lihat tampilan sebagai berikut


Sedangkan style unutuk footernya dapat ditulis sebagai berikut :
#footer {
padding : 10px;
border : 1px solid black;
background-color: yellow;
}



Selanjutnya kita buat style untuk bagian isi.
#isi {
padding : 10px;
border: 1px solid black;
}



Untuk bagian navigasi, karena bagian tersebut ingin diletakkan disebelah kanan, maka berikan properti float : right. Perhatikan style berikut :
#navigasi {
float : right;
padding : 10px;
border : 1px solid black;
background-color: red;
}
Efek penggunaan properti float : right dapat dilihat pada tampilan berikut ini.




Meskipun sudah diletakkan disebelah kanan, ternyata bagian sisi masih belum seperti yang diinginkan sesuai desain layout. Oleh karena itu kita atur lebar sel untuk bagian isi dengan properti width dan juga kita beri jarak sedikit antar sel isi dan footer properti margin-bottom. Perhatikan style berikut :
#isi {
width : 1000px;
margin-bottom: 10px;
padding : 10px;
border : 1 px solid
}


Efek modifikasi style pada bagian isi dapat dilihat pada gambar berikut ini.


Pada gambar diatas tampak, bahwa bagian isi sudah memiliki sel sendiri selebar 1000 pixel dan ada sedikit jarak 10 pixel dari footer.
Ada baiknya kita tambahkan sedikit jarak bagian navigasi dengan header, begitu pula dengan bagian isi. Untuk keperluan ini, gunakan properti margin-top. Supaya seimbang dengan yang lain, kita beri jarak 10 pixel.
#navigasi {
padding : 10px;
border : 1px solid #000;
background-color: red;
float : right;
margin-top: 10px;
}
#isi {
width: 830px;
margin-bottom:10px;
padding: 10px;
border: 1px solid black;
margin-top: 10px;
}
Hasil perubahan style tersebut tampak pada gambar berikut.


Yes..yes..yes.. sudah agak bagus tampilannya.
Langkah selanjutnya kita bermain-main sedikit dengan layout image nya. Masih ada space kosong yang besar di sebelah kanan image. Bagaimana jika kita meletakkan paragrafnya disebelah kanannya. OK… ide yang bagus.
Untuk keperluan ini, sebaiknnya kita buat untuk imagenya. Kenapa ? Hal ini dilakukan supaya memudahkan pengaturan image-image yang lain. Seandainya terdapat lebih dari satu yang disisipkan ke halaman web tersebut, maka kita tidak perlu repot-repot mengatur semuanya, melainkan memanggil class nya saja.
Nama class untuk image pada contoh ini, misalnya gambar.
<img src=”bunga.jpg” class=”gambar” />
Selanjutnya kita buat style pada class tersebut
.gambar{
float: left;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
}
Pada style tersebut, properti float: left diberikan kita ingin gambar berada di sebelah kiri elemen yang mengikutinya (dalam hal ini paragraf). Sedangkan properti margin digunakan untuk mengatur posisi gambar terhadap elemen di sekitarnya. Sebagai contoh, margin-right menyatakan jarak antara tepi kanan image dengan teks paragraf disebelah kanannya. margin-bottom menyatakan jarak antara tepi bawah image teks dibawahnya.
Perhatikan, meskipun margin-left diberi 0px, tapi ada jarak antara tepi kiri image dengan garis border bagian. Hal ini dikarenakan efek dari properti padding: 10 px dari style isi sebelumnya. Begitu pula margin-top nya.


Apabila kita ingin membuat teks paragraf bagian isi memiliki aligment justify, maka dapat kita buat stylenya.
#isi p {
text-align : justify ;
line height : 20 px; }

Properti line-height digunakan unutk mengatur Jarak antar baris teks paragraf. Perhatikan efek penggunaan style tersebut dalam gambar berikut.
Hasil dari aligment justify sebagai berikut :


OK… Udah bagus
Tampilan gambar berikut ini menunjukkan manfaat penggunaan class pada bagian paragraf dan image apabila terdapat beberapa image dan paragraf dalam bagian isi. Gambar menunjukkan bahwa setiap image dan paragraf akan memiliki style yang sama.


Berikut ini adalah code halaman web index.html yang belum dilayout tampilannya.
<html>
<title>Membuat Layout Sederhana </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header" >
<h1>Selamat Belajar Desain Web</h1></div>
<div id="navigasi">Menu Navigasi <br>
link 1<br>
link 2<br>
link 3<br>
link 4<br>
link 5 <br>
link 6 <br></div>
<div id="isi">
<img src="smile.jpg" class="gambar">
<p> Belajar Desain Web itu sangat mengasyikkan.Belajar Desain Web itu sangat mengasyikkan.Belajar Desain Web itu sangat mengasyikkan.Belajar Desain Web itu sangat mengasyikkan.Belajar Desain Web itu sangat mengasyikkan
Belajar Desain Web itu sangat mengasyikkan.Belajar Desain Web itu sangat mengasyikkan.Belajar Desain Web itu sangat mengasyikkan.
Belajar Desain Web itu sangat mengasyikkan.Belajar Desain Web itu sangat mengasyikkan.Belajar Desain Web itu sangat mengasyikkan.Belajar Desain Web itu sangat mengasyikkan.
<br> </p>
<p>Belajar Desain Web itu sangat mengasyikkan. Belajar Desain Web itu sangat mengasyikkan. Belajar Desain Web itu sangat mengasyikkan. Belajar Desain Web itu sangat mengasyikkan. Belajar Desain Web itu sangat mengasyikkan. Belajar Desain Web itu sangat mengasyikkan.
Belajar Desain Web itu sangat mengasyikkan. Belajar Desain Web itu sangat mengasyikkan. Belajar Desain Web itu sangat mengasyikkan. </p>
</div>
<div id="footer" >Copyright 2014 @ Septi Indriyani</div>
</body>
</html>

Asyikkk bukan ??? Kita ketemu pertemuan selanjutnya ,,, Bye bye