Situs web sering menampilkan konten dalam beberapa kolom (seperti majalah atau surat kabar).

Galeri Kota

London
Paris
Tokyo

London

London adalah ibu kota Inggris. Kota ini merupakan kota terpadat di Inggris, dengan wilayah metropolitan yang berpenduduk lebih dari 13 juta jiwa.

Berdiri di Sungai Thames, London telah menjadi pemukiman utama selama dua ribu tahun, sejarahnya kembali ke pendiriannya oleh orang Romawi, yang menamakannya Londinium.

Tata Letak HTML Menggunakan <div> Elemen
Catatan Elemen <div> sering digunakan sebagai alat tata letak, karena dapat dengan mudah diposisikan dengan CSS.

Contoh ini menggunakan empat elemen <div> untuk membuat beberapa layout kolom:
Contoh
<body>

<div id = "header">
<h1> Galeri Kota </ h1>
</div>

<div id = "nav">
London <br>
Paris <br>
Tokyo
</div>

<div id = "section">
<h1> London </h1>
<p> London adalah ibu kota Inggris. Ini adalah kota terpadat di Inggris,
Dengan luas metropolitan lebih dari 13 juta jiwa. </ P>
<p> Berdiri di Sungai Thames, London telah menjadi pemukiman utama selama dua ribu tahun,
Sejarahnya kembali ke pendiriannya oleh orang Romawi, yang menamakannya Londinium. </p>
</div>

<div id = "footer">
kodelover.blogspot.co.id © 2017
</div>

</body>
CSS:
<style>
#header {
    Background-color: black;
    color : white;
    text-align: center;
    Padding: 5px;
}
#nav {
    Garis-height: 30px;
    Background-color: #eeeeee;
    height: 300px;
    width: 100px;
    float: left;
    Padding: 5px;
}
#section {
    width: 350px;
    float: left;
    Padding: 10px;
}
#footer {
    background-color: black;
    color : white;
    clear: both;
    Text-align: center;
    Padding: 5px;
}
</style>
Layout Website Menggunakan HTML5

HTML5 menawarkan elemen semantik baru yang menentukan bagian berbeda dari halaman web:
Unsur Semantik HTML5

    <header> - Mendefinisikan 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>

Contoh ini menggunakan <header>, <nav>, <section>, dan <footer> untuk membuat beberapa layout kolom:
Contoh
<body>

<header>
<h1> Galeri Kota </ h1>
</ Header>

<Nav>
London <br>
Paris <br>
Tokyo
</ Nav>

<section>
<h1> London </ h1>
<p> London adalah ibu kota Inggris. Ini adalah kota terpadat di Inggris,
Dengan luas metropolitan lebih dari 13 juta jiwa. </ P>
<p> Berdiri di Sungai Thames, London telah menjadi pemukiman utama selama dua ribu tahun,
Sejarahnya kembali ke pendiriannya oleh orang Romawi, yang menamakannya Londinium. </ P>
</section>

<footer>
kodelover.blogspot.co.id © 2017
</ Footer>

</body>
CSS:
<style>
header {
    Background-color: black;
    color : white;
    Text-align: center;
    Padding: 5px;
}
nav {
    line-height: 30px;
    Background-color: #eeeeee;
    height: 300px;
    width: 100px;
    Float: left;
    Padding: 5px;
}
Bagian {
    width: 350px;
    Float: left;
    Padding: 10px;
}
Footer {
    Background-color: black;
    color : white;
    clear: both;
    Text-align: center;
    Padding: 5px;
}
</style>

Tata Letak HTML Menggunakan Tabel
Catatan Elemen <table> tidak dirancang untuk menjadi alat tata letak.
Tujuan dari elemen <table> adalah untuk menampilkan data tabular.

Tata letak dapat dicapai dengan menggunakan elemen <table>, karena elemen tabel dapat ditata dengan CSS:
Contoh
<body>

<table class = "lamp">
<tr>
<th>
    <img src = "/images/lamp.jpg" alt = "Catatan" style = "height: 32px; width: 32px">
</th>
<td>
    Elemen tabel tidak dirancang untuk menjadi alat tata letak.
</td>
</tr>
</table>

</body>
CSS:
<style>
table.lamp {
    width: 100%;
    Border: 1px solid # d4d4d4;
}
table.lamp th, td {
    Padding: 10px;
}
table.lamp th {
    width: 40px;
}
</style>

KODELOVER

Membuat Tata Letak / Layout HTML

Galeri Kota

London

Related Post