Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

07 css box model

524 views

Published on

CSS Box Model

Published in: Internet
  • Be the first to comment

  • Be the first to like this

07 css box model

  1. 1. CSS BOX MODEL AMIROH, S.KOM Save a lot of works with…
  2. 2. 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.
  3. 3. Contoh desain layout website
  4. 4. 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
  5. 5. 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
  6. 6. KONSEP BOX MODEL  Sebuah dokumen web pada umumnya memiliki elemen-elemen sebagai berikut:
  7. 7. 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.
  8. 8. 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
  9. 9. 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.
  10. 10. KONSEP BOX MODEL  Bukti bahwa elemen HTML berada dalam sebuah KOTAK.
  11. 11. 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
  12. 12. CONTOH BOX MODEL
  13. 13. 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:
  14. 14. 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.
  15. 15. 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>
  16. 16. 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>
  17. 17. 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
  18. 18. 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).
  19. 19. 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:
  20. 20. PROPERTI BOX MODEL [4]  Properti Border-Radius Digunakan membuat efek sudut bulat (rounded). Contoh: Hasil:
  21. 21. PROPERTI BOX MODEL [5]  Properti Floating Digunakan untuk membuat sebuah elemen “mengapung” pada sisi kiri ataupun kanan dari sebuah elemen. Contoh:
  22. 22. PROPERTI BOX MODEL [6]  Properti Clear Digunakan untuk membersihkan pengaruh property float. Biasanya digunakan untuk menempatkan elemen pada baris berikutnya. Contoh:
  23. 23. Latihan yuk..
  24. 24. Good luck 
  25. 25. 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

×