Penggunaan HTML5 untuk Dunia Pendidikan

MAKALAH PENGGUNAAN HTML UNTUK DUNIA PENDIDIKAN

Disusun untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi

Oleh :

Nama Jurusan Rombel/NIM

Laelatul Tohiroh Teknologi Pendidikan 01/1102412015

UNIVERSITAS NEGERI SEMARANG

2012/2013

KATA PENGANTAR

Puji syukur kehadirat Tuhan yang maha Esa atas limpahan rahmatnya yang telah mengkaruniakan kekuatan dan kesehatan kepada penulis, sehingga penulis dapat menyelesaikan makalah “penggunaan HTML5 untuk dunia pendidikan”. Tak lupa pula penulis mengucapkan terimakasih kepada dosen pengampu mata kuliah Teknologi Informasi dan Komunikasi yang telah mengarahkan penulis dalam penyusunan makalah ini.

Makalah Penggunaan HTML 5 disusun untuk memenuhi tugas pada mata kuliah Teknologi Informasi dan Komunikasi. Makalah ini diharapkan dapat membantu memberi pemahaman kepada pembaca mengenai penggunaan HTML 5 khususnya untuk keperluan siswa.

Penulis menyadari bahwa dalam penyusunan makalah ini, penulis belum dapat maksimal dan masih ada kekurangan di sana-sini. Oleh karena itu penulis sangat mengharapkan kritik dan saran untuk menyempurnakan makalah yang telah penulis susun. Dan semoga makalah ini dapat bermanfaat bagi semua pembaca. Aamiin.

Penulis

Laelatul Tohiroh

I. PENDAHULAN

A. LATAR BELAKANG MASALAH

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.

Kebehatan lain HTML adalah semua komputer dengan web browser dapat membaca dan menafsirkan kode HTML terhadap halaman-halaman web yang mereka akses. Sebelum internet populer, orang mengirim data atau sebuah file teks ke seorang teman melalui sebuah jaringan. Anda bisa mengirim file teks atau grafik, atau anda dapat mendownload sebuah file musik dari sebuah sistem bulletin board elektronik ( BBS ). Sekarang, anda masih bisa mendownload file-file dalam berabagai macam format, namun selain itu anda bisa menerima sebuah file berbasis HTML saat menampilkan sebuah halaman web. Salah satu keuntungan dari mengirimkan HTML melalui sebuah koneksi, termasuk file-file data individu, adalah bahwa kode-kode HTML menjalin semua elemen data lainnya yang bersama dengan memformat mereka kedalam sebuah halaman web yang bisa dibaca atau digunakan.

HTML5 adalah versi kelima dari HTML standar yang pertama kali diciptakan pada tahun 1990. HTML5 hingga bulan September 2011 ini masih dalam tahap pengembangan. HTML5 ini diharapkan dapat memperbaiki teknologi HTML sehingga mendukung teknologi multimedia terbaru serta lebih mudah dimengerti oleh manusia maupun mesin. Meski masih dalam tahap pengembangan, perlu kiranya kita mengenal HTML5 ini. Oleh karena itu penulis menyusun makalah ini untuk membantu mengenal HTML5 khususnya penggunaannya dalam dunia pendidikan.

B. RUMUSAN MASALAH

1. Apa yang dimaksud dengan istilah HTML5?

2. Bagaimana perkembangan HTML5?

3. Bagaimana struktur pada HTML5?

4. Apa tujuan dibuatnya HTML5?

5. Fitur baru apa saja yang terdapat dalam HTML5?

6. Apa kelebihan dan kelemahan HTML5?

7. Apa yang dimaksud HML5 Semantic?

8. Apa perbedaan HTML5 dengan HTML4?

C. TUJUAN PENULISAN

1. Mengetahui penjelasan umum mengenai HTML5.

2. Mengetahui perkembangan HTML5.

3. Mengetahui struktur dalam HTML5.

4. Mengetahui tujuan dibuatnya HTML5.

5. Mengetahui fitur baru apa saja yang terdapat dalam HTML5.

