..

Desain & Pemrograman Web
Belajar HTML5 Dasar - Pengenalan Tag-tag HTML5 baru

Tahun 2011 merupakan tahunnya HTML5, setelah Internet Explorer 9 rilis beberapa bulan lalu, maka semua browser utama (IE, Firefox, Safari, Chrome dan Opera) telah mendukung HTML5 dan CSS3. Ya walaupun belum semua fungsi HTML5 & CSS3 didukung spenuhnya, tetapi tahun ini merupakan lahirnya HTML5. Jadi tunggu apa lagi, Anda masih pakai XHTML? atau mungkin malah HTML4? mulailah belajar HTML5, ada banyak tag2 baru yang sangat menarik. Disini saya akan mengajari tag-tag yang baru saja dan yang paling banyak digunakan dalam melayout sebuah website.

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Drop Down Menu</title>
<head>
<body>
  Isi web disini
</body>
</html>

Sip, lebih simpel kan, kalau dulu jaman XHTML kita perlu mendeklarasikan transitional, atau strict, sekarang cukup <!DOCTYPE html>. Nah untuk isinya saya akan memberitahu tag-tag yang baru, nanti setiap kode berikutnya Anda masukkan didalam <body>, yang ada tulisan Isi web disini.

<header>

Tag pertama kita adalah <header>, sesuai namanya tag ini ditempatkan diatas pada bagian awal website. Kalau dulu kita pakai <div id="header"> sekarang kita menggantinya dengan<header>. Tetapi <header> tidak harus melulu dipaling atas web, kita bisa memiliki beberapa<header>, misal didalam artikel (kita akan bahas ini nanti dibagian article).

Nah, didalam <header> ini bisa kita isi macam-macam, misal logo, navigasi, heading dan lain-lain. Bahkan diisi <div> pun tidak masalah.

<hgroup>

Weittss <hgroup>, apa lagi ini? Oke gampangnya jika kita memiliki satu atau lebih dari satu heading berurutan <h1> - <h6> maka kita bisa mengelompokkannya dengan <hgroup>. Biasanya digunakan apabila kita memiliki judul dan ada sub judul, atau untuk judul web kemudian kita memiliki slogan. Tapi kalau headingnya cuma satu ya nggak usah dikasih <hgroup>. Oke daripada pusing langsung saja lihat contohnya ya:

<header id="main-header">
  <hgroup>
    <h1>Ini Website HTML5 pertama saya</h1>
    <h2>Dan juga yang terakhir karena saya bingung</h2>
  </hgroup>

Oke, kalau sudah lihat contohnya paham kan, sip nanti kita masih akan menambahkan sesuatu kedalam <header>.

<nav>

Nah, dari namanya sudah kelihatan kalau ini fungsinya untuk menampilkan navigasi pada website Anda. Ya kalau dulu kita pakai <ul><li> untuk membuat navigasi menu, nah sekarang kita pakai... ummm.. ya sama pakai <ul><li> juga, tetapi kita bungkus dengan <nav>. Nah langsung saja kita lihat contoh kodenya:

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

Sip, sama kan? Yang perlu diingat bahwa <nav> digunakan untuk ngelink kehalaman-halaman utama dari website atau bagian dari halaman itu sendiri. Kalau untuk paging, Social Networking atau list-list yang lain yang menggunakan <ul> nggak perlu dikasih <nav>.

<section>, <article> dan <time>

Sesuai namanya <article> digunakan untuk membungkus teks artikel atau teks utama dalam halaman web kita. Kita boleh punya banyak tag <article>, misal saja komentar, nah setiap komentar kita bungkus pakai <article> atau forum dan lain sebagainya. Apabila kita memiliki list atau daftar <article>, misal blog, maka kita perlu membungkusnya dengan <section> jika ada elemen lain yang bukan <article> dan menerangkan tentang <article> tersebut. Bingung? Langsung kecontoh:

<section>
  <h1>Artikel Terbaru</h1>
  <article>Isi Teks Artikel 1</article>
  <article>Isi Teks Artikel 2</article>
  <article>Isi Teks Artikel 3</article>
</section>

 
<aside>

Nah ini nih tag yang saya sendiri masih bingung penggunaannya, karena tiap website contoh pe
 <aside id="sidebar">
  <aside>
    Ini Widget Pertama
  </aside>
  <aside>
    Ini Widget Kedua
  </aside>
  <aside>
    Ini Widget Ketiga
  </aside>
</aside>


nggunaan <aside> berbeda-beda. Oke kalau dilihat dari sejarahnya <aside> itu awalnya namanya <sidebar> tetapi kemudian diganti menjadi <aside>. Nah <aside> merupakan tag yang berisi konten yang berhubungan dengan konten utama dalam halaman web, oke berarti bisa disimpulan bahwa <aside> digunakan sebagai sidebar pada website. Nah permasalahannya setiap sidebar misal wordpress, pasti didalamnya terdapat konten-konten lagi, kalau di wordpress biasanya widget. Nah terus kode nya seperti apa? Ada 3 kemungkinan, yang pertama:

Atau yang kedua:

 <aside id="sidebar">
  <div>
    Ini Widget Pertama
  </div>
  <div>
    Ini Widget Kedua
  </div>
  <div>
    Ini Widget Ketiga
  </div>
</aside>



Atau yang ketiga:

 <div id="sidebar">
  <aside>
    Ini Widget Pertama
  </aside>
  <aside>
    Ini Widget Kedua
  </aside>
  <aside>
    Ini Widget Ketiga
  </aside>
</aside>

..

Kamis, 01 Mei 2014

<header>

<hgroup>

<nav>

<section>, <article> dan <time>

<aside>

Tidak ada komentar:

Posting Komentar