You are on page 1of 35

MENGENAL HTML5

Makalah ini disusun sebagai tugas mata kuliah Teknologi Informasi dan Komunikasi Dosen pengampu : Septia Lutfi,S.Kom, M.Kom

Oleh Dyah Ayu Wulandari 1102412106

KURIKULUM DAN TEKNOLOGI PENDIDIKAN FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013

DAFTAR ISI

Halaman Depan Daftar Isi Bab I Pendahuluan A. Latar Belakang B. Tujuan BAB II Pembahasan A. Pengertian B. Perkembangan HTML C. Sejarah HTML5 D. Perbedaan HTML dan HTML5 E. TAG, ATRIBUT dan VALUE

. .

1 2

. .

3 3

. . . ..

4 6 7 10 11 21

F. Jenis- Jenis Input Type yang .. Hanya ada di HTML5 G. Berbagai Contoh Penggunaan .. HTML DAFTAR PUSTAKA

23

... 35

BAB I PENDAHULUAN A. Latar Belakang HTML5 adalah versi terbaru teknologi hypertext/web yang sekarang ini masih dalam tahap pengembangan. HTML5 ini akan menjadi trend teknologi internet masa depan karena sudah diperkaya dengan fitur-fitur ungulan yang tentunya akan menjadi standard pengembangan media informasi berbasis web. Sekarang HTML5 sudah mulai digunakan pada beberapa situs-situs besar sebagai uji coba kelayakan fitur serta teknologi baru yang masih terus dikembangkan dari versi sebelumnya yaitu HTML 4.01. Fitur serta perbaikan yang ditanamkan dalam teknologi ini dintaranya adalah video dan audio, database lokal dan css3. Ada beberapa tambahan elemen serta atribut yang memungkinkan HTML5 ini lebih baik dari sebelumnya, walaupun secara mendasar perintah-perintah yang digunakan sangat mirip dengan HTML versi 4.01. B. Tujuan Makalah ini disusun agar kita dapat lebih mengenal HTML5 serta kita dapat mengetahui apa saja kegunaan dari HTML5. Selain itu kita juga akan mempelajari tentang perkembangan dari HTML5 itu sendiri. Apalagi bagi para bloger yang pastinya tudak asing dengan kata HTML, hampir semua komponen dalam blog menggunakan HTML, maka dari itu dalam kesempatan kali ini kita akan belajar tentang HTML5.

BAB II PEMBAHASAN A. Pengertian HTML yang singkatan dari HyperText Markup Language merupakan sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintahperintah HTML. HTML sendiri terdiri dari sejumlah perintah dimana kita bisa men-set judul, garis, table, gambar dan lain- lain yang disebut tag atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor. Setiap tag masih dapat dilengkapi lagi oleh sejumlah attribute. 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[1]) 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. 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. Contoh Struktur Dasar HTML5
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Judul halaman</title> </head> <body> <p>Contoh Isi Halaman</p> </body> </html>

Beberapa Fitur yang Dominan pada HTML5 Fitur Multimedia Dalam HTML5 kita bisa menambahkan video dan audio lebih mudah tanpa memerlukan komponen/librari tambahan. <video>...</video> <audio>..</audio> Fitur Grafik HTML5 menyediakan cara menanamkan objek gambar secara instan dengan fitur <svg>...</svg> untuk menambahkan jenis gambar SVG(Scalable Vector Graphics) dan <canvas>..</canvas> untuk membuat gambar. Fitur Aplikasi HTML5 juga menambahkan fitur aplikasi yang diperkaya dengan database lokal sehingga memungkinkan informasi disajikan lebih dinamis. Fitur Baru Dalam HTML5 Unsur kanvas untuk menggambar Video dan elemen audio untuk media pemutaran Dukungan yang lebih baik untuk penyimpanan secara offline Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search

Tujuan Dubuatnya HTML5 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

Kelebihan HTML5 Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya. Integrasi ('inline') dengan doctype yang lebih sederhana. Penulisan kode yang lebih efisien. Konten yang ada di situs lebih mudah terindeks oleh search engine

B. Perkembangan HTML Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara ketat. Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kodekode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.
1. HTML versi 1.0

Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya

(wrapping).
2. HTMl versi 2.0

Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.
3. HTML versi 3.0

HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2
4. HTML versi 4.0

HTML versi 4 ini memuat banyak sekali perubahan dan revisi dari pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain- lain.
5. HTML versi 5

HTML versi 5 ini merupakan HTML versi terakhir pada saat sumber ini diambil. Pada HTML ini memiliki fitur baru yaitu : Unsur kanvas untuk menggambar, Video dan elemen audio untuk media pemutaran, Dukungan yang lebih baik untuk penyimpanan secara offline, Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section, Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

C. Sejarah HTML5 HTML bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). Konsep HTML diciptakan pertama kali oleh IBM pada tahun 1980 pada saat tercetus ide untuk meletakkan elemen-elemen yang menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Lalu, pada akhirnya elemen-elemen itu menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis. Bahasa pemprograman untuk melakukan tugas tersebut disebut markup language, atau lebih lengkapnya IBM menamai program tersebut sebagai Generalized Markup Language (GML) Konsep ini pada tahun 1986 disetujui oleh ISO (International Standard Organization) sebagai standar bagi pembuatan dokumen-dokumen dengan keluarnya ISO 8879. ISO menamai GML ini menjadi SGML (Standard Generalized Markup Language). 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 CEOApple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web. Kelompok kerja untuk teknologi aplikasi web hypertext (WHATWG) mulai

menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0.hingga pada bulan maret 2010 spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam bagian pengurusan draft di W3C. Ian Hickson mewakili Google ,Inc menjadi editor HTML5. Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali

mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008.Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam tahap penyelesaian dan diimplementasikan pada penjelajah web sebelum keseluruhan spesifikasinya mencapai status rekomendasi final. Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008,tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C.WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009. Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi dapat berstatus Direkomendasikan - adalah "yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda, Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk. Markup Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>.[14][15][16] Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS). API Baru Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs) antarmuka document object model

(DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain: Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesifikasi 1.0 untuk canvas 2D. Timed media playback Media penyimpanan luring (aplikasi web luring). Lihat Web Storage Penyuntingan dokumen Drag and Drop Cross-document messaging Manajemen sejarah kunjungan penjelajah web Tipe MIME dan penanggung jawab protokol registrasi.

Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah: Geolocation Web SQL Database, media penyimpanan database local. API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB). Web Speech API

Penanganan Kesalahan Sebuah peramban web HTML5 (text/html) akan fleksiblel dalam menangani kesalahan sintaks. HTML5 telah didesain agar peramban web lama dapat dengan aman mengabaikan konstruksi HTML5 yang baru. Perbedaan mendasar dengan HTML 4.01 adalah spesifikasi HTML5 memberikan aturan detail untuk meleksikalkan dan memparsing sebagai persyaratan agar berbagai peramban web tetap memberikan hasil yang sama saat terjadi kesalahan sintaks. Meskipun HTML5 telah memiliki perilaku konsisten untuk menangani dokumendokumen "Tag Soup", dokumen seperti ini tidak dapat dikatakan telah memenuhi standar HTML5. Logo HTML5

Pada 18 Januari 2011, W3C memperkenalkan sebuah logo untuk representasi penggunaan dan tujuan HTML5. Tidak seperti logo lain yang sebelumnya telah diperkenalkan W3C, logo ini tidak mengisyaratkan validitas atau kesesuaian terhadap standar tertentu. Logo ini menjadi logo resmi sejak 1 April 2011. Saat logo ini pertama kali diperkenalkan ke muka publik, W3C menyatakan logo HTML5 ini sebagai sebuah "identitas visual secara umum bagi kumpulan berbagai teknologi open web, termasuk HTML5 CSS, SVG, WOFF, dan lainnya. Beberapa pendukung standar web, termasuk Proyek Standar Web (The Web Standards Project), mengkritik definisi "HTML5" sebagai istilah umum, terutama bahwa terjadi pengaburan terminologi dan potensi munculnya miskomunikasi. Tiga hari kemudian, W3C menanggapi umpan balik komunitas dengan mengubah definisi logo ini, yakni dengan menghapus bagian kesertaan berbagai teknologi terkait. W3C lantas menyatakan logo ini "representasi HTML5, si batu penjuru dari berbagai Aplikasi Web modern.

D. Perbedaan HTML dengan HTML5 1. Fitur Embed Video Directly. Biasanya kita sering menggunakan iframe pada tag HTML untuk mengembed video, sekarang anda tidak perlu lagi embed dengan iframe yang menyebabkan situs/blog anda sulit diakses. Fitur ini sering disebut canvas. 2. Templating Embeded Pada HTML sebelumnya, untuk membuat sebuah website. Kita harus mengerti tentang CSS. Sekarang anda bisa langsung membuat template website secara otomatis dengan HTML5. Contohnya: <header> jika anda ingin membuat header, <aside>untuk sidebar, <footer> untuk footer. dan masih banyak lagi. 3. Web worker. Kita sering menggunakan javascript, ketika multitrheading script yang kita buat terlalu banyak. Hal itu menyebabkan akses pada web menjadi lama. Web worker ini bisa menjadi penawar web yang menggunakan banyak javascript karena kabarnya bisa mempercepat tampilan website anda walaupun javascript yang terimplant pada website anda banyak.

