Belajar HTML (22): Membuat Layout Halaman

Salaam untuk kita semua… Mari kita bahas lanjutan tutorial tentang HTML. Kali ini kita akan belajar membuat layout halaman web. Layout web kalau dialihbahasakan adalah tata letak web, yaitu kerangka tampilan dari suatu halaman web yang diatur sedemikian rupa untuk tujuan tertentu, utamanya agar memudahkan pengunjung mengakses isi dari halaman-halaman web tersebut.

Cara membuat layout ini bermacam-macam. Bahkan saat ini sudah sangat bervariasi dan sangat indah, dibantu dengan beberapa tool atau skrip yang bisa didownload gratis. Tetapi pada tutorial kita ini akan dibahas pola dasarnya dalam bahasa HTML.

Tentunya kita sudah sangat sering melihat halaman web kan? Saat ini pun Anda sedang melihat sebuah layout halaman web πŸ˜€ . Iya, situs BangHaji DotCom mempunyai layout yang tertata rapi dan terlihat berbeda ketika diakses melalui PC/Laptop dan via HP. Coba lihat perbedaannya ya 😎

Bagaimana cara membuat layout? Sebelum membuat layout kita perlu tentukan dulu desain atau rancangannya. Harus jelas tata letak dan posisi serta kegunaan dari masing-masing tata letak itu. Misal, saat Anda mengakses BangHaji DotCom melalui PC/Laptop, akan terlihat apa di bagian atas, terus ke bagian kiri dan kanan, bagian bawah ada apa dan fungsi untuk apa… Begitu seterusnya, sudah mulai paham kan ya? πŸ˜‰

Ini layout jika diakses pakai PC/Laptop.

BangHaji DotCom Layout

Ayo kita pelajari cara membuat layout.

Menggunakan Tabel

Anda perlu baca kembali tulisan saya tentang cara membuat tabel ya.

Oke, konsep layout pertama adalah 2 bagian saja yaitu bagian sidebar untuk menu dan bagian kanan untuk konten. Mari kita coba kodenya dan lihat tampilannya. Silakan diketik, simpan dengan nama file 55-html-layout-tabel-kiri-kanan.html:

<!DOCTYPE html>
<html>
<head>
   <title>Layout Tabel Kiri-Kanan</title>
</head>
<body>
   <table width="100%">
      <tr>
         <td width="30%" bgcolor="#DEDEDE" valign="top">
            <p align="center"><b>MENU UTAMA</b></p>
            <ul>
               <li>Menu Satu</li>
               <li>Menu Dua</li>
               <li>Memu Tiga</li>
            </ul>
         </td>
         <td bgcolor="#2288EE">
            ini bagian konten
            <br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br>
         </td>
      </tr>
   </table>
</body>
</html>

Tampilannya setelah dijalankan seperti gambar berikut ini.Β Lanjut di halaman sebelah… Oke πŸ˜‰

Selanjutnya →

Halaman : 1 2 3 4

7 Responses

  1. Kamelia berkata:

    Mantap sekali artikel ini sangat lengkap sekali dan sngat mudah dipahami dan dpelajari dan sngat mudah menerapkannya
    Perkenalkan nama saya kamelia kunjungi website kampus saya

  2. MEIREZA SITI ASSYIFA berkata:

    ihh suka banget sama artikelnya, .. saya ga nyesel deh buka artikel ini, karena saya jadi bisa membuat layout halaman web dengan html, terimakasih ya sudah membuat artikel ini dan nge share ilmu ini ke kita. sangat bermanfaat bagi saya dan temen temen juga pastinya.. semangat ya, semoga kedepannya dapat menulis artikel lainnya lagi. perkenalkan nama saya MEIREZA SITI ASSYIFA

  3. Tindius berkata:

    Terimah kasih atas artikelnya di atas sedikit saran tolong materi diperbanyak agar lebih mudah dimengerti kedepannya

  4. Claudio berkata:

    Terimah kasih atas artikelnya di atas sedikit saran tolong materi diperbanyak agar lebih mudah dimengerti kedepannya perkenalakan nama saya claudio khelvin

  5. Andika Aprianus berkata:

    Terima kasih artikelnya gan. Artikel yang admin kasih sungguh bermanfaat untuk saya yang belajar mengenai dunia website. Yang saya suka dari artikelnya ini, di jelaskan secara step by step jadi tidak susah untuk mengikutinya dan design website agan keren sekali. Saya harap kedepanya admin disini masih terus berkarya dengan artikel artikel mengenai html lainya.

    Perkenalkan nama saya Andika Aprianus

  6. Hadiyatan nazilah berkata:

    Artikel yang bagus kak , dengan artikel ini saya menjadi lebih mudah mempelajari dalam html , semoga semakin sukses ya kak , perkenalkan saya Hadiyatan Nazilah , jangan lupa mampir ke website kampus saya ya kak

  7. Pauziah berkata:

    Wah artikelnya sangat membantu dalam belajar memahami desain layout halaman web dengan tabel, CSS, dan javascript nya, semoga senantiasa berbagi ilmu-ilmunya,sukses selalu. terimakasih untuk artikelnya kak. Nama Pauziah.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *