07 css box model
TRANSCRIPT
INTRODUCTION TO BOX MODEL
Pada dasarnya desain layout sebuah website terdiri atas beberapa
kotak (box).
Kotak (Box) ini pada awalnya dibuat menggunakan table yang telah
dibentuk sedemikian rupa sehingga menjadi sebuah layout website
yang diinginkan.
Why Tables Are Bad (For Layout)?
Table pada website pada dasarnya hanya digunakan untuk menampilkan
Tabular Data
Namun dengan menonaktifkan bingkai table (Border=0), memungkinkan
seorang web designer untuk memanfaatkan table untuk layout website
Why Tables Are Bad (For Layout)?
Mengunakan Tables untuk layout membuat kapasitas file
menjadi lebih besar sehingga memperlambat proses
loading.
Tabel juga menyulitkan google untuk melakukan SEO
(Search engine optimation)
Beberapa browser tidak mendukung tampilan table,
sehingga tampilan konten web menjadi berantakan/rusak
Penggunaan table sangat rumit dan membingungkan
ELEMEN WEBSITE [1]
Elemen Header
Berisi judul dan penjelasan lain dokumen seperti Logo, Menu dan
seterusnya
Elemen Navigation
Berisi akses navigasi ke halaman-halaman lain dalam website.
Elemen Sidebar
Merupakan elemen pendukung konten, dapat berupa pembantu
navigasi konten, ataupun berbagai hal lain seperti daftar konten lain,
iklan, atau menu tambahan.
Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri
dan kanan konten, sesuai dengan kreatifitas perancangnya.
ELEMEN WEBSITE [2]
Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web
untuk melihat teks yang berada pada bagian ini.
Elemen Footer
Bagian penutup dari website, biasanya berisi lisensi pengunaan,
sitemap, ataupun link ke website lain
KONSEP BOX MODEL
Merupakan konsep yang menyatakan bahwa elemen-elemen yang ada di
dalam HTML adalah berbentuk KOTAK.
Ukuran dari setiap elemen itu sendiri dipengaruhi oleh isi dari elemen,
margin, padding, dan border dari elemen tersebut.
Sedangkan semua elemen dapat dikategorikan ke dalam dua cara
penampilan, yaitu:
Block Level Element merupakan elemen yang selalu dimulai pada baris
baru, dan menambahkan baris baru pada akhir elemen.
Contoh dari elemen block: p, h1, dan blockquote.
Inline Level Elements merupakan elemen yang tidak membuat baris
baru ketika dibuat. Elemen ini akan mengikuti alur dokumen
sebagaimana mestinya.
Contoh dari elemen inline: span, b, i.
KONSEP BOX MODEL
Ilustrasi Box Model digambarkan sebagai berikut:
Keterangan
Content: Tempat teks/gambarditampilkan
Padding: Daerah kosong di sekitar content
Border: Batas yang mengelilingipadding dan content
Margin: Daerah kosong di luarborder
UKURAN ELEMEN BOX MODEL
Ukuran panjang dan lebar sebuah box model diperoleh dengan
menjumlahkan total ukuran panjang dan lebar seluruh margin,
padding, border dan content box model berikut:
Pengukuran Box Model
Pengukuran total dari lebar elemen :
Pengukuran total dari tinggi elemen :
Jadi total dari lebar elemen tersebut yaitu 450px, dan total tinggi elemen
ialah 250px.
MEMBUAT BOX MODEL [DIV]
Tag <div> digunakan untuk membagi halaman web menjadi
beberapa bagian.
Tag <div> juga digunakan untuk mengelompokkan
beberapa elemen dan mengaturnya menggunakan CSS
Tag ini sering kali digunakan bersama CSS untuk membuat
layout sebuah website
Secara default, penggunaan tag <div> biasanya akan
menampilkan baris kosong sebelum dan sesudah tag <div>
Contoh:
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF;background-color:red;">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>
PROPERTI BOX MODEL [1]
Properti Height dan Width
Digunakan untuk mengubah tinggi dan lebar kotak.
Contoh: Hasil:
Kedua properti ini hanya dapat digunakan untuk block level element
PROPERTI BOX MODEL [2]
Properti Margin dan Padding
Digunakan untuk mengubah jarak antar elemen.
Contoh:
Penulisan satu nilai seperti pada kode di atas akan menyebabkan nilai
padding dan margin diimplementasikan pada keempat sisi elemen
(top-right-bottom-left).
PROPERTI BOX MODEL [3]
Properti Border
Digunakan sebagai pemberi tanda batas elemen memisahkan
margin dan padding
Terdapat tiga properti utama yang membentuk sebuah border, yaitu
border-width (Tebal bingkai), border-style (none|hidden|dotted|
dashed|solid|double|groove|ridge|inset|outset), dan border-color
(warna bingkai)
Contoh: Hasil:
PROPERTI BOX MODEL [4]
Properti Border-Radius
Digunakan membuat efek sudut bulat (rounded).
Contoh: Hasil:
PROPERTI BOX MODEL [5]
Properti Floating
Digunakan untuk membuat sebuah elemen “mengapung” pada
sisi kiri ataupun kanan dari sebuah elemen.
Contoh:
PROPERTI BOX MODEL [6]
Properti Clear
Digunakan untuk membersihkan pengaruh property float.
Biasanya digunakan untuk menempatkan elemen pada baris
berikutnya.
Contoh: