Box model dan tata letak dasar
Untuk modul Box Model dan Tata Letak Dasar dalam mata kuliah Pemrograman Web, berikut adalah penjelasan mengenai konsep Box Model dalam CSS, teknik dasar tata letak
1. Memahami Box Model dalam CSS
Setiap elemen HTML dianggap sebagai sebuah kotak yang terdiri dari beberapa area:
- Content: Isi dari elemen, seperti teks atau gambar.
- Padding: Ruang antara konten dan border.
- Border: Garis yang mengelilingi padding dan konten.
- Margin: Ruang di luar border yang memisahkan elemen dari elemen lainnya.
Struktur ini dikenal sebagai Box Model dalam CSS. Memahami Box Model penting untuk mengendalikan ukuran dan ruang di sekitar elemen.
Contoh:
div { width: 300px; padding: 20px; border: 5px solid black; margin: 10px; }
Dalam contoh di atas:
- Content: Lebar 300px.
- Padding: 20px di semua sisi.
- Border: 5px di semua sisi.
- Margin: 10px di semua sisi.
Total lebar elemen tersebut adalah 300px (content) + 40px (padding) + 10px (border) = 350px.
2. Tata Letak Dasar dalam CSS
CSS menyediakan beberapa metode untuk mengatur tata letak elemen pada halaman web:
a. Normal Flow
Ini adalah tata letak default di mana elemen ditampilkan satu per satu sesuai urutan dalam HTML. Elemen blok (seperti `< div >`, `< p >`) akan ditampilkan secara vertikal, sementara elemen inline (seperti `< span >`, `< a >`) akan ditampilkan secara horizontal.
b. Float
Properti `float` memungkinkan elemen untuk "mengapung" ke kiri atau kanan, sehingga elemen lain dapat mengelilinginya.
Contoh:
img { float: left; margin-right: 10px; }
Dalam contoh ini, gambar akan mengapung ke kiri, dan teks akan mengelilinginya di sebelah kanan.
c. Flexbox
Flexbox adalah model tata letak satu dimensi yang memungkinkan pengaturan elemen dalam baris atau kolom dengan fleksibilitas tinggi.
Contoh:
.container { display: flex; justify-content: space-between; }
Dalam contoh ini, elemen-elemen di dalam `.container` akan didistribusikan secara horizontal dengan ruang yang sama di antara mereka.
d. Grid
CSS Grid adalah model tata letak dua dimensi yang memungkinkan pengaturan elemen dalam baris dan kolom.
Contoh:
.container { display: grid; grid-template-columns: 1fr 2fr; }
Di sini, `.container` dibagi menjadi dua kolom; kolom pertama mengambil 1 bagian dari ruang, dan kolom kedua mengambil 2 bagian.
3. Implementasi di Ubuntu 24.04 Tanpa Perangkat Lunak dari Microsoft
Untuk mempraktikkan konsep Box Model dan tata letak dasar, Anda memerlukan editor teks dan browser web. Berikut adalah beberapa alat yang dapat digunakan di Ubuntu 24.04:
a. Editor Teks
- Gedit: Editor teks bawaan GNOME yang sederhana dan mudah digunakan.
Instalasi Gedit:
sudo apt update sudo apt install gedit
Menjalankan Gedit:
gedit
- Nano: Editor teks berbasis terminal yang ringan dan mudah digunakan.
Instalasi Nano:
sudo apt update sudo apt install nano
Menjalankan Nano:
nano nama_file.html
- Bluefish: Editor teks yang ditujukan untuk pemrograman dan pengembangan web.
Instalasi Bluefish:
sudo apt update sudo apt install bluefish
Menjalankan Bluefish:
bluefish
b. Browser Web
Untuk melihat hasil kode HTML dan CSS Anda, Anda memerlukan browser web. Beberapa opsi yang tersedia:
- Firefox: Browser default di Ubuntu.
Instalasi Firefox:
sudo apt update sudo apt install firefox
Menjalankan Firefox:
firefox
- Chromium: Versi sumber terbuka dari Google Chrome.
Instalasi Chromium:
sudo apt update sudo apt install chromium-browser
Menjalankan Chromium:
chromium-browser
Dengan menggunakan alat-alat di atas, Anda dapat membuat dan mengedit file HTML serta CSS, kemudian melihat hasil.