6. Mengetahui kelebihan dan kelemahan HTML5.

7. Mengetahui penjelasan HTML5 Semantic.

8. Mengetahui perbedaan HTML5 dengan HTML4.

II. PEMBAHASAN

1. PENJELASAN UMUM MENGENAI HTML5

HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Tujuan utamanya telah meningkatkan bahasa dengan dukungan untuk multimedia terkini dengan tetap mudah dibaca oleh manusia dan secara konsisten dimengerti oleh komputer dan perangkat (web browser, parser, dll). HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML juga.

HTML5 ini merupakan hasil proyek dari lembaga persatuan website dunia, World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009 untuk menyempurnakan bahasa penanda sebelumnya yang dianggap sudah lawas. Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.

HyperText Markup Language (HTML) adalah 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 perintah-perintah 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 Internetyang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Ada beberapa hal yang perlu diketahui tentang HTML 5, ini juga berguna untuk mempermudah kita dalam menggunakan HTML 5, diantaranya adalah

· Doctype

DOCTYPE ditulis sebelum tag html, fungsinya untuk memberitahukan kebrowser bahwa tipe dokumen yang digunakan adalah HTML.

· Tidak adanya Type pada script dan link

· Attribute Required

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

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

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

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

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

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

2. PERKEMBANGAN HTML5

Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 ) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML ( Standard Generalized Markup Language ).

ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTMLyang merupakan pengembangan dari HTML.

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dariWaring Wera Wanua, sebuah teknologi inti dariInternet. HTML5 adalah revisi kelima dariHTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologiHTMLagar 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. 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 tahun2009, 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.”

a. Proses standardisasi W3C

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 () dan inline (), sebagai contoh () (sebagai blok navigasi website) dan (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 dan . Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti dan , yang sebenarnya dapat dikerjakan menggunakanCascading Style Sheet (CSS).

APL 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 :

· 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

b. Tipe MIME dan penanggung jawab protokol registrasi.

Tigvdak 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 :

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

3. TUJUAN DIBUATNYA 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

4. ELEMEN BARU DI HTML5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:

· Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.

· atribut media, ping pada elemen pranala,

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.

Ø autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan form

Ø reversed pada elemen ol untuk urutan besar ke kecil.

Contoh Tag HTML 5 pada Blog

<!DOCTYPE html>

<html>

<head>

<title>Standart Blog<title>

</head>

<body>

<h1><a href="#">Standard Blog</a></h1>

</header>

<nav>

<ul>

<li><a href="#">Archives</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h1><a href="#">Title</a></h1>

</header>

<p>Lorem ipsum...</p>

</section>

</article>

<h1><a href="#">Title</a></h1>

</header>

<p>Lorem ipsum...</p>

</section>

</article>

<h1><a href="#">Title</a></h1>

</header>

<p>Lorem ipsum...</p>

</section>

</article>

</section>

<p>Copyright @ 2012 All Right</p>

</footer>

</body>

</html>

5. KELEBIHAN DAN KELEMAHAN HTML 5

Beberapa kelebihan dan manfaat yang dijanjikan pada 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.

· Dukungan yang lebih baik untuk penyimpanan secara offline

· Unsur kanvas untuk menggambar

· Video dan elemen audio untuk media pemutaran file multimedia

· Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section

· Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search

· HTML5 merupakan perangkat mandiri

· Penanganan kesalahan yang lebih baik

· Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )

· Lebih markup untuk menggantikan scripting

· Dukungan suara dan video.

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.

Kelemahan yang ada pada HTML 5

Saat ini HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser.

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)

6. HTML5 Semantic

HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam HTML5 untuk mendukung struktur halaman yang lebih rapi.

Beberapa elemen baru digunakan untuk mengurangi pemakaian tag <div>.

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

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut

</object>

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini

</object>

HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut

</video>

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.

7. Perbedaan HTML5 dengan HTML4

Pada HTML4 yang sementara ini digunakan para programer,telah menemukan berbagai kekurangan, maka dari itu orang yang menemukan scropt HTML ini sedang memperbaiki dan menambah kekurangan dari HTML4.

