Situs web sering kali menampilkan konten dalam bentuk beberapa kolom (seperti majalah atau koran).
Contoh :
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; } nav { float: left; width: 30%; height: 300px; background: #ccc; padding: 20px; } nav ul { list-style-type: none; padding: 0; } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; section:after { content: ""; display: table; clear: both; } footer { background-color: #777; padding: 10px; text-align: center; color: white; } @media (max-width: 600px) { nav, article { width: 100%; height: auto; } } </style> </head> <body> <h2>CSS Layout Float</h2> <p>Dalam contoh ini, kami telah membuat header, dua kolom / kotak, dan footer. Pada layar yang lebih kecil, kolom akan bertumpuk satu sama lain.</p> <p>Ubah ukuran jendela browser untuk melihat efek responsif (Anda akan mempelajari lebih lanjut tentang ini di bab berikutnya - Responsive HTML.</p> <header> <h2>Kota</h2> </header> <section> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h1>London</h1> <p>London adalah ibu kota Inggris. Kota ini adalah kota terpadat di Inggris Raya, dengan wilayah metropolitan lebih dari 13 juta penduduk.</p> <p>Berdiri di Sungai Thames, London telah menjadi pemukiman besar selama dua milenium, sejarahnya nama London sendiri sesuai dengan pendirinya orang Romawi, yang menamakannya Londinium</p> </article> </section> <footer> <p>Footer</p> </footer> </body> </html>
Contoh diatas adalah contoh penggunaan elemen dan teknik layout pada HTML.
Section Artikel
Elemen Layout HTML
HTML memiliki beberapa elemen semantik yang menentukan berbagai macam bagian halaman web:.
- <header> Mendefinisikan header untuk dokumen atau bagian
- <nav> Mendefinisikan satu set link navigasi
- <secton> Mendefinisikan bagian dalam dokumen
- <article> Mendefinisikan konten yang dapat berdiri sendiri
- <aside> Mendefinisikan kontenlain dalam konten (seperti sidebar)
- <footer> Mendefinisikan footer untuk dokumen atau bagian
- <details> Mendefinisikan detail tambahan yang dapat dibuka dan ditutup oleh pengguna sesuai permintaan
- <summary> Mendefinisikan sebuah heading untuk elemen <details>
Teknik Layout HTML
Ada empat teknik berbeda untuk membuat layout multikolom pada HTML. Setiap teknik memiliki kelebihan dan kekurangan:
- CSS framework
- CSS float property
- CSS flexbox
- CSS grid
CSS Frameworks
Jika ingin membuat layout dengan waktu yang lebih cepat, penggunaan CSS framewrok adalah keputusan tepat. Contoh CSS frameworks adalah Bootstap.
Layout dengan CSS Float
Mengatur seluruh layout pada web dengan menggunakan CSS float adalah hal yang sangat umum. Float mudah dipelajari – Anda hanya perlu mengingat cara kerja properti float dan clear. Hanya saja float memiliki kekurangan yaitu float terikat pada flow dokumen, yang dapat merusak fleksibilitas. Pelajari lebih lanjut tentang float di bab Float CSS Layout pada website ini.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
section {
display: -webkit-flex;
display: flex;
}
nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: #f1f1f1;
padding: 10px;
}
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
@media (max-width: 600px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>Dalam contoh ini, kami telah membuat header, dua kolom / kotak, dan footer. Pada layar yang lebih kecil, kolom akan bertumpuk satu sama lain.</p>
<p>Ubah ukuran jendela browser untuk melihat efek responsif (Anda akan mempelajari lebih lanjut tentang ini di bab berikutnya - Responsif HTML.</p>
<header>
<h2>Kota</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London adalah ibu kota Inggris. Kota ini adalah kota terpadat di Inggris Raya, dengan wilayah metropolitan lebih dari 13 juta penduduk.</p>
<p>Berdiri di Sungai Thames, London telah menjadi pemukiman besar selama dua milenium, sejarahnya nama London sendiri sesuai dengan pendirinya orang Romawi, yang menamakannya Londinium</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
CSS Flexbox Layout
Penggunaan flexbox memastikan bahwa elemen akan menyesuaikan dengan apa yang diprediksi ketika layout pada halaman web harus mengakomodasi ukuran layar yang berbeda dan perangkat tampilan yang berbeda.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Layout Flexbox</h2>
<p>Dalam contoh ini, kami telah membuat header, dua kolom / kotak, dan footer. Pada layar yang lebih kecil, kolom akan bertumpuk satu sama lain.</p>
<p>Ubah ukuran jendela browser untuk melihat efek responsif..</p>
<p><strong>Catatan:</strong> Flexbox tidak didukung di Internet Explorer 10 dan versi sebelumnya.</p>>
<header>
<h2>Kota</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London adalah ibu kota Inggris. Kota ini adalah kota terpadat di Inggris Raya, dengan wilayah metropolitan lebih dari 13 juta penduduk.</p>
<p>Berdiri di Sungai Thames, London telah menjadi pemukiman besar selama dua milenium, sejarahnya nama London sendiri sesuai dengan pendirinya orang Romawi, yang menamakannya Londinium</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
CSS Grid Layout
Modul CSS grid layout menawarkan sistem layout berbasis grid dengan baris dan kolom, sehingga memudahkan untuk mendesain halaman web tanpa harus menggunakan float dan pemosisian.
Penggunaan CSS Grid layout akan dibahas lebih lanjut pada bab selanjutnya.
Sekian semoga bermanfaat.
