Box Model

-

 

Box Model

Salah satu prinsip mendasar dalam menyusun elemen-elemen HTML ialah Box Model. Apa itu box model? Konsep box model pada dasarnya merupakan konsep yang menyatakan bahwa elemen-elemen yang ada di dalam HTML adalah berbentuk kotak. Sekali lagi, seluruh elemen HTML berbentuk kotak. Ukuran dari setiap elemen itu sendiri dipengaruhi oleh isi dari elemen, margin, padding, dan border dari elemen tersebut.

Semua elemen juga 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. Hal ini menyebabkan elemen yang bersifat block akan selalu berada          pada baris barunya sendiri ketika dituliskan. 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, dan memiliki ukuran tinggi yang ditentukan          serta ukuran lebar yang sesuai dengan isi elemen. Contoh dari elemen inline: span, b, i.

Perlu diperhatikan bahwa karena sifatnya, sebuah elemen inline tidak akan dapat menampung elemen blok (memiliki elemen blok di dalamnya), sementara elemen blok dapat menampung elemen blok maupun inline.

Kode di bawah memperlihatkan contoh perbedaan block level elemen dengan inline level element:

Jalankan kode di atas untuk melihat efeknya!
Seperti yang telah dijelaskan sebelumnya, sebuah elemen HTML berbentuk kotak,
dan ukurannya dipengaruhi oleh isi elemen, margin, padding, dan border. Kode berikut
menunjukkan contoh total luas sebuah elemen, lakukan simpan kode ke dalam sebuah file
HTML dan jalankan untuk melihat hasilnya:



Hasil dari eksekusi kode adalah sebagai berikut:


Komentar

Posting Komentar

Postingan populer dari blog ini

Cicada 3301, Teka-teki Paling Misterius di Internet yang Sulit Terpecahkan

-
  Pada Januari 2012, dunia  internet  digegerkan dengan kemunculan teka-teki misterius. Orang-orang menyebutnya sebagai Cicada 3301. Angka ‘3301’ merupakan nama samaran pihak yang membuat teka-teki tersebut. Sementara itu, ‘cicada’ yang dalam bahasa Indonesia berarti ‘serangga tonggeret’ adalah nama yang diberikan orang-orang karena teka-teki yang ditampikan memiliki bentuk yang serupa dengan hewan tersebut. Awal Mula Cicada 3301 Cicada 3301 memulai teka-tekinya melalui situs gambar 4chan. Dalam sebuah poster berlatar hitam, mereka menjelaskan bahwa mereka sedang mencari orang yang jenius. Untuk mencarinya, mereka mengadakan tes atau teka-teki yang harus dipecahkan. Banyak orang yang beranggapan bahwa teka-teki tersebut merupakan perekrutan terselubung bagi calon anggota organisasi rahasia, seperti Secret Intelligence Service (SIS), National Security Agency (NSA), Central Intelligence Agency, dan Freemason. Namun, tak sedikit pula yang beranggapan bahwa teka-tek...
Baca selengkapnya

Apa itu Golang framework dan bagaimana dampaknya bagi developer

-
  Banyak developer yang memanfaatkan Golang untuk mempersingkat waktu dalam membuat aplikasi  web . Hal ini dimungkinkan sebab Golang menyediakan  coding  agar developer tinggal menyusunnya sesuai dengan kebutuhan aplikasi yang dibuat. Fitur andalan Golang di antaranya keamanan memori, koleksi sampah, dan  structural typing  atau pengetikan terstruktur. Dengan kemiripan tinggi dengan bahasa C dan C ++, developer akan lebih mudah dalam memahami bahasa pemrograman Go. Fungsi lain Golang adalah sebagai berikut: Front end: Golang berguna untuk membuat bagian antarmuka aplikasi  website. Libraries/Tools: Golang menyediakan alat ini dimana di dalamnya merangkum semua kode untuk kemudian dipakai membangun aplikasi. Command Line Interface (CLI): Dengan Golang, Anda bisa memanfaatkan CLI yang memfasilitasi developer mengetikkan kode perintah untuk kemudian dijalankan oleh komputer. Pengembangan dan Operasi: Golang bahkan membantu proses pengembangan dan operasi...
Baca selengkapnya

Pengenalan User Interface (UI)

-
Gambar
        Baiklah di Era Industri 4.0 ini dan adanya pandemic Covid-19 ini mengharuskan kita untuk belajar dari rumah dan melakukan aktifitas kerja yang memungkinkan dikerjakan dari jarak jauh (tapi tambal ban sama memasak ndak bisa online ya kecuali pesan lewat driver). Tentunya dalam pekerjaan yang menggunakan software atau perangkat lunak atau system informasi dan terhubung secara daring (dalam jaringan) sebagai contoh adalah website, sangat penting bagi Programmer untuk bisa membuat desain interface atau tampilan tatap muka yang menarik pengunjung agar pengunjung dapat betah serta tidak bosan saat bekerja atau sekedar mencari artikel. Sehingga sangat penting bagi programmer untuk melihat tata letak, jenis font, besar font, lebar halaman, warna dan tentunya animasi dalam desain. Salah satu bahasa pemrograman yang digunakan untuk mendesain serta mempercantik desain dalam pemrograman web adalah css dan javascript. Tampilan tatap muka sistem informasi atau aplikasi yan...
Baca selengkapnya