( Cascading Style Sheet) Bagian 2 (Model Kotak dan Menu)

Presentasi berjudul: "( Cascading Style Sheet) Bagian 2 (Model Kotak dan Menu)"— Transcript presentasi:

1 ( Cascading Style Sheet) Bagian 2 (Model Kotak dan Menu)
CSS ( Cascading Style Sheet) Bagian 2 (Model Kotak dan Menu) Mata Kuliah : Pemrograman Berbasis Web Pertemun 4

2 MODEL KOTAK (BOX model)
Di dalam pengaturan tata letak sebuah halaman web site agar terlihat menarik seringkali dikotak- kotak/di blok dan diletakkan di beberapa bagian halaman website. Pengkotak-kotakan tersebut tidak lepas dari beberapa blok (blok kotak) yang berisi tentang bagian-bagian yang akan ditampilkan di halaman web browser, kotak- kotak tersebut secara virtual digambarkan ke dalam tata letak halaman web site. Misalnya : kotak untuk header, kotak footer, kotak isi halaman, kotak kanan atau kotak kiri. Ketika browser mendeteksi element menggunakan model kotak, maka kotak tersebut dilengkapi dengan Padding, Border dan Margin. Perhatikan gambar.

3 MODEL kotak (BOX MODEL)

4 Atribut padding dan margin
Padding adalah properti yang digunakan untuk membuat jarak antar objek Contoh : padding : 1px 2px 3px 4px; * 1px (top), 2px(right), 3px(button), 4px(left) padding : 2px 2px 2px 2px: ( padding : 2px; ) Border adalah properti yang digunakan untuk memberikan garis pada sebuah konten. border: 1px solid red; (membuat garis setebal 1px dengan garis penuh dan berwarna merah) Margin adalah properti yang digunakan untuk membuat jarak (margin) objek dari layar margin : 1px 2px 3px 4px; margin : 2px 2px 2px 2px; margin : 0 auto; (membuat objek di tengah)

5 FLOATING attribut (atribut mengambang)
Seperti halnya kita dalam membuat sebuah halaman web site, maka pada setiap posisi element akan saling berurutan dari atas sampai ke bawah. Maka untuk menangani permasalahan tersebut misalnya menempatkan kotak di posisi kanan maupun kiri, maka kita gunakan fungsi atribut float. Dengan Floating model kotak bisa kita tempatkan berada di posisi kanan maupun kiri dari sebuah layar web site. Dalam penggunaan float selalu diakhiri dengan pembersihan floating dengan memberikan attribut ( clear:left; / clear:right / clear:both) Perhatikan gambar.

6 Floating attribut HEADER KOTAK KANAN Float:left KOTAK KIRI
Float : right; FOOTER

7 MENU Menu di dalam web site tidaklah asing di setiap halaman web site, dimana menu-menu tersebut memberikan tautan sebuah halaman di dalam web tersebut ataupun tautan ke halaman web site yang lain. Di dalam halaman website kita bisa mengatur dan memodifikasi sebuah tautan ke dalam bentuk menu veritakal maupun horisontal ataupun ke dalam bentuk menu drop-down untuk menghemat ruang di dalam halaman web site. Perhatikan gambar:

8 CONTOH MENU (VERITIKAL)
Untuk membuat menu element yang perlu diperhatikan adalah element “hover” yang berfungsi untuk menampilkan aksi apa yang akan dilakukan ketika mouse disorot pada objek menu tersebut. Penulisannya adalah : element:hover{ }

9 Next >> PHP (Pertemuan 1)
Terimakasih atas perhatiannya. Semoga apa yang kita pelajari bersama bermanfaat bagi kita semua. Amiiin. Sumber: Internet & World Wide Web How To Program Fourth Edition, P.J. Deitel, H.M .Deitel, Prentice Hall. Pro CSS for High Traffic Website, Antony Kennedy and Inayaili deLeon, Appress Learning Web Design Third Edition, Jennifer Niederst Robbins, O’Reilly Media Next >> PHP (Pertemuan 1)