Just Share: Pengenalan HTML5

Pengenalan HTML5

HTML5 (Hypertext Markup Language5) adalah suatu markup language yang berfungsi untuk menampilkan isi dari website dan juga merupakan teknologi inti dari pemrograman web. Selain itu pengertian lainnya tentang HTML5 adalah file teks atau ASCII yang mengandung script yang ditunjukkan kepada web browser untuk menampilkan grafis dari suatu halaman web.

Kelebihan HTML ini ialah dapat ditampilkan pada platform berbeda namun memiliki tampilan yang sama. HTML5 ini merupakan hasil revisi dari HTML pertama yang diciptakan pada tahun 1990 dan HTML4 pada tahun 1997. HTML5 diciptakan pada tahun 2009 yang merupakan standar baru untuk HTML, XHTML dan DOM HTML. HTML5 merupakan proyek dari W3C (World Wide Web Consortium) dan WHATWG ( Web Hypertext Application Technology Working Group). W3C merupakan pengembang XHTM L 2.0 dan WHATWG mengembangkan situs serta aplikasinya.

Perbaikan HTML5 dari masa ke masa bertujuan untuk memperbaiki teknologi HTML terutama mendukung teknologi multimedia terkini, mudah dibaca dan mudah dimengerti oleh mesin. HTML5 ini telah dikenal luas oleh para developer sejak lama namun pada April 2010 CEO Apple Inc. Steve Jobs memberikan pernyataan bahwa Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video ataupun menyaksikan konten multimedia apapun di internet.

HTML5 merupakan hasil terkini perkembangan dari HTML4 dan XTHML 1.1 yang selama ini dioperasikan terpisah dan dimplementasikan berbeda-beda oleh banyak software developer web. Tujuan dibuat HTML5 ini adalah dibuatnya suatu fitur baru yang didasarkan pada HTML, CSS, DOM, dan Javascript dan mengurangi kebutuhan plugin untuk menampilkan multimedia eksternal contohnya Flash Player. Sampai saat ini HTML5 masih dalam tahap pengembangan, jadi masih beberapa browser saja yang mendukung HTML5. Contohnya Mozilla Firefox, Google Chrome, Safari dan Opera.

Aturan untuk mempelajari HTML5 :

Beberapa aturan yang harus kamu pelajari saat belajar HTML5, yaitu :Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript.
Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
Lebih baik penanganan kesalahan.
Lebih banyak penggunaakn markup untuk mengganti scripting.
HTML5 harus independen.
Proses development-nya harus terlihat untuk umum (visible).

Fitur baru dalam HTML5 :

Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau realplayer untuk memutar audio dan video.
Canvas : Media corat-coret langsung tanpa flash dan applet java.
Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.
Semantic: Mempermudah designer dengan tag khusus layout, seperti: artikel, footer, header, navigasi, dan section.
Dukungan yang lebih baik untuk penyimpanan secara offline.

Browser yang sudah support HTML5 :

Chrome
Safari Apple v.4+
Internet Explorer 9
Opera
Maxthon
Firefox 4, 5, 6 dan seterusnya

Struktur Dasar HTML5 :

<!DOCTYPE HTML>

<html>

<head>

<title>Judul</title>

</head>

<body>

Isi Dokumen

</body>

</html>

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

Contoh Sintaknya:

<h1>Ini Website HTML5 pertama saya</h1>

<h2>Dan juga yang terakhir karena saya bingung</h2>

</hgroup>

</header>

<nav>

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

Contoh Sintaknya:

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

Yang perlu diingat bahwa <nav> digunakan untuk me-link kan kehalaman-halaman utama dari website atau bagian dari halaman itu sendiri. Kalau untuk paging, Social Networking atau list-list yang lain yang menggunakan <ul> tidak perlu diberi <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.

Contoh Sintaknya:

<h1>Artikel Terbaru</h1>

<article>Isi Teks Artikel 1</article>

<article>Isi Teks Artikel 2</article>

<article>Isi Teks Artikel 3</article>

</section>

Jadi karena diantara kelompok-kelompok <article> ada tag <h1> maka kita tetap perlu membungkusnya dengan <section>. <section> tidak boleh diberi style, tidak boleh sebagai container layout. Tetap gunakan <div> apabila ingin melayout. Berikutnya adalah <time>, sesuai namanya, digunakan untuk menunjukan waktu, biasanya digunakan untuk menunjukkan waktu publish artikel, komentar, forum dan lain sebagainya. <time> memiliki atribut datetime yang berisi waktu bisa dalam format yyyy-mm-dd atau jam seperti 19:00. Hal ini digunakan agar mesin pencari dapat mengenali waktu dalam format standar meskipun kita menulisnya tidak dalam format standar. Contoh:

<p>Ditulis oleh mr.x pada <time datetime="2000-11-13">Senin, 13 November 2000</time></p>

<figure> dan <figcaption>

<figure> digunakan sebagai pembungkus untuk tag <img>. Tetapi tidak selalu semua tag <img> kita bungkus dengan <figure>, hanya gambar-gambar yang utama saja atau gambar-gambar yang ingin kita beri label. Nah kita memberi labelnya dengan <figcaption>.

Sintaknya :

<figcaption>Ini adalah foto artis yang saya ambil di kali</figcaption>

</figure>

Semoga bermanfaat, terima kasih atas kunjungannya.

Just Share

Pengenalan HTML5

Tidak ada komentar:

Posting Komentar

Category

Label