Belajar web dan mobile programming, belajar dengan menyenangkan, disertai contoh-contoh yang mudah diikuti, dilengkapi dengan penjelasan.
BACA artikelnya - COBA latihannya - maka anda BISA

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 😉

Pages: 1 2 3 4

Muhammad Erfan

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

You may also like...

4 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 https://www.atmaluhur.ac.id

  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, situs web kampus saya https://www.atmaluhur.ac.id/

  3. Tindius berkata:

    Terimah kasih atas artikelnya di atas sedikit saran tolong materi diperbanyak agar lebih mudah dimengerti kedepannya https://www.atmaluhur.ac.id

  4. Claudio berkata:

    Terimah kasih atas artikelnya di atas sedikit saran tolong materi diperbanyak agar lebih mudah dimengerti kedepannyaperkenalakan nama saya claudio khelvin https://www.atmaluhur.ac.id

Tinggalkan Balasan

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