CSS

Save a lot of works with…
CSS
BOX MODEL
AMIROH, S.KOM
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.
Contoh desain layout website
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
KONSEP BOX MODEL
 Sebuah dokumen web pada
umumnya memiliki elemen-elemen
sebagai berikut:
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
 Bukti bahwa elemen HTML berada dalam sebuah KOTAK.
KONSEP BOX MODEL
 Ilustrasi Box Model digambarkan sebagai berikut:
Keterangan
 Content: Tempat teks/gambar
ditampilkan
 Padding: Daerah kosong di sekitar
content
 Border: Batas yang mengelilingi
padding dan content
 Margin: Daerah kosong di luar
border
CONTOH BOX MODEL
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 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 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 Border-Radius
Digunakan membuat efek sudut bulat (rounded).
Contoh: Hasil:
 Properti Floating
Digunakan untuk membuat sebuah elemen “mengapung” pada
sisi kiri ataupun kanan dari sebuah elemen.
Contoh:
 Properti Clear
Digunakan untuk membersihkan pengaruh property float.
Biasanya digunakan untuk menempatkan elemen pada baris
berikutnya.
Contoh:
Latihan yuk..
Good luck 
REFERENSI
 http://www.w3schools.com/
 https://www.hotdesign.com/seybold/everything.html
 http://stackoverflow.com/questions/83073/why-not-use-
tables-for-layout-in-html
 http://bertzzie.com/knowledge/desain-web-dasar/
Layout.html

CSS

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Save a lot of works with…

 Namun dengan menonaktifkan bingkai table (Border=0), memungkinkan

 Mengunakan Tables untuk layout membuat kapasitas file

 Pengukuran total dari tinggi elemen :

<p>This is some text.</p>

<p>This is some text.</p>

Kedua properti ini hanya dapat digunakan untuk block level element

Anda mungkin juga menyukai