6 pemrograman internet css layouting
TRANSCRIPT
![Page 1: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/1.jpg)
CSS Layouting Cara Layouting Web dengan CSS
![Page 3: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/3.jpg)
CSS Layout Overview #1 <div></div> #2 CSS Layout Tutorial #3 Box Model
![Page 4: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/4.jpg)
#1 <div></div>
1/6
![Page 5: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/5.jpg)
dahulu... orang melayout website
dengan <table>
![Page 6: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/6.jpg)
tapi itu penggunaan <table> yang tidak tepat
![Page 7: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/7.jpg)
<table> digunakan untuk menampilkan data tabular
(bukan layout)
![Page 8: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/8.jpg)
<div></div>
![Page 9: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/9.jpg)
elemen <div> adalah sebuah blok level yang dapat
digunakan untuk container, dan mengelompokkan elemen
html lain
![Page 10: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/10.jpg)
<div> + CSS = GroupLayouting
![Page 11: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/11.jpg)
<div> & CSS sering digunakan untuk melayout dokumen
![Page 12: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/12.jpg)
#2 CSS Layouting
Tutorial
1/6
![Page 13: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/13.jpg)
Rencana Layout
maincontent
sidebar
header
footer
![Page 14: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/14.jpg)
Step 1 : definisikan body
![Page 15: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/15.jpg)
<html>
<head>
<title>Belajar Layout dengan CSS</title>
<link rel="stylesheet" type="text/css"
href="style1.css" />
</head>
<body>
</body>
</html>
![Page 16: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/16.jpg)
body{
background:#7fb3cc;
font-family:callibri,verdana,arial;
}
![Page 17: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/17.jpg)
![Page 18: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/18.jpg)
Step 2 : Buat sebuah div kontainer yang akan jadi
“wadah” bagi elemen lainnya
![Page 19: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/19.jpg)
<body>
<div class="container">
</div>
</body>
![Page 20: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/20.jpg)
.container{
width:900px;
background:#ffffff;
margin-left:auto;
margin-right:auto;
}
![Page 21: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/21.jpg)
![Page 22: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/22.jpg)
Kok nggak kelihatan?
![Page 23: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/23.jpg)
.container{
width:900px;
background:#ffffff;
margin-left:auto;
margin-right:auto;
border:1px solid #333333;
}
![Page 24: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/24.jpg)
border sudah kelihatan dalam bentuk garis saja...
![Page 25: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/25.jpg)
masih nggak kelihatan?
![Page 26: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/26.jpg)
.container{
width:900px;
background:#ffffff;
margin-left:auto;
margin-right:auto;
border:1px solid #333333;
padding:10px;
}
![Page 27: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/27.jpg)
lihat kotak putih ini?
![Page 28: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/28.jpg)
Step 3 : Membuat Header
![Page 29: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/29.jpg)
<div class="container">
<div id="header">
<h2>Toko Online Saya</h2>
Selamat datang di Toko Online kami..
</div>
</div>
![Page 30: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/30.jpg)
#header{
background:#D1C1FF;
}
![Page 31: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/31.jpg)
lihat jarak ini?
![Page 32: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/32.jpg)
mari hilangkan margin milik <h2>
![Page 33: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/33.jpg)
#header{
background:#D1C1FF;
}
#header h2{
margin:0px;
}
Menghilangkan margin untuk h2 milik id header
![Page 34: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/34.jpg)
atau kita hilangkan margin untuk semua tag h1-h6
![Page 35: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/35.jpg)
h1,h2,h3,h4,h5,h6{
margin:0px;
}
![Page 36: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/36.jpg)
![Page 37: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/37.jpg)
Step 4 : Content & Footer
![Page 38: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/38.jpg)
...
<div id="content">
<div id="maincontent">Ini adalah
Content</div>
<div id="sidebar"><h2>Sidebar
samping</h2></div>
</div>
...
![Page 39: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/39.jpg)
...
<div id="footer"> Copyleft 2012
TokoOnlineKu.com</div>
...
![Page 40: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/40.jpg)
<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>
![Page 41: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/41.jpg)
#content{
width:100%;
}
#maincontent{
background:#ffffff;
width:75%;
}
#sidebar{
background:#C1F7FF;
width:25%;
}
![Page 42: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/42.jpg)
#footer{
background:#499CA8;
}
![Page 43: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/43.jpg)
Kok tampilannya gini sih?
![Page 44: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/44.jpg)
#maincontent{
background:#ffffff;
width:75%;
float:left;
}
#sidebar{
background:#C1F7FF;
width:25%;
float:left;
}
![Page 45: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/45.jpg)
Emm... Hampir benar?
![Page 46: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/46.jpg)
#footer{
background:#499CA8;
clear:both;
}
![Page 47: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/47.jpg)
![Page 48: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/48.jpg)
refining Padding & Content
![Page 49: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/49.jpg)
#header{
background:#50D4E7;
padding:10px;
}
![Page 50: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/50.jpg)
sebelum padding
sesudah padding:10px
![Page 51: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/51.jpg)
#footer{
background:#499CA8;
clear:both;
padding:10px;
text-align:center;
}
![Page 52: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/52.jpg)
sebelum padding & text-align
sesudah padding & text-align
![Page 53: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/53.jpg)
![Page 54: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/54.jpg)
#3 CSS Box Model
1/6
![Page 55: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/55.jpg)
pada dasarnya semua elemen HTML dapat dianggap sebagai sebuah
”kotak” (CSS Box Model)
![Page 56: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/56.jpg)
CSS Box Model intinya adalah kotak yang membungkus/mengelilingi
semua elemen HTML
![Page 57: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/57.jpg)
Komponen CSS Box Model
#margins
#border
#padding
#content
![Page 58: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/58.jpg)
setting heigth & width (misal width:250px) hanya mengatur lebar dan tinggi untuk content area
![Page 59: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/59.jpg)
div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; }
![Page 60: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/60.jpg)
border
padding
content
10 10 5 5 220 0 0
margin
Total lebar = 0 + 5 + 10 + 220 + 10 + 5 + 0 = 250px
![Page 61: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/61.jpg)
div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; }
![Page 62: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/62.jpg)
<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>
![Page 63: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/63.jpg)
![Page 64: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/64.jpg)
Further references : http://www.w3schools.com
![Page 65: 6 pemrograman internet css layouting](https://reader034.vdocuments.site/reader034/viewer/2022052316/55946a401a28ab8f2b8b45bb/html5/thumbnails/65.jpg)
next session
JavaScript