HTML 5
Disusun Oleh :
HARIS
SRI WIDYOKO
NIM :
2114R0796
Dosen :Septia Lutfi
Kata Pengantar
Puji syukur kami haturkan kepada ALLAH SWT, karena atas berkat dan
rahmat-Nya lah tugas makalah ini dapat diselesaikan dengan penuh rasa tanggung
jawab. Tugas makalah ini berjudul “HTML5”. Adapun tujuan dari pembuatan
makalah ini untuk memenuhi tugas dari bapak dosen STMIK HIMSYA Tehnik
informatika. Selain itu juga, dengan makalah ini penulis dapat lebih memahami
tentang apa itu androit serta aplikasi-aplikasi didalamnya. Makalah ini saya
susun sesimpel mungkin agar mudah dipahami dan dapat menarik minat siapapun
untuk membaca informasi yang tertera didalamnya. Saya berusaha semaksimal
mungkin dalam penyusunannya agar memberikan kesan yang baik bagi siapapun yang
membacanya.
Penulis mengharapkan makalah
ini dapat bermanfaat
bagi semua pembaca
yang khususnya para pelajar dan mahasiswa di
seluruh Indonesia,terutama bagi
penulis sendiri.Kepada
pembaca jika terdapat
kekurangan atau kekeliruan
dalam makalah ini,
penuli smohon maaf, karena
penulis sendiri dalam tahap belajar.Dengan
demikian, tak lupa
penulis ucapkan terimakasih,
kepad parapembaca.Semoga Allah memberkahi
makalah ini sehingga
benar-benar bisabermanfaat.amin
Blora,November 2014
Penulis
Haris Sri Widyoko
Latar Belakang
Perkembangan
teknologi dari tahun ketahun semakin cepat. Dari mulai handphone, laptop,
tablet, dan berbagai gadget lainnya selalu ada perubahan dan semakin memanjakan
pengguna. Dari tahun ketahun perkembangan teknologi seakan membuat para
pengguna menjadi ketergantungan dan dimanfaatkan teknologi itu sendiri.
Saat ini, yang mempunyai lingkungan yang semakin luas dan banyak diminati, juga dapat digunakan untuk menghasilkan uang adalah dunia pemrograman komputer. Dalam dunia pemrograman komputer, dikenal banyak bahasa pemrograman, salah satunya adalah HTML5. HTMl5 merupakan salah satu bahasa pemrograman yang digemari oleh para pembuat website, karena dengan menggunakan HTML5 website akan menajadi lebih menarik dan lebih bagus. Oleh karena itu disini penulis akan mengupas tuntas segala macam tentang HTML5 dalam makalah ini.
. Tujuan
Tujuan
pembuatan makalah ini yaitu agar pembaca dapat mengenal lebih dalam seputar
perkembangan teknologi bahasa pemrograman HTML5 dari mulai sejarah sampai
contoh-contoh website menggunakan HTML5.
Sejarah
HTML5
HTML5 yang
merupakan standar baru dari HTML pasti mempunyai sejarah sebelum terbentuknya
HTML5 tersebut. Dimulai dari The Web Hypertext Application Technology Working
Group (WHATWG), mulai bekerja pada standar baru pada tahun 2004. Pada saat itu,
HTML 4.01 belum diperbarui sejak tahun 2000, dan World Wide Web Consortium
(W3C) telah memfokuskan pada perkembangan masa depan XHTML 2.0. Pada tahun
2009, W3C memperbolehkan XHTML 2.0 dengan hak istimewa Working Group untuk
berakhir dan memutuskan untuk tidak memperbaharui itu. W3C dan WHATWG saat ini
bekerja sama pada pengembangan HTML5.
Sementara
HTML5 sering dibandingkan dengan Flash, tetapi kedua teknologi tersebut sangat
berbeda. Keduanya termasuk fitur untuk memutar audio dan video dalam halaman
web, dan untuk menggunakan Scalable Vector Graphics. HTML5 sendiri tidak dapat
digunakan untuk animasi dan interaktivitas, tapi itu harus dilengkapi dengan
CSS3 atau JavaScript. Ada kemampuan Flash banyak yang tidak memiliki mitra
langsung dalam HTML5.
Meskipun
HTML5 telah terkenal di kalangan pengembang web selama bertahun-tahun, itu
menjadi topik media yang mainstream sekitar April 2010 setelah Apple Inc
kemudian CEO Steve Jobs mengeluarkan surat terbuka berjudul "Pemikiran
tentang flash" di mana ia menyimpulkan bahwa "Adobe Flash tidak lagi
diperlukan untuk menonton video atau mengkonsumsi segala jenis konten web"
dan bahwa "standar terbuka baru yang diciptakan di era mobile seperti
HTML5, akan menang". Ini memicu perdebatan di kalangan pengembangan web
dimana beberapa menyarankan bahwa sementara HTML5 menyediakan fungsi yang
disempurnakan, pengembang harus mempertimbangkan mendukung browser berbagai
bagian yang berbeda dari standar serta perbedaan fungsi lainnya antara HTML5
dan Flash. Pada awal November 2011, Adobe mengumumkan bahwa mereka akan
menghentikan pengembangan flash untuk perangkat mobile dan reorientasi upaya
dalam mengembangkan alat memanfaatkan HTML5.
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.
b. 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>. Beberapa elemen
yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata
seperti <font> dan <center>, yang sebenarnya dapat
dikerjakan menggunakan Cascading
Style Sheet (CSS).
c. 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 API terbaru pada HTML5 antara lain :
2D
Drawing API, adalah API yang dapat digunakan untuk manipulasi image 2D yang
terintegrasi dengan elemen canvas.
Audio
and Video API, adalah API yang dapat digunakan untuk memutar dan memainkan
media Video dan Audio. API ini sudah terintegrasi dengan elemen audio dan video
dari HTML 5.
API
yang memungkinkan untuk membuat offline web application.
API
yang memungkinkan web application dapat meregister sendiri untuk beberapa tipe
protokol dan media.
Editing
API di kombinasikan dengan atribut content editable global yang baru.
Drag
and Drop API di kombinasikan dengan atribut drag-able.
API
yang dapat mengekspos histori dari browser untuk menambahkan halaman web yang
sedang di akses sehingga bisa menambahkan tombol Back di halaman web.
Cross-document
messaging.
Prinsip dari API yang disediakan dari HTML 5 ini adalah agar developer lebih mudah dalam membuat sebuah aplikasi web dengan ini user dan developer atau programmer karena dapat menciptakan aplikasi web yang penuh fitur pada offline environment.
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 :
API
Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).
Web
Speech API.
d. First
Public Working Draft
WHATWG menerbitkan Pertama Kerja Draft Publik
spesifikasi pada 22 Januari
2008. Bagian dari HTML5 telah dilaksanakan di browser meskipun
seluruh spesifikasi
belum telah mencapai status Rekomendasi akhir.
e. Last
Call
Pada tanggal
14 Februari 2011, W3C. Pada Mei 2011 , kelompok kerja canggih HTML5 untuk
"Last Call", undangan kepada masyarakat dalam dan di luar W3C untuk
mengkonfirmasi kesehatan teknis dari spesifikasi. W3C sedang mengembangkan tes
lengkap, untuk mencapai interoperabilitas luas untuk spesifikasi lengkap pada
tahun 2014, yang sekarang tanggal target Rekomendasi. Pada bulan Januari 2011,
WHATWG berganti nama nya "HTML5" standar hidup untuk
"HTML". W3C tetap melanjutkan proyek untuk melepaskan HTML5.
f. Calon
Rekomendasi
Pada bulan
Juli 2012, WHATWG dan W3C memutuskan pada tingkat pemisahan. W3C akan
melanjutkan HTML5 spesifikasi pekerjaan, berfokus pada standar definitif
tunggal, yang dianggap sebagai "snapshot" oleh WHATWG. Organisasi
WHATWG akan melanjutkan pekerjaannya dengan HTML5 sebagai "Standar
Hidup". Konsep standar hidup adalah bahwa hal itu tidak pernah lengkap dan
selalu diperbarui dan ditingkatkan. Fitur baru dapat ditambahkan tapi fungsi
tidak akan dihapus. Pada bulan Desember 2012, W3C HTML5 ditunjuk sebagai Calon
Rekomendasi. Kriteria untuk kemajuan ke Rekomendasi W3C "100 % selesai dan
sepenuhnya interoperable implementasi"
Pengertian HTML
Program
adalah kata, ekspresi, pernyataan atau kombinasi yang disusun dan dirangkai
menjadi satu kesatuan prosedur yang berupa urutan langkah untuk menyelesaikan
masalah dan diimplementasikan dengan menggunakan bahasa pemrograman sehingga
dapat dieksekusi oleh komputer. Pemrograman adalah proses mengimplementasikan
urutan langkah untuk menyelesaikan suatu masalah dengan menggunakan suatu
bahasa pemrograman. Bahasa pemrograman adalah suatu prosedur penulisan program.
Sedangkan pemrograman terstruktur adalah metode untuk mengorganisasikan dan
membuat kode-kode program supaya mudah untuk dimengerti, mudah ditest dan mudah
dimodifikasi. Salah satu contoh pemrograman adalah pemrograman di internet.
HTML
merupakan salah satu unsur penting dalam pemrograman di internet. HTML
(Hypertext Markup Language) adalah bahasa pengkodean untuk menghasilkan
dokumen-dokumen hypertext untuk digunakan di World Wide Web. Namun HTML
bukanlah sebuah bahasa pemrograman, tetapi hanyalah berisi perintah-perintah
yang telah terstruktur berupa tag-tag penyusun. HTML merupakan pengembangan
dari standar pemformatan dokumen teks yaitu Standard Generalized Markup
Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang
dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.
HTML
ini merupakan sebuah format bahasa dari world wide web
(WWW) untuk menulis dan menampilkan dokumen. Sehingga
dokumen tersebut dapat dengan mudah tersebar ke PC melalui media
jaringan komputer atau internet. HTML ini berupa kode tag yang menginstruksikan
browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sehingga,
untuk dapat membuka dokumen yang ditulis dengan HTML maka diperlukan sebuah
tool yaitu browser misalnya Opera, Mozila, Google Chrome, Netscape, dan banyak
lagi yang lainnya. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun
dari PDA dan program lain yang memiliki kemampuan browser.
Adapun
pengertian dari HTML5 itu sendiri adalah versi terbaru dari HTML (HyperText
Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web
Consortium. HTML5 diciptakan dalam pengembangan
bahasa HTML untuk memperbaiki konten dan memperbarui teknologi
multimedia yang sudah ada pada HTML 4 dan versi sebelumnya agar
mudah dijalankan oleh browser dan mudah dimengerti. HTML5 merupakan
kerjasama antara World Wide Web Consortium (W3C) dan Web
Hypertext Application Teknologi Working Group (WHATWG).WHATWG bekerja
dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML
2.0. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi
HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh
manusia dan juga mudah dimengerti oleh mesin.
Di sisi
lain HTML5 sering juga disebut dengan Semantic Web. Semantic web berasal dari
bahasa Yunani (Greek), merupakan bahasa pembelajaran semiotic, yakni
pembelajaran untuk memahami penanda. Semantic sendiri mempunyai arti bahasa
yang berfokus pada penanda untuk mengetahui arti yang terkandung di
dalamnya. Jadi, yang dimaksud semantic web adalah bahasa pemrograman yang
mempunyai penanda khusus dalam implementasinya dengan tujuan agar mampu
mendeskripsikan apa yang terkandung dalam website tersebut. Web semantic ini
bukan hanya dikembangkan di Web 2.0, namun sudah ke Web 3.0 bahkan akan
berkembang ke Web 4.0. Perkembangan teknologi memang cepat sekali
berubah.
Dasar-Dasar HTML5
Mendesain
HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah
bahasa pemrograman. HTML hanyalah berisi perintah-perintah yang telah
terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah
sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat
diakses oleh browser. Mendesain HTML adalah sebuah seni tersendiri. Homepage
yang merupakan implementasi dari HTML adalah refleksi dari orang yang
membuatnya. Untuk itu perlu mendesainnya dengan baik agar para pengunjung
homepage merasa senang dan bermanfaat.
Mendesain
HTML dapat dilakukan dengan dua
cara:
1. Menggunakan
HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain.
Dapatkan editor HTML lainnya disini.
2. Dengan
cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam
dokumen HTML.
Ada
kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya
adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat,
melakukan editing bahkan mem-publish ke internet. Dengan
kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke
dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer
yang tidak ingin belajar lebih mendalam mengenai HTML. Sedangkan cara kedua
adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat
disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk
melakukannya, ditambah lagi harus dilakukan cara-cara konvensional untuk
melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari
segala bentuk HTML yang akan dipelajari, karena dengan cara itulah pengguna
akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai
pada bahasa HTML.
Fitur HTML5
a. Penambahan
input type & Validasi Form
Sebelum
HTML5, sangat susah memvalidasi Form. Misalkan sebuah input tidak boleh kosong,
input harus angka dan input yang valid diantara 1 sampai 100. Untuk membuat
validasi tersebut kita menggunakan javascript atau PHP di server yangmana
masing masing programmer dan framework mempunyai caranya sendiri sendiri.
Dengan adanya HTML5 maka validasi sudah langsung ditangani oleh HTMl5.
Masih di
Form, form tidak terbatas pada type text, password, file dan Hidden, HTML5
menambahkan input tipe telepon, url, email,number, range, color, date dan
image. Dengan berbagai range input yang luas, maka form di HTML5 menjadi cikal
bakal aplikasi berbasis web yang lebih populer dengan nama HTML5 App atau
WebApp.
b. Native
Audio dan Video
Sejak era
2000-an, audio dan video di internet tidak mempunyai standar. Kebanyakan audio
menggunakan plugin itunes atau realplayer sedangkan video player
menggunakan Flash atau silverLight . Era plugin sudah berakhir, HTML5
menghadirkan Native audio dan Video Codec langsung didalam browser. Tidak ada
lagi namanya udpate plugin atau browser crash karena plugin error.
c. Canvas
Canvas
adalah fitur yang menarik. Bahasa mudahnya, dengan canvas kita bisamengambar atau
menampilkan animasi langsung di browser. Lihat demonya
disini.
g. Offline
Support
Salah satu
kelemahan dari aplikasi web adalah harus selalu online. HTML5 bisa bekerja
walaupun tidak ada koneksi. Silahkan coba menggunakan beberapa aplikasi di
Google chrome webstore seperti Google Docs dan Aplikasi Note. Dua aplikasi web ini bisa tetap berjalan
walaupun tidak tersedia koneksi internet.
h. Drag
& Drop
Kelebihan
dari desktop adalah kemampun memindah atau mengkopi file cukup dengan “drag
& drop”. Sekarang Web bisa melakukan hal yang dulu hanya bisa
dilakukan di Desktop. Salah satu web yang sudah menggunakan fitur ini adalah
dropbox. Untuk mencobanya, buat akun di dropbox dan
silahkan di upload image dengan cara mendrag file didesktop ke Halaman Dropbox,
maka secara otomatis file akan terupload. Untuk mendonload cukup drag file yang
ada di web dropbox ke desktop. Cool kan?
i. Mengakses
Hardware.
Sebagian
orang tidak mau membuat aplikasi web karena web tidak punya akses ke hardware.
Yakin? sekarang bisa. HTML5 bisa mengakses Mic, Kamera dan Filesystem ,
Orientasi device (landscape atau potrait) dan Lokasi GPS langsung tanpa perlu
plugin.
Masih ada
beberapa fitur tambahan seperti Notifikasi gaya desktop, keamanan, WebRTC,
Microdata, PageVisibility, Fullscreen support, Web socket, History API, HTML
editing, spellcheck WebGL dan beberapa teknologi web yang masih
dikembangkan. Nah, gimana? HTML5 bukan hanya menambah syntax ke bahasa HTML,
namun menambahkan Puluhan fitur yang memungkinkan programmer web membuat aplikasi
seperti desktop hanya dengan HTML dan teman temannya (CSS, JS, webAPI dll).
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
a) 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>.
b) 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.
c) 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.
• <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.
d) 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>.
Tujuan Dibuatnya HTML5
Terdapat
beberapa tujuan mengapa HTML5 diciptakan, diantaranya yaitu:
1. Fitur
baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.
2. Mengurangi
kebutuhan untuk plugin eksternal (seperti Flash).
3. Penanganan
kesalahan yang lebih baik.
4. Lebih
banyak markup untuk menggantikan scripting.
5. HTML5
merupakan perangkat mandiri
Istilah-Istilah Dalam HTML5
Meskipun
HTML5 belum dirilis secara resmi, tetapi banyak fitur HTML5 yang sudah
diimplementasikan oleh browser-browser besar seperti Mozilla Firefox, Opera,
Safari, dan Google Chrome. Seorang programmer harus mengetahui fitur-fitur yang
pastinya akan banyak dipakai di dunia Internet masa mendatang tersebut. Berikut
ini adalah beberapa hal tentang HTML5 yang wajib Anda ketahui, yaitu:
1. Deklarasi
doctype baru
Sebelum
membuat sebuah halaman dengan HTML5, tentu saja doctype yang digunakan juga
harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML, sehingga
tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, harus dituliskan dengan
panjang.
2. Struktur
semantic
Pada XHTML,
programmer HTML bisa saja menjadi pembuat stress programmer CSS karena struktur
halaman yang dibuatnya. Harus ada kesepakatan penamaan yang solid antara kedua
pihak agar tidak ada masalah pembacaan struktur halaman.
B3. Contenteditable
Yaitu
atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi
langsung pada tampilan. Hasil tampilan dari kode di atas adalah memungkinkan
untuk penambahan list dalam tag “ul” yang telah diberikan atribut tersebut.
Jika dikombinasikan dengan sedikit Javascript, fitur ini bisa menghasilkan
sebuah mekanisme input yang cukup powerful namun mudah untuk dibuat.
4. Validasi
email
Dengan
validasi langsung di tampilan, maka dapat mencegah seorang user untuk memanggil
script website dengan input yang salah. Ini dapat mengurangi jumlah request
yang tidak valid terhadap script program. HTML5 menawarkan fitur validasi email
secara langsung dengan mengubah type dari elemen input menjadi “email”.
Sayangnya, masih belum semua browser memberikan support untuk fitur ini. Dari
percobaan penulis, salah satu browser yang memiliki fitur ini adalah Opera.
5. Atribut
required
Satu lagi
untuk input pada HTML5, memungkinkan validasi pada sisi client terhadap input
yang harus diisi. Dengan demikian, tidak perlu membuat fungsi javascript untuk
melakukannya. Cukup menambahkan atribut “required” pada elemen “input”. Jika
tombol submit ditekan, akan muncul pesan error.
6. Internet
Explorer Hack
Seperti
biasanya, Internet Explorer selalu terlambat dalam mengimplementasikan
teknologi website terbaru, meski Microsoft selalu memiliki teknologi sendiri
seperti silverlight untuk browsernya tersebut. Pada IE, secara default semua
elemen akan ditampilkan secara “inline”. Untuk itu, maka 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.Biasanya,
dalam XHTML akan dibuat sebuah “div” dengan id-nya masing-masing,
Fungsi HTML5
HTML
seperti yang dijelaskan sebelumnya merupakan bahasa pemrograman berbahasa markup
yang digunakan untuk menampilkan halaman website melalui browser. Namun tentu
bukan hal itu saja yang dapat dilakukan HTML, berikut ini fungsi dari HTML.
1. Membuat,
mendesain, dan mengontrol tampilan dari web page (Halaman Web) dan isinya.
2. Mempublikasikan
dokumen secara online sehingga bisa di akses, dilihat dan ditampilkan dari dan
ke seluruh dunia.
3. Membuat
online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara
online.
4. Menambahkan
objek-objek seperti image, audio, video dan juga java applet (aplikasi java
seperti java game dll) dalam document HTML.
5. Membuat
link menuju halaman web lain dengan kode tertentu (hypertext).
5.
Kelebihan dan Kekurangan HTML5
Kelebihan :
Cleaner
code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka
kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan
java script.
Greater
consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat
dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks
sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi
dalam membangun sebuah web.
Improve
Semantics, dengan berbagai elemen kode di dalam html5 yang telah
distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan.
Itu berarti bahwa bagian-bagian dari web seperti header, nav, footer dan
beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain
itu juga terbentuk dalam sebuah “machine readible format”
Improved
Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan
sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik
halaman web.
Client-side
Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat
dibangun dalam konsep lokal, dalam hal ini di sisi client.
Geolocation,
HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut
dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada
iphone.
Offline
Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi
meskipun mereka terputus dari jaringan internet.
Smarter
Forms, terdapat semacam reguler expression (regex) yang membuat form mampu
mengenali secara lebih baik tentang input, validasi data dan interaksi dengan
elemen lain (misal : format email, password dll)
Sharper
focus on Web Application Requirments, HTML5 membuat sebuah mekanisme yang lebih
mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video
player, pengolah grafis dan masih banyak lagi.
Kekurangan :
Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini
hanya support untuk browser modern/terbaru
Karena
bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada bisa
saja berubah
Fitur
keamanan yang ditawarkan HTML5 masih terbatas
Kesimpulan
HTML
(Hypertext Markup Language) adalah bahasa pengkodean untuk menghasilkan
dokumen-dokumen hypertext untuk digunakan di World Wide Web. HTML5 adalah versi
terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C
atau Word Wide Web Consortium. HTML5 merupakan revisi kelima dari HTML (yang
pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun
1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Selama ini,
pengembangan dari HTML 4.01 dn XHTML 1.1 berjalan secara terpisah dan
diimplementasikan secara berbeda-beda oleh berbagai aplikasi pembuat website.
Intinya, dengan HTML5 bahasa pemrograman web akan lebih universal dan menjadi
bahasa pemersatu dari beberapa bahasa pemrograman web yang ada sekarang. Selain
itu, banyak fitur dari HTML5 yang telah dibuat sedemikian rupa dan
memungkinkannya untuk berjalan di perangkat mobile seperti smartphone dan
tablet.
Manfaat
utama lainnya yang terkait dengan HTML5 yang seperti dukungan Geolocation dan
meningkatkan aksesibilitas dari halaman web. Ini hanya menyoroti manfaat dari
HTML5 dan para ahli percaya bahwa HTML5 akan berkembang menjadi bahasa
pengembangan secara online penting dalam waktu dekat. Ada baiknya memang
manusia mengetahui fitur-fitur yang pastinya akan banyak dipakai di dunia
Internet masa datang ini.
Penutup
Demikian makalah saya mengenai
“HTML5” , Semoga makalah ini dapat menjadi sumber pengetahuan dan dapat
bermanfaat bagi pembacanya. Saya mengucapkan terima kasih terhadap
pihak-pihak terkait yang membantu penyusunan makalah ini.
Kepada teman-teman dan bapak dosen atas saran dan
bimbinganya yang akhirnya mampu memunculkan makalah ini.
Mohon maaf apabila saat proses penulisan sering terjadi selisih antara yang satu dengan yang lain.
Mohon maaf apabila saat proses penulisan sering terjadi selisih antara yang satu dengan yang lain.
Mohon maaf apabila ternyata ada kesalahan pengetikan
nama dan kesalahan penulisan informasi.
Sekali lagi terima kasih atas perhatian dan dukungungannya.
Sekali lagi terima kasih atas perhatian dan dukungungannya.
Penulis
Haris Sri Widyoko
Untuk mendapatkan kan
dalam bentuk PowerPoint silahkal klik link dibawah ini
