MAKALAH
MENGENAL HTML5
Disusun untuk Memenuhi Tugas Mata Kuliah Teknologi Informasi dan Komunikasi Yang diampu oleh: Septia Lutfi, S.Kom, M.Kom
Disusun oleh :
Nama
: Andreas Johan T W S
NIM
: 1102412045
Teknologi Pendidikan
Fakultas Ilmu Pendidikan
Universitas Negeri Semarang
KATA PENGANTAR
Puji syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa yang telah memberikan rahmat serta kekuatan sehingga penulis dapat menyelesaikan makalah ini yang berjudul “MENGNAL HTML5”.
Terwujudnya makalah ini tidak lepas dari bantuan berbagai pihak yang telah mendorong dan membimbing penulis, baik tenaga, ide-ide, maupun pemikiran. Oleh karena itu dalam kesempatan ini penulis ingin mengucapkan terimakasih yang sebesar-besarnya kepada :
1. Yth. Bapak Septia Lutfi S.Kom, M.Kom selaku Dosen Mata Kuliah Teknologi Informasi dan Komunikasi atas bimbingan, pengarahan, saran serta dukungan yang berarti kepada penulis selama penyusunan makalah.
2. Orang tua penulis yang senantiasa menyalurkan semangat dan kasih sayang yang tiada henti kepada penulis serta dukungan moril maupun materil dan doa yang selalu menyertai penulis.
3. Teman-teman Rombel 3 Jurusan Teknologi Pendidikan atas dukungan dan masukannya yang berguna bagi makalah ini.
Mudah-mudahan amal dan jasa baik mereka diterima oleh Tuhan Yang Maha Esa, dan dibalas dengan pahala yang berlipat ganda.
Penulis menyadari bahwa makalah ini masih jauh dari Oleh karena itu, penulis dengan terbuka menerima masukan, usul dan saran yang membangun dari berbagai pihak demi penyempurnaan dan perbaikan-perbaikan makalah ini.
Dan akhirnya penulis berharap semoga makalah ini dapat bermanfaat bagi seluruh pembaca.
Semarang, Oktober 2013
DAFTAR ISI
Hal
COVER... i
KATA PENGANTAR... ii
DAFTAR ISI... iii
BAB I PENDAHULUAN... 4
1.1. Latar Belakang... 4
1.2. Rumusan Masalah... 5
1.3. Tujuan... 5
BAB II PEMBAHASAN... 6
2.1. Sejarah dan Perkembangan HTML... 6
2.2. Pengertian HTML5... 8
2.3. Fungsi dan Kegunaan HTML5... 11
2.4. Hal-hal Baru Pada HTML5... 13
2.4.1 Elemen Baru di HTML5... 13
2.4.2 Atribut Bari di HTML5... 14
2.4.3 Fitur Baru Pada HTML5... 21
2.5. Kelebihan dan Kelemahan HTML5... 27
2.5.1 Kelebihan HTML5... 27
2.5.2 Kelemahan HTML5... 28
2.6. Implementasi HTML5... 29
BAB III PENUTUP... 32
3.1. Kesimpulan... 32
3.2. Saran... 32
BAB I
PENDAHULUAN
1.1 Latar Belakang
Internet? Pasti kebanyakan dari kita semua sudah tahu tentang apa internet itu, tapi kebanyakan dari kita belum tahu betul mengenai bagian-bagian apa saja yang berperan penting dalam suatu halaman web internet salah satunya yaitu HTML. Ya, HTML merupakan suatu komponen penting didalam suatu website yang menjadi sebuah dasar ataupun pondasi bahasa pemograman sebuah web page, yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web 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 Internet yang didefinisikan dan dikendalikan penggunaannya oleh W3C (World Wide Web Consortium). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN yang merupakan sebuah adalah lembaga penelitian fisika energi tinggi di Jenewa pada tahun 1989.
Berdasarkan dari latar belakang HTML itulah penulis ingin menjelaskan secara lebih rinci melalui makalah ini tentang HTML khususnya HTML5 yang merupakan versi terbaru dari teknologi pemrograman HTML.
1.2 Rumusan Masalah
1. Bagaimana sejarah dan perkembangan HTML itu? 2. Apakah HTML5 itu?
3. Apa fungsi dan kegunaan dari HTML5 itu sendiri ? 4. Apa saja hal-hal baru yang terdapat pada HTML5? 5. Apa saja kelebihan dan kelemahan dari HTML5? 6. Apa sajakah impementasi dari HTML5?
1.3 Tujuan
1. Untuk mengetahui mengenai sejarah dan perkembangan HTML 2. Untuk mengetahui mengenai apakah HTML5 itu
3. Untuk mengetahui fungsi maupun kegunaan dari HTML5 itu sendiri 4. Untuk mengetahui hal-hal baru saja apakah yang terdapat pada HTML5 5. Untuk mengetahui kelebihan maupun kelemahan dari HTML5
BAB II
PEMBAHASAN
2.1 Sejarah dan Perkembangan HTML
HyperText Markup Language (HTML) adalah sebuah bahasa yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. 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.
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.
HTML versi 1.0 ini adalah versi pertama sejak lahirnya nama html tersebut, memiliki sebuah kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta memiliki dukungan dalam peletakan sebuah gambar
HTML versi 2.0 pada 14 Januari 1996, pada versi ini ada beberapa tambahan kemampuan diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah interaktif dan mulai dari versi ini yang menjadikan sebuah pioneer dalam perkembangan homepage interaktif.
Tak lama kemudian HTML versi 3.0 dirilis pada 18 Desember 1997 yang sering disebut sebut sebagai HTML+ yang mempunyai kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi ini tidak bertahan lama.
Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai pengganti dan penyampurnaan versi 3.0 ini yaitu HTML versi 3.2, keluarnya versi ini dikarenakan adanya beberapa kasus yang timbul pada pengembang browser yang telah melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi popular, maka di bakukan versi 3.2 untuk mengakomodasi praktek yang banyak digunakan oleh pengembang browser dan diterima secara umum, dapat dikatakan bahwa versi 3.2 ini merupakan versi 3.0 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.
Perombakan terakhir terjadi pada tahun 1999 tepatnya tanggal 24 Desember yaitu HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps, image dan lain lain sebagai penyempurnaan versi 3.2.
Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwa HTML versi 5.0 yang merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dariInternet. HTML5 adalah revisi kelima dari HTML (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.
organisasi yang menangani HTML sejak versi 2.0. 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.
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 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.”
2.2 Pengertian HTML5
Hypertext Mark up Language atau biasa dikenal dengan HTML merupakan suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program. HTML merupakan protokol yang digunakan untuk mentransfer data atau dokumen dari web server ke dalam browser (Internet Explorer atau Netscape Navigator).
Pengertian HTML sendiri bila dijabarkan berdasarkan kata-kata penyusunannya HTML dapat diartikan lebih dalam lagi menjadi:
Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
Markup
Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa intruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.
Pada awalnya HTML dikembangkan sebagi subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana dari pada SGML yang lebih di tekankan pada format dokumen yang berorientasi pada aplikasi.
HTML sendiri memiliki banyak versi dan versi terbaru saat ini yaitu HTML5. 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.
Tujuan dibuatnya HTML5 antara lain:
a) Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript. b) Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
c) Penanganan kesalahan yang lebih baik.
d) Lebih banyak markup untuk menggantikan scripting. e) HTML5 merupakan perangkat mandiri.
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. Berikut adalah beberapa browser yang dapat mendukung HTML yaitu:
- 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)
- 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. Terdapat 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.
- 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.
- Deklarasi doctype baru. Dalam membuat sebuah halaman dengan HTML5, tentu saja doctype yang digunakan juga harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML, sehingga Anda tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, Anda harus menuliskannya dengan panjang.
- Validasi email. Dengan validasi langsung di tampilan, maka dapat mencegah seseorang 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”. Namun hal ini sangat disanyangkan karena masih belum semua browser memberikan support untuk fitur ini.
- Contenteditable. Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi langsung pada tampilan. Jika dikombinasikan dengan sedikit Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang cukup powerful namun mudah untuk dibuat.
- 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.
Masih banyak elemen html5 lainnya seperti canvas, video, audio, mark, dan sebagainya. Setiap elemen akan berperilaku berbeda di setiap browser, karena memang standart resminya belum dikeluarkan oleh W3C.
2.3 Fungsi dan Kegunaan HTML5
HTML sendiri memiliki fungsi umum yakni untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web. Selain fungsi umum diatas ada beberapa fungsi lain dari dari HTML yaitu:
- Membuat halaman web.
- Menampilkan berbagai informasi di dalam sebuah browser Internet. - Membuat link menuju halaman web lain dengan kode tertentu (hypertext).
- Membentuk tata letak dokumen, dalam hal ini menentukan jenis huruf, gambar, dan komponen dokumen lainnya.
- Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa komputer yang termasuk dalam katagori SGML (Standard Generalized Markup Language) dimana bentuknya merupakan file standar ASCII yang berisi kode-kode untuk mengatur dokumen.
- Menentukan ukuran dan alur tulisan. - Mengintegerasikan gambar dengan tulisan. - Membuat Pranala.
- Mengintegerasikan berkas suara dan rekaman gambar hidup. - Membuat form interaktif.
- Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
- Menampilkan tulisan dalam bentuk cetakan tebal - Menampilkan sekelompok kata dalam bentuk miring.
- Menampilkan naskah dalam bentuk huruf yang miring dengan hasil ketikan mesin ketik.
- Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.
Selain memiliki fungsi-fungsi yang telah disebutkan diatas HTML juga memiliki beberapa kegunaan, antara lain:
a. Membuat link
Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :
- Link menuju bagian lain dari page
- Link menuju resource atau web site yang berbeda
b. Memodifikasi format teks
Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini yaitu:
- Dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
- Dapat menampilkan teks dalam bentuk cetakan tebal
- Dapat menampilkan sekelompok kata dalam bentuk miring
- Dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
- Dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.
c. Menampilkan daftar sesuatu dalam bentuk point-point (item)
Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami Membuat link. Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :
- Link menuju bagian lain dari page
- Link menuju page lain dalam satu web site - Link menuju resource atau web site yang berbeda
d. Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk teks.
Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga dapat dilakukan untuk menambah nilai estetika dari page yang akan kita rancang.
2.4 Hal-hal Baru Pada HTML5 2.4.1 Elemen Baru Di Html 5
Dengan muncuknya versi terbaru dari HTML yakni HTML versi ke-5 maka HTML5 membawa beberapa elemen-elemen baru untuk mewujudkan struktur halaman web yang lebih baik. Elemen HTML sendiri merupakan semua yang terdapat diantara start tag sampai end tag. Beberapa elemen-elemen baru yang terdapat pada HTML5 diantaranya:
Tag Keterangan
<article> Menspesifikasikan konten yang bersifat independen, seperti artikel, blog post, forum post, dan sejenisnya.
<aside> Digunakan untuk sebuah subkonten. Biasanya digunakan di dalam tag <article>. <bdi> Untuk teks yang tidak boleh terikat pada arah
teks-elemen induknya
<command> Sebuah button, atau radiobutton, atau checkbox.
<details> Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen. <summary> Digunakan pada sebuah ringkasan dan
sejenisnya di dalam tag <details>
<figure> Untuk mengelompokkan sekumpulan section, biasanya berupa video.
<figcaption> Berisi caption/keterangan yang ditempatkan di dalam tag <figure>
<footer> Digunakan sebagai footer dari sebuah halaman
<header> Digunakan sebagai header dari sebuah halaman
<mark> Digunakan pada teks yang akan di highlight
<meter> Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan <nav> Digunakan untuk sekumpulan navigasi <progress> Membuat Progress bar
<ruby> Digunakan untuk anotasi ruby <rt> Untuk menjelaskan anotasi ruby
<rp> Menunjukkan elemen jika browser tidak mendukung ruby
<section> Untuk sebuah section di dalam halaman. Seperti Bab, Footer, dan sebagainya
<time> Untuk mendefinisikan waktu dan tanggal <wbr> Word Break. Untuk memisah suatu kata bila
diperlukan.
2.4.2 Atribut Baru Di Html 5
Atribut HTML merupakan suatu informasi elemen, dimana atribut ini memberikan informasi tambahan tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal tag/start tag. Cara untuk medefinisakan atribut dengan memberikan informasi NAME dan VALUE dari suatu elemen, seperti name=”value“. Sebelum menuju pada atribut-atribut baru yang ada pada HTML5, sebelumnya HTML sendiri memiliki atribut-atribut standar yang hampir dipakai pada semua elemen. Atribut-atribut standar tersebut terbagi menjadi tiga kelompok, yakni Atribut Core, Atribut Language, dan Atribut Event.
a) Atribut Core
Atribut-atribut core tidak boleh digambarkan untuk elemen BASE, HEAD, HTML, META, PARAM, SCRIPT, STYLE, dan TITLE. Atribut-atribut core antara lain CLASS, ID, STYLE, dan TITLE.
<HTML> <HEAD>
<STYLE TYPE="text/css"> P.kelas {
color:blue; }
</STYLE> </HEAD> <BODY>
<P CLASS="kelas">Alinea</P> </BODY>
</HTML>
Atribut ID digunakan untuk menetapkan pengenal unik untuk sebuah elemen HTML, nantinya aturan CSS dengan Id selectornya dapat mengacu kepada nilai dari atribut ID sebuah elemen HTML. Nilai atribut ID adalah unik. Ini menggambarkan bahwa satu elemen dengan dengan elemen HTML lainnya tidak boleh memiliki nilai atribut ID yang sama, beda dengan atribut CLASS!
Contoh: <HTML> <HEAD>
<STYLE TYPE="text/css"> P#id {
color:blue; }
</STYLE> </HEAD> <BODY>
<P ID="id">Alinea</P> </BODY>
</HTML>
Contoh: <HTML>
<BODY>
<P STYLE="color:red">merah</P>
<P STYLE="color:blue">biru</P>
</BODY>
</HTML>
Atribut TITLE digunakan untuk memberikan ekstra informasi tambahan berupa teks untuk sebuah elemen HTML. Nilai atribut TITLE ini akan ditampilkan sebagai tooltip, yaitu ketika pointer mouse tepat diatas sebuah elemen. Atribut TITLE sangat penting untuk elemen A, IMG, ABBR, dan ACRONYM.
Contoh: <HTML> <BODY>
<P>Saya kuliah di<ABBR TITLE="Universitas Negeri Semarang">TI</ABBR></P> </BODY>
</HTML>
b) Atribut Language
Atribut-atribut language tidak boleh digambarkan untuk elemen BASE, BR, FRAME, FRAMESET, HR, IFRAME, PARAM, dan SCRIPT. Atribut-atribut language antara lain DIR dan LANG.
Atribut DIR digunakan untuk menggambarkan arah-arah penulisan untuk isi didalam sebuah elemen HTML. Apakah arah penulisannya dari arah kiri ke kanan ("ltr") atau dari arah kanan ke kiri ("rtl").
Contoh: <HTML> <BODY>
</BODY> </HTML>
Atribut LANG digunakan untuk menetapkan kode bahasa untuk isi didalam sebuah elemen HTML. Untuk nilai dari atribut LANG ini, anda dapat lihat di ID-ID Bahasa HTML.
c) Atribut Event
Berikut adalah daftar dari atribut-atribut event yang dapat digambarkan untuk elemen-elemen HTML:
Atribut event ONCLICK digunakan untuk menetapkan bahwa sebuah script akan dijalankan ketika pengguna mengklik dengan mouse pada sebuah elemen.
Contoh: <HTML> <BODY>
<INPUT TYPE="button" VALUE="Klik!" ONCLICK="javascript:alert('Event ONCLICK dipanggil')">
</BODY> </HTML>
Atribut event ONDBLCLICK digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika pengguna mengklik dua kali dengan mouse pada sebuah elemen.
Contoh: <HTML> <BODY>
<INPUT TYPE="button" VALUE="Klik!" ONDBLCLICK="javascript:alert('Event ONDBLCLICK dipanggil')">
</BODY> </HTML>
Atribut event ONMOUSEDOWN digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika tombol mouse ditekan.
Contoh: <HTML> <BODY>
<INPUT TYPE="button" VALUE="Klik!" ONMOUSEDOWN="javascript:alert('Event ONMOUSEDOWN dipanggil')">
</HTML>
Atribut ONMOUSEMOVE digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika mouse digerakkan.
Contoh: <HTML> <BODY>
<IMG SRC="example.com.gif" ONMOUSEMOVE="alert('Menuju ke Example.com!')"> </BODY>
</HTML>
Atribut event ONMOUSEOUT digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika mouse digerakkan keluar dari sebuah elemen.
Contoh: <HTML> <BODY>
<IMG SRC="example.com.gif" ONMOUSEOUT="alert('Menuju ke Example.com!')"> </BODY>
</HTML>
Atribut event ONMOUSEOVER digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika mouse digerakkan tepat diatas sebuah elemen.
Contoh: <HTML> <BODY>
<IMG SRC="example.com.gif" ONMOUSEOVER="alert('Menuju ke Example.com!')"> </BODY>
</HTML>
Atribut event ONMOUSEUP digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika tombol mouse dilepaskan, setelah sebelumnya tombol mouse ditekan.
Contoh: <HTML> <BODY>
<IMG SRC="example.com.gif" ONMOUSEUP="alert('Menuju ke Example.com!')"> </BODY>
Atribut event ONKEYDOWN digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika sebuah tombol keyboard ditekan.
Contoh:
Ketikkan hanya teks bukan angka:
<INPUT TYPE="text" ONKEYDOWN="return bukanAngka(event)"> </FORM>
</BODY> </HTML>
document.getElementById(x).value=y.toUpperCase(); }
</SCRIPT> </HEAD> <BODY>
Nama: <INPUT TYPE="text" ID="nama" ONKEYUP="hurufBesar(this.id)"> </BODY>
</HTML>
Setelah disebutkan atribut-atribut standar pada HTML, berikut merupakan atribut-atribut baru yang dimiliki oleh HTML5:
- 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. Contoh Atribut :
Link HTML atau HTML Links didefinisikan dengan tag <a>. Alamat link inilah yang merupakan atribut.
<a href="http://www.tik.org/">Tik</a>
<a> merupakan elemen html, href adalah name atau nama atribut sedang Tik adalah value atau nilai atribut.
Nilai suatu atribut harus selalu dimulai dan diakhiri dengan tanda petik. Biasanya menggunakan tanda petik (“…”). Tanda petik ini mengapit petikan langsung dari suatu nilai elemen. Tanda petik tunggal juga diperbolehkan untuk digunakan walaupun dalam keadaan tertentu nilai suatu atribut bisa berisi tanda kutip, untuk itu di pergunakan tanda kutip tunggal yang mengapit petikan yang tersusun di dalam petikan lain. Contoh:
name=’Organisasi “Cracker” Semarang’
Sangat disarankan untuk penulisan atribut dan nilainya tetap menggunakan huruf kecil karena pada versi HTML yang lebih baru (X)HTML meminta penulisan menggunakan huruf kecil.
Dengan versi terbaru dari HTML ini, pasti juga memiliki beberapa fitur baru yang belum ada pada versi-versi sebelumnya. Berikut fitur-fitur baru yang dimilki HTML5, yaitu:
1) Canvas
Fitur yang satu ini memungkinkan kita untuk memasukkan objek 2D atau 3D kedalam halaman web. Dengan canvas dapat membuat render grafik, diagram, gambar dan animasi secara dinamis. Awal mulanya konsep dari teknologi canvas ini diperkenalkan oleh Apple Inc. untuk digunakan dalam Mac OS X WebKit untuk membuat dashboard widgets. Sebelum canvas muncul, kita hanya bisa membuat gambar dalam browser melalui plug-ins seperti Adobe plug-ins for Flash and Scalable Vector Graphics (SVG), Vector Markup Language (VML) only in Internet Explorer, or other clever JavaScript hacks.
Namun cara kerja canvas tidak bisa bekerja sendiri. Dibutuhkan javascript untuk membuat objek di dalamnya, baik 2D maupun 3D. Saat akan menambahkan elemen canvas ke halaman web Anda, Anda bisa memanipulasinya dengan berbagai macam cara.
Untuk membuat objek di dalam canvas kita dapat mengunakan kode berikut : <!DOCTYPE html>
<html> <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
</body> </html>
Pada Mozilla 9.0.1
Pada Google chrome
Pada Opera 12.10 beta RC
2) Doctype baru
HTML lama yang biasanya memiliki Doctype yang panjang, HTML5 datang dengan membawa doctype yang lebih singkat sehingga kita tak perlu menghapal doctype lama yang panjang. Hal ini dapat dibuktikan dengan contoh berikut ini:
Dalam HTML 4 penulisan doctype seperti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.wwe.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Namun dengan HTML5 penulisannya hanya seperti ini <!DOCTYPE html>
3) HTML5 Audio
Salah satu fitur baru HTML5 yang paling fenomenal adalah disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa menggunakan plugin tambahan seperti flash player. Dengan menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita. Untuk menambahkan audio ke dalam web kita, cukup ketikkan kode berikut: <!DOCTYPE html>
<html> <body>
<source src="music/FromHere.ogg" type="audio/ogg"> Your browser does not support the audio element.
</audio> </body> </html>
Maka hasilnya akan seperti berikut:
Di coba pada Google chrome Versi 22.0.1229.94 Keterangan dari tags diatas:
- <audio>, tag audio utama, digunakan untuk memasukkan audio ke dalam HTML. - <source>, digunakan untuk mengambil source file yang akan dimainkan audionya.
Atribut pada audio
- Autoplay, atribut ini digunakan untuk member opsi kepada tag audio apakah langsung dimainkan secara otomatis atau tidak.
- Controls, atribut ini memberikan pilihan untuk menampilkan kontrol audio (volume, seeker, play/pause button).
- Type, digunakan untuk mendefinisikan tipe audio yang dimainkan. - Src, digunakan untuk mendefinisikan source audio yang dimainkan.
Saat ini, ada tiga tipe file audio yang sudah didukung HTML5 yaitu MP3, WAV, dan OGG. Berikut adalah data dukungan browser terhadap audio.
Browser MP3 Wav Ogg
Internet Explorer 9 Ya Tidak Tidak
Firefox 4.0 Tidak Ya Ya
Google Chrome 6 Ya Ya Ya
Apple Safari 5 Ya Ya Tidak
Opera 10.6 Tidak Ya Ya
4) HTML5 Video
Fitur multimedia lainnya yang didukung oleh HTML5 adalah video. Jika selama ini kita harus menggunakan flash player untuk memasukkan konten video, pada HTML5 kita tidak perlu lagi menggunakannya.
Untuk menambahkan elemen video kita gunakan kode berikut <!DOCTYPE html>
<video width="320" height="240" controls="controls"> <source src="video/movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
</body> </html>
Sehingga didapat hasil seperti berikut:
Di tes pada Google chrome Versi 22.0.1229.94 5) Geolocation
Sebuah API (Aplication Programming Interface) yang menarik, yang memungkinkan pengguna untuk berbagi lokasi mereka dengan aplikasi web. Menggunakan API Geolocation cukup mudah. Cukup meminta sebuah posisi (lokasi) dan jika pengguna menyetujui permintaan tersebut browser akan memberikan informasi lokasi tersebut. Posisi disediakan untuk browser oleh perangkat yang mendasari (misalnya, laptop atau ponsel) di mana Geolocation – enabled pada browser sedang berjalan. Informasi lokasi yang disediakan sebagai satu set koordinat lintang dan bujur bersama dengan metadata tambahan.
6) Media Penyimpanan (Storage)
Dengan HTML5, halaman web dapat menyimpan data secara lokal dalam browser pengguna. Sebelumnya, hal ini dilakukan dengan cookie. Namun, Penyimpanan Web lebih aman dan lebih cepat. Data ini tidak disertakan dengan setiap permintaan server, tetapi digunakan hanya ketika meminta. Hal ini juga memungkinkan untuk menyimpan data dalam jumlah besar, tanpa mempengaruhi kinerja website. Data disimpan dalam kunci / nilai pasangan, dan halaman web hanya dapat mengakses data yang disimpan dengan sendirinya.
Dengan HTML5, web buatan kita dapat menyimpan data secara lokal didalam browser user, sebelumnya hal ini dekerjakan dengan cookies.
Penyimpanan web menjadi lebih aman dan lebih cepat, karena data tidak disertakan dengan setiap permintaan ke server, tetapi hanya ketika meminta data.
Seperti pada konsep Offline fitur, HTML5 mendukung beberapa jenis media penyimpanan baru yaitu Web Storage (name/value pairs), Indexed DB, dan Web SQL Database. Keuntungan dari adanya berbagai macam media penyimpanan ini adalah peningkatan kecepatan dari aplikasi.
7) Cross Document Messaging
Sampai saat ini, komunikasi antara frame, tab, dan jendela di browser yang berjalan sepenuhnya dibatasi karena masalah keamanan. Dapat berkomunikasi antar frame mungkin berguna untuk situs tertentu untuk berbagi Informasi dari dalam browser, tetapi juga akan membuka kemungkinan untuk serangan berbahaya. Jika browser diberikan kemampuan untuk pemrograman mengakses konten dimuat ke frame lain dan tab, situs akan dapat mencuri informasi apapun yang mereka bisa dapatkan dari konten situs lain yang menggunakan scripting. Contoh klasik adalah "mashup", kombinasi dari aplikasi yang berbeda seperti pemetaan, chatting, dan berita dari berbagai situs, semua dikombinasikan bersama untuk membentuk sebuah meta-aplikasi baru. Di kasus ini, satu set yang terkoordinasi dengan baik dari meta-aplikasi akan dilayani oleh saluran komunikasi langsung dalam browser itu sendiri. Untuk memenuhi kebutuhan ini, vendor browser dan badan standar sepakat untuk memperkenalkan fitur baru: Cross Document Messaging.
8) WebSocket API
Fitur komunikasi yang paling powerfull di spesifikasi HTML5: WebSocket, yang mendefinisikan saluran komunikasi full-duplex yang beroperasi melalui soket tunggal dalam web. WebSocket tidak hanya peningkatan tambahan untuk konvensional HTTP komunikasi, melainkan merupakan kemajuan yang besar, terutama untuk real-time, event-driven aplikasi web.
9) Semantic/Struktur Element Yang Baru
Para web designer yang suka sekali memainkan elemen div, nav, dan lainnya, akan di-stop oleh fitur Semantics dalam HTML5. Semantics akan menjadi masa depan bagi para tetua tag layout dan format. Pastinya web akan menjadi lebih dinamis dan menarik akibat fitur ini. Fitur ini menjadikan web site yang menggunakan teknologi HTML 5 lebih mudah dikenali oleh Google Search Engine. Akibatnya, web aplikasi akan sering muncul pada mesin pencari google sehingga akan lebih sering diakses dan cepat diketahui oleh orang lain.
10) Web Workers
Workers memungkinkan halaman web untuk memproses Javascript yang mereka miliki dengan respon yang lebih cepat dan multitasking.
Dengan semua fitur yang telah disebutkan di atas dapat dilihat bahwa HTML5 akan merajai dunia aplikasi kedepannya. Meskipun belum seluruh web browser mendukung teknologi ini, tetapi kemudahan dalam pengembangan maupun penggunaan diyakini akan menjadi nilai dari teknologi ini.
HTML5 memang belum menjadi standar resmi, dan belum ada browser yang memiliki dukungan HTML5 secara penuh. Namun pada beberapa browser sudah menambahkan HTML5 pada versi terbaru mereka, misalnya (Safari, Chrome, Firefox, Opera, dan Internet Explorer)
2.5 Kelebihan dan Kelemahan HTML5
2.5.1 Kelebihan HTML5
Kelebihan yang paling mencolok dari HTML5 adalah kemudahan akses yang lebih baik. Tag Baru seperti header, footer, nav, section, dll memungkinkan browser untuk mengakses konten dengan lebih mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class. Dengan tag html5 yang baru, browser mampu menjelajah dokumen HTML dengan lebih baik lagi. Selain itu dukungan yang lebih baik terhadap video dan audio. Kelebihan HTML5 yang lainnya antara lain:
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.
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.
Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.
lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”.
Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.
Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.
Sharper focus on Web Application Requiments, 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.
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).
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 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. HTML5 merupakan perangkat mandiri
Penanganan kesalahan yang lebih baik
Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash ) Lebih markup untuk menggantikan scripting
2.5.2 Kelemahan HTML5
Seperti halnya teknologi-teknologi lain yang dimana mempunyai banyak kelebihan pasti juga ada kekurangannya. Hal ini pun terjadi pada teknologi HTML5. Kekurangan HTML5 yaitu masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, akibatnya fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser.
2.6 Implementasi HTML5
Banyak hal yang dijanjikan akan hadir di HTML 5 yang dapat mengubah sebuah website menjadi lebih interaktif serta lebih kaya konten dan fungsinya. Tetapi sayangnya implementasinya masih belum sempurna. Masalah kompatibilitas/pendukung dari browser dan juga belum matangnya HTML 5, telah menjadi sedikit kendala. Walupun begitu, sudah banyak para developer web yang mencoba membuat aplikasi web berbasiskan HTML 5. Berikut 5 contoh website yang sudah mengimplementasikan fitur yang diberikan HTML 5 dengan tepat dan menarik.
1. DeviantART muro
Sebuah aplikasi web “drawing” yang memiliki efek menarik di brush toolnya. DeviantART muro juga mendukung fitur layering serta fitur “save on the fly” yang tentunya menggunakan konsep cloud computing.
2. Bert’s Breakdown
3. Canvas + SoundManager Audio Player dengan Efek Waveform
Pemutar audio berbasis HTML 5 ini cukup menarik. Dengan didukung UI yang mempercantik tampilan player nya, serta implementasi animasi yang cukup rumit, membuat website ini menunjukan kekuatan HTML 5 di segi multimedia. Khususnya untuk konten audio.
4. Pendeteksi Wajah dengan JavaScript melalui HTML5 Canvas
Kita mungkin sudah sering melihat fitur pendeteksi wajah di berbagai aplikasi seperti iPhoto dan juga Picasa. Bahkan Facebook juga sudah mengeluarkan fitur seperti ini. Uniknya face detection ini dibuat dengan hanya memanfaatkan JavaScript + HTML 5 saja.
5. Wikipedia Knowledge Map
BAB III
PENUTUP
3.1 Kesimpulan
Dengan semakin majunya ilmu pengetahuan dan teknologi informasi, telah berdampak pada berbagai hal, tak terkecuali pada semakin majunya teknologi internet terutama pada program standar HTML pada website. Hypertext Mark up Language atau yang biasa dikenal dengan HTML merupakan suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. Sampai saat ini teknlogi HTML telah sampai pada versi yang kelima yang telah banyak mengalami kemajuan baik dari segi kemudahan maupun hasil output-nya.
HTML5 telah menjadi salah satu teknologi yang sangat ditunggu-tunggu oleh para web developer maupun para pengguna Internet. Banyak hal yang dijanjikan akan hadir di HTML 5 yang dapat mengubah sebuah website menjadi lebih interaktif serta lebih kaya konten dan fungsinya. Dengan semua fitur yang dimiliki oleh HTML5 maka bukan tidak mungkin HTML5 akan merajai dunia aplikasi kedepannya. Meskipun belum seluruh web browser mendukung teknologi ini, tetapi kemudahan dalam pengembangan maupun penggunaan diyakini akan menjadi nilai dari teknologi ini.
3.2 Saran
- Banyak-banyaklah mencari informasi dan belajar materi-materi HTML sebelum mempraktekkannya
- Untuk mengetahui apakah browser yang kita gunakan sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport, bukalah website berikut: http://html5test.com
DAFTAR PUSTAKA
- http://danangsr.blogspot.com/2012/10/artikel-tentang-html-5.html
- http://id.wikipedia.org/wiki/Bahasa_markah
- http://id.wikipedia.org/wiki/HTML
- http://id.wikipedia.org/wiki/HTML5
- http://www.jeanotnahasan.com/2012/02/pengertian-tujuan-fitur-baru-dan.html
- http://newbiescript.blogspot.com/2012/11/fitur-baru-html5.html
- http://www.reyvababtista.com/2011/12/html5-apa-fitur-tambahannya.html
