tutorial pengembangan web terbaru

Layout HTML


Website sering menampilkan konten dalam beberapa kolom (like a magazine or newspaper) .


City Gallery

London
Paris
Tokyo

London

London adalah ibu kota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.

Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.

Copyright © w3ii.com

HTML Tata Letak Menggunakan <div> Elemen

The <div> elemen sering digunakan sebagai alat tata letak, karena dapat dengan mudah diposisikan dengan CSS.

Contoh ini menggunakan empat <div> elemen untuk membuat tata letak kolom beberapa:

Contoh

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

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

<div id="section">
<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>
</div>

<div id="footer">
Copyright © w3ii.com
</div>

</body>
Cobalah sendiri "

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;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>

Situs Tata Letak Menggunakan HTML5

HTML5 menawarkan unsur-unsur semantik baru yang mendefinisikan berbagai bagian dari suatu halaman web:

HTML5 Semantic Elements
  • <header> - Mendefinisikan header untuk dokumen atau bagian suatu
  • <nav> - Mendefinisikan sebuah wadah untuk link navigasi
  • <section> - Mendefinisikan sebuah bagian dalam sebuah dokumen
  • <article> - Mendefinisikan sebuah artikel mandiri independen
  • <aside> - Mendefinisikan konten selain dari konten (like a sidebar)
  • <footer> - Mendefinisikan footer untuk dokumen atau bagian suatu
  • <details> - Mendefinisikan rincian tambahan
  • <summary> - Mendefinisikan heading untuk <details> elemen

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

Contoh

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo
</nav>

<section>
<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>
</section>

<footer>
Copyright © w3ii.com
</footer>

</body>
Cobalah sendiri "

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;
}
section {
    width:350px;
    float:left;
    padding:10px;
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>

HTML Tata Letak Menggunakan Tabel

The <table> elemen tidak dirancang untuk menjadi alat tata letak.
Tujuan dari <table> elemen untuk menampilkan data tabular.

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

Contoh

<body>

<table class="lamp">
<tr>
  <th>
    <img src="../images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>

</body>
Cobalah sendiri "

CSS:

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

Peringatan: Menciptakan tata letak dengan meja-meja tidak salah, tetapi tidak dianjurkan! Hindari tabel untuk menciptakan tata letak.