Tutorial HTML5

Senin, 18 Mei 2015

Mengapa Harus HTML5 ...?

Pada saat sekarang ini, kita ketahui dimana Perkembangan teknologi yang begitu cepat yang memungkinkan pengguna dapat mengakses website di internet dengan menggunakan berbagai perangkat, seperti Tablet / Handphone / Smartphone membuat kita para programer memang harus berpindah ke HTML5 .Tag yang telah disempurnakan di HTML5 mampu membuat HTML tampil lebih friendly dengan perangkat teknologi pada masa sekarang ini . So... Website-Website sekarang ini memang banyak yang harus bertransformasi ke HTML5

Apa itu HTML5 ..?

Mungkin masih ada yang bertanya di benak kita tentang HTML5 ... HTML5 bahasa pemrograman web yang menjadi dasar dari sebuah halaman website yang sudah dikembangkan dan disempurnakan lagi tag-tagnya sehingga dapat mendukung dan responsif di semua platform.
Jadi HTML5 sudah memiliki beberapa tag baru yang dulunya tidak bisa dilakukan oleh HTML sehingga programer mengharuskan menggunakan jquery, atau javascript .. Hal-hal seprti itu sudah bisa ditangani oleh HTML

Apa Yang baru dari HTML5...?

Deklarasi DOCTYPE pada HTML 5 sangat Simple

<!DOCTYPE html>

character encoding (charset) declaration juga sangat sederhana

<meta charset="UTF-8">

Sebagai contoh Cara penulisan HTML yang Valid HTML5 yaitu :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Membuat Website Valid HTML5</title>
</head>

<body>
.............ISI............
</body>

</html>

Syntax di atas adalah syntak dasar bagaimana cara penulisan dasar di HTML 5 dalam pembangunan sebuah website yang valid akan HTML5 , sehingga nanti nya website yang kita buat mendukung berbagai platform pada saat sekarang ini ,

Nah apa saja ELEMENT HTML 5 yang baru ...?

Jika dulu seorang web desainer dalam membuat desain layoutnya dengan tag <div> pada bagian header, dan sidebar , serta article , sekarang tag seprti itu sudah terdapat di HTML5 , jadi kita tidak perlu menggunakan tag div lagi , melainkan harus menggunakan tag baru yang di keluarkan oleh HTML 5

Contoh Elemen Semantik Terbaru di HTML5

    header
    nav
    section
    article
    hgroup
    aside
    figcaption
    figure
    footer

Membuat Layout/Template Valid HTML5

Bagaimana kita Membuat layout website dengan HTML5..?Berikut ini akan saya jelaskan bagaimana tag yang harus digunakan untuk membuat layout dengan HTML5

Scipt Layout / Template HTML 5 diatas adalah :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Membuat Website Valid HTML5</title>
</head>
<body>
<div class="wrapper">
  <header>
    <h1>Membuat Layout HTML5</h1>
    <nav>
      <!-- nav content here -->
    </nav>
  </header>
  <section class="courses">
    <!-- section content here -->
  </section>
  <aside>
    <!-- aside content here -->
  </aside>
  <footer>
    <!-- footer content here -->
  </footer>
</div><!-- .wrapper -->
</body>
</html>

Untuk Mengatur Tampilannya.. anda Perlu Menambahkanya dengan Syntak CSS3.. Agar Tampilannya Dapat seperti Gambar di atas ,,, Susunan dari pembuatan layout dapat anda gunakan syntax diatas..

Penjelasan :

Penjelasan Tag <header> HTML5

Tag <header>, sesuai namanya tag ini detempatkan untuk bagian header website. Jika pada HTML sebelmnya kita menggunakan tag <div id="header"> sekarang kita menggantinya dengan<header>. Namun tag <header> tidak harus selalu ditempatkan dipaling atas web, kita bisa memiliki beberapa<header>, misal didalam artikel

Penjelasan Tag <hgroup> HTML5

Tag <hgroup>, jika kita memiliki satu atau lebih dari satu heading berurutan <h1> - <h6> maka kita bisa mengelompokkannya dengan <hgroup>. Biasanya digunakan jika ada judul dan ada sub judul, atau untuk judul web kemudian kita memiliki slogan.

<header id="main-header">
<hgroup>
<h1>Ini Website HTML5 pertama saya</h1>
<h2>Dan juga yang ini H2 satu lagi</h2>
</hgroup>

Penjelasan Tag <nav> Pada HTML5

Nah, Tag <nav> pada HTML5 memiliki fungsi untuk menampilkan navigasi pada website . Jika dulu kita pakai <ul><li> untuk membuat navigasi menu, nah sekarang kita mampu membuat navigasi dengat <ul><li> yang harus bungkus dengan <nav>.

Contoh penggunaan tag <Nav> HTML 5

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

Penjelasan tag <section>, <article> di HTML5

Tag <article> digunakan untuk membungkus teks artikel atau teks utama dalam halaman web kita. Tag artikel juga bisa digunakan <article>, Apabila kita memiliki list atau daftar <article>, maka kita perlu membungkusnya dengan <section> jika ada elemen lain yang bukan <article> dan menerangkan tentang <article> tersebut.

Contoh penggunaan Tag <section>, dan <article> di HTML5

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

Penjelasan tag <aside> pada HTML5

Tag <aside> digunakan untuk sidebar yang merupakan tag yang berisi konten yang berhubungan dengan konten utama dalam halaman web,

Contoh penggunaan Tag <aside> di HTML5

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

Penjelasan tag <footer> di HTML5

Tag footer di HTML5 digunakan untuk menentukan footer pada halaman website, sesuai dengan namanya , tag footer juga bukan berarti hanya terletak di bagian footer sebuah website, tapi bisa saja di tempatkan di footer pada disain artikel anda ..
contoh penggunaan tag : <footer><p>Copyright 2015,Budiono</p></footer>

Cara agar HTML5 support / bisa dijalankan di IE 7, 8,9.

Sejauh ini html5 support terhadap segala jenis browser yang ada, namun bagaimana jika seseorang mengakses halaman web kita masih menggunakan IE versi 7,8,9 ... ? agar HTML5 dan CSS3 bisa support cukup kita tambahkan code di bawah ini di atas tag </head>

Demikianlah Penjelasan singkat saya mengenai Dasar HTML5 / Tutorial HTML 5 , semoga bermanfaat bagi para pembaca ebsof

Ebsof Blog