Makalah "Pengenalan HTML5 Dalam Kehidupan Sehari-hari"

BAB I

PENDAHULUAN

A.     LATAR BELAKANG

Di dunia komputer terdapat beraneka ragam bahasa pemrograman. Bahasa pemrograman itu sendiri sering diistilahkan dengan bahasa komputer, adalah teknik komando atau instruksi standard untuk memerintah komputer, untuk itu bahasa pemrograman merupakan suatu alat yang sangat penting bagi programer untuk mengoprasikan komputer. Salah satu bahasa pemrograman tersebut adalah HTML.

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuahPenjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Pada awalnya HTML hanyalah halaman-halaman berformat yang bisa dilihat oleh sedikit program browser. Sasaran awal HTML adalah menyajikan informasi teks yang memungkinkan pengguna terhubung atau beralih ke halaman-halaman web lainnya atau yang biasa disebut Hyperlink diantara isi dari website. Sekarang ini HTLM tidak hanya mampu memformat teks namun juga menyajikan grafik dan mengatur form-form data dan juga HTML mengalami perubahan dari HTML 1, 2, 3, 4 hingga yang terbaru yaitu HTML 5.

Makalah ini dibuat untuk berbagi pengetahuan seputar HTML5 kepada pembaca dan juga untuk melengkapi tugas kuliah Teknologi Informasi dan Komunikasi (TIK).

B.      RUMUSAN MASALAH

Permasalahan yang akan kami bahas dalam makalah ini yaitu:

Ø  Apa itu HTML5?

Ø  Sebutkan tujuan dibuatnya HTML5!

Ø  Sebutkan struktur dalam HTML5!

Ø  Sebutkan perbedaan antara HTML5 dengan HTML4!

Ø  Sebutkan keunggulan dari HTML5!

Ø  Apa saja fitur canggih dalam HTML5?

Ø  Sebutkan istilah-istilah pada HTML5!

Ø  Sebutkan tag-tag yang ada di HTML5!

C.     TUJUAN

Tujuan dalam penyusunan makalah ini yaitu:

Ø  Untuk mengetahui pengertian HTML5

Ø  Untuk mengetahui tujuan dibuatnya HTML5

Ø  Untuk mengetahui struktur yang ada pada HTML5

Ø  Untuk mengetahui perbedaan antara HTML5 dengan HTML4

Ø  Untuk mengetahui keunggulan  dari HTML5

Ø  Untuk mengetahui istilah-istilah yang ada pada HTML5

Ø  Untuk mengetahui fitur-fitur yang ada pada HTML5

Ø  Untuk mengetahui tag-tag yang ada di HTML5

BAB II

ISI

A.     PENGERTIAN HTML 5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Spesifikasi HTML5 menggambarkan dukungan video tanpa menentukan format video tertentu. Kami berpikir H.264 adalah format yg sangat baik untuk mendukung HTML5 nya, IE9 nantinya juga akan mendukung pemutaran video H.264 saja. H.264 adalah suatu standar industri, dgn dukungan hardware yg luas dan kuat. Karena standarisasi ini, Anda dapat dgn mudah menerima apa yg Anda rekam, meskipun dgn video pada kamera biasa, lalu meletakkannya di situs dgn sistem operasi atau perangkat dgn dukungan H.264.

Karena semua alasan tersebut, kita fokus HTML5 video dan dukungan pada H.264. Kendati format video akan sangat menarik jika dipasangkan dgn H.264, Hachamovitch mengakui bahwa mayoritas video internet saat ini masih didominasi berbasis Flash. Flash memang memiliki beberapa masalah, khususnya di sekitar keandalan, keamanan, dan kinerja. Meskipun saat ini, Flash tetap merupakan bagian penting dalam memberikan pengalaman konsumen yg terbaik di situs hingga hari ini.

Sejarah Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0. Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web."

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. Lalu apakah yang dimaksud dengan Semantic Web? Semantic berasal dari bahasa Yunani (Greek), merupakan bahasa pembelajaran semiotic, yakni pembelajaran untuk memahami penanda. Semantic sendiri mempunyai arti bahasa yang berfokus pada penanda untuk mengetahui arti yang terkandung di dalamnya.

