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.
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