Dalam desain web, elemen-elemen HTML seperti teks, gambar, dan tautan, dapat dibungkus atau ditempatkan dalam kotak yang disebut “box“. Konsep ini dikenal sebagai Box Model. Setiap elemen memiliki kotak yang melibatkan area isi konten, padding, border, dan margin. Memahami Box Model adalah langkah penting dalam mengatur tata letak elemen-elemen pada laman web.
Layouting mengacu pada cara elemen-elemen ini ditempatkan dan diatur dalam halaman web. Ini mencakup pemilihan jenis tata letak, seperti blok atau inline, serta penggunaan properti-posisi dan properti-display. Dengan menguasai konsep-konsep ini, kita dapat mengatur tampilan dan tata letak elemen-elemen secara efektif dalam desain web kita.
Memahami Box Model
Box Model menguraikan struktur dasar elemen dalam empat bagian:
- Content: Ini adalah area di dalam kotak yang berisi teks, gambar, atau konten lainnya yang ditampilkan.
- Padding: Ini adalah area kosong di sekitar konten, yang memberikan jarak antara konten dan batas kotak.
- Border: Ini adalah garis di sekitar kotak yang memisahkan konten dari area padding dan area margin.
- Margin: Ini adalah area kosong di luar kotak, yang memberikan jarak antara elemen ini dan elemen lain di sekitarnya.
Keempat bagian di atas mungkin dapat dipahami dengan melihat gambar berikut ini:
Box Sizing
Box Sizing adalah properti CSS yang mengontrol bagaimana ukuran elemen dihitung. Secara default, CSS menghitung ukuran elemen dengan menggabungkan content, padding, dan border. Tetapi dengan box-sizing, Anda dapat mengatur elemen untuk menghitung ukuran hanya dengan content, sehingga membuat pengaturan tata letak menjadi lebih mudah.
Contoh:
1 2 3 4 5 6 |
.box { width: 200px; padding: 20px; border: 1px solid #ccc; box-sizing: border-box; /* Menghitung ukuran elemen dengan content, padding, dan border */ } |
Positioning: Static, Relative, Absolute, dan Fixed
Properti position memungkinkan Anda mengendalikan posisi elemen di halaman. Ada beberapa jenis posisi:
- Static: Ini adalah posisi default. Elemen ditempatkan sesuai dengan alur normal dokumen.
- Relative: Elemen ditempatkan relatif terhadap posisi normalnya. Anda dapat menggunakan properti top, right, bottom, dan left untuk menggeser elemen dari posisi normalnya.
- Absolute: Elemen ditempatkan relatif terhadap elemen induk yang berposisi relative atau absolute. Ini memungkinkan Anda membuat lapisan elemen di atas elemen lain.
- Fixed: Elemen ditempatkan relatif terhadap tampilan layar. Ini akan tetap di posisinya saat Anda menggulir laman.
Contoh:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.relative-box { position: relative; top: 20px; left: 30px; } .absolute-box { position: absolute; top: 50px; left: 50px; } .fixed-box { position: fixed; top: 0; right: 0; } |
Display: Block, Inline, dan Inline-block
Properti display mengontrol bagaimana elemen ditampilkan di halaman.
- Block: Elemen ini akan mengambil lebar penuh dan membentuk blok terpisah. Mereka akan ditempatkan di baris baru.
- Inline: Elemen ini hanya akan mengambil ruang yang dibutuhkan oleh kontennya dan tidak memaksa baris baru.
- Inline-block: Elemen ini akan mengambil ruang yang dibutuhkan oleh kontennya tetapi tetap membentuk blok terpisah.
Contoh:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.block-element { display: block; width: 100%; background-color: #f2f2f2; } .inline-element { display: inline; background-color: #3498db; color: white; } .inline-block-element { display: inline-block; width: 150px; height: 150px; background-color: #e74c3c; color: white; } |
Sekarang saatnya kita menerapkan tutorial ini untuk membuat sebuah halaman web yang menerapkan CSS Box Model dan Layouting. Silahkan mengikuti beberapa langkah berikut ini:
Buat file dengan nama latihan_css_004.html, lalu ketikkan kode HTML berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contoh Halaman Web dengan Box Model dan Layouting</title> <link rel="stylesheet" href="assets/css/style_box_layout.css"> </head> <body> <header> <h1>Contoh Halaman Web dengan Box Model dan Layouting</h1> </header> <nav> <a href="#">Beranda</a> <a href="#">Tentang Kami</a> <a href="#">Layanan</a> <a href="#">Kontak</a> </nav> <div class="container"> <div class="main-content"> <h2>Selamat Datang di KelasRingan.Com</h2> <img class="image" src="assets/img/gambar.jpg" alt="Gambar Contoh"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, enim sunt. Voluptatem praesentium minima dicta, et ipsa perspiciatis similique nulla soluta voluptate quas repudiandae aperiam deserunt, temporibus laudantium qui molestias fugit sed placeat quasi! Ex, delectus omnis iure porro impedit accusamus rem veritatis nemo esse accusantium aliquid tenetur assumenda vero asperiores! Impedit sequi voluptates velit? Facilis ut molestias dicta perferendis!</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et, distinctio numquam corrupti, exercitationem, voluptas illo harum impedit aut modi ad pariatur beatae rem qui reprehenderit a veniam iusto nihil maxime velit nemo quidem. Sapiente porro ducimus non, voluptatem voluptates explicabo incidunt. Provident temporibus possimus nesciunt, deserunt quae vitae unde eligendi ex fugit odit esse suscipit quod, quas in minima. Ipsam dolore dolorem tenetur id repellendus minus omnis explicabo voluptate, odit fugit numquam aliquid minima molestias exercitationem? Minus alias doloremque modi.</p> </div> <div class="sidebar"> <h3>Sidebar</h3> <p>Ini adalah sidebar dengan konten tambahan.</p> </div> </div> <footer> <p>Copyright © 2023 KelasRingan.Com</p> </footer> </body> </html> |
Buat file dengan nama style_box_layout.css, lalu ketikkan kode CSS berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f2f2f2; } header { background-color: #333; color: white; text-align: center; padding: 10px; } nav { background-color: #444; color: white; text-align: center; padding: 10px; } nav a { text-decoration: none; color: white; margin: 0 10px; } .container { max-width: 1200px; margin: 20px auto; padding: 20px; background-color: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); display: flex; } .main-content { flex: 70%; padding: 20px; background-color: #f9f9f9; } .sidebar { flex: 30%; padding: 20px; background-color: #e6e6e6; } .image { float: left; margin-right: 20px; max-width: 300px; } footer { clear: both; text-align: center; padding: 10px; background-color: #444; color: white; } |
Hasilnya jika file latihan_css_004.html kita jalankan pada web browser maka akan terlihat seperti pada gambar berikut ini:
Pada contoh di atas, terdapat properti flex yang merupakan Flexbox (Flexible Box Layout). Flexbox (Flexible Box Layout) adalah model tata letak di CSS yang dirancang untuk menyederhanakan dan mengatur tata letak elemen-elemen dalam sebuah kontainer dengan cara yang lebih efisien dan fleksibel. Ini adalah salah satu cara yang kuat untuk mengatur elemen secara horizontal dan vertikal dalam desain web responsif. Dengan Flexbox, Anda dapat dengan mudah mengatur elemen dalam baris atau kolom, serta mengatur ruang dan urutan elemen-elemen tersebut.
Keuntungan Menggunakan Flexbox:
- Tata Letak Dinamis
Flexbox memungkinkan elemen dalam kontainer mengatur ulang dan beradaptasi dengan ukuran tampilan, sehingga cocok untuk desain responsif. - Urutan Konten
Anda dapat mengatur urutan elemen tanpa harus mengubah struktur HTML. - Distribusi Ruang
Anda dapat mendistribusikan ruang tersedia di dalam kontainer dengan lebih mudah. - Pengaturan Posisi
Mengatur posisi vertikal dan horizontal elemen dengan lebih intuitif.
Komponen Flexbox:
- Container
Dalam elemen yang ingin Anda buat sebagai kontainer fleksibel, Anda harus menetapkan properti display: flex; atau display: inline-flex;. display: flex; membuat elemen menjadi kotak yang dapat diatur dengan fleksibilitas, sementara display: inline-flex; membuatnya tetap dalam alur teks. - Flex Items
Elemen-elemen yang berada di dalam kontainer flex disebut “flex items”. Elemen ini akan mendapatkan fleksibilitas yang diberikan oleh model tata letak flexbox.
Dalam tutorial ini, kita telah mempelajari konsep Box Model dan dasar-dasar Layouting dalam desain web menggunakan CSS. Memahami bagaimana elemen-elemen dikemas dalam kotak, pengaturan ukuran dengan box-sizing, posisi dengan properti position, serta tampilan elemen dengan properti display akan membantu kita merancang tata letak yang lebih baik dan responsif pada laman web kita. Dengan penggunaan yang tepat, kita dapat menciptakan tampilan halaman web yang menarik dan fungsional. Selain itu kami juga telah menjelaskan tentang Flexbox (Flexible Box Layout).
Untuk mendapatkan daftar Tutorial CSS dari Dasar, silahkan mengunjungi Index Tutorial CSS dari Dasar: Belajar CSS Dari Dasar.