Jadi, yang dimaksud semantic web adalah bahasa pemrograman yang mempunyai penanda khusus dalam implementasinya dengan tujuan agar mampu mendeskripsikan apa yang terkandung dalam website tersebut. Web semantic ini bukan hanya dikembangkan di Web 2.0, namun sudah ke Web 3.0 bahkan akan berkembang ke Web 4.0. Perkembangan teknologi benar-benar cepat sekali berubah.

B.      TUJUAN DIBUATNYA HTML 5

Ada beberapa alasan mengapa HTML diciptakan, alasan tersebut ialah:

Ø  Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript

Ø  Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )

Ø  Penanagan kesalahan yang lebih baik

Ø  Lebih markup untuk menggantikan scripting

Ø  HTML5 merupakan perangkat mandiri

Ø  Proses pembangunan dapat terlihat untuk umum.

C.     STRUKTUR PADA HTML5

            Layaknya dokumen standar lainnya, HTML5 juga memiliki struktur tertentu. Secara garis besar, struktur dokumen HTML5 cuma terdiri dari dua bagian, yaitu head dan body. Namun tentunya ada beberapa detail lain yang perlu diperhatikan juga. Bagian head diawali dengan tag <head> dan ditutup dengan pasangannya, yaitu </head>. Bagian body diapit oleh tag <body> dan </body>. Bagian head dan body tersebut harus diapit lagi oleh tag <html> dan </html>. Dan jangan lupa, di baris paling awal harus ada deklarasi dokumen HTML sebagai berikut:

Ø <!DOCTYPE html>

Jadi secara lengkap, struktur dokumen HTML5 terlihat seperti Listing 1. Listing 1 ini tidak ditujukan untuk dijalankan pada browser, melainkan hanya menunjukkan struktur dokumen HTML5 saja.

Ø Bagian Head

Bagian head HTML5 digunakan untuk menyimpan berbagai informasi mengenai isi dokumen tersebut. Paling sedikit, bagian head harus mengandung judul dokumen. Judul dokumen ini diapit oleh tag <title> dan </title> serta akan ditampilkan pada bagian title bar browser. Selain judul dokumen, bagian head dapat mengandung informasi-informasi berikut:

a)      Metadata: berisi berbagai data tambahan tentang dokumen HTML5 seperti nama pengarang/penulis, tanggal publikasi, deskripsi isi dokumen, kata kunci, dan lain-lain. Informasi ini dinyatakan oleh tag <meta> saja, tanpa tag penutup </meta>.

b)     Base URL: menentukan basis lokasi untuk link-link yang ada pada dokumen. Informasi ini dinyatakan oleh tag <base> saja, tanpa tag penutup </base>.

c)      Link: menentukan link ke dokuman lain yang terkait erat dengan dokumen HTML5, misalnya skrip CSS yang digunakan dalam desain halaman web. Informasi ini dinyatakan oleh tag <link> saja, tanpa tag penutup </link>.

d)     Objek: berisi informasi mengenai objek yang mungkin ada pada dokumen HTML5. Objek yang mungkin terkandung pada dokumen HTML5 antara lain adalah video, audio, dan animasi flash. Informasi ini dinyatakan dengan diapit oleh tag <object> dan </object>.

e)      Skrip: berisi informasi mengenai skrip pemrograman yang mungkin ada pada dokumen HTML5. Skrip pemrograman ini umumnya bersifat client-side seperti JavaScript. Informasi ini dinyatakan dengan diapit oleh tag <script> dan </script>.

f)        Style: berisi informasi mengenai desain halaman web dalam format CSS yang langsung dituliskan di bagian head, bukan pada dokumen terpisah. Jika hendak dituliskan pada dokumen terpisah, gunakan link. Informasi ini dinyatakan dengan diapit oleh tag <style> dan </style>.

Ø Bagian Body

Ø  Bagian body HTML5 merupakan bagian yang nantinya diterjemahkan dan ditampilkan oleh browser. Di bagian inilah terkandung berbagai tag yang menyatakan desain dokumen HTML. Jadi bisa dibayangkan pastilah akan banyak terdapat tag HTML yang bisa digunakan di bagian ini. Karena itu PCplus akan membahasnya sedikit demi sedikit mulai dari yang paling mudah terlebih dahulu. Yang pertama adalah paragraf. Sebuah dokumen yang terstruktur dengan baik pastilah terdiri dari beberapa paragraf. Untuk memisahkan antara satu paragraf dengan paragraf yang lain digunakan tag <p>. Tag ini harus ditutup dengan pasangannya, yaitu </p>.

