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, serta contoh implementasi menggunakan alat di Ubuntu 24.04 tanpa menggunakan perangkat lunak dari Microsoft.

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 `

`, `

`) akan ditampilkan secara vertikal, sementara elemen inline (seperti ``, `<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.

Pranala Menarik

• Web Programming