• Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. • contoh: height:100px; width:200px;
Mendefinisikan ukuran dengen persentase-‐nya ©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
• Sebuah elemen HTML dapat kita anggap sebagai sebuah box/ kotak. • Digunakan pada saat kita akan merancang tampilan sebuah website. • Pada dasarnya berfungsi sebagai tempat yang membungkus isi dari elemen-‐elemen HTML. • Tag yang biasanya digunakan untuk merancang tampilan adalah
, walaupun tag lain juga bisa menerapkan box model.
• Terdiri atas 4 bagian: Margin, Border, Padding, Content. ©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-4
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-5
• Margin: area disekeliling border, Odak terpengaruh oleh warna dari box. • Border: garis yang membatasi padding & content, terpengaruh oleh warna box. • Padding: area disekeliling content, terpengaruh oleh warna box. • Content: area tempat menyimpan text dan image.
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-6
• margin:25px 50px 75px 100px; § margin atas = 25px § margin kanan = 50px § margin bawah = 75px § margin kiri = 100px
• margin:25px 50px 75px; § margin atas = 25px § margin kiri dan kanan = 50px § margin bawah = 75px
• margin:25px 50px;
§ margin atas dan bawah = 25px § margin kiri dan kanan = 50px
• margin:25px;
§ keempat margin = 25px
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-7
• margin:25px 50px 75px 100px; § margin top = 25px § margin right = 50px § margin bottom = 75px § margin left = 100px
• margin:25px 50px 75px; § margin top = 25px § margin left and right = 50px § margin bottom = 75px
• margin:25px 50px;
§ margin top and bottom = 25px § margin kiri dan kanan = 50px
• margin:25px;
§ keempat margin = 25px
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-8
• margin:auto;
§ ukuran margin otomatis diatur oleh browser.
• margin juga bisa diisi negaOf, berfungsi untuk menggeser elemen ke arah yang berlawanan. § margin:10px 0px 5px -10px;
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-9
• Contoh Margin HTML
CSS
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-10
• Contoh Margin HTML
CSS
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-11
• Contoh Margin HTML
CSS
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-12
• padding:25px 50px 75px 100px; § padding atas = 25px § padding kanan = 50px § padding bawah = 75px § padding kiri = 100px
• padding:25px 50px 75px; § padding atas = 25px § padding kiri dan kanan = 50px § padding bawah = 75px
• padding:25px 50px;
§ padding atas dan bawah = 25px § padding kiri dan kanan = 50px
• padding:25px;
§ keempat padding = 25px
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-13
• padding:auto;
§ ukuran padding otomatis diatur oleh browser.
• Padding ,dak bisa diisi negaOf.
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-14
• Contoh Padding HTML
CSS
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-15
• Contoh Padding HTML
CSS
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-16
• Memiliki 3 buah property utama: -‐ border-style : untuk menentukan jenis border. -‐ border-width : untuk menentukan tebal border. -‐ border-color : untuk menentukan warna border. • Penulisannya dapat disingkat menjadi: border:<style> <width>
; contoh
border:solid 2px green; ©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-17
border:solid 2px green; border:dotted 2px green; border:dashed 2px green; border:double 7px green; border:groove 7px green; border:ridge 7px green; ©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-18
• Berfungsi untuk memaksa sebuah elemen menjadi berada di kiri atau dikanan halaman. • Elemen yang berada setelah elemen yang diberi float akan terpengaruh fungsi float tersebut. • Elemen yang berada sebelum elemen yang diberi float ,dak akan terpengaruh. • Property: • float:left; • float:right; • Untuk me-‐nonak,Aan fungsi float gunakan: • clear:both; • Biasanya digunakan untuk membuat gallery.
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-19
• Berfungsi untuk menentukan posisi sebuah elemen secara bebas diluar alur dari halaman. • Cara Penulisan :
position:<posisi>;
• Untuk menggeser posisi digunakan: top:;
left:; • Value bisa diisi dengan bilangan nega,f untuk menggeser ke arah yang berlawanan.
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-20
• Terdapat 4 macam posi,oning yang yang dapat dilakukan:
• Sta?c : elemen diposisikan secara default, mengiku< alur halaman. • Fixed : elemen diposisikan didepan elemen-‐elemen HTML lain, elemen
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-21
• Untuk absolute dan fixed, jika di set top:0px;
left:0px;
maka, posisinya ada di pojok kiri atas halaman. • Sedangkan untuk rela,ve, berada di posisi awalnya.
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-22
• Overlapping Element -‐ elemen yang menggunakan posi?on, dapat dibuat saling bertumpuk. -‐ Untuk mengatur urutan tumpukannya digunakan: z-index:; -‐ Semakin besar value nya, posisinya semakin diatas tumpukan. -‐ Value bisa diisi nega?f untuk meletakkan elemen dibawah elemen yang mengiku? alur halaman.
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
2-23
• Salhazan Nasu,on, SKom., “Pemrograman Web”. Teknik InformaOka Universitas Islam Indonesia. • www.w3school.com
©2010 :: Pemrograman Web :: Sandhika Galih, Teknik Informatika – Universitas Pasundan Bandung
8-24
Terimakasih. [email protected] hNp://sandhikagalih.net