Ø  Untuk sekedar ganti baris tanpa ganti paragraf, digunakan tag <br>. Karena tag ini tidak memiliki pasangan maka ditulis dengan <br />. Ganti baris pada dokumen HTML5 perlu diberi tag sendiri karena meski pada kode HTML-nya ganti baris tetapi browser tidak akan menampilkannya pada baris terpisah.

Ø  Untuk memberikan format tampilan tertentu terhadap teks, tersedia beberapa tag berikut:
• <b> dan </b> untuk menampilkan teks secara tebal.
• <i> dan </i> untuk menampilkan teks secara miring.
• <u> dan </u> untuk menampilkan teks dengan garis bawah.
• <font> dan </font> untuk menentukan jenis font.
• <img /> untuk menampilkan gambar.
• <hr /> untuk menampilkan garis horisontal.

Ø  Dalam menuliskan dokumen HTML5, yang sangat perlu diperhatikan adalah letak tag, jangan sampai tag pembuka dan penutup tumpang tindih. Berikut adalah contoh yang benar: <b><i>teks</i></b>.

D.     PERBEDAAN ANTARA HTML 5 DENGAN HTML 4

Berikut adalah perbedaan antara HTML 5 dengan HTML 4 maupun XHTML:

Ø  Aturan baru saat melakukan parsing berorientasi pada towards dan kompatibilitas; tidak berbasis pada SGML.Kemampuan untuk mendukung format SGV dan MathML pada text/html.

Ø  Elemen baru: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt,ruby, section, source, summary, time, video, wbr.

Ø  Tipe baru pada kontrol form : dates and times, email, url, search, color.

Ø  Atribut baru: ping (pada elemen a and area), charset (pada meta), async (pada script).

Ø  Atribut global (atribut berikut dapat diterapkan pada setiap elemen html) : id, tabindex, hidden, data-* (atribut data kustom).

Ø  Selain dapat bernilai GET atau POST, elemen attribut <form> kini telah mendukung nilai PUT dan DELETE.

Ø  Elemen yang telah deprecated secara bersamaan akan dihapus : acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u.

Ø  Bentuk doctype HTML 5 lebih sederhana, yaitu<!DOCTYPE html> , bandingkan dengan XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Berikut adalah Contoh penggunaan HTML 5:

<!DOCTYPE html>

<html>

 <head>

   <title>HTML5</title>

 <header>

   <h1 align="center">Header HTML 5</h1>

   <hr size=1 color="black"/>

   <p><time pubdate datetime="2011-03-15"></time></p> 

 </header>

 <nav>

   <a href="/home/">Home</a>

   <a href="/profil/">Profil</a>

   <a href="/contact/">Contact</a>

   <a href="/About Us/">About Us</a>

 </nav>

   <hr size=1 color="black"/>

 </head>

 <body>

   <article>

      <h3>HTML 5</h3>

           <p color="red">Ini adalah contoh penggunaan HTML   5</p>

      <img src="C:\Users\Public\Pictures\Sample Pictures\HTML5_Logo.png" width=200 ><br>

      <textarea rows="4" cols="50">

           ini adalah contoh textarea

      </textarea>

   </article>

  <hr size=1 color="black"/>

  <footer>

     © <i>design by </i> <span style="color:green">Dimas Setiawan</span>

  </footer>

 </body>

</html>

Berikut ini hasil dari sintaks diatas:

E.      KEUNGGULAN DARI HTML 5

HTML5 sendiri merupakan karya dari World Wide Web Consortium (W3C) untuk mendefinisikan sebuah bahasa pemrograman web tunggal baik itu dapat ditulis dengan cara HTML ataupun XHTML. Selama ini, pengembangan dari HTML 4.01 dn XHTML 1.1 berjalan secara terpisah dan diimplementasikan secara berbeda-beda oleh berbagai aplikasi pembuat website. Intinya, dengan HTML5 bahasa pemrograman web akan lebih universal dan menjadi bahasa pemersatu dari beberapa bahasa pemrograman web yang ada sekarang. Selain itu, banyak fitur dari HTML5 yang telah dibuat sedemikian rupa dan memungkinkannya untuk berjalan di perangkat mobile seperti smartphone dan tablet.

