Halo semua, ketemu lagi nih. Dalam kesempatan kali ini saya akan membahas tentang membuat layout  web sederhana di HTML. Cus langsung ke VS Code aja guys.

1. Buat File HTML

Seperti biasa kita akan membuat file HTML terlebih dahulu

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
template dasar html

Nah untuk struktur web yang akan kita buat kira kira nanti akan seperti ini

struktur web

untuk itu kita akan membuat layout atasnya dulu yang terdiri dari logo dan navigasi. kita akan buat seperti ini

<header>
    <h2>Logo</h2>
    <nav>
        <ul>
            <li>
                <a href="https://google.com">home</a>
                <a href="https://facebook.com">about</a>
            </li>
        </ul>
    </nav>
</header>

disini akan saya jelaskan sedikit tentang kode diatas.

  • <header>  merupakan sebuah tag yang menandakan header dari suatu website, header merupakan bagian teratas dari sebuah website. maka dari itu kita membungkus logo dan navigasi di dalam <header>
  • <nav> merupakan tag navigasi, navigasi adalah bagian website yang memudahkan kita dalam berpindah-pindah halaman di dalam website kita
  • <ul> merupakan tag unordered list, tag ini digunakan untuk membuat list yang tidak berurutan. list yang ada bulat-bulatnya itu loh
  • <li> merupakan tag list item, jadi ketika kita ingin menambahkan list dalam <ul> maka harus ditaruh didalam <li>
  • <a> merupakan tag anchor, anchor ini jika kita pencet akan berpindah halaman sesuai dengan alamat web yang kita tulis di dalam property href

sekarang kita coba lihat hasilnya

hasil header kita

nah, hasilnya akan seperti diatas. oke lanjut kita akan isi bagian konten kita. dibagian konten, saya akan masukkan image, text dan juga button seperti ini

 <main>
      <img src="image.png" alt="" width="600px" height="auto" />
      <p>
        HTML (HyperText Markup Language) adalah bahasa markup yang digunakan dalam pembuatan website. perlu diketahui disini bahwa HTML merupakan Bahasa Markup bukan bahasa pemrograman!. ciri bahasa
        markup adalah penulisannya diawali dengan tag pembuka dan diakhiri dengan tag penutup
        <br />
        HTML dibuat oleh Tim Berners Lee pada tahun 1991. Sekarang HTML dikembangkan oleh W3 dan sudah ada versi HTML5 yang mana menjadi versi akhir dari HTML
      </p>

      <button>pelajari html</button>
    </main>
kode untuk bagian konten kita

disini akan saya jelaskan sedikit tentang kode diatas.

  • <main>  merupakan sebuah tag yang menandakan main konten dari suatu website, main merupakan bagian tengah dan isi pokok dari sebuah website. maka dari itu kita membungkus konten utama web kita di dalam <main>
  • <img> merupakan tag untuk memasukkan gambar ke dalam website kita. disini ada properti wajib yang harus diisi, yaitu src. src adalah alamat dimana kita menyimpan gambar kita, sedangkan width dan height merupakan properti untuk menentukan lebar dan tinggi dari gambar. untuk struktur file yang saya gunakan seperti ini
struktur file 
  • <p> merupakan tag untuk membuat paragraf
  • <br> merupakan tag untuk menambahkan spasi pada paragraf atau teks
  • <button> merupakan tag untuk membuat tombol yang bisa di klik

hasil dari web kita akan seperti ini

hasil web kita setelah kita tambahkan konten

Terakhir, kita akan menambahkan footer pada website kita. isi footer biasanya adalah keterangan copyright dan juga credit dari sebuah website. disini saya akan mengisi footer dengan heading, paragraf, link dan juga keterangan copyright

 <footer>
     <h4>Satria Herman</h4>
     <p>content writer, programmer and ui ux designer</p>

     <ul>
         <li>
             <a href="https://satriaherman.com">personal web</a>
         </li>
         <li>
             <a href="https://blog.satriaherman.com">blog</a>
         </li>
         <li>
             <a href="https://satriaherman.medium.com">medium</a>
         </li>
     </ul>

     <p>&copy; satria herman 2022</p>
</footer>
kode untuk footer website kita

isini akan saya jelaskan sedikit tentang kode diatas.

  • <footer>  merupakan sebuah tag yang menandakan footer dari suatu website, footer merupakan bagian terbawah dari sebuah website. biasanya footer terdiri dari heading, paragraf, link dan juga keterangan copyright
  • &copy; merupakan html symbol untuk membuat simbol copyright

hasil dari website kita akan seperti ini

tampilan website kita

Nah, itulah cara membuat layout website sederhana. Semoga bermanfaat, jangan lupa share yaa.

Wassalamu'alaikum Warahmatullahi Wabaraktuh