ke bawah
Homepage sebuah situs web ditata sedemikian rupa sehingga tampilannya menjadi bagus dan menarik.
Konten-konten kelompok ditempatkan di dalam kolom-kolom untuk memudahkan dalam melihat kategori navigasi dan lain-lain.
Untuk itulah penataan tata-letak pada halaman web menjadi sangat penting.
Untuk membuat kolom-kolom tata letak konten-konten dapat digunakan elemen <div> maupun elemen <table>. Namun demikian penggunaan elemen table untuk membuat tata letak halaman, hal ini tidak dibenarkan. Elemen tabel adalah diperuntukkan membuat daftar tabular.
Kehadiran css dalam hal ini dapat digunakan untuk memposisikan elemen, mebuat latarbelakang dan membuat tampilan warna-warni pada halaman.
Layout html menggunakan elemen <div>.
Elemen div adalah tingkat elemen blok dalam hal ini digunakan untuk mengelompokkan elemen.
Di bawah ini adalah contoh menggunakan lima elemen <div> dalam menyusun tataletak elemen lainnya pada halaman.
<!DOCTYPE html >
<html>
<body>
<div id="container" style="width:300px">
<div id="header" style="background-color:#00ff88; height:60px;">
<h2 style="margin-bottom:0; text-align:center;"> judul halaman web
</ h2>
</div>
<div id="menu" style="background-color:#00DD55; height:200px; width:80px; float:left;" >
<b>Menu:</b> <br> html <br /> css <br /> javascript
</div>
<div id="content" style="background-color:#00EEDE; height:200px; width:220px; float:left;" >
<h3 style="text-align:center;" > di sini isi konten </h3>
</div>
<div id ="footer" style="background-color: #0055d5; text-align: center;">
Hak Cipta © DoMain.com
</div>
</div>
</ body>
</ html>
Dengan kode html diatas akan menampilkan halaman seperti berikut ini.
Layout html menggunakan elemen <table>.
Jalan yang singkat dalam membuat layout menggunakan elemen html <table>. Penggunaan tag <table> dalam membuat layout halaman bukanlah cara yang benar, tag <table> hanya diperuntukan membuat tabel data.
Untuk membuat layout dalam multi-kolom dapat digunakan elemen <table> atau <div>. CSS digunakan untuk mengatur posisi elemen, background dan memberi warna.
Berikut ini contoh membuat layot menggunakan tag <table> dengan 3 baris dan 2 kolom.
<! D OCTYPE html >
< html>
< body>
<table style="width:300; border:0px;">
<tr>
<td colspan="2" style="background-color:#00d5d5; text-align:center;">
<h2>judul halaman web </h2>
</td>
</tr> <tr>
<td style="background-color:#00dd55; width:80px;text-align:top;">
<b> Menu </b> html <br> css <br> javascript
</td>
<td style="background-color:#00ffee; height:200px;width:220px; text-align:center;">
di sini konten halaman
</td>
</tr> <tr>
<td colspan="2" style="background-color:#00d5d5; text-align:center;">
Copyright © DoMain.com
</td>
</tr> </table>
</ body>
</ html>
Berikut ini yang tampil di browser.
Demikianlah cara membuat layout html halaman. Semoga bermanfaat.
kembali ke atas
Homepage sebuah situs web ditata sedemikian rupa sehingga tampilannya menjadi bagus dan menarik.
Konten-konten kelompok ditempatkan di dalam kolom-kolom untuk memudahkan dalam melihat kategori navigasi dan lain-lain.
Untuk itulah penataan tata-letak pada halaman web menjadi sangat penting.
Untuk membuat kolom-kolom tata letak konten-konten dapat digunakan elemen <div> maupun elemen <table>. Namun demikian penggunaan elemen table untuk membuat tata letak halaman, hal ini tidak dibenarkan. Elemen tabel adalah diperuntukkan membuat daftar tabular.
Kehadiran css dalam hal ini dapat digunakan untuk memposisikan elemen, mebuat latarbelakang dan membuat tampilan warna-warni pada halaman.
Layout html menggunakan elemen <div>.
Elemen div adalah tingkat elemen blok dalam hal ini digunakan untuk mengelompokkan elemen.
Di bawah ini adalah contoh menggunakan lima elemen <div> dalam menyusun tataletak elemen lainnya pada halaman.
<!DOCTYPE html >
<html>
<body>
<div id="container" style="width:300px">
<div id="header" style="background-color:#00ff88; height:60px;">
<h2 style="margin-bottom:0; text-align:center;"> judul halaman web
</ h2>
</div>
<div id="menu" style="background-color:#00DD55; height:200px; width:80px; float:left;" >
<b>Menu:</b> <br> html <br /> css <br /> javascript
</div>
<div id="content" style="background-color:#00EEDE; height:200px; width:220px; float:left;" >
<h3 style="text-align:center;" > di sini isi konten </h3>
</div>
<div id ="footer" style="background-color: #0055d5; text-align: center;">
Hak Cipta © DoMain.com
</div>
</div>
</ body>
</ html>
Dengan kode html diatas akan menampilkan halaman seperti berikut ini.
judul halaman web
di sini isi konten
Jalan yang singkat dalam membuat layout menggunakan elemen html <table>. Penggunaan tag <table> dalam membuat layout halaman bukanlah cara yang benar, tag <table> hanya diperuntukan membuat tabel data.
Untuk membuat layout dalam multi-kolom dapat digunakan elemen <table> atau <div>. CSS digunakan untuk mengatur posisi elemen, background dan memberi warna.
Berikut ini contoh membuat layot menggunakan tag <table> dengan 3 baris dan 2 kolom.
<! D OCTYPE html >
< html>
< body>
<table style="width:300; border:0px;">
<tr>
<td colspan="2" style="background-color:#00d5d5; text-align:center;">
<h2>judul halaman web </h2>
</td>
</tr> <tr>
<td style="background-color:#00dd55; width:80px;text-align:top;">
<b> Menu </b> html <br> css <br> javascript
</td>
<td style="background-color:#00ffee; height:200px;width:220px; text-align:center;">
di sini konten halaman
</td>
</tr> <tr>
<td colspan="2" style="background-color:#00d5d5; text-align:center;">
Copyright © DoMain.com
</td>
</tr> </table>
</ body>
</ html>
Berikut ini yang tampil di browser.
judul halaman web |
|
Menu:
|
di sini konten halaman |
| Copyright © DoMain.com | |
Demikianlah cara membuat layout html halaman. Semoga bermanfaat.
kembali ke atas
Saya sentiasa sedikit berbagi tentang apa yang saya ketahui.
BalasHapusKarena saya masih dalam taraf belajar/newbe maka saya mohon Anda untuk melakukan koreksi dengan memberi komentar.
Terimakasih.