Menggunakan Division
Pendekatan yang efektif untuk memformat elemen-elemen HTML—termasuk juga division—adalah dengan menggunakan CSS.Ukuran Area
Seperti di kebanyakan elemen, kita bisa memanfaatkan atribut width dan height untuk menspesifikasikan ukuran area. Selain itu, atribut-atribut seperti padding dan margin juga bisa dimanfaatkan di sini.contoh sintaks division :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo Ukuran Division</title>
<style type="text/css">
<!--
.box1 {
width: 200px;
height: 50px;
background: grey;
border: 1px solid red;
}
.box2 {
margin: 10px;
padding: 10px;
width: 400px;
height: 100px;
border: 1px solid red;
}
-->
</style>
</head>
<body>
<div class="box1">
Paragraf ini di dalam tag <div>
</div>
<div class="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Demo Ukuran Division</title>
<style type="text/css">
<!--
.box1 {
width: 200px;
height: 50px;
background: grey;
border: 1px solid red;
}
.box2 {
margin: 10px;
padding: 10px;
width: 400px;
height: 100px;
border: 1px solid red;
}
-->
</style>
</head>
<body>
<div class="box1">
Paragraf ini di dalam tag <div>
</div>
<div class="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
dan sintaks di atas akan menjadi seperti gambar dibawah ini
sekian penjelasan dari saya semoga bermanfaat :)
apabila ada saran dan kritik mohon komentar di bawah
jangan lupa folow my blog http://ilmudtnshey.blogspot.com/
0 comments:
Post a Comment