10

4. Semantic HTML5 mengimplementasikan semantic terbaru, hal ini dilakukan agar pengguna tidak salah dalam menggunakan tag atau span. Semantic di HTML5 bisa memperbaiki semuanya, seperti pada pembuatan menu. Kita bisa menggunakan nav untuk membuat navigasi yang sempurna. 5. Local storage. Chace di optimisasi oleh webmaster terutama bagi web yang berat. Biasanya sering di aktivkan chace untuk web mereka jadi ketika anda mengakses situs mereka, anda tidak mendownload web mereka secara keseluruhan melainkan hanya updatenya saja. Namun chace juga mempunyai batasan. Hanya sedikit yang bisa di tampung dalam chace sehingga ketika web tersebut memang total sizenya banyak pasti banyak yang hilang. HTML5 sudah bisa menyimpan banyak bahkan video.

E. TAG, ATRIBUT dan VALUE Mungkin istilah TAG, ATRIBUT dan VALUE dalam HTML agak terlupakan, karena kebanyakan teman-teman yang sedang belajar membuat web sekarang lebih dimanjakan oleh editor web visual yang sangat praktis dan instan. Berikut ini saya coba mengingatkan kembali tentang 3 istilah dasar tersebut agar pemahaman serta penggunaan HTML lebih mudah. Sekarang mungkin sudah kurang trend lagi jika belajar membuat web harus menghafal perintah-perintah HTML yang lumayan banyak, lebih menyulitkan lagi perintah tersebut tidak dalam bahasa lokal sehingga sulit diingat secara detail ejaanya. Saya pribadi kadang juga kesulitan jika menuliskan kode html, apalagi dengan ejaan yang agak sulit di ucapkan seperti heightyang kadang tertulis terbalik hurufnya menjadi heigth, atauwidth yang kadang tertulis widht dan perintah lainya. 1. TAG TAG adalah penandaan yang dikenali oleh browser sebagai suatu instruksi untuk memformat tulisan, gambar, link, tabel, atau objek pada sebuah tampilan dokumen HTML. TAG biasanya dituliskan berpasangan, yang maksudnya adalah memberitahukan kepada browser dimana posisi awal dan posisi akhir sebuah format dokumen. Contoh penggunaan TAG yang sering digunakan:

11

Tag HTML <font></font>

Fungsi Mengubah jenis, warna, ukuran tulisan

<b></b> atau <strong></strong> Teks tebal <i></i> atau <em></em> <u></u> <pre></pre> <h1></h1> <h2></h2> <h3></h3> <sub></sub> <sup></sup> <ol><li></li></ol> <ul><li></li></ul> <marquee></marquee> Teks miring Teks garis bawah Preformatted teks Heading 1 Heading 2 Heading 3 Subscript Superscript Penomoran Bullet Teks Berjalan

TAG yang tidak berpasangan: Tag HTML Fungsi <br /> <hr /> <img ... /> <meta .../> Berpindah baris Membuat garis horizontal Memasukkan gambar Menyisipkan informasi halaman

Adapun Daftar Referensi TAG dan Kegunaannya: Nama Tag Basic Keterangan / Kegunaan

12

<!DOCTYPE> <html> <title> <body> <h1> to <h6> <p> <br> <hr> <!--...--> Formatting <acronym> <abbr> <address> <b>

Tag untuk menentukan tipe dokumen Tag untuk membuat sebuah dokumen HTML Tag untuk membuat judul dari sebuah halaman Tag untuk membuat tubuh dari sebuah halaman Tag untuk membuat heading Tag untuk membuat paragraf Memasukan satu baris putus Tag untuk membuat perubahan dasar kata didalam isi Tag untuk membuat komentar

Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5) Tag untuk membuat sebuah singkatan Tag untuk membuat kontak alamat Tag untuk membuat huruf bercetak tebal Mengisolasi bagian dari teks yang dapat diformat dalam

<bdi>

arah yang berbeda dari teks lain di luarnya (tag baru HTML5)

<bdo> <big>

Mengganti arah teks Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5) Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5) Tag untuk membuat judul karya Tag untuk membuat potongan kode komputer di antara text Tag untuk membuat teks yang telah dihapus dari dokumen Tag untuk membuat sebuah istilah definisi

<blockquote>

<center> <cite> <code> <del> <dfn>

13

<em>

Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5) Tag untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi di HTML5) Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen Tag untuk membuat input keyboard Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5) Tag untuk membuat pengukuran skalar Tag untuk membuat teks terformat Memperlihatkan kemajuan tugas (tag baru HTML5) Tag untuk membuat kutipan pendek Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5) Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur) Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5) Tag untuk membuat teks yang tidak lagi benar Tag untuk membuat contoh keluaran dari program komputer Tag untuk membuat teks kecil Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5) Tag untuk membuat teks penting Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)

<font>

<i>

<ins> <kbd> <mark> <meter> <pre> <progress> <q> <rp>

<rt>

<ruby> <s> <samp> <small> <strike> <strong> <sub>

14

<sup> <time> <tt>

Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat) Tag untuk membuat tanggal / waktu (tag baru HTML5) Tag untuk membuat teks teletype (tidak disupport lagi di HTML5) Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya Tag untuk membuat sebuah variabel Tag untuk membuat kemungkinan garis-putus

<u> <var> <wbr> Forms <form> <input> <textarea> <button> <select> <optgroup> <option> <label> <fieldset> <legend>

Tag untuk membuat sebuah form HTML untuk input pengguna Tag untuk membuat sebuah kontrol input Tag untuk membuat sebuah kontrol input multibaris (text area) Tag untuk membuat sebuah tombol yang dapat diklik Tag untuk membuat sebuah daftar drop-down Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down Tag untuk membuat pilihan dalam daftar drop-down Tag untuk membuat sebuah label untuk sebuah elemen <input> Grup unsur terkait dalam bentuk Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details> Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5) Tag untuk membuat key-pair generator kolom input (tag baru HTML5)

<datalist>

<keygen>

15

<output> Frames <frame>

Tag untuk membuat hasil penghitungan (tag baru HTML5)

Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5) Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5) Tag untuk membuat sebuah konten alternatif untuk

<frameset>

<noframes>

pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5)

<iframe> Images <img> <map> <area> <canvas>

Tag untuk membuat sebuah bingkai

Tag untuk membuat gambar Tag untuk membuat gambar-peta Tag untuk membuat area dalam gambar-peta Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5) Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5) Menentukan konten mandiri (tag baru HTML5)

<figcaption> <figure> Audio/Video <audio> <source>

Tag untuk membuat isi suara (tag baru HTML5) Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5) Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag baru HTML5) Tag untuk membuat sebuah video atau film (tag baru HTML5)

<track>

<video> Links <a>

Tag untuk membuat hyperlink

16

Tag untuk membuat hubungan antara dokumen dan sumber <link> daya eksternal (paling sering digunakan untuk link ke style sheet) <nav> Lists <ul> <ol> <li> <dir> <dl> <dt> <dd> <menu> <command> Tables <table> <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col> Tag untuk membuat tabel Tag untuk membuat sebuah caption tabel Tag untuk membuat sebuah sel header tabel Tag untuk membuat baris dalam sebuah tabel Tag untuk membuat sel dalam sebuah tabel Mengelompokan isi header dalam sebuah tabel Mengelompokanisi tubuh dalam sebuah tabel Mengelompokan isi footer dalam sebuah tabel Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat Tag untuk membuat daftar dengan selain nomor Tag untuk membuat daftar dengan nomor Tag untuk membuat sebuah item daftar Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5) Tag untuk membuat sebuah daftar definisi Tag untuk membuat istilah (item) dalam daftar definisi Defines a description of an item in a definition list Tag untuk membuat deskripsi dari item dalam daftar definisi Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag baru HTML5) Tag untuk membuat navigasi link (tag baru HTML5)

<colgroup>

17

Style/Sections <style> <div> <span> <header> Tag untuk membuat informasi style untuk dokumen Tag untuk membuat sebuah bagian dalam dokumen Tag untuk membuat sebuah bagian dalam dokumen Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5) Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5) Pengelompokan elemen heading (<h1> sampai <h6>) (tag baru HTML5) Tag untuk membuat bagian dalam dokumen (tag baru HTML5) Tag untuk membuat sebuah artikel (tag baru HTML5) Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5) Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5) Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5) Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5)

<footer>

<hgroup>

<section> <article> <aside>

<details>

<dialog>

<summary> Meta Info <head> <meta> <base>

Tag untuk membuat informasi tentang dokumen Tag untuk membuat metadata tentang dokumen HTML Menentukan URL dasar / target untuk semua URL relatif dalam dokumen Menentukan standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5)

<basefont> Programming

18

<script> <noscript>

Tag untuk membuat script di sisi klien Tag untuk membuat sebuah konten alternatif bagi pengguna yang tidak mendukung script di sisi klien Tag untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di HTML5) Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-HTML) (tag baru HTML5) Tag untuk membuat sebuah objek yang ditanam Tag untuk membuat sebuah parameter untuk objek

<applet>

<embed> <object> <param>

2. ATRIBUT Atribut dalam HTML adalah perintah yang disisipkan/ditempelkan pada TAG utama yang tujuanya adalah mengatur bentuk/gaya tampilan sebuah objek. Contoh penggunaan atribut yang ditempelkan pada H1: <h1 align="center">Saya Belajar Tag HTML</h1> Anda lihat diatas, kita membuat tulisan dengan tampilan heading 1 (judul) dan kemudian ditempelkan atribut align yang fungsinya mengatur letak horizontal di layar. Sebuah TAG boleh menggunakan lebih dari 1 atribut yang relevan. Contoh: <font size="3" face="arial" color="red">Merdeka atau Mati</font> Contoh TAG font diatas menggunakan atribut size (ukuran) dan face(jenis huruf) dan color(warna tulisan). Yang dimaksud relevan adalah, sebuah TAG tidak bisa diberikan atribut diluar kemampuanya. Contoh: TAG font tidak bisa ditempelkan atribut align, karena font adalah bentuk huruf bukan format tulisan, sebaliknya seperti itu, h1 tidak bisa diberi atribut face karena h1 adalah format tulisan bukan bentuk huruf. Trus bagaimana jika ingin menggabung keduanya?? Biasanya dituliskan dengan cara: <h1><font face="arial">Saya belajar Tag</font></h1> Id dan name

19

Id dan Name memrupakan atribut dari HTML5, banyak orang yang sering kali bingung bagaimana membedakan dua atribut ini. Untuk dapat membedakannya, mari kita lihat contoh di bawah ini: <div id="menu">Contoh penggunaan id pada div</div> <p id="judul">Contoh penggunaan id pada paragraf</p> <input type="text" name="nama" /> <input type="text" name="nama" id="nama" /> Bisa kita lihat pada contoh diatas, ada beberapa model penggunaan id dan name. Untuk 2 contoh yang diterapkan pada tag div dan p, tujuanya adalah memberikan identitas unik pada tag tersebut agar tampilanya bisa diatur dengan css. Sedangkan pada contoh berikutnya name digunakan pada tag objek form dengan tujuan memberi nama unik yang bisa diakses melalui server side seperti php. Perbedaan id dan name dalam html : id memiliki ruang lingkup kerja sebuah halaman dan lebih dikhususkan untuk ditangani dengan css atau javascript, id yang diberikan pada sebuah tag/objek pada sebuah halaman harus unik. name memiliki ruang lingkup pada sebuah form, tidak diperkenankan terjadi duplikat pada form yang sama. name dikhusukan untuk penanganan dengan metode GET atau POST pada saat sebuah form dikirim ke sebuah proses dengan pemrograman seperti php. 3. VALUE Value adalah nilai yang diberikan pada sebuah atribut. Value ada beberapa jenis, bisa value text seperti left, right, center, red, blue, bisa juga angka 1, 2, 3, bisa juga bentuk pixel : 100, 200, atau bentuk persen 100%, 30%, ada juga yang bentuk hexa seperti warna yang ditulis color="#000" dll. Untuk value juga harus relevan, tidak bisa sembarangan. Contoh: align (ini untuk mengatur posisi) tidak boleh ditulis align="1" atau sebaliknya size="center". Catatan:

20

Jika kita mengikuti perkembangan TAG HTML memang kadang sedikit membingungkan apalagi sekarang perbendaharaan TAG sudah bertambah dengan hadirnya HTML5, ditambah lagi dengan dukungan CSS. Tapi TAG-TAG yang lama masih berlaku dengan baik, walaupun dari segi penulisan sudah tidak efisien lagi karena sekarang sudah digantikan dengan penggunaan CSS yang bisa lebih mudah dan sempurna. F. Jenis- jenis Input Type yang hanya ada dalam HTML5 1. Input Type: Color Fitur ini dapat digunakan agar pengguna memilih warna. Hanya Berlaku Pada Web Browser / Web Browser Support: Google Chrome, Opera Codenya: Pilih Warna Favorit Anda: <input type="color" name="favcolor"> 2. Input Type: Date Fitur ini dapat digunakan agar pengguna Tanggal. Hanya Berlaku Pada Web Browser / Web Browser Support: Google Chrome, Opera, Safari Codenya: Birthday: <input type="date" name="bday"> 3. Input Type: Datetime Fitur ini dapat digunakan agar pengguna Tanggal dan Bagian Waktu. Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Safari Codenya: Birthday: <input type="date" name="bday"> 4. Input Type: DatetimeLocal Fitur ini dapat digunakan agar pengguna Tanggal dan Bagian Waktu. Tidak menggunakan Zona Waktu. Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Safari Codenya: Birthday (date and time):<input type="datetime-local" name="bdaytime"> 5. Input Type: Email Fitur ini dapat digunakan agar pengguna Dapat memasukan email, tanpa di verifikasi email check

21

Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Mozilla Firefox, Google Chrome Codenya: E-mail: <input type="email" name="usremail"> 6. Input Type: Month Fitur ini dapat digunakan agar pengguna Dapat memilih Bulan Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Safari, Google Chrome Codenya: Birthday (month and year):<input type="month" name="bdaymonth"> 7. Input Type: Month Fitur ini dapat digunakan agar pengguna Dapat memilih Bulan Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Safari, Google Chrome Codenya: Birthday (month and year):<input type="month" name="bdaymonth"> 8. Input Type: Range Fitur ini dapat membuat pengguna memilih sebuah angka rata rata Hanya Berlaku Pada Web Browser / Web Browser Support: Opera, Safari, Google Chrome Codenya: <input type="range" name="points" min="1" max="10"> 9. Input Type: Search Fitur ini dapat membuat kotak search dengan program sederhana Hanya Berlaku Pada Web Browser / Web Browser Support: Safari, Google Chrome Codenya: Search Google: <input type="search" name="googlesearch"> 10. Input Type: Tel Fitur ini dapat membuat telephone input Hanya Berlaku Pada Web Browser / Web Browser Support: Belum saya ketahui Codenya: Telephone: <input type="tel" name="usrtel"> 11. Input Type: Time

22

Fitur ini dapat membuat time input Hanya Berlaku Pada Web Browser / Web Browser Support: Google chorme, opera, safari Codenya: Select a time: <input type="time" name="usr_time"> 12. Input Type: URL Fitur ini dapat membuat URL Input Hanya Berlaku Pada Web Browser / Web Browser Support: Google chorme, opera, Mozilla Firefox Codenya: Add your homepage: <input type="url" name="homepage"> 13. Input Type: Week Fitur ini dapat membuat visitor memilih bulan pada form yang ada Hanya Berlaku Pada Web Browser / Web Browser Support: Google chorme, opera, Safari Codenya: Select a week: <input type="week" name="week_year">

G. Berbagai Contoh Penggunaan HTML5 1. Cara membuat Drag and Drop pada HTML5 Drag and drop, adalah sebuah fitur yang dapat digunakan menggunakan bahasa pemrogramman HTML5. Aslinya juga bisa menggunakan flash, namun jika anda tidak pandai menggunakan flash, bisa juga menggunakan HTML5ini. Maka dari itu, kali ini saya akan memberitahu anda cara membuat fitur drag and drop menggunakan bahasa pemrogramman HTML5. Langkah 1 Langkah 2 : siapkan dulu file yang anda ingin ada fitur drag and drop nya. : buat style kotak sebagai tempat untuk pengdrop-an gambar yang di inginkan.

Kita buat secara simple saja. Masukkan kode ini di dalam tag <head> <style type="text/css">

23

#posisi {width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;} </style> Kode diatas untuk membuat kotak tempat kita nge drop gambarnya nanti Langkah 3 : Kita masukan script functionnya, agar kita dapat mengdrag and drop nya.

Masukan script ini, dibawah code style yang diatas. Di dalam tag <head> juga.
<script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script>

Kode diatas adalah function function yang dibutuhkan untuk meng drag and drop konten yang kita inginkan. Langkah 4 : Kita masukan kode ini ke tempat yang kita ingin kan. Yang pasti tetap berada

di dalam tag <body>


<p>Contoh drag and drop</p> <div id="posisi" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="http://www.jagocoding.com/images/socials/email.png"

24

draggable="true" ondragstart="drag(event)" width="336" height="100">

Agar kotak yang sudah kita buat sebagai tempat drop nya ada, maka kita tambahkan kode yang bagian div id="posisi" agar ada tempat sebagai pengedroppan gambar. Nah, lantas apa yang bisa membuat gambar itu di drag? dengan kode draggable="true" dan ondragstart nya itu. Agar dapat menjalankan fungsi drag and dropnya. Contoh kode Keseluruhan:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #posisi {width:350px;height:150px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Contoh drag and drop</p>

25

<div id="posisi" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="http://www.jagocoding.com/images/socials/email.png" draggable="true" ondragstart="drag(event)" width="336" height="100"> </body> </html>

2. Cara Membuat Bentuk Seperti gambar di bawah ini:

<!DOCTYPE HTML> <html> <head> <style> #myCanvas { border: 1px solid #9C9898; } </style> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150);

26

context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); // add linear gradient var grd = context.createLinearGradient(230, 0, 370, 200); // light blue grd.addColorStop(0, "#8ED6FF"); // dark blue grd.addColorStop(1, "#004CB3"); context.fillStyle = grd; context.fill(); // add stroke context.lineWidth = 5; context.strokeStyle = "blue"; context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>

3. Cara Membuat Bentuk Seperti Gambar di bawah ini:

<!DOCTYPE HTML> <html> <head>

27

<style> #myCanvas { border: 1px solid #9C9898; } </style> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = "#8ED6FF"; context.fill(); context.lineWidth = 5; context.strokeStyle = "black"; context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>

4. Cara Memasukkan Video & Audio Menggunakan HTML5 Sebelumnya kita perlu mengatahui bahwa setiap browser men-support audio dan video dengan tipe yang berbeda-beda, jadi yang paling baik itu kalau kita menyediakan video/audio yang sama dengan format yang berbeda-beda Mari kita mulai dengan audio, kode paling dasar untuk memasukkan audio seperti begini:
<audio> <source src="namafile.ogg" type="audio/ogg"> Teks ini akan muncul jika browser tidak support HTML5 audio tag.

28

</audio>

<source> berfungsi untuk memainkan audio yang dipilih, file audio harus bertipe ogg (audio/ogg) atau wav (audio/wav) atau mp3 (audio/mpeg), beberapa source bisa dimasukkan (contohnya mp3 dan ogg, jadi kalau browser tidak support mp3 tapi ogg audio masih bisa dimainkan, atau sebaliknya) Di tag audio, ada beberapa properti yang bisa dimasukkan: autoplay berfungsi agar audio otomatis di-play setelah siap untuk dimainkan controls berfungsi menampilkan tombol play,pause,volume, dll. loop berfungsi agar audio dimainkan berulang-ulang muted apakah audionya mau di-mute atau tidak preload (auto, metadata, none) apakah audionya load pada saat pagenya sedang diload? src menunjukkan URL dari audio yang akan dimainkan (yang ini tidak diperlukan kalau sudah ada <source>) Sedangkan untuk video, pada dasarnya mirip audio
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

Format video harus mp4 atau webM atau ogg (lagi, setiap browser mendukung format yang berbeda-beda) Untuk properti, semuanya sama dengan untuk <audio>, hanya saja ada beberapa properti yang ada di <video> tapi tidak ada di <audio> width & height untuk mendefiniskan lebar dan tinggi video poster mendefinisikan URL gambar yang akan dimunculkan saat videonya sedang buffer, atau sebelum di-play oleh user. 5. Cara membuat Animasi Sederhana menggunakan HTML5 Langkah 1 : kita mulai dengan basic markup:

29

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>

Langkah 2

: Setelah itu kita tambahkan sedikit style dan tag <canvas>

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Canvas</title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> </body> </html>

Langkah 3

: Sekarang, kita akan membuat sebuah kotak di canvas tersebut

window.onload=function() { c=document.getElementById("canvas"); a=c.getContext('2d'); a.fillRect(0,100,50,50); };

Cara kita membuat kotak tersebut bergeser ke kanan adalah dengan menghapus kanvas tersebut, membuat ulang kotak tapi kali ini kotaknya sedikit ke kanan, menghapus kanvas lagi, membuat kotak lagi, dst.

30

Untuk mendapatkan efek seperti itu kita harus memasukkan dalam function dan memanggil function itu terus-menerus. Mari kita edit kodenya:
window.onload=function() { c=document.getElementById("canvas"); a=c.getContext('2d'); x=0; y=100; animate(); function animate() { a.clearRect(0,0,c.width,c.height); a.fillRect(x,y,50,50); x+=2; setTimeout(animate,30); } };

Jadi, posisi dari si kotak tersebut tersimpan dalam variabel x dan y, ketika fungsi animate() dijalankan, canvas dihapus, menggambar kotak sesuai dengan x dan y, kemudian menambah nilai x dengan 2 (biar bergeser ke kanan) dan membuat timeout untuk menjalankan fungsi animate() tersebut setelah 30 millisecond, jadi karena nilai x bertambah, posisi kotak akan terus ke kanan. 6. Cara Membuat Blog Valid HTML5
Langkah 1 Langkah 2 : Backup template sebelum melakukan editing : Cari kode seperti ini :

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlb:version='2'class='v2'expr:dir='data:blog.languageDirection'xml ns='http://www.w3.org/1999/xhtml'xmlns:b='http://www.google.com/2005/ gml/b'xmlns:data='http://www.google.com/2005/gml/data'xmlns:expr='htt p://www.google.com/2005/gml/expr'> <head>

Ganti dengan kode ini:


<?xml version="1.0" encoding="UTF-8" ?>

31

<!DOCTYPE html> <HTML> <head> <metacharset='utf-8'/>

Langkah 3
Langkah 4

: Ganti kode </html> dengan </HTML> (paling bawah di template)


: ganti kode ini :

<b:includedata='blog'name='all-head-content'/>

dengan kode di bawah ini :


<metacontent='text/html; charset=UTF-8'http-equiv='Content-Type'/> <metacontent='blogger'name='generator'/> <linkexpr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;'rel='icon'type='image/x-icon'/> <linkexpr:href='data:blog.url'rel='canonical'/> <linkexpr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'expr:title='data:blog.title + &quot; - Atom&quot;'rel='alternate'type='application/atom+xml'/> <linkexpr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;'expr:title='data:blog.title + &quot; - RSS&quot;'rel='alternate'type='application/rss+xml'/> <linkexpr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;'expr:title='data:blog.title + &quot; Atom&quot;'rel='alternate'type='application/atom+xml'/> <linkhref='http://www.blogger.com/openidserver.g'rel='openid.server'/> <linkexpr:href='data:blog.homepageUrl'rel='openid.delegate'/> <b:ifcond='data:blog.pageType == &quot;item&quot;'> <b:ifcond='data:blog.postImageThumbnailUrl'> <linkexpr:href='data:blog.postImageThumbnailUrl'rel='image_src'/> </b:if> <b:ifcond='data:blog.metaDescription != &quot;&quot;'> <metaexpr:content='data:blog.metaDescription'name='description'/> <b:else/> <metaexpr:content='data:blog.pageName + &quot; - &quot; + data:blog.title'name='description'/> </b:if> </b:if>

Langkah 5

: Ganti <b:skin><![CDATA[ dengan kode dibawah :

32

<linkhref='//www.blogger.com/static/v1/widgets/3950009988widget_css_bundle.css'rel='stylesheet'type='text/css'/> &lt;style type=&quot;text/css&quot;&gt; &lt;!-/*<b:skin><![CDATA[*/]] <style>

Langkah 6

: Hapus semua kode ini :

<b:includename='quickedit'/>

Setiap kali menambahkan widget baru, hapus kode di atas. Langkah 7 Langkah 8 : Hapus semua kode ini (opsional) : Hapus kode seperti ini:

<aexpr:name='data:post.id'/> <b:includedata='post'name='postQuickEdit'/>

Atau seperti ini


<b:includableid='postQuickEdit'var='post'> <b:ifcond='data:post.editUrl'> <spanexpr:class='&quot;item-control &quot; + data:post.adminClass'> <aexpr:href='data:post.editUrl'expr:title='data:top.editPostMsg'> <imgalt=''class='iconaction'height='18'src='http://img2.blogblog.com/img/icon18_edit_allbk g.gif'width='18'/> </a> </span> </b:if> </b:includable>

Langkah 9 Langkah 10

: Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja) : Ganti semua code & dengan &amp;

<divclass='post-share-buttons goog-inline-block'>...sampai...</div>

Sampai di sini, template sobat sudah bisa Valid HTML5 untuk Homepage. Akan tetapi pada postingan masih banyak error karena komentar blogger (kecuali komentar hack seperti blog ini). Mudah-mudahan saya bisa share cara mem-fix-an postingan. Harap Diperhatikan Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini : 1. Selalu gunakan tag alt pada gambar, contoh :
<imgalt="HTML5"src="http://2.bp.blogspot.com/H1eAI5Oya4w/UhqgqupQnyI/AAAAAAAAFLw/uPEK6ueaL2Q/s1600/html5.png" />

33

2. Jangan gunakan border="0" pada gambar, sebagai gantinya tambahkan kode :


style="border:none"

atau CSS terpisah seperti


img{border:none}

3. Pada

iFrame,

jangan

menggunakan

frameborder="0"

atau

allowtransparency:"true"scrolling="no", sebagai gantinya gunakan kode :


style="border:none;overflow:hidden"

atau CSS terpisah seperti


iframe{border:none;overflow:hidden}

4. Pada tag a jangan menggunakan tag name seperti :


<a name='comment-form'>

sebagai gantinya gunakan id seperti :


<a href='#comment-form'>

5. Jangan ada dua id pada template. 6. Hapus kode <b:include name='quickedit'/> setiap menambah widget baru.

34

DAFTAR PUSTAKA

http://mkr-site.blogspot.com/2012/07/apa-itu-html5-dan-kelebihannya.html http://mkr-site.blogspot.com/2012/07/apa-pengertian-html-dan-penggunaannya.html http://www.zainalhakim.web.id/posting/contoh-penggunaan-html5.html http://www.w3function.com/blog/?p=det&idn=77 http://intuts.blogspot.com/2012/10/html-vs-html5-apa-sih-perbedaannya.html http://www.zainalhakim.web.id/posting/pengertian-istilah-tag-atribut-value-html.html http://blog.kangismet.net/2013/08/cara-membuat-blog-valid-html5.html

35