VISITOR

21 April 2013

Cara membuat Layout (Tata Letak) Website dengan HTML

Layout pada halaman web sangat penting untuk membuat website sobat terlihat lebih bagus. Dalam merancang Layout untuk halaman web, sobat harus ekstra hati-hati. Pada umumnya website berisikan berbagai kolom  (seperti format pada majalah atau koran), untuk membuat berbagai kolom dibutuhkan tag <table> atau tag <div>. Pada umumnya CSS juga ditambahkan untuk merubah posisi elemen atau membuat background, bisa juga untuk mempercantik tampilan halaman web. Dibawah ini adalah contoh dari pembuatan Layout menggunakan tag <table> dan tag <div>.

Contoh pembuatan Layout dengan menggunakan tag <table>
cara sederhana untuk membuat Layout dengan menggunakan tag <table> pada HTML adalah sebagai berikut :
<html>
<body>
<table width = "500" border = "0">
<tr>
<td colspan = "2" style = "background-color:#00ffff;">
<h1>Judul Pada Halaman Web</h1>
</td>
</tr>
<tr>
<tr valign = "top"><td style = "background-color:#680000; width:100px; text-align:top;">
<b>Daftar Isi</b><br/>
HTML<br/>
XHTML<br/>
CSS<br/>
Java Script</td>
<td style = "background-color:#b0b0b0; height:200px; width:400px; text-align:top;">
Isi Artikel Sobat Disini</td>
</tr>
<tr>
<td colspan = "2" style = "background-color:#33cccc; text-align:center;">created by @ beyblogdesign</td>
</tr>
</body>
</html>

Maka tampilan untuk contoh diatas adalah seperti tampilan dibawah ini :


Judul Pada Halaman Web

Daftar Isi
HTML
XHTML
CSS
Java Script
Isi Artikel Sobat Disini
created by @ beyblogdesign

Contoh pembuatan Layout dengan menggunakan elemen <div>
elemen div adalah elemenblock level yang digunakan untuk mengelompokan elemen-elemen HTML. Perhatikan contoh penggunaan elemen <div> dibawah ini:
<html>
<body>
<div id = "container" style = "width:500px">
<div id = "header" style = "background-color:#00ffff;">
<h1 style = "margin-bottom:0;">Judul Pada Halaman Web</h1>
</div>
<div id = "menu" style = "background-color:#680000; height:200px; width:100px; float:left;">
<b>Daftar Isi</b><br/>
HTML<br/>
XHTML<br/>
CSS<br/>
Java Script</div>
<div id = "content" style = "background-color:#B0B0B0; height:200px; width:400px; float:left;">Isi Artikel Sobat Disini</div>
<div id = "footer" style = "background-color:33cccc; clear:both; text-align:center;">created by @ beyblogdesign</>div
</div>
</body>
</html>
 Maka tampilan untuk contoh diatas adalah seperti tampilan dibawah ini :

Isi Artikel Sobat Disini

Sampai disini dulu postingan saya untuk kali ini!!!!enjoyyyyyy

27 komentar:

  1. keren boss, update terus ya boss. Salam.

    BalasHapus
  2. keren bos, thanks yo

    BalasHapus
  3. keren bos, ane baru paham untuk membuat layout web pake html ini :D

    BalasHapus
  4. Anonim4:56 PM

    udah w coba gan, w ambil bagan footer" style nya. berhasil.

    ni contohnya di web w.. anyone-here.com

    BalasHapus
  5. Anonim3:43 PM

    keren boss ,, berguna sangattd neh :)

    BalasHapus
  6. Anonim2:06 PM

    contek

    BalasHapus
  7. Anonim2:07 PM

    nyontek

    BalasHapus
  8. Kreatif min, aku coba ke tkp dulu iah. Makasih dah share. Ditunggu kunbalnya :)

    BalasHapus
  9. Hahaha pusing ternyata ngutak-ngati kaya ginian min >.<

    BalasHapus
  10. Thanks bgt min... sangat membantuu bangett o:)

    BalasHapus
  11. Makasih sob untuk informasinya :)

    BalasHapus
  12. Terima kasih infonya gan..

    Bagi agan yang berminat belajar membuat web bisa dilihat di situs berikut ini Belajar Membuat Web

    BalasHapus
  13. Sangat bermanfaat gan,visit Blog Bayu Widiyanto

    BalasHapus
  14. Mamtap gan, kalo yang buat iklan kanan kiri ada gimna mas tambahin apa?
    doa meminta rezeki

    BalasHapus
  15. Open PO OUT OF LAYER CLOTHING,kaos cotton Combad 24S,rubber ink,design doodle art authentic,tersedia variasi warna dan ukuran.Only 85K-Until 8 Apr 2016
    Minat langsung PM ! atau
    CP :087757826136 (WA)
    Pin BB:52e3f5b2
    Email :habibiadam68@gmail.com

    BalasHapus
  16. Bagus ulasannya, bermanfaat bagi yg masih belajar seperti saya.......

    BalasHapus
  17. mantap gan infonya,tapi kl mau menambahkan listnya gimana ya

    BalasHapus

  18. mau belajar buat layout tabel html kayak pnya contoh kaka kebetulan masih pemula ijin copas materinya ya ka. terimakasih.



    Kunjungi website saya ya https://lusianaselviani.mahasiswa.atmaluhur.ac.id
    Dan website kampus saya http://www.atmaluhur.ac.id

    BalasHapus
  19. akhirnya tag untuk tulisan design by....dapat jga,,,,makasih kak ya ilmunya,,,,

    kunjungi website saya : https://nurrizkiana.mahasiswa.atmaluhur.ac.id/
    kunjungi juga website kampus saya : http://www.atmaluhur.ac.id/

    BalasHapus

Beri komentar Sobat untuk memperbaiki kekurangan dan kesalahan pada Blog ini dengan bahasa dan etika yang benar!!!! terima kasih