Penulangan Kolom dan Link Download File Referensi
https://eu2.contabostorage.com/00f3241116844f24b628f46d81abb929:st1/folder7/7227/1656266581_hitung_kolom_dan_pondasixls_-_Sipil_dan_Konstruksi.xls
2026-05-30 21:12:04 - Admin
<style> body{ font-family: Arial, sans-serif; line-height: 1.6; margin:0; padding:0; background:#f9f9f9; color:#333; } header{ background:#4CAF50; color:#fff; padding:20px; text-align:center; } nav{ background:#e8f5e9; padding:10px 20px; } nav a{ margin-right:15px; color:#2e7d32; text-decoration:none; } .container{ max-width:900px; margin:20px auto; padding:0 15px; } h2{ color:#2e7d32; margin-top:30px; } h3{ color:#388e3c; margin-top:20px; } ul{ margin-left:20px; } code{ background:#e0e0e0; padding:2px 4px; border-radius:3px; } @media (max-width:600px){ header, nav, .container{ padding:10px; } } </style><header> <h1>Penulangan Kolom</h1> <p>Memahami teknik dan manfaat menulangi kolom dalam desain web dan cetak</p></header><nav> <a href="#definisi">Definisi</a> <a href="#manfaat">Manfaat</a> <a href="#jenis">Jenis Penulangan</a> <a href="#teknik">Teknik Praktis</a> <a href="#contoh">Contoh Implementasi</a></nav><div class="container"> <section id="definisi"> <h2>Definisi Penulangan Kolom</h2> <p>Penulangan kolom (column wrapping) adalah teknik menata konten agar secara otomatis memindahkan elemenelemen yang berada dalam satu baris ke baris berikutnya ketika ruang horizontal tidak cukup. Pada halaman web, teknologi CSS seperti <code>flexbox</code> atau <code>grid</code> memudahkan penulangan kolom. Pada layout cetak, penulangan kolom membantu menyesuaikan teks atau gambar pada lebar halaman yang terbatas.</p> </section> <section id="manfaat"> <h2>Manfaat Penulangan Kolom</h2> <ul> <li><strong>Responsif</strong> Membuat tampilan tetap rapi pada berbagai ukuran layar.</li> <li><strong>Penggunaan ruang yang efisien</strong> Memanfaatkan lebar yang tersedia tanpa menimbulkan overflow.</li> <li><strong>Keterbacaan</strong> Menjaga alur bacaan tetap konsisten ketika kolom berubah posisi.</li> <li><strong>Estetika</strong> Memberikan kesan profesional pada desain grid maupun majalah.</li> </ul> </section> <section id="jenis"> <h2>Jenis Penulangan Kolom</h2> <h3>1. Penulangan Horizontal (Row Wrap)</h3> <p>Elemenelemen disusun dalam satu baris dan akan membungkus ke baris baru ketika tidak ada cukup ruang. Contoh umum pada <code>flex-wrap: wrap;</code>.</p> <h3>2. Penulangan Vertikal (Column Wrap)</h3> <p>Digunakan terutama pada layout majalah atau dokumen PDF, dimana kolom teks beralih ke kolom berikutnya secara vertikal.</p> <h3>3. Penulangan Dinamis (Responsive Wrap)</h3> <p>Berbasis media query, penulangan berubah tergantung pada lebar viewport, misalnya tiga kolom pada desktop menjadi satu kolom pada smartphone.</p> </section> <section id="teknik"> <h2>Teknik Praktis Membuat Penulangan Kolom</h2> <h3>a. Menggunakan Flexbox</h3> <pre><code>.container{ display:flex; flex-wrap:wrap; /* aktifkan penulangan */ gap:15px; /* jarak antar elemen */}.item{ flex:1 1 200px; /* lebar minimum 200px */}</code></pre> <h3>b. Menggunakan CSS Grid</h3> <pre><code>.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:20px;}</code></pre> <h3>c. Penulangan pada Layout Cetak (CSS untuk Media Print)</h3> <pre><code>@media print{ .column{ column-count:2; /* dua kolom pada halaman cetak */ column-gap:30px; }}</code></pre> <h3>d. Penulangan dengan JavaScript (opsional)</h3> <p>Jika diperlukan kontrol dinamis lebih lanjut, gunakan JavaScript untuk menambahkan atau menghapus kelas <code>wrap</code> berdasarkan ukuran layar.</p> </section> <section id="contoh"> <h2>Contoh Implementasi Penulangan Kolom</h2> <p>Berikut contoh sederhana yang dapat Anda coba pada file <code>index.html</code>:</p> <pre><code><!DOCTYPE html><html lang="id"><head> <meta charset="UTF-8"> <style> .wrapper{ display:flex; flex-wrap:wrap; gap:10px; } .box{ flex:1 1 150px; background:#c8e6c9; padding:20px; text-align:center; } </style></head><body> <div class="wrapper"> <div class="box">Item 1</div> <div class="box">Item 2</div> <div class="box">Item 3</div> <div class="box">Item 4</div> <div class="box">Item 5</div> </div></body></html></code></pre> <p>Jika jendela browser diperkecil, kotakkotak tersebut akan otomatis berpindah ke baris berikutnya, menjaga tampilan tetap rapi.</p> </section></div>