Install Web App

BRIEF

MINA

HTML

Belajar HTML #13 | Belajar Membuat Layout Pada HTML

profil-penulis

Belajar Bareng Minarsih - Edisi Ngoding

08 Desember 2022

Belajar Pembagian Layout Website Menggunakan HTML

Kali ini kita akan belajar pembagian layout website menggunakan HTML

Layout website biasanya terdiri dari :

  • Header
  • Navigation bar
  • Main Content
  • Footer

Coba lihat gambar dibawah agar kamu punya gambaran atau bayangan, gimana sih layout website itu:

 

 

Penentuan layout pada halaman website biasanya menggunakan element tertentu sehingga memudahkan programmer untuk membaca code.

Berikut adalah beberapa contoh element layout:

  • <section> menandakan bagian dalam sebuah halaman web.
  • <header> merupakan bagian tajuk dari sebuah halaman web.
  • <footer> merupakan bagian halaman web yang terletak di bagian bawah konten utama.
  • <article> menandakan sebuah blok teks yang isinya independen terhadap element lain dalam halaman web.
  • <nav> adalah bagian yang berisi tautan navigasi utama. Kalian mungkin sering melihat menu navigasi yang berisi tautan ke halaman "Beranda", "Kontak kami", "Galeri", dan lain-lain.
  • <aside> adalah bagian di samping konten utama. Kontennya sebaiknya berhubungan dengan element di sebelahnya.

Contoh Penggunaan:

 <html>
   <head> <title>Welcome to My Page</title> </head>
   <body>
      <!-- nav digunakan untuk tautan navigasi utama -->
      <nav>
         <a href="./home">Home</a>
         <a href="./signup">Sign Up</a>
         <a href="./login">Log In</a>
      </nav>
      <!-- header adalah bagian tajuk dari sebuah halaman web -->
      <header>
         <h1>This is my website</h1>
         <h3>Please login to continue</h3>
      </header>
      <!-- aside adalah bagian samping konten utama -->
      <aside>
         <div>
            Hello, anonymous!
         </div>
         <a href="./terms">Terms & Policy</a>
      </aside>
      <!-- article menandakan sebuah blok teks yang isinya independen terhadap element lain -->
      <article>
         <!-- section menandakan bagian dalam sebuah halaman web -->
         <section>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
         </section>
      </article>
      <!-- footer merupakan bagian halaman web di bawah konten utama -->
      <footer>2020 Copyright</footer>
   </body>
<html>

Hasil :

Artikel Lainnya Dengan Kategori Terkait :

1. 5 HTML Tags For Accessibility

2. Belajar HTML #01 | Apa Itu HTML ? Pengertian HTML Lengkap Untuk Pemula

3. Belajar HTML #02 | Cara Sederhana Membuat Code HTML

4. Belajar HTML #03 | Membuat Heading di HTML

5. Belajar HTML #04 | Format Text di HTML

6. Belajar HTML #05 | Membuat Paragraf di HTML

7. Belajar HTML #06 | Membuat Tabel Pada HTML

8. Belajar HTML #07 | Membuat Link Pada HTML

9. Belajar HTML #08 | Cara Membuat List Di HTML

10. Belajar HTML #09 | Cara Membuat Box Shadow CSS dan HTML Praktis Tanpa ribet (efek bayangan CSS)

11. Belajar HTML #10 | Cara Menampilkan Gambar Pada Halaman Website Menggunakan HTML

12. Belajar HTML #11 | Cara Menampilkan Video Pada Halaman Website Menggunakan HTML

13. Belajar HTML #12 | Cara Membuat Form Pada HTML

14. Belajar HTML #13 | Belajar Membuat Layout Pada HTML

15. Belajar HTML #14 | Belajar Menghubungkan HTML dengan CSS

16. Belajar HTML #15 | Cara Menambahkan Audio ke Halaman Website Menggunakan HTML.

17. Belajar HTML #16 | Cara Menambahkan Garis Horizontal di HTML

18. Belajar HTML #17 | Cara Menambahkan Komentar di HTML

19. Belajar HTML #18 | Tutorial Cara Membuat Checkbox dan Radio Button di HTML

20. Buat Desain Web Responsif CSS

21. Cara Membuat Accordions Dengan HTML & CSS

22. Cara Membuat Favicon Dengan HTML

23. CSS Positioning

24. Hal-hal Keren Dalam HTML

25. How to make Card-Profile

26. Input HTML Yang Perlu Diketahui

27. Memahami Pentingnya Semantic HTML dalam Struktur Website

28. Membuat Form HTML dengan Input Sugestion

29. Penggunaan Atribut Elemen Anchor dalam HTML

30. Semantic HTML

31. Tag HTML yang Jarang Diketahui

32. Tips Praktis Membuat Berbagai Jenis HTML List

33. Trik Berguna Dalam HTML

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya