07 css box model

CSS

BOX MODELAMIROH, S.KOM

Save a lot of works with…

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/gambarditampilkan

Padding: Daerah kosong di sekitar content

Border: Batas yang mengelilingipadding dan content

Margin: Daerah kosong di luarborder

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

07 css box model

Internet