Html sendiri membawa beberapa fitur sintaks baru. Anda akan menemui tag <video>, <header>, dan elemen <canvas>. Selain itu tersedia juga integrasi konten SVG (Scalable Vector Graphics) yang menggantikan penggunaan tag <object>. Fitur-fitur baru tersebut didesain agar nantinya pada web developer mampu menggunakan konten multimediadan grafis tanpa perlubantuan dari plugin dan API (Application Programming Interface) lagi.

Beberapa elemen baru pun sudah dipersiapkan, seperti <section>, <article>, <header>, dan <nav>. Kesemuanya didesain untuk memperkaya isi dan konten dari web. Selain itu, terdapat juga beberapa attributebaru yang dikenalkan dan memiliki kesamaan tujuan yang sama. HTML5 pun lebih terasa ringkas karena menyederhanakan coding yang digunakan dalam versi HTML sebelumnya.

Beberapa elemen baru pada HTML5 :

<audio>   Untuk konten multimedia seperti musik.

<video>   Untuk video konten seperti klip video.

<section>Digunakan dalam pembentukan struktur dokumen.

<article>  Menunjukkan isi dokumen seperti blog atau artikel berita.

<aside>    Menunjukkan penggalan isi dokumen yang berhubungan dengan keseluruhan isi.

<header> Menunjukkan judul dari sebuah section.

<footer>  Menunjukan bagian kaki dokumen yang berisi informasi penulis, hak cipta, dan informasi lainnya.

<nav>      Digunakan untuk membuat navigasi dokumen.

<dialog>  Digunakan dalam menuliskan format dialog atau percakapan.

<figure>  Untuk mengasosiasikan dokumen dengan fitur embed video atau konten multimedia.

HTML5 telah dibekali dengan pengkodean baru, beberapa diantaranya adalah :

Ø  Elemen canvas, untuk menggambar object 2 dimensi (2D).

Ø  Timed media playback.

Ø  Media penyimpanan luring (aplikasi web luring).

Ø  Penyuntingan dokumen.

Ø  Drag-and-Drop.

Ø  Cross-Document messaging.

Ø  Manajemen history pada browser.

Ø  Tipe MIME.

Contoh Tag HTML 5 pada Blog

<!DOCTYPE html>
<html>
    <head>
        <title>Standart Blog<title>
    </head>
    <body>
        <header>
            <h1><a href="#">Standard Blog</a></h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Archives</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <section><li><a href="#"></a></li>
            <article>
                <header>
                    <h1><a href="#">Title</a></h1>
                </header>
                <section>
                    <p>Lorem ipsum...</p>
                </section>
            </article>
            <article>
                <header>
                    <h1><a href="#">Title</a></h1>
                </header>
                <section>
                    <p>Lorem ipsum...</p>
                </section>
            </article>
            <article>
                <header>
                    <h1><a href="#">Title</a></h1>
                </header>
                <section>
                    <p>Lorem ipsum...</p>
                </section>
            </article>
        </section>
        <footer>
            <p>Copyright @ 2012 All Right</p>
        </footer>
    </body>
</html>

Pengembang web bekerja tanpa lelah untuk membuat software yang streaming video, animasi layar dan mengintegrasikan dengan situs web Jaringan pribadi seperti Facebook dan Twitter. Dalam pencarian mereka untuk membuat aplikasi gambar dan video mereka harus belajar dan menerapkan alat-alat, termasuk Silverlight dan Flex atau tool JavaScript lainnya. Namun, ha ini meningkatkan waktu dan kompleksitas untuk mengembangkan Aplikasi Web umum dan perangkat lunak. Dengan dukungan HTML, audio dan embedding video mungkin, serta grafik dan gambar berkualitas.

·         Peningkatan membentuk elemen objek

Format HTML5 menawarkan bentuk ditingkatkan untuk mencari kotak, input teks dan bidang lain yang relevan dan menawarkan validasi data yang mudah dan interaksi dengan elemen halaman serta perbaikan yang berarti lainnya.

·         Geo-Lokasi

HTML5 mendukung fitur geo-lokasi canggih, terlepas dari apakah yang diberikan oleh GPS atau tidak, secara langsung diterapkan pada semua browser HTML5 kompatibel. Lintang Google pada iPhone adalah contoh terbaik dari Geo-lokasi. Aplikasi geo-lokasi benar-benar platform independen.

·         User-friendly interface

