Rabu, 14 Januari 2015

Cara Membuat Layout (Tata Letak) Halaman Website dengan HTML

Cara Membuat Layout (Tata Letak) Halaman Website dengan HTML

Layout pada halaman web sangat penting untuk membuat website supaya terlihat lebih bagus. Dalam merancang Layout untuk halaman web, 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>.
CSS juga sering 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;">
        Masukan Artikel nya Disini</td>
        </tr>
        <tr>
        <td colspan = "2" style = "background-color:#33cccc; text-align:center;">created by @ mm-stm webdesign</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
Masukan Artikel nya Disini
created by @ mm-stm webdesign



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;">Masukan Artikel nya Disini</div>
    <div id = "footer" style = "background-color:33cccc; clear:both; text-align:center;">created by @ mm-stm webdesign
    </div>
    </body>
    </html>

 Maka tampilan untuk contoh diatas adalah seperti tampilan dibawah ini :
Masukan Artikel nya Disini



Sampai disini dulu postingan saya untuk kali ini

Sumber: http://beyblogdesign.blogspot.com/2013/04/cara-membuat-layout-tata-letak-website.html

Tidak ada komentar:

Posting Komentar