Pengenalan HTML 8
Membuat Dua Kolom
oleh: Suryo Adhy Chandra, ST
Dalam melakukan pembagian bidang dalam sebuah halaman website kita akan mempergunakan tag
<div></div>
Kita akan membuat contoh kasus untuk pembagian bidang tersebut.
1. Kita akan membuat sebuah halaman dibagi 2 seperti pada gambar di bawah ini:
Gambar Microsoft Word untuk 2 kolom
- Kita buat terlebih dahulu untuk base html boiler plate kita:
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Membuat Dua Kolom</title> </head> <body> </body> </html> -
Kemudian di dalam tag body kita tambahkan tag:
<body> <div class="row"> </div> </body>arti dari tag itu adalah: kita membuat sebuah div baru dengan styling class bootstrap 5 berupa row, dan akan otomatis membuat kerangka untuk baris dan kolom. -
Setelah itu kita tambahkan blok kolom dengan menuliskan 2 blok berupa col-6
<body> <div class="row"> <div class="col-6"> </div> <div class="col-6"> </div> </div> </body>hah kok ada kolom 6 dan 6 berjejer? apa pula itu? Di dalam melakukan styling menggunakan bootstrap 5, layar dari kiri ke kanan dibagi menjadi 12 bagian atau 12 kolom, yaitu kolom: col-1, col-2 ... sampai ... col-12. Karena dalam 1 row tadi dibuat col-6 dan col-6, maka akan dibuat 2 kolom yang lebarnya sama. Kita bisa melakukan penggeseran col-4 dan col-8 misalnya, akan tetapi agar hasil pembagian kolom tersebut menjadi 1 baris Totalnya harus 12! -
Kemudian seperti biasa kita buat lorem ipsum
<body> <div class="row"> <div class="col-6"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam provident pariatur accusantium adipisci alias aperiam neque sapiente nemo nesciunt, itaque laboriosam quibusdam doloribus possimus suscipit numquam, necessitatibus cum accusamus explicabo. </div> <div class="col-6"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima perspiciatis accusamus aperiam, natus aspernatur eveniet eos, atque delectus et perferendis iure ab necessitatibus dolore doloremque sint numquam odit quis nisi? </div> </div> </body>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuat Dua Kolom</title>
</head>
<body>
<div class="row">
<div class="col-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam provident pariatur accusantium adipisci alias aperiam neque sapiente nemo nesciunt, itaque laboriosam quibusdam doloribus possimus suscipit numquam, necessitatibus cum accusamus explicabo.
</div>
<div class="col-6">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima perspiciatis accusamus aperiam, natus aspernatur eveniet eos, atque delectus et perferendis iure ab necessitatibus dolore doloremque sint numquam odit quis nisi?
</div>
</div>
</body>
</html>
Untuk hasil yang ditampilkan di dalam web browser adalah sebagai berikut:
Gambar Hasil Pembuatan Dua Kolom di Web Browser