Format HTML5 juga fitur baru dan lebih baik Database API umum digunakan secara lokal. Sederhananya, ia menyediakan penyimpanan yang jelas database yang memberikan pengembang kesempatan untuk menyimpan atau menyimpan data terstruktur. Database ini digunakan ketika Anda ingin menyimpan belanja produk keranjang untuk situs belanja secara online.

HTML5 tidak dapat diandalkan dalam hal format karena web browser yang berbeda karena mereka tidak mendukung salah satu format tunggal. HTML5 tidak hanya menambah banyak fitur penting untuk website yang HTML4 tidak dapat menawarkan, tetapi juga arus fungsi website untuk mempromosikan pengalaman pengguna yang lebih baik. Yang paling dipuji fitur baru yang ditawarkan oleh HTML5 adalah penyimpanan offline dan pemutaran. Hal ini memungkinkan situs media menanamkan langsung dengan tag HTML sederhana seperti audio dan video tanpa memerlukan plugin. HTML5 untungnya didukung oleh semua browser besar seperti Internet Explorer, Chrome, Firefox, Opera dan Firefox meskipun pemilihan fitur yang didukung berbeda dari satu browser yang lain.

Selain keuntungan disorot di sini di atas, HTML5 Design menawarkan banyak manfaat lainnya yang seharusnya membuat Anda tidak ragu menggunakan versi ini dalam situs web Anda.

·         Pemberian pertolongan

Untuk meningkatkan kegunaan, web designer saat membuat website yang sangat interaktif dengan memasukkan memutar musik dan pilihan streaming video, animasi cairan dan situs jejaring sosial seperti Twitter dan Facebook di situs tersebut. Namun, sebelum HTML5 debut, mereka hanya bisa melakukannya dengan menggunakan Silverlight atau Flash, JavaScript atau Flex alat yang tidak hanya membuat aplikasi web lebih rumit, tetapi juga dikonsumsi banyak waktu. Namun, HTML5 Desain membuatnya lebih mudah untuk menanamkan audio dan video, animasi berkualitas tinggi, grafik dan gambar nyaman tanpa perlu menggunakan program pihak ketiga lainnya atau plugin.

·         Peningkatan semantik

Berkat HTML5, sekarang mudah untuk melihat header, footer, nav dan bagian lain dari halaman web sebagai tag sekarang lebih spesifik dan memahami tujuan utama mereka dan makna seluruh format yang. Kode desain web sangat standar sehingga meningkatkan semantik.

·         Kode Peningkatan

Dengan menggunakan HTML5, web designer dan pengembang menikmati bekerja dengan rapi dan kode bersih dengan menghapus sebagian besar tag div di situs.

·         Konsistensi

Sebagai website mengadopsi unsur-unsur baru dari HTML5, hal ini membantu untuk mencapai konsistensi yang lebih besar ketika datang untuk menggunakan HTML dalam pengkodean halaman web. Dengan demikian, HTML5 Desain jauh lebih mudah dan dimengerti dan desainer dapat dengan mudah mengetahui struktur dari halaman web.

·         Bentuk elegan

Web desainer dapat menggunakan bentuk pengujian dan HTML5 juga membuat validasi bentuk asli ke HTML, meningkatkan antarmuka pengguna dan mengurangi kebutuhan untuk JavaScript dalam pengembangan website.

Manfaat utama lainnya yang terkait dengan HTML5 yang seperti dukungan Geolocation dan meningkatkan aksesibilitas dari halaman web. Ini hanya menyoroti manfaat dari HTML5 dan para ahli percaya bahwa HTML5 akan berkembang menjadi bahasa pengembangan secara online penting dalam waktu dekat.

Browser yang Mendukung HTML

·         Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10)

·         Safari (mulai dari versi 3.1)

·         FireFox (Mulai dari FireFox 3 )

·         Google Chrome (Mulai dari versi 3)

·         Internet Explorer (Mulai dari versi 8)

F.      ISTILAH YANG ADA PADA HTML 5

Meskipun HTML5 belum dirilis secara resmi, tetapi banyak fitur HTML5 yang sudah diimplementasikan oleh browser-browser besar seperti Mozilla Firefox, Opera, Safari, dan Google Chrome. Ada baiknya Anda mengetahui fitur-fitur yang pastinya akan banyak dipakai di dunia Internet masa datang ini. Berikut ini adalah beberapa hal tentang HTML5 yang wajib Anda ketahui, yaitu:

1.         Deklarasi doctype baru.

