HTML Layout Elements
Situs web sering menampilkan konten dalam beberapa kolom (seperti majalah atau surat kabar).
HTML5 menawarkan elemen semantik baru yang menentukan bagian-bagian berbeda dari sebuah halaman web:- <header> - Mendefinisikan sebuah header untuk dokumen atau bagian
- <nav> - Mendefinisikan sebuah wadah untuk link navigasi
- <section> - Mendefinisikan sebuah bagian dalam sebuah dokumen
- <article> - Mendefinisikan sebuah artikel mandiri mandiri
- <aside> - Mendefinisikan konten selain konten (seperti bilah sisi)
- <footer> - Mendefinisikan footer untuk dokumen atau bagian
- <details> - Mendefinisikan rincian tambahan
- <summary> - Mendefinisikan sebuah heading untuk elemen <details>
Teknik Layout HTML
Ada empat cara berbeda untuk membuat layout multicolumn. Setiap cara memiliki pro dan kontra:
- HTML tables
- CSS float property
- CSS framework
- CSS flexbox
Yang mana yang harus dipilih?
HTML Tables
Elemen <table> tidak dirancang untuk menjadi alat Layout! Tujuan dari elemen <table> adalah untuk menampilkan data tabular. Jadi, jangan gunakan tabel untuk Layout halaman Anda! Mereka akan membawa kekacauan ke kode Anda. Dan bayangkan betapa sulitnya mendesain ulang situs Anda setelah beberapa bulan.
Tip: JANGAN gunakan tabel untuk Layout halaman Anda!
CSS framework
Jika ingin membuat layout dengan cepat, Anda bisa menggunakan framework, seperti W3.CSS atau Bootstrap.
CSS Floats
Adalah hal yang umum untuk melakukan keseluruhan layout web menggunakan properti CSS Floats. CSS Floats mudah dipelajari - Anda hanya perlu mengingat bagaimana sifat float dan cara kerjanya. Kekurangan: Elemen CSS Floats terkait dengan arus dokumen, yang dapat membahayakan fleksibilitas. Pelajari lebih lanjut tentang float di bab Float dan Clear CSS kami.
Contoh Code:
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<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 is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
<footer>Copyright © nusantaracoding.blogspot.co.id</footer>
</div>
</body>
</html>
Hasil Code:
CSS Flexbox
Flexbox adalah mode Layout baru di CSS3.
Penggunaan flexbox memastikan bahwa elemen berperilaku dapat diprediksi saat Layout halaman harus mengakomodasi berbagai ukuran layar dan perangkat display yang berbeda. Kekurangan: Tidak bekerja di IE10 dan sebelumnya.
Pelajari lebih lanjut tentang flexbox di bab Flexbox CSS kami.
Contoh Code:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
}
header {background: black;color:white;}
footer {background: #aaa;color:white;}
.nav {background:#eee;}
.nav ul {
list-style-type: none;
padding: 0;
}
.nav ul a {
text-decoration: none;
}
@media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>
<div class="flex-container">
<header>
<h1>City Gallery</h1>
</header>
<nav class="nav">
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article class="article">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
<p><strong>Resize this page to see what happens!</strong></p>
</article>
<footer>Copyright © W3Schools.com</footer>
</div>
</body>
</html>
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2