Unknown user at 23:22, 6 April 2025

2025-04-06T23:22:04Z

← Older revision		Revision as of 23:22, 6 April 2025
Line 36:		Line 36:
	===a. Normal Flow===		===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.		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===		===b. Float===

Unknown user at 08:18, 5 April 2025

2025-04-05T08:18:15Z

← Older revision		Revision as of 08:18, 5 April 2025
Line 1:		Line 1:
	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.~~		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==		==1. Memahami Box Model dalam CSS==

Unknown user at 08:17, 5 April 2025

2025-04-05T08:17:54Z

Show changes

Unknown user: Created page with "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..."

2025-04-05T06:07:28Z

Created page with "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..."

New page

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

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

### 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

### 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

### 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

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

### 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
```


### 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

Box model dan tata letak dasar - Revision history

Unknown user at 23:22, 6 April 2025

Unknown user at 08:18, 5 April 2025

Unknown user at 08:17, 5 April 2025

Unknown user: Created page with "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..."

Unknown user: Created page with "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..."