Sebelum membuat sebuah halaman dengan HTML5, tentu saja doctype yang digunakan juga harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML, sehingga Anda tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, Anda harus menuliskannya dengan panjang.

2.         Struktur semantic.

Pada XHTML, programmer HTML bisa saja menjadi pembuat stress programmer CSS karena struktur halaman yang dibuatnya. Harus ada kesepakatan penamaan yang solid antara kedua pihak agar tidak ada masalah pembacaan struktur halaman. Biasanya, dalam XHTML akan dibuat sebuah “div” dengan id-nya masing-masing, seperti pada gambar.

Struktur tersebut tidak terlihat semantic, sulit dibaca dan dideskripsikan, serta bagi programmer HTML yang iseng, bisa saja id header diubah sesukanya. HTML5 menawarkan elemen-elemen yang umum digunakan dalam sebuah struktur halaman website. Sehingga, penulisan tag setiap elemen dapat terlihat lebih semantic dan mudah dibaca, seperti pada gambar.

Banyak manfaat jika menggunakan struktur seperti ini. Elemen “header” merepresentasikan header dari suatu section. Elemen “footer” juga merepresentasikan footer dari suatu section. Elemen “nav” cocok digunakan untuk merepresentasikan link navigasi. Sedangkan elemen “section” merepresentasikan suatu bagian generic dari dokumen.

3.         Contenteditable.

Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi langsung pada tampilan. Hasil tampilan dari kode di atas adalah memungkinkan untuk penambahan list dalam tag “ul” yang telah diberikan atribut tersebut. Jika dikombinasikan dengan sedikit Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang cukup powerful namun mudah untuk dibuat.

4.         Validasi email

Dengan validasi langsung di tampilan, Anda dapat mencegah seorang user untuk memanggil script website dengan input yang salah. Ini dapat mengurangi jumlah request yang tidak valid terhadap script program Anda. HTML5 menawarkan fitur validasi email secara langsung dengan mengubay type dari elemen input menjadi “email”. Sayangnya, masih belum semua browser memberikan support untuk fitur ini. Dari percobaan penulis, salah satu browser yang memiliki fitur ini adalah Opera.

5.         Atribut required

Satu lagi untuk input pada HTML5, memungkinkan validasi pada sisi client terhadap input yang harus diisi. Dengan demikian, Anda tidak perlu membuat fungsi javascript untuk melakukannya. Cukup menambahkan atribut “required” pada elemen “input”. Jika tombol submit ditekan, akan muncul pesan error.

6.         Internet Explorer Hack

Seperti biasanya, Internet Explorer selalu terlambat dalam mengimplementasikan teknologi website terbaru, meski Microsoft selalu memiliki teknologi sendiri seperti silverlight untuk browsernya tersebut. Pada IE, secara default semua elemen akan ditampilkan secara “inline”. Untuk itu, Anda harus mendeklarasikan style tersendiri agar tampilan dapat seperti seharusnya

Untuk kemudahan, seseorang bernama Remy Sharp telah membuat library javascript untuk mengatasi error yang dibuat oleh IE tersebut. Script ini biasa disebut dengan HTML5 shim. Anda bisa memasukkan kode di bawah ini ke dalam head halaman website Anda, atau mendownload script tersebut secara lokal.

7.         Masih banyak elemen html5 lainnya seperti canvas, video, audio, mark, dan sebagainya. Setiap elemen akan berperilaku berbeda di setiap browser, karena memang standart resimnya belum dikeluarkan oleh W3C. Untuk melihat kompatibilitas browser terhadap HTML5 dan CSS3

G.     FITUR-FITUR CANGGIH PADA HTML 5

Dari banyaknya hal-hal baru yang ditawarkan HTML5 berikut adalah beberapa yang paling canggih:

Ø  Canvas Elemen:

Dengan tag <canvas>, area tersebut dapat digunakan untuk menggambar grafik secara dinamis menggunakan javascript. Misalnya seperti shape lingkaran, garis diagonal, hingga grafik 3 dimensi.

Ø  Video & Audio Elemen:

Sebelum HTML5, menyisipkan video atau audio dalam HTML memerlukan bantuan plugin pihak ketiga seperti Apple Quicktime atau Adobe Flash. Dalam HTML5, cukup gunakan tag <video> untuk menyisipkan file  video, dan <audio> untuk file audio.

Ø  Geolocation:

Melacak posisi user bukanlah hal baru di internet, misalnya menggunakan IP addres detection. Namun metode ini tidak selalu dapat diandalkan. Dengan HTML5 dan javascript, posisi user dapat dilacak menggunakan informasi dari Wi-Fi dan GPS. Mirip seperti yang digunakan pada Smartphone.

Ø  Offline Web Application

HTML5 memungkinkan User untuk terus berinteraksi dengan aplikasi web tanpa harus selalu online. Misalnya mengedit dokumen pada google docs atau mengedit foto di situs olah gambar seperti picnic.com

Dan masih banyak fitur baru lainnya seperti kemampuan untuk Drag and Drop, text api, datagrid, Cross document mesaging, SVG elemen dan lainnya.

H.     TAG-TAG DALAM HTML5

Berikut Tag Tag Dalam Html5

<!–…–>	mendefinisikan komentar
<!DOCTYPE>	mendefinisikan jenis document
<a>	mendefinisikan hyperlink
<abbr>	mendefinisikan ringkasan/singkatan
<acronym>	tidak di dukung di html5
<address>	mendefinisikan alamat
<applet>	tidak di dukung di html5
<area>	mendefinisikan area
<article>New	mendefinisikan artikel
<aside>New	mendefinisikan content selain content halaman
<audio>New	mendefinisikan audio
<b>	mendefinisikan text tebal
<base>	mendefinisikan url dasar untuk semua link pada halaman
<basefont>	tidak di dukung di html5
<bdo>	mendefinisikan arah tampilan text
<big>	tidak di dukung di html5
<blockquote>	mendefinisikan kutipan
<body>	mendefinisikan element body
<br>	mendefinisikan baris baru
<button>	mendefinisikan document button/tombol
<canvas>New	Mendefinisikan Document grafis
<caption>	mendefinisikan document table caption
<center>	tidak di dukung di html5
<cite>	mendefinisikan kutipan
<code>	mendefinisikan text kode komputer
<col>	mendefinisikan atribut untuk kolom table
<colgroup>	mendefinisikan kolom table
<command>New	mendefinisikan perintah tombol
<datalist>New	mendefinisikan dropdown list
<dd>	mendefinisikan definisi deskripsi
<del>	mendefinisikan text yang di hapus
<details>New	mendefinisikan suatu elemen
<dialog>New	mendefinisikan dialog (conversation)
<dfn>	mendefinisikan definition term
<dir>	tidak di dukung di html5
<div>	mendefinisikan bagian dalam suatu document
<dl>	mendefinisikan daftar
<dt>	mendefinisikan istilah
<em>	mendefinisikan text rapat
<embed>New	mendefinisikan external content
<fieldset>	mendefinisikan fieldset
<figure>New	mendefinisikan isi media, dan keterangan
<font>	tidak di dukung di html5
<footer>New	mendefinisikan bagian footer
<form>	mendefinisikan formulir
<frame>	tidak di dukung di html5
<frameset>	tidak di dukung di html5
<h1> sampai <h6>	mendefinisikan header
<head>	mendefinisikan informasi tentang document
<header>New	mendefinisikan sebuah header untuk bagian suatu halaman
<hgroup>New	mendefinisikan informasi tentang bagian sebuah document
<hr>	mendefinisikan garis horisontal
<html>	mendefinisikan document html
<i>	mendefinisikan text italic
<iframe>	mendefinisikan inline sub frame
<img>	mendefinisikan gambar
<input>	mendefinisikan input
<ins>	mendefinisikan text yang disisipkan
<keygen>New	mendefinisikan sebuah kunci yang dihasilkan dalam bentuk
<kbd>	mendefinisikan text keyboard
<label>	mendefinisikana label untuk form
<legend>	mendefinisikan judul di fieldset
<li>	mendefinisikan list
<link>	mendefinisikan refrensi sumber
<map>	mendefinisikan peta gambar
<mark>New	mendefinisikan text yang ditandai
<menu>	mendefinisikan daftar menu
<meta>	mendefinisikan meta information
<meter>New	mendefinisikan ukuran yang sudah di tetapkan
<nav>New	mendefinisikan navigation link
<noframes>	tidak di dukung di html5
<noscript>	mendefinisikan bagian noscript
<object>	mendefinisikan sebuah object
<ol>	mendefinisikan daftar angka
<optgroup>	mendefinisikan grup pilhan
<option>	mendefinisikan drop-down option
<output>New	mendefinisikan beberapa jenis output
<p>	mendefinisikan paragraph
<param>	mendefinisikanparameter untuk sebuah objeck
<pre>	mendefinisikan text ke format awal
<progress>New	mendefinisikan kemajuan suatu tugas apapun
<q>	mendefinisikan kutipan pendek
<rp>New	digunakan untuk menentukan apakah browser mendukung ruby
<rt>New	menjelaskan tentanf penngunaan ruby
<ruby>New	mendefinisikan ruby annotations.
<s>	tidak di dukung di html5
<samp>	mendefinisikan sample computer code
<script>	mendefinisikan script
<section>New	mendefinisikan section
<select>	mendefinisikan selectable list
<small>	mendefinisikan text kecil
<source>New	mendefinisikan media resources
<span>	mendefinisikan bagian dalam sebuah document
<strike>	tidak di dukung di html5
<strong>	mendefinisikan text pekat/tebal
<style>	mendefinisikan style untuk css
<sub>	mendefinisikan subscripted text lawan pangkat
<sup>	mendefinisikan superscripted text pangkat
<table>	mendefinisikan table
<tbody>	mendefinisikan table body
<td>	mendefinisikan table cell
<textarea>	mendefinisikan text area
<tfoot>	mendefinisikan table footer
<th>	mendefinisikan table header
<thead>	mendefinisikan table header
<time>New	mendefinisikan date/time
<title>	mendefinisikan judul document
<tr>	mendefinisikan baris table
<tt>	tidak di dukung di html5
<u>	tidak di dukung di html5
<ul>	mendefinisikan daftar
<var>	mendefinisikan variable
<video>New	mendefinisikan video
<xmp>	tidak di dukung di html5

