HTML Layouts
Tata letak halaman web sangat penting untuk membuat website Anda terlihat baik.
Desain tata letak halaman web Anda sangat hati-hati.
Cobalah Sendiri - Contoh
Tata letak halaman web menggunakan <div> elemen
Bagaimana menambahkan tata letak menggunakan <div> elemen.
Tata letak halaman web menggunakan table elemen
Bagaimana menambahkan tata letak menggunakan table elemen.
Bagaimana menambahkan tata letak menggunakan <div> elemen.
Bagaimana menambahkan tata letak menggunakan table elemen.
Website Layouts
Kebanyakan website telah menempatkan konten mereka dalam beberapa kolom (diformat seperti majalah atau koran).
Beberapa kolom dibuat dengan menggunakan <div> atau elemen table. CSS digunakan untuk posisi elemen, atau untuk membuat latar belakang atau tampilan berwarna-warni untuk halaman.
 | Meskipun dimungkinkan untuk membuat layout bagus dengan tabel HTML, tabel dirancang untuk menyajikan data tabular - BUKAN sebagai alat tata letak! |
|---|
HTML Layouts - Menggunakan Elemen <div>
Elemen div adalah elemen tingkat blok digunakan untuk mengelompokkan elemen HTML.
Contoh berikut ini menggunakan lima elemen div untuk membuat tata letak kolom ganda, menciptakan hasil yang sama seperti pada contoh sebelumnya:
Contoh
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright � W3Schools.com</div>
</div>
</body>
</html>
Coba sendiri »
Kode HTML di atas akan menghasilkan hasil sebagai berikut:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright � W3Schools.com</div>
</div>
</body>
</html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright � W3Schools.com</div>
</div>
</body>
</html>
Coba sendiri »
Judul utama dari Web Page
Menu
HTML
CSS
JavaScript
Konten goes here
Copyright W3Schools.com
Menu
HTML
CSS
JavaScript
HTML
CSS
JavaScript
Konten goes here
Copyright W3Schools.com
HTML Layouts - Menggunakan Tabel
Sebuah cara sederhana untuk menciptakan layout adalah dengan menggunakan tag HTML <table>.
Beberapa kolom dibuat dengan menggunakan <div> atau elemen table. CSS digunakan untuk posisi elemen, atau untuk membuat latar belakang atau tampilan berwarna-warni untuk halaman.
| Menggunakan table untuk membuat tata letak yang baik TIDAK penggunaan yang benar dari elemen. Tujuan dari elemen <table> adalah untuk menampilkan data tabular! |
|---|
Contoh berikut menggunakan tabel dengan 3 baris dan 2 kolom - pertama dan terakhir berturut-turut meliputi kedua kolom menggunakan atribut colspan:
Contoh
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright � W3Schools.com</td>
</tr>
</table>
</body>
</html>
Coba sendiri »
Kode HTML di atas akan menghasilkan hasil sebagai berikut:
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright � W3Schools.com</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright � W3Schools.com</td>
</tr>
</table>
</body>
</html>
Coba sendiri »
Judul utama dari Web Page
| Menu HTML CSS JavaScript | Konten goes here |
| Copyright W3Schools.com | |
HTML Tata Letak - Tips Berguna
Tip: Keuntungan terbesar menggunakan CSS adalah bahwa, jika Anda menempatkan kode CSS dalam sebuah style sheet eksternal, situs Anda menjadi JAUH LEBIH MUDAH untuk mempertahankan. Anda dapat mengubah tata letak dari semua halaman Anda dengan mengedit satu file. Untuk mempelajari lebih lanjut tentang CSS, belajar kami CSS tutorial .
Tip: Karena layout canggih meluangkan waktu untuk membuat, pilihan yang lebih cepat adalah dengan menggunakan template. Pencarian Google untuk website template gratis (ini adalah pre-built layout website yang Anda dapat menggunakan dan menyesuaikan).
HTML Tata Letak Tags
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
