Mengenal HTML5

Posted by : fadly injoker 2017/07/22

Belajar HTML - Mengenal HTML5
BLC Telkom - KPLI Klaten

Latar Belakang

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

Yang paling menarik elemen HTML5 baru:

New unsur semantik seperti <header>, <footer>, <article>, dan <section>.
New atribut elemen bentuk seperti nomor, tanggal, waktu, kalender, dan jangkauan.
New elemen grafis : <svg> dan <canvas>.
New unsur multimedia : <audio yang> dan <video>.

Versi HTML:

1989 Tim Berners-Lee menciptakan www
1991 Tim Berners-Lee menciptakan HTML
1993 Dave Raggett disusun HTML +
1995 Kelompok Kerja HTML didefinisikan HTML 2.0
1997 W3C Rekomendasi: HTML 3.2
1999 W3C Rekomendasi: HTML 4.01
2000 W3C Rekomendasi: XHTML 1.0
2008 Draft WHATWG HTML5 Umum Pertama Hidup Standard
2012 WHATWG HTML5
2014 W3C Rekomendasi: HTML5
2016 W3C Calon Rekomendasi: HTML 5.1

Tag elemen yang terdapat pada HTML5

     Tag                                        Deskripsi

<Article> Mendefinisikan sebuah artikel dalam dokumen
<Aside>    Mendefinisikan konten selain dari konten halaman
<BDI>       Mendefinisikan sebuah bagian dari teks yang mungkin diformat
               dalam arah yang berbeda dari teks lain
<Rincian> Mendefinisikan rincian tambahan bahwa pengguna dapat melihat
                   atau menyembunyikan
<Dialog>   Mendefinisikan sebuah kotak dialog atau jendela
<Figcaption> Mendefinisikan sebuah caption untuk <figure> elemen
<Figure>    Mendefinisikan konten mandiri, seperti ilustrasi, diagram, foto,
                    daftar kode, dll
<Footer>    Mendefinisikan footer untuk dokumen atau bagian yang
<Header>   Mendefinisikan sebuah header untuk dokumen atau bagian yang
<Utama>    Mendefinisikan isi utama dokumen
<Mark>    Mendefinisikan ditandai atau teks yang disorot
<Menuitem> Mendefinisikan item perintah / menu bahwa pengguna dapat
                    memanggil dari menu popup
<Meteran> Mendefinisikan pengukuran skalar dalam kisaran dikenal (gauge)
<Nav>        Mendefinisikan navigasi link dalam dokumen
<Kemajuan> Mendefinisikan kemajuan tugas
<Rp>           Mendefinisikan apa yang harus ditampilkan di browser yang tidak
                     mendukung penjelasan ruby
<Rt>    Mendefinisikan sebuah penjelasan / pengucapan karakter (untuk
                     tipografi Asia Timur)
<Ruby>       Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
<Section>   Mendefinisikan bagian dalam dokumen
<Summary> Mendefinisikan sebuah judul terlihat untuk <rincian> elemen
<Time>       Mendefinisikan tanggal / waktu
<Wbr>        Mendefinisikan sebuah kemungkinan line-break

Elemen baru yanga pada FORM

     Tag                         Deskripsi

<Datalist> Mendefinisikan pilihan yang telah ditentukan untuk kontrol input
<Keygen> Mendefinisikan sebuah field kunci-pasangan Generator (untuk
                     bentuk)
<Keluaran> Mendefinisikan hasil perhitungan

HTML5 memiliki empat sintaks yang berbeda untuk atribut :

Type	Example
Empty	<input type="text" value="John" disabled>
Unquoted	<input type="text" value=John>
Doublequoted	<input type="text" value="John Doe">
Singlequoted	<input type="text" value='John Doe'>

HTML5 Grafik

Tag	Description
<canvas>	Menggambar grafik, dengan cepat melalui sripting(java script)
<svg>	Menggambar grafik vektor scalabe

Banya situs web berisi kode HTML seperti :
<div id="nav"> <div class="header"> <div id ="footer">
Untuk menunjukan navigasi,header,footer.

HTML5 SEMANTIC ELEMENTS

HTML5 menawarkan elemen semantik untuk menentukan bagian yang berbeda dari halaman web .

<Article>
<Aside>
<Rincian>
<Figcaption>
<Figure>
<Footer>
<Header>
<Utama>
<Mark>
<Nav>
<Section>
<Summary>
<Time>

Sekedar pengenalan tentang HTML5. Kesimpulannya HTML4 dan HTML5 itu hampir sama tetapi pada HTML5 terdapat elemen-elemen baru .
Sekian apa yang dapat saya sampaikansemoga menambah pengetahuan teman-teman.

Terimkasih, Wassalamualaikum wr.wb