BAB III

PENUTUP

KESIMPULAN

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Selama ini, pengembangan dari HTML 4.01 dn XHTML 1.1 berjalan secara terpisah dan diimplementasikan secara berbeda-beda oleh berbagai aplikasi pembuat website. Intinya, dengan HTML5 bahasa pemrograman web akan lebih universal dan menjadi bahasa pemersatu dari beberapa bahasa pemrograman web yang ada sekarang. Selain itu, banyak fitur dari HTML5 yang telah dibuat sedemikian rupa dan memungkinkannya untuk berjalan di perangkat mobile seperti smartphone dan tablet.

Manfaat utama lainnya yang terkait dengan HTML5 yang seperti dukungan Geolocation dan meningkatkan aksesibilitas dari halaman web. Ini hanya menyoroti manfaat dari HTML5 dan para ahli percaya bahwa HTML5 akan berkembang menjadi bahasa pengembangan secara online penting dalam waktu dekat.Meskipun HTML5 belum dirilis secara resmi, tetapi banyak fitur HTML5 yang sudah diimplementasikan oleh browser-browser besar seperti Mozilla Firefox, Opera, Safari, dan Google Chrome. Ada baiknya Anda mengetahui fitur-fitur yang pastinya akan banyak dipakai di dunia Internet masa datang ini.

DAFTAR PUSTAKA

Wicaksono, Rosi Dian. 2012. Makalah tutorial HTML5. http://rossydian.wordpress.com. 19 Oktober 2013

Wibowo, Yanuar Sulistyo. 2012. Sejarah perkembangan HTML5. http://yanuarsulistyowibowo.blogspot.com. 19 Oktober 2013

Kurniawan, Edi. 2013. Sejarah dan pengertian HTML5. http://ti-cenatcenut.blogspot.com. 19 Oktober 2013

Pelita, Rezza. 2013. Kelebihan dan kekurangan HTML5. http://pelitarezza.blogspot.com. 19 Oktober 2013

Danang. 2012. Artikel tentang HTML5. http://danangsr.blogspot.com.  19 Oktober 2013

Anonim. 2012. Keunggulan dan panduan HTML5. http://perangkatlunak-cakrijal.blogspot.com. 19 Oktober 2013

Indam. 2010. Tag-tag dalam HTML5 lengkap. http://www.indaam.com. 19 Oktober 2013

Anonim. 2011.  Komponen HTML5 yang wajib diketahui. http://blog.haqqi.net . 19 Oktober 2013

Anonim. 2012. Struktur baru HTML5. http://tokotuaforex.blogspot.com. 19 Oktober 2013

Silakan Download PPTnya di http://www.4shared.com/file/1CoXTo3U/ppt_HTML.html