Pada dasarnya, HTML5 belum dirilis,dan rencananya akan dirilis pada tahun 2014 yang akan datang. Namun sebagian programer sudah belajar menggunakan HTML5 dan ingin mengenal fitur-fitur tambahannya. HTML5 ini cukup membuktikan bahwa fitur-fitur yang dimiliki sekarang jauh lebih lengkap dari versi sebelumnya.

* Penambahan elemen-elemen baru:

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

* Penambahan atribut baru:

· 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:

· Elemen b dilegalkan sebagai tipografi penegas,seperti pada kata kunci yang ingin ditonjolkan,

· Tidak "deprecated"(bukan fitur yang dianggap usang).

· 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 dan lain-lain.

*Elemen dan atribut yang tidak digunakan:

· Center

· Font

· Strike,u,big

· Frame,frameset,noframes

· Acronym

· Longdesc

· Scope pada td, dan sebagainya.

Dengan penambahan, perubahan fitur-fitur tersebut kita sudah dapat menyimpulkan bahwa, HTML5 lebih lengkap dari pada HTML4. Meskipun belum rilis, tapi sudah ada browser yang sudah bisa membaca script HTML5 tersebut.

I. PENUTUP

1. KESIMPULAN

Layaknya dokumen standar lainnya, HTML5 juga memiliki struktur tertentu. Secara garis besar, struktur dokumen HTML5 cuma terdiri dari dua bagian, yaitu head dan body. HTML5 memiliki keunggulan dari pada HTML4 dan memiliki elemen-elemen baru yang canggih. 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).

II. SARAN

1) Sebagai calon tenaga pengajar yang berada di bidang teknologi seharusnya kita mempelajari lebih jauh mengenai HTML5.

2) Setelah kita mempelajari Java, diharapkan kita mampu memanfaatkannya untuk keperluan pembelajaran.

3) Kita seharusnya selalu update dengan perkembangan-perkembangan teknologi informasi sehingga mengetahui jika ada perkembangan-perkembangan mengenai HTML yang selanjutnya dapat diterapkan dalam pendidikan.

DAFTAR PUSTAKA

http://danangsr.blogspot.com/2012/10/artikel-tentang-html-5.html diunduh pada tanggal 17 Oktober 2013 pukul 07.18.

http://id.wikipedia.org/wiki/HTML5 diunduh pada tanggal 17 Oktober 2013 pukul 07.54.

http://ti-cenatcenut.blogspot.com/2013/01/sejarah-dan-pengertian-html5.html diunduh pada tanggal 17 Oktober 2013 pukul 08.13.

http://mumhanaartanti.blogspot.com/2013/01/artikel-tentang-html-5.html diunduh pada tanggal 17 Oktober 2013 pukul 08.15.

http://pelitarezza.blogspot.com/2013/01/kelebihan-dan-kekurangan-html5.html diunduh pada tanggal 21 Oktober 2013 pukul 15.18.

http://khizriannuranda.blogspot.com/2012/11/materi-singkat-html5.html diunduh pada tanggal 21 Oktober 2013 pukul 19.15.

http://nizar-alifandii.blogspot.com/2012/11/materi-html-5.html diunduh pada tanggal 21 Oktober 2013 pukul 19.23.

http://hafilhafil.blogspot.com/2013/01/artikel-html.html diunduh pada tanggal 21 Oktober 2013 pukul 20.05.

http://www.w3function.com/blog/?p=det&idn=77 diunduh pada tanggal 21 Oktober 2013 pukul 20.09.

http://mousetik.blogspot.com/2013/03/kelebihan-dan-manfaat-html5.html diunduh pada tanggal 21 Oktober 2013 pukul 20.15.

Penggunaan HTML5 untuk Dunia Pendidikan

File ppt dapat diunduh di sini

0 komentar:

Posting Komentar

Foto Penulis

kalender

jam

Pengunjung

Traffic Penggunjung

Twitter

Translate

About Me

Archives