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

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

Tinggalkan Balasan

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