HTML Layout
pada sesi sebelumnya kita telah mencoba membuat halaman web sederhana yang menampilkan sebuah kalimat hello world, dengan menggunakan tag yang dalam beberapa referensi dimasukan ke dalam top-level element, seperti <!DOCTYPE> , <html>, <Head> dan <body>, seperti contoh di bawah seperti dibawah :
<!DOCTYPE HTML>
<html>
<head></head>
<body></body>
</html>
Element html tidak terbatas hanya pada tag-tag dalam kategori top-level element, kenyataanya masih banyak element lainya, mungkin jika kita hitung ada labih dari 100 element html5. beberapa diantaraya adalah :
- Metadata - sudah sedikit di singgung dalam session sebelumnya, fungsinya adalah unuk memberi informasi tentang metadata tentang dokumen html itu sendiri.
- Sectioning - digunakan untuk mengatur halaman menjadi beberapa bagian.
- Heading - digunakan bersama dengan element Section untuk menentukan judul dan subtitle
- Embedded - digunakan untuk menyisipkan konten non-HTML, seperti gambar, dalam dokumen.
- Form - digunakan untuk mengambil input pengguna
- dan masih banyak yang lainya,
Struktur HTML
Kali ini kita akan membahas tentang Elements yang fungsinya untuk menyususn struktur halaman sebuah web, digunakan untuk membuat stuktur layout dari halaman web, sekaligus dapat digunakan untuk mengorganisasikan konten-konten html ke dalam beberapa bagian.
<div>
Contoh Pengaplikasian div tag dalam mockup :
Sebelum html versi 5, kita hanya memiliki tag
untuk membangun struktur dari sebuah halaman web. tag ini digunakan untuk membagi sebuah halaman web menjadi beberapa bagian. Meskipun HTML 5 mengenalkan beberapa tag-tag baru, tetapi tag ini masih tetap valid untuk digunakan.
```html
<div>
<div>
<div>
</div>
</div>
</div>
<div> mendefinisikan pemotongan/pembagian konten dari dokumen HTML, Tag ini biasanya menjadi kontainer buat elemen html lainya. tag <div> mudah dicustomisasi dengan menggunakan atribut class atau id yang kemudian dapat diberikan style oleh css.
<!DOCTYPE html>
<html>
<body>
<div class="selection">
<h1>Emery Tak Kapok Melatih di Liga Inggris</h1>
<p>Pelatih Spanyol Unai Emery masih menjalani karier yang cukup sulit di Arsenal. Meski begitu, Emery mengaku mau-mau saja melatih lagi di Liga Inggris</p>
</div>
<div class="selection">
<h1>Angkat Trofi di Stadion Kosong Akan Terasa Aneh Bagi Liverpool</h1>
<p>Liverpool sedikit lagi akan menjuarai Liga Inggris musim ini. Namun jika hal itu terjadi, The Reds kemungkinan akan merayakannya di stadion kosong.</p>
</div>
</body>
</html>
HTML5 Semantics(HTML with Meaning)
Apa yang dimaksud dengan semantic tag? Semantic Tag atau Semantic Markup, adalah sebutan untuk tag-tag HTML yang memiliki ‘arti‘ atau ‘makna’. Kata semantic berasal dari kata yunani yang berarti ‘mempelajari arti‘ (the study of meaning).
Contoh pengaplikasian Sematic tag dalam mockup :
Main
Tag<main> menunjukan bahwa konten di dalam container ini adalah konten utama dalam halaman web , pada setiap halaman hanya boleh terdapat satu <main>. Main tidak boleh ada di dalam element article, aside, footer, header, atau nav.
<body>
<main>
<div class="selection">
<h1>Emery Tak Kapok Melatih di Liga Inggris</h1>
<p>Pelatih Spanyol Unai Emery masih menjalani karier yang cukup sulit di Arsenal. Meski begitu, Emery
mengaku
mau-mau saja melatih lagi di Liga Inggris.
Entrenador berusia 48 tahun diberhentikan Arsenal hanya 1,5 tahun setelah didapuk sebagai pengganti
Arsene
Wenger pada musim panas 2018. Pencapaian terbaik Emery di London Utara hanyalah membawa The Gunners ke
final
Liga Europa semusim lalu.</p>
</div>
<div class="selection">
<h1>Angkat Trofi di Stadion Kosong Akan Terasa Aneh Bagi Liverpool</h1>
<p>Liverpool sedikit lagi akan menjuarai Liga Inggris musim ini. Namun jika hal itu terjadi, The Reds
kemungkinan akan merayakannya di stadion kosong.
Premier League dikabarkan telah mendapat restu dari pemerintah Inggris untuk bergulir kembali pada Juni.
Namun masih belum diputuskan apakah nantinya laga akan dimainkan secara home-away atau dimainkan di
tempat
netral.</p>
</div>
</main>
</body>
Section
Element ini digunakan untuk mengatur konten menjadi bagian-bagian logis, prinsip dalam memilih elemen ini adalah group dari konten yang sama berdasarkan materi yang disajikan.
Menurut dokumentasi HTML W3C: "A section is a thematic grouping of content, typically with a heading."
prinsipnya beberapa Element dalam sematic tag ini, mempunyai fungsi seperti tag <div>, hanya saja penamaan tagnya disesuaikan dengan fungsi dari tagnya. Sebelumnya kita sudah melihat pembagian konten menggunakan div, sekarang kita akan menggantikan div dengan tag sematik baru yang disediakan html5,
<!DOCTYPE html>
<html>
<body>
<section>
<h1>Emery Tak Kapok Melatih di Liga Inggris</h1>
<p>Pelatih Spanyol Unai Emery masih menjalani karier yang cukup sulit di Arsenal. Meski begitu, Emery mengaku mau-mau saja melatih lagi di Liga Inggris.</p>
</section>
<section>
<h1>Angkat Trofi di Stadion Kosong Akan Terasa Aneh Bagi Liverpool</h1>
<p>Liverpool sedikit lagi akan menjuarai Liga Inggris musim ini. Namun jika hal itu terjadi, The Reds kemungkinan akan merayakannya di stadion kosong.</p>
</section>
</body>
</html>
note:
- tambahan <h1> adalah heading, heading sendiri terdiri dari <h1> hingga <h6>
paragraf
#### Aside
Elemen ini digunakan untuk membangun kelompok konten yang tidak termasuk dalam konten utama, umumnya berupa informasi pendukung, misalnya informasi tentang penulis, dapat juga informasi yang tidak terkait seperti iklan atau kalender.
```html
<aside>
<h4>Tema Podcast hari ini</h4>
<p>dunia Olahraga di tengah corona <br> bincang bincang teknologi di mata milenia</p>
</aside>
speaker note
sebenarnya cukup sulit untuk menjelaskan html tanpa css, jadi manti beberapa contoh akan kita ulangi lagi ketia mempelajari css
Header & Nav
tag <header> dapat digunakan untuk judul dari sebuah konten, penempatan brand dari website ataupun lainya
<nav> berfungsi untuk menampung kupulan link, tidak semua lint harus diletakan dalam kontainer <nav> tetapi hanya ling ling utama saja yang diperlukan untuk navigasi konten dari web.
speaker note
<a>tag ini<a>digunakan untuk membuat hyperlink, atribut terpenting dari tag ini adalah **href* yang akan diisi oleh detail tujuan dari link.*
<header>
<div id="logo">
<h3>
WebSaya
</h3>
</div>
<nav>
<a href="/code//01_div.html">part 1</a>
<a href="/code/02_section.html">part 2</a>
<a href="/code/03_aside.html">part 3</a>
<a href="https://www.google.com/?hl=in">google</a>
</nav>
</header>
Footer
<footer> sesuai mananya tag ini idealnya diletakan di area paling bawah dari halaman web atau bisa juga di bagian paling bawah sebuah section. Umumnya footer berisi :
- Informasi Author
- copyright
- Informasi contact
- sitemap
- back to top
- links dokument yang berhubungan
- dll
<footer>
<p>Contoh artikel diambil dari detik dot com</p>
<a href="https://www.detik.com/">detik.com</a>
</footer>
List tag Sematik
pada sesi sebelumnya kita telah mencoba membuat halaman web sederhana yang menampilkan sebuah kalimat hello world, dengan menggunakan tag yang dalam beberapa referensi dimasukan ke dalam top-level element, seperti <!DOCTYPE> , <html>, <Head> dan <body>, seperti contoh di bawah seperti dibawah :
Top comments (0)