6 pemrograman internet css layouting
TRANSCRIPT
CSS Layouting Cara Layouting Web dengan CSS
CSS Layout Overview #1 <div></div> #2 CSS Layout Tutorial #3 Box Model
#1 <div></div>
1/6
dahulu... orang melayout website
dengan <table>
tapi itu penggunaan <table> yang tidak tepat
<table> digunakan untuk menampilkan data tabular
(bukan layout)
<div></div>
elemen <div> adalah sebuah blok level yang dapat
digunakan untuk container, dan mengelompokkan elemen
html lain
<div> + CSS = GroupLayouting
<div> & CSS sering digunakan untuk melayout dokumen
#2 CSS Layouting
Tutorial
1/6
Rencana Layout
maincontent
sidebar
header
footer
Step 1 : definisikan body
<html>
<head>
<title>Belajar Layout dengan CSS</title>
<link rel="stylesheet" type="text/css"
href="style1.css" />
</head>
<body>
</body>
</html>
body{
background:#7fb3cc;
font-family:callibri,verdana,arial;
}
Step 2 : Buat sebuah div kontainer yang akan jadi
“wadah” bagi elemen lainnya
<body>
<div class="container">
</div>
</body>
.container{
width:900px;
background:#ffffff;
margin-left:auto;
margin-right:auto;
}
Kok nggak kelihatan?
.container{
width:900px;
background:#ffffff;
margin-left:auto;
margin-right:auto;
border:1px solid #333333;
}
border sudah kelihatan dalam bentuk garis saja...
masih nggak kelihatan?
.container{
width:900px;
background:#ffffff;
margin-left:auto;
margin-right:auto;
border:1px solid #333333;
padding:10px;
}
lihat kotak putih ini?
Step 3 : Membuat Header
<div class="container">
<div id="header">
<h2>Toko Online Saya</h2>
Selamat datang di Toko Online kami..
</div>
</div>
#header{
background:#D1C1FF;
}
lihat jarak ini?
mari hilangkan margin milik <h2>
#header{
background:#D1C1FF;
}
#header h2{
margin:0px;
}
Menghilangkan margin untuk h2 milik id header
atau kita hilangkan margin untuk semua tag h1-h6
h1,h2,h3,h4,h5,h6{
margin:0px;
}
Step 4 : Content & Footer
...
<div id="content">
<div id="maincontent">Ini adalah
Content</div>
<div id="sidebar"><h2>Sidebar
samping</h2></div>
</div>
...
...
<div id="footer"> Copyleft 2012
TokoOnlineKu.com</div>
...
<body>
<div id="container">
<div id="header">
<h2>Toko Online Saya</h2>
Selamat datang di Toko Online kami..
</div>
<div id="content">
<div id="maincontent">Ini adalah Content</div>
<div id="sidebar"><h2>Sidebar / samping</h2></div>
</div>
<div id="footer">Copyleft 2012 TokoOnlineKu.com</div>
</div>
</body>
#content{
width:100%;
}
#maincontent{
background:#ffffff;
width:75%;
}
#sidebar{
background:#C1F7FF;
width:25%;
}
#footer{
background:#499CA8;
}
Kok tampilannya gini sih?
#maincontent{
background:#ffffff;
width:75%;
float:left;
}
#sidebar{
background:#C1F7FF;
width:25%;
float:left;
}
Emm... Hampir benar?
#footer{
background:#499CA8;
clear:both;
}
refining Padding & Content
#header{
background:#50D4E7;
padding:10px;
}
sebelum padding
sesudah padding:10px
#footer{
background:#499CA8;
clear:both;
padding:10px;
text-align:center;
}
sebelum padding & text-align
sesudah padding & text-align
#3 CSS Box Model
1/6
pada dasarnya semua elemen HTML dapat dianggap sebagai sebuah
”kotak” (CSS Box Model)
CSS Box Model intinya adalah kotak yang membungkus/mengelilingi
semua elemen HTML
Komponen CSS Box Model
#margins
#border
#padding
#content
setting heigth & width (misal width:250px) hanya mengatur lebar dan tinggi untuk content area
div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; }
border
padding
content
10 10 5 5 220 0 0
margin
Total lebar = 0 + 5 + 10 + 220 + 10 + 5 + 0 = 250px
div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; }
<img src="w3css.gif" width="250" height="250" /> <div class="ex">Lebar gambar diatas adalah 250px, total lebar elemen ini pun juga sama 250px</div>
Further references : http://www.w3schools.com
next session
JavaScript