Dosen :
Bapak Nanang Suryadi
E-commerce
FEB UB
Penjelasan Singkat Tentang HTML 5
HTML5
merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi
dari World Wide Web, sebuah teknologi inti dari Internet.
HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.
Dimana
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 hasil proyek
dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext
Application Technology Working Group ).
Dimana WHATWG bekerja dengan
bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada
tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk
versi baru dari HTML.
Berikut tujuan dibuatnya HTML5 :
- Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
- Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
- Penanganan kesalahan yang lebih baik
- Lebih markup untuk menggantikan scripting
- HTML5 merupakan perangkat mandiri
- Proses pembangunan dapat terlihat untuk umum
Pembuatan
HTML5 ini berguna untuk memperbaiki kesalahan/ kekurangan dari HTML4
misalnya saja : untuk memanggil file flash (.flv) biasanya kan
menggunakan :
<object type="application/x-shockwave-flash"
width="400" height="220" wmode="transparent"
data="flvplayer.swf?file=movies/holiday.flv"><param name="movie"
value="flvplayer.swf?file=movies/holiday.flv" /><param
name="wmode" value="transparent" /></object>
pada HTML5 fitur itu berubah menjadi :
<video src=video.mp4></video>
dengan
itu kita bisa mengerti, bahwa tujuan di buatnya HTML5 yaitu untuk
memudah kita melakukan proses edit suatu web, sehingga source kodenya
tidak akan menjadi banyak.
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.
Beberapa
browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan
opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur
dari HTML5.
Elemen Baru Di HTML5
Demi mewujudkan struktur
halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah
beberapa elemen baru, diantaranya :
- Section serupa seperti h1-h6
- Article bisa berupa entri blog atau tulisan konten
- Aside menyajikan konten pelengkap
- Header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
- Footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
- Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
- Yang
fenomenal adalah penggunaan elemen figure, video, audio, source, embed,
canvas dan elemen terkait berkas multimedia lainnya.
Atribut Baru Di HTML5
Dikenalkan pula beberapa atribut baru, seperti :
- Atribut media, ping pada elemen pranala,
- Autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan form
- Reversed pada elemen ol untuk urutan besar ke kecil.
Perubahan Makna Elemen
Ada beberapa elemen yang berubah makna, diantaranya :
- Elemen
b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang
ingin ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang).
Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal
yang sama berlaku pula untuk elemen i.
- Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.
- Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.
Elemen Dan Atribut Yang Tidak Digunakan
Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5 :
- center,
- font
- strike, u, big
- frame, frameset, noframes
- acronym
- longdesc
- scope pada td
Apakah Browser Saya Support HTML5?
Bagaimana
caranya untuk menguji apakah browser yang anda install itu sudah
support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport?
Caranya cukup mudah, pertama-tama pastikan komputer anda sudah
terhubung dengan internet dan arahkan ke alamat web sebagai berikut:
http://html5test.com
Dari data yang ada pada website itu didapatkan :
- Maxthon 3.4.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor
- Google Chrome 20 dengan 414 total skor
- Opera 12.00 dengan 385
- Firefox 13 dengan 345
- Safari 5.1 dengan 317
- Internet Explorer 9 dengan 138 point.
Sumber : http://ah-shared.blogspot.com/2013/05/apa-itu-html5.html
Berikut tag tag dalam html5
disusun berdasarkan abjad
Tag dan Deskripsi
<!–…–>
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
keterangan*
tag-tag diatas saya ambil dari w3school.com
yang di beri tanda merah adalah tag baru(hanya di html5), dimana tag tadi tidak ada di html 4
tag-tag baru tadi belum support di semua browser
yang di beri warna biru adalah tag html yang tidak support di html5
sumber : http://www.indaam.com/2010/05/tag-tag-dalam-html5-lengkap/
Contoh Penulisan Struktur HTML5
Struktur
penulisan script web yang terbaru yaitu HTML5 memang sedikit berbeda
dari biasanya, struktur lebih mudah dipahami . Berikut ini contoh
struktur penulisan HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Your Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Judul Artikel</h2>
</header>
<p>Bagaimana
cara membuat Blog? Apakah membuat blog itu harus membayar? Pertanyaan
itu sering muncul ketika seseorang ingin membuat blog. Ada beberapa
aplikasi yang dapat digunakan untuk membuat blog, baik yang bersifat
gratis maupun berbayar. Pada bagian ini akan diuraikan beberapa
aplikasi yang dapat digunakan untuk membuat blog secara
gratis.</p>
</article>
<article>
<header>
<h2>Judul Artikel</h2>
</header>
<p>Pada
awal munculnya Blog, aplikasi ini sering digunakan orang untuk
menulis catatan kegiatan. Kala itu, blog berperan seperti catatan
harian (diary) yang hanya berisi ungkapan perasaan seseorang. Namun
perkembangan selanjutnya, Blog dimanfaatkan untuk membangun image
branding, memperkuat diri sebagai tought leader melalui ide-ide dan
inovasi baru, sarana komunikasi dan hubungan masyarakat, sarana
pendidikan secara online dan masih banyak lagi manfaat lain.</p>
</article>
</section>
<aside>
<h2>Informasi Penulis</h2>
<p>Nama
saya Zainal Hakim, saya seorang pengembang web yang tinggal di
Banjarmasin – Kalimantan Selatan. Selamat belajar web di Blog Zainal
Hakim.</p>
</aside>
<footer>
<p>Copyright 2013. By Zainal Hakim</p>
</footer>
</body>
</html>
Sumber : http://html5.blog.amikom.ac.id/
Download File disini :
Word :
HTML 5
PDF :
HTML 5