Belajar HTML Part 19 : HTML Tata Letak

HTML TATA LETAK

Assalamu'alaikum Wr. Wb

Hai teman-teman semua, terima kasih telah mengunjungi blog saya yang sederhana ini. Pada kesempatan kali kita akan membahas tentang Tata Letak pada HTML. Langsung saja yuk...


Website sering menampilkan konten dalam beberapa kolom, seperti majalah atau koran.
HTML5 menawarkan elemen semantik baru yang menentukan bagian-bagian yang berbeda dari halaman web :

• <header> : Mendefinisikan header/kepala untuk dokumen
• <nav> : Mendefinisikan sebuah wadah untuk link navigasi
• <section> : Mendefinisikan sebuah bagian dalam sebuah dokumen
• <article> : Mendefinisikan sebuah artikel mandiri independen
• <aside> : Mendefinisikan konten selain dari konten <seperti sidebar>
• <footer> : Mendefinisikan footer/kaki untuk dokumen

TEKNIK TATA LETAK HTML

Ada empat cara yang berbeda untuk membuat layout multicolumn antara lain :
1. Tabel HTML
2. Properti CSS mengapung
3. Kerangka CSS
4. CSS Flexbox

1. TABEL HTML
Elemen <table> tidak dirancang untuk menjadi alat tata letak, tujuan dari tabel untuk menampilkan data tabular. Jadi, jangan menggunakan tabel untuk layout halaman.

2. CSS MENGAPUNG
Contoh :

Hasilnya :

3. Kerangka CSS
Jika ingin membuat tata letak dengan cepat, bisa menggunakan kerangka seperti W3.CSS atau Bootstrap

4. CSS FLEXBOX
Contoh :

Hasilnya :

Silakan dipraktikan sendiri, apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima Kasih.

• Kesimpulan

Ada empat cara yang berbeda untuk membuat layout tata letak antara lain, Tabel HTML, Properti CSS mengapung, Kerangka CSS, CSS Flexbox .

Referensi : 
http://www.w3schools.com/html/html_layout.asp

Wassalamu'alaikum Wr. Wb