Yuk Mengkaji Ilmu: HTML5

HTML (HyperText Mark up Language) merupakan suatu metoda untuk mengimplementasikan

konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu

bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program.

Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :

Hypertext

Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen

dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

Markup

Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi

tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World

Wide Web.

Language

Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari

beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up

Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang

berorientasi pada aplikasi.

Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :

• Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

• Kita dapat menampilkan teks dalam bentuk cetakan tebal

• Kita dapat menampilkan sekelompok kata dalam bentuk miring

• Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik

• Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.

FITUR – FITUR TAMBAHAN HTML5

HTML5 Canvas

Untuk memberikan suatu 'interaksi' pada website yang kita miliki, misalnya Flash atau Java. Hal ini akan diganti oleh elemen <canvas> pada HTML5 sebagai canvas WEB – kertas yang bias dicoreti sesuai imajinasi – atau dalam hal lain, Canvas memungkinkan untuk bereksperimen lebih pada HTML5.

Audio dan Video

Di HTML5 akan ada tag khusus untuk audio dan video file. Tag tersebut adalah <audio> dan <video> yang berfungsi untuk menyisipkan file audio dan video. Berbeda dengan versi HTML pendahulunya yang harus menyisipkan flash untuk memutar audio/video, HTML5 akan dengan mudah menyisipkan file multimedia tersebut ke dalam webnya.

Local Storage

Berfungsi sebagai pengganti cache sebagai media penyimpanan history halaman web. Local Storage memungkinkan web untuk menyimpan data cache lebih besar di storage local-nya daripada cache pada browser biasa.

Web Workers

Seringkali kita menemukan jika halaman web yang memiliki banyak Javascript membuat browser melambat dan komputer nge-hang. Tetapi dengan adanya Web Workers memungkinkan halaman web untuk memproses Javascript yang mereka miliki dengan respon yang lebih cepat dan multitasking.

Semantics

Ini adalah fitur yang paling menawan untuk web designer. Para web designer yang suka sekali memainkan elemen div, nav, dan lainnya, akan di-stop oleh fitur Semantics dalam HTML5. Semantics akan menjadi masa depan bagi para tetua tag layout dan format. Pastinya web akan menjadi lebih dinamis dan menarik akibat fitur ini.

YANG PERLU DIKETAHUI TENTANG HTML5

1. DOCTYPE

DOCTYPE ditulis sebelum tag <html>. Fungsi dari DOCTYPE adalah memberitahukan kebrowser

bahwa tipe dokumen yang digunakan adalah HTML.

Dalam dokumen HTML versi sebelumnya DOCTYPE dituliskan dengan :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Sedangkan dalam HTML5 DOCTYPE Cuma ditulis :

<!DOCTYPE HTML>

2. Tidak adanya Type pada script dan link

source code yg baru :

source code yg lama :

3. Attribute Required

Form mempunyai fitur baru yaitu required attribute, yang akan mengecek isi dari sebuah input text apakah kosong atau tidak saat di-submit. Jika kosong maka form tidak akan di-submit.

4. Mendukung audio

HTML 5 mengenalkan <audio> element sudah mendukung penuh terhadap penggunaan audio pada

halaman web.

Penggunaannya seperti kode dibawah

Unduh File ini.

</audio>

9. Mendukung video

Dan hebatnya lagi HTML juga mengenalkan <video> element. Tapi karena codec format video tidak

semua browser mendukung, jadi video yang bisa diputar tergantung dari browser.

Penggunaannya seperti kode dibawah :

<p> Browser tidak mendukung, <a hreh=”contohvideo.mp4> Silahkan unduh video.</a> </p>

</video>

Tag-tag baru yang letaknya didalam <body>

<header>

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

<hgroup>

Jika kita memiliki satu atau lebih dari satu heading berurutan <h1> - <h6> maka kita bisa mengelompokkannya dengan <hgroup>.

<nav>

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

Sesuai namanya <article> digunakan untuk membungkus teks artikel atau teks utama dalam halaman web. 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>.

<time>

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.

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

<aside>

<aside> digunakan sebagai sidebar pada website.

<footer>

<footer> diletakkan dibagian bawah website.

Perbedaan HTML 5 dengan HTML sebelumnya

HTML SEBELUMNYA

Vokabular HTML dari jaman sebalumnya (HTML+, HTML 2.0, HTML 3.2) umumnya ditulis menggunakan aturan sintak SGML. Pada HTML 4 telah diterapkan dua sintak yaitu: SGML (disebut sebagai HTML 4.01) dan XML (disebut XHTML 1.0).

Halaman Web yang Biasa ditulis Dengan HTML 4;

<title>Hobo Web LTD Scotland</title>

</head>

<body>

</div>

Test Page 1</a></h2> <div class="entry">

<p>Article Text here</p>

</div>

Test 2</a></h2>

<p>Article 2 Text here</p>

</div>

<a href="/blog/page/2/">« Previous Entries</a>

</div>

</div>

<li><h2>Hobo Stuff</h2>

<ul>

<li><a href="/blog/comment-policy/">Comment Policy</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href='/blog/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li>

<li><a href='/blog/2008/02/'>February 2008</a></li>

<li><a href='/blog/2008/01/'>January 2008</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

Contoh Halaman Web yang Ditulis dengan HTML5;

<title>Hobo Web LTD Scotland</title>

</head>

<body>

</header>

Test Page 1</a></h2> <p>Article Text here</p>

</article>

Test 2</a></h2>

<p>Article Text 2 here</p>

</article>

<nav>

<a href="/blog/page/2/">« Previous Entries</a>

</nav>

</section>

<nav>

<ul>

<li><h2>Hobo Stuff</h2>

<ul>

<li><a href="/blog/comment-policy/">Comment Policy</a></li>

</ul></li>

<li><h2>Archives</h2>

<ul>

<li><a href='/blog/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li>

<li><a href='/blog/2008/02/'>February 2008</a></li>

<li><a href='/blog/2008/01/'>January 2008</a></li>

</ul>

</li>

</ul>

</nav>

</footer>

</body>

</html>

HTML 5 mendefinisikan kelima revisi besar bahasa inti dari World Wide Web – HTML – dari W3C (World Wide Web Consortium). Juga disebut Aplikasi Web 1.0 – masih ada tidak ada ruang nama atau skema. Unsur tidak harus ditutup. Browser akan mengampuni kesalahan. Sebuah p masih p, dan meja masih meja.

HTML 5 menambahkan unsur-unsur baru untuk secara khusus mengidentifikasi masing-masing konstruksi umum:

Section: Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML 4

Header: header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala

Footer: Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail

Nav: Koleksi link ke halaman lain

Article: Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan sebagainya

Dalam HTML5 banyak kelebihan nya dibanding dengan versi HTML yang sebelum nya. Terdapat juga fitur fitus canggih pada HTML5. Dengan HTML5, pengembangan aplikasi web adalah lebih mudah dibandingkan sebelumnya.

sumber : alibirsal.blogspot.com dan lain-lain

Jumat, 17 Oktober 2014

HTML5

Tidak ada komentar:

Posting Komentar