Admin: ←Membuat halaman berisi '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. * '''M...'

2025-05-10T13:42:32Z

←Membuat halaman berisi '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. * '''M...'

Halaman baru

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.

==Pranala Menarik==

* [[Web Programming]]

Box model dan tata letak dasar - Riwayat revisi