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.

1. 1. 1. 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 transparan di sekitar konten, memberikan jarak antara konten dan border. - **Border:** Garis yang mengelilingi padding dan konten. - **Margin:** Ruang transparan di luar border, memberikan jarak antara elemen dengan elemen lainnya.

Struktur ini dikenal sebagai **Box Model** dalam CSS. Memahami Box Model penting untuk mengendalikan ukuran dan ruang di sekitar elemen. citeturn0search0

• • Contoh:**

```css 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. citeturn0search2

1. 1. 2. Tata Letak Dasar dalam CSS

CSS menyediakan beberapa metode untuk mengatur tata letak elemen pada halaman web:

1. 1. 1. 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. citeturn0search1

1. 1. 1. b. Float

Properti `float` memungkinkan elemen untuk "mengapung" ke kiri atau kanan, sehingga elemen lain dapat mengelilinginya.

• • Contoh:**

```css img {

 float: left;
 margin-right: 10px;

} ``` 

Dalam contoh ini, gambar akan mengapung ke kiri, dan teks akan mengelilinginya di sebelah kanan. citeturn0search3

1. 1. 1. c. Flexbox

Flexbox adalah model tata letak satu dimensi yang memungkinkan pengaturan elemen dalam baris atau kolom dengan fleksibilitas tinggi.

• • Contoh:**

```css .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. citeturn0search3

1. 1. 1. d. Grid

CSS Grid adalah model tata letak dua dimensi yang memungkinkan pengaturan elemen dalam baris dan kolom.

• • Contoh:**

```css .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. citeturn0search3

1. 1. 3. Implementasi di Ubuntu 24.04

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:

1. 1. 1. a. Editor Teks

- **Visual Studio Code (VS Code):** Editor kode sumber yang populer dengan dukungan untuk berbagai bahasa pemrograman.

 **Instalasi VS Code:**

```bash

 sudo apt update
 sudo apt install wget gpg
 wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
 sudo install -o root -g root -m 644 packages.microsoft.gpg /usr/share/keyrings/
 sudo sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
 sudo apt update
 sudo apt install code
 ```



 **Menjalankan VS Code:**

```bash

 code
 ```



- **Gedit:** Editor teks bawaan GNOME yang sederhana dan mudah digunakan.

 **Instalasi Gedit:**

```bash

 sudo apt update
 sudo apt install gedit
 ```



 **Menjalankan Gedit:**

```bash

 gedit
 ```



1. 1. 1. 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:**

```bash

 sudo apt update
 sudo apt install firefox
 ```



 **Menjalankan Firefox:**

```bash

 firefox
 ```



- **Google Chrome:** Browser populer dari Google.

 **Instalasi Google Chrome:**

 1. **Unduh Paket DEB:**

    ```bash