Tugas TIK: MAKALAH HTML 5

MAKALAH

“HTML5”

Disusun oleh :

Okta Pratiwi

1102412102

Dosen Pengampu :

Septia Lutfi

Teknologi Pendidikan Universitas Negeri Semarang Tahun 2012/ 2013

BAB I

PENDAHULUAN

A. Latar Belakang

Semakin kedepan perkembangan teknologi komunikasi akan semakin melangkah lebih cepat dan akan semakin mengalami perkembangan yangg pesat. Perkembangan teknologi yang sangat pesat saat ini mendorong internet dan web untuk menjadi standar komunikasi yang terbaru. Dengan diperkenalkannya konsep Web 2.0 dan standar HTML5, web diharapkan dapat menjadi standar komunikasi yang universal. Terdapat banyak fitur-fitur baru yang ditawarkan oleh HTML5 antara lain yaitu Websocket yang dapat menyediakan komunikasi aliran data secara real-time melalui soket TCP serta Web Real-Time Communication (WebRTC) API yang dapat menangkap input audio dan video dari mikrofon dan webcam pengguna kemudian mengalirkan datanya pada pengguna lain secara peer-to-peer. Semua hal ini dapat dilakukan pada aplikasi peramban perangkat apapun bahkan pada perangkat mobile, jika aplikasi peramban tersebut telah mengimplementasi fitur-fitur dari HTML5.

Rich Internet Application (RIA) menjadi tren perkembangan teknologi web saat ini. Dengan teknologi tersebut, aplikasi web didesain dengan pendekatan aplikasi desktop, mengedepankan kecepatan akses, kemudahan bagi pengguna, dan keinteraktifan. Sehingga, membawa teknologi komunikasi VoIP ke teknologi RIA akan semakin memudahkan pengguna. Atas dasar itu, pada tugas akhir ini akan dibuat aplikasi klien SIP berbasis web yang mengimplementasikan teknologi HTML5 sehingga pengguna dapat melakukan inisiasi sesi VoIP dan mengirimkan metode-metode permintaan SIP secara langsung dari peramban tanpa tambahan aplikasi pengaya.

B. Rumusan Masalah

1. Apakah yang dimaksud dengan HTML5 ?

2. Bagaimana sejarah terbentuknya HTML5 ?

3. Bagaimana Perkembangan HTML5 ?

4. Bagaimana cara menggunakan HTML5 ?

5. Bagaimana penerapan HTML5 ?

6. Apa saja fitur baru yang terdapat dalam HTML5 ?

7. Apa saja tag yang ada dalam HTML5 ?

8. Apa tujuan diciptakannya HTML5 ?

9. Apakah kelebihan HTML 5 ?

C. Tujuan

1. Mengetahui pengertian HTML5.

2. Mengetahui bagaimana sejarah HTML5.

3. Mengetahui perkembangan HTML5.

4. Mengetahui cara menggunakan HTML5.

5. Mengetahui tujuan diciptakan HTML5.

6. Mengetahui fitur baru yang ada dalam HTML5.

7. Mengetahui penerapan HTML5.

8. Mengetahui tag yang ada dalam HTML5.

9. Mengetahui kelebihan HTML5.

BAB II

PEMBAHASAN

A. Mengenal HTML5

HTML biasa di kenal pada tahun 1980 yang dikembangkan oleh IBM, dengan menggabungkan perintah – perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, yaitu sebuah bahasa yang menggunakan simbol/kode-kode sebagai basisnya. Hyper Text Markup Language (HTML) merupakan 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 dengan wujud yang terintegerasi. berawal dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language). HTML menjadi standar yang digunakan secara luas untuk menampilkan halaman web. Pada saat ini HTML merupakan standar Internet yang 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).

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 Language, 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. HTML pada saat ini telah sampa pada versi 5.

Sudah tak asing lagi tentunya jika kita mendengar tentang HTML5 mungkin sebagian besar masyarakat sudah mengetahui apa itu HTML5. Dan kemungkinan besar sudah ada yang pernah menggunakan HTML5 untuk membangun suatu website. HTML5 sendiri adalah pembaharuan atau revisi kelima dari HTML yang pertama kali diluncurkan pada tahun 1990 dan versi keempat adalah HTML4 pada tahun 1997 dan hingga pada bulan Juni 2011 masih dalam proses pengembangan.

Menurut situs wikipedia, HTML5 adalah sebuah bahasa pemrograman internet yang digunakan untuk menstrukturkan dan menampilkan isi dari suatu situs tertentu. HTML5 merupakan salah satu hasil karya proyek dari W3C (Word Wide Web Consortium) untuk mengartikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 ini adalah hasil dari pengembangan HTML4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda- beda oleh banyak perangkat lunak pembuat web. Tujuan utama dari pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar dapat mendukung teknologi multimedia terbaru, dan mudah dibaca oleh manusia sekaligus mudah untuk dimengerti oleh mesin

HTML5 adalah sensor dari HTML 4.01 diluncurkan pada tahun 1999. Sekarang seluruh browser utama seperti Chrome, Safari, Firefox, Opera, dan IE sudah dapat mendukung HTML5. HTML5 kini dapat bekerja dengan CSS3 namun masih dalam tahap pengembangan. Sejak dimulai peluncuran, HTML5 selalu mengalami pengembangan hal ini disebabkan karena W3C selalu menambahkan dan mengembangkan fitur- fitur yang berada pada HTML5 dan berencana meluncurkan versi stable-nya pada tahun 2014.

Pada HTML5 terdapat beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa elemen dan atribut tersebut 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). Masih ada 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).

B. Sejarah HTML5

HTML5 adalah standar baru dari HTML yang sebelum tercipta pasti mempunyai sejarah bagaimana HTML5 bisa dimunculkan. Berawal dari The Web Hypertext Application Technology Working Group (WHATWG), yang mulai bekerja pada standar baru pada tahun 2004. Pada saat itu, HTML 4.01 belum diperbarui sejak tahun 2000, tetapi difokuskan pada perkembangan masa depan XHTML 2.0 oleh World Wide Web Consortium (W3C). Pada tahun 2009, W3C memperbolehkan XHTML 2.0 dengan memberikan hak spesial Working Group untuk berakhir dan memutuskan untuk tidak memperbaharui itu. W3C dan WHATWG pada saat ini bekerja sama dengan pengembangan HTML5.

HTML5 sering dibandingkan dengan Flash, tetapi perlu disadari bahwa kedua teknologi tersebut berbeda. Keduanya termasuk fitur untuk memutar audio dan video dalam halaman web, dan untuk menggunakan Scalable Vector Graphics. HTML5 tidak dapat digunakan untuk animasi dan interaktivitas, tapi harus dilengkapi dengan CSS3 atau JavaScript.

Meskipun HTML5 telah dikenal oleh kalangan pengembang web selama bertahun-tahun, sehingga hal 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 dan mendukung browser dengan 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.

Pada bulan Juni 2004 mozilla Foundation dan Opera Software mempresentasikan posisi pada World Wide Web Consortium (W3C) workshop, memfokuskan pada pengembangan teknologi yang kompatibel dengan browser yang ada, termasuk spesifikasi rancangan awal Web Forms 2.0. Workshop ini diakhiri dengan voting, 8 lawan 14, untuk melanjutkan pekerjaan pada HTML. Setelah bulan itu, dimana harus bekerja berdasarkan kertas posisi pindah ke Web Hypertext Application Technology Working Group (WHATWG) yang baru terbentuk, dan yang kedua adalah rancangan, sementara Aplikasi Web 1.0, juga turut diumumkan. Kedua spesifikasi tersebut lantas bergabung untuk membentuk HTML5, spesifikasi HTML5 diambil sebagai titik awal dari pekerjaan kelompok kerja HTML baru dari W3C pada tahun 2007.

2008 - 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 mencapai status Rekomendasi akhir.

2011 - Last Call. Pada tanggal 14 Februari 2011, W3C, pada Mei 2011 , kelompok kerja canggih HTML5 untuk "Last Call", mengundang masyarakat dalam dan di luar W3C untuk mengkonfirmasi kesehatan teknis dari spesifikasi. W3C sedang mengembangkan tes lengkap, untuk mencapai interoperabilitas luas guna spesifikasi lengkap pada tahun 2014, yang sekarang merupakan tanggal target Rekomendasi. Pada bulan Januari 2011, WHATWG berganti nama nya "HTML5" standar hidup untuk "HTML". W3C tetap melanjutkan proyek untuk melepaskan HTML5.

2012 - Calon Rekomendasi. Pada bulan Juli 2012, WHATWG dan W3C telah 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".

C. Perkembangan HTML

Sebelum kita membahas lebih mendalam tentang mengetahui seluk beluk HTML5. Mungkin perlu diketahui mengenai perkembangan dari HTML hingga saat ini. Yang akan di ringkas sebagai berikut :

1. HTML versi 1.0 merupakan 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.

2. HTML versi 2.0. Muncul 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.

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

4. HTML versi 3.2. Dirilis pada bulan Mei 1996. Keluarnya versi ini karena 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.

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

6. Dan yang saat ini sedang menjadi proyek dari pekerja pengembang HTML adalah HTML5. Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0 masih dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0.

Perkembangan teknologi yang dipergunakan oleh HTML5 yaitu:

· API (Aplication Programming Interface) merupakan teknologi yang akan di usung oleh HTML5, berikut ini adalah batasan-batasannya :

1. Offline Data Storage

Memungkinkan kita bisa mengakses data lama di browser dalam keadaan offline. Contoh offline data seperti kita membaca arsip e-mail pada program Outlook atau Thunderbird.

2. Drag and Drop

Drag and Drop ini kita dapat dengan memudahkan mendrag atau mendrop misalnya text, hyperlink, bahkan file di aplikasi dekstop sekalipun.

3. Geolocation

Aplikasi ini memungkinkan kita untuk untuk mengetahui lokasi geografis, sumber informasi di ambil dari GPS (Global Position System).

D. Cara menggunakan HTML 5 atau Semantic Web

Sebenarnya menggunakan HTML5 atau Semantic Web itu sangat mudah jika mengerti standarisasi HTML5 itu sendiri. Kamu bisa mendapatkannya melalui situs www.w3schools.com, www.w3.org, serta ada banyak yang lain yang dapat anda jumpai di internet. Bila anda tetap bingung memakai element html5, anda dapat mendapatkan jalan keluar membaca flowchart html5 disini.

Webmaster profesional pasti selalu melakukan testing dengan menggunakan validator entah itu plugin browser maupun aplikasi web validator secara online. Saya punya 2 rekomendasi validator HTML5 untuk kamu gunakan sebagai validasi web kamu, yaitu: html5.validator.nu dan validator.w3.org.

Kesempatan yang akan tiba bila ada waktu dapat saya terangkan langkah-cara mengimplementasikan HTML5 atau semantic web didalam situs design. Oke, sampai di sini dulu penjelasan saya untuk pengertian HTML5 atau Semantic Web.

E. Penerapan baru HTML5 pada teknologi Web masa kini

Dilihat dari perkembangan saat ini, penerapan HTML5 pada awalnya dibagi menjadi beberapa spesifikasi yang dapat memisahkan dokumen standar untuk menjaga spesifikasi terfokus. HTML5 dianggap lebih pandai untuk mengatur dan mengedit beberapa fitur dokumen web masa kini. Dengan cara ini, satu masalah pada markup kecil tidak akan mempengaruhi markup secara keseluruhan isi dari tampilan HTML.

Para ahli dari berbagai penjuru dunia telah berkontribusi bersama pada tulisan mereka sendiri untuk membahas penerapan fitur HTML5. Penerapan fitur HTML5 yang mereka bahas mengacu pada set asli fitur, termasuk Geolocation, dan berbagai API pada HMTL5. Fitur dalam HTML5 sangat banyak dan berguna pada pengelolaan halaman web. Sampai sekarang ini, fitur pada HTML5 yang dapat dimanfaatkan oleh developer terbagi menjadi beberapa bagian seperti berikut:

1. Canvas

Elemen canvas digunakan untuk draw atau menggambar. Canvas hanya saja disini bukan alat untuk menggambar tapi hanya sebagai media pendukung untuk menggambar. Untuk menggambar dengan grafik disini biasanya dengan menggunakan javascript. Contoh penggunaan Canvas :

<canvas id="myCanvas"></canvas>
<script type="text/javascript">//Scipt untuk menggambar-->
var canvas=document.getElementById('myCanvas');//fungsi untuk menggambar canvas.
var ctx=canvas.getContext('2d');//gambar bujur sangkar pertama
ctx.fillStyle='#FF0000';//memberikan warna pada bagian canvas
ctx.fillRect(0,0,80,100);//memberikan parameter titik koordinat
</script>//mengakhiri script canvas

Output :

Canvas tersebut bisa diatur ukurannya dengan memasukkan attribut height dan weight pada tag canvas dengan cara <canvas id=”mycanvas” height=”300px” weight=”300px”></canvas>.

2. Audio

Untuk memasukkan suara pada html bisa menggunakan tag <audio>. Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP. Untuk dukungan pada web browser bisa dilihat pada tabel berikut ini.

Browser	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3	YES	YES
Safari	YES	YES	NO
Opera	NO	YES	YES

Dan untuk MIME-nya adalah sebagai berikut ini.

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

Untuk attribut audio diatas adalah tampak seperti pada tabel berikut ini :

Attribut	Value	Deskripsi
autoplay	autoplay	Untuk memulai audio secara otomatis pada web terbuka
controls	controls	Untuk menampilkan kontrol seperti volome, seek audio, dan juga tombol untuk memulai/pause
loop	loop	Untuk mengulang audio kembali setelah pemutaran awal selesai
muted	muted	Untuk mematikan suara
preload	auto metadata none	Untuk memuat ulang audio ketika halaman dimuat ulang
src	URL	Untuk memberikan alamat web audio ketika diklik.

Contoh Script :

Your browser does not support the audio tag.

</audio><-- menutup tag audio-->

3. Video

Sama halnya dengan audio, hanya saja untuk video kita gunakan tag <video> dan menutupnya kembali dengan </video>. Untuk format yang didukung saat ini ada 3 yaitu MP4, Ogg dan WebM.

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4	YES	YES
Safari	YES	NO	NO
Opera	NO	YES	YES

Format	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

Attribut yang digunakan pada tag video adalah sebagai berikut ini.

Attribute	Value	Deskripsi
autoplay	autoplay	Memulai secara otomatis video
controls	controls	Untuk menampilkan control video
Height	pixels	Untuk mengatur tinggi frame video
loop	Loop	Memutar video secara berulang-ulang
muted	muted	Untuk mematikan fungsi suara pada video
poster	URL	Untuk memunculkan poster/gambar pada saat video buffer atau diunduh.
preload	auto metadata none	Untuk memuat ulang video
src	URL	Untuk memberikan link video
width	pixels	Untuk mengatur lebar frame video

4. Source

Source digunakan disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan kita gunakan jika kita memberikan 2 sumber dimana file tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini adalah web browser akan memilih memutar yang mana nantinya sesuai dengan format yang didukung oleh web browser.

Contoh penggunaan <Source> </source> :

<source src="horse.ogg" type="audio/ogg"> <--sumber audio 1 ekstensi ogg->
<source src="horse.mp3" type="audio/mpeg"><--sumber audio 2 ekstensi mp3--> Your browser does not support the audio element.

Attribut :

Attribute	Value	Deskripsi
Media	media_query	Format dari media yang digunakan
Src	URL	Untuk memberikan link sumber media
Type	MIME_type	Untuk mendefenisikan tipe MIME

5. Embed

Embed digunakan untuk melampirkan file dari eksternal seperti *.swf dan lain-lain.

contoh penggunaannya adalah sebagai berikut :

Attribut penggunaan embed bisa ditambahkan pada tag tersebut attribut seperti pada tabel berikut ini.

Attribute	Value	Description
Height	pixels	Untuk mendefenisikan ukuran tinggi frame media.
Src	URL	Untuk memberikan sumber media yang dilampirkan
Type	MIME_type	Untuk menspesifikasikan tipe dari MIME
Width	pixels	Untuk mengatur lebar dari frame media pada saat program dijalankan di browser.

6. Track

Track disini digunakan untuk melampirkan seperti subtitle text pada media. Contoh penggunaanya adalah sebagai berikut.

Attribut yang digunakan pada tag track ini adalah sebagai berikut ini.

Attribute	Value	Deskripsi
default	default	Memberikan text default/subtitle pada video
kind	captions chapters descriptions metadata subtitles	Menspesifikasikan format dari text yang akan dimunculkan pada layar
label	text	Memberikan labael pada subtitle
src	URL	Merupakan suatu keharusan jika kita ingin melampirkan file
srclang	language_code	Menspesifikasikan tipe dari file lampiran seperti jenisnya (required if kind="subtitles")

7. SVG

SVG (Scalable Vector Graphics) merupakan tag yang digunakan untuk menggambar selain yang sebelumnya kita gunakan seperti canvas. SVG didefenisikan dengan format XML. Setiap elemen dari SVG dapat dianimasikan. Kelebihan dari SVG ini adalah tidak mengurangi kualitas darigambar jika diperbesar karena berbasis vektor sehingga SVG juga direkomendasikan oleh W3C.

Beberapa keuntungan SVG antara lain :

· Gambar SVG dapat dibuat dan diubah dengan menggunakan banyak text editor biasa

· Gambar SVG dapat dicari, diindex, dimasukkan ke script dan juga di kompres

· Gambar pada SVG dapat diubah ukurannya

· Gambar SVG dapat dicetak dengan kualitas tinggi pada resolusi berapapun

· Gambar SVG dapat diperbesar tampa mengurangi kualitas gambar

Contoh penggunaan SVG :

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>

Hasilnya adalah sebagai berikut :

Perbedaan antara SVG dengan Canvas adalah :

· SVG adalah sebuah bahasa untuk mendeskripsikan grafik 2D dalam XML

· Canvas menggambar grafik 2D (dengan bantuan javascript)

· SVG adlah dasar XML yang artinya bahwa setiap elemen tersedian utuk SVG DOM dan juga kita dapat menambahkan javaScript untuk elemen.

· Dalam SVG, setiap gambar yang dibentuk direkomendasikan menjadi sebuah objek. Jika objek SVG diubah maka browser secara otomatis membentuk ulang.

· Canvas mengubah/menterjemahkan berdasarkan pixel dan jika posisi berubah maka kita harus menggambar ulang.

8. Drag and Drop

Drag and Drop adalah sebuah fitur umum. Dengan fitur ini memukinkan untuk memindahkan objek ke lokasi lainnya.

Contoh Program :

9. Geolocation

Geolocation digunakan untuk mengecek posisi si pengguna jika memukinkan.

Contoh Program :

10. Input Types

Input tipe pada form yang baru digunakan pada HTML5 trdapat tipe yang baru. Hanya saja tidak semua tipe didukung oleh web browser.
Tag tersebut diataranya adalah sebagai berikut :

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Untuk format penggunaan input type tersebut sama hanya dengan input tipe yang digunakan pada form di HTML4 yaitu sebagai berikut ini.
Birthday (date and time): <input type="datetime" name="bdaytime">

Bagi programer dan developer yang berkecimpung dalam perkembangan dunia web. HTML5 merupakan sebuah jawaban teknologi yang efektif dan tepat untuk membangun aplikasi berbasis web. Meskipun HTML5 saat ini masih dalam tahap pengembangan, namun tingkat kepercayaan dan pemakaian HTML5 tetap meningkat signifikan.

F. Fitur HTML5

HTML5 adalah hasil pengembangan dari HTML versi 4 yang diman, HTML 5 dikembangkan berdasarkan standart yang sudah diatur, yaitu:

· Fitur-fitur baru harus berdasarkan HTML, CSS, DOM, dan JavaScript

· Kebutuhan akan plugin external(seperti Flash) harus dikurangi

· Penanganan eror harus lebih mudah dari pada versi sebelumnya

· Scripting harus diganti dengan lebih banyak markup

· HTML5 harus device-independent

· Proses pengembangan harus dapat dilihat oleh publik.

Untuk saat ini HTML5 sudah memiliki beberapa fitur yang menjadikan kita lebih kreatif dalam membuat suatu website. Kehadiran HTML5 dirasa cukup membantu dengan penambahan beberapa fitur baru. Pada HTML5 terdapat beberapa penambahan fitur diantaranya sebagai berikut.

- Elemen Canvas

- Elemen Media

- Elemen Form

- Elemen Semantik / Struktural.

G. Tag yang ada pada HTML5

Tag yang ada pada HTML5 diantaranya ;

<! - ... ->

Mentakrifkan komen

<! DOCTYPE>

Mentakrifkan jenis dokumen

<a>

Mentakrifkan hiperpautan

<abbr>

Mentakrifkan singkatan

Tidak disokong dalam HTML5. Mentakrifkan sapaan

Mentakrifkan maklumat hubungan untuk pengarang / pemilik dokumen

Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Mentakrifkan applet tertanam

<area>

Mentakrifkan kawasan di dalam peta imej-

Mentakrifkan artikel

<aside>

Mendefinisikan kandungan selain dari kandungan halaman

<audio>

Mentakrifkan kandungan bunyi

<b>

Mentakrifkan teks tebal

<base>

Menentukan URL asas / sasaran untuk semua URL relatif dalam dokumen

Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Menetapkan warna lalai, saiz, dan fon untuk semua teks dalam dokumen

<bdi>

Mengasingkan sebahagian daripada teks yang mungkin akan diformat dalam arah yang berbeza dari teks lain di luar

<bdo>

MENGGANTIKAN arah teks semasa

<big>

Tidak disokong dalam HTML5. Mentakrifkan teks besar

Mentakrifkan seksyen yang dipetik daripada sumber yang lain

<body>

Mentakrifkan badan dokumen

<br>

Mentakrifkan baris tunggal

Mentakrifkan butang diklik

Digunakan untuk menarik grafik, on the fly, melalui skrip (biasanya JavaScript)

Mentakrifkan kapsyen jadual

Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Mentakrifkan teks berpusat

<cite>

Mentakrifkan tajuk kerja

<code>

Mentakrifkan sekeping kod komputer

<col>

Menentukan sifat lajur untuk setiap lajur dalam unsur <colgroup>

Menentukan kumpulan satu atau lebih lajur dalam jadual untuk format

Mentakrifkan butang arahan yang pengguna boleh sembah

Menentukan senarai pilihan yang telah ditetapkan untuk kawalan input

<dd>

Mentakrifkan Penerangan item dalam senarai definisi

<del>

Mentakrifkan teks yang telah dipadam dari dokumen

Mentakrifkan butiran tambahan bahawa pengguna boleh melihat atau menyembunyikan

<dfn>

Mentakrifkan istilah definisi

<DIR>

Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Mentakrifkan senarai direktori

<div>

Mentakrifkan seksyen dalam dokumen

<dl>

Mentakrifkan senarai definisi

<dt>

Mentakrifkan istilah (item) dalam senarai definisi

<em>

Mentakrifkan teks ditekankan

<embed>

Mentakrifkan bekas untuk permohonan luar (bukan HTML)

Kumpulan elemen berkaitan dalam bentuk

Mentakrifkan kapsyen untuk elemen <figure>

Menentukan kandungan layan-diri

<FONT>

Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Mentakrifkan fon, warna, dan saiz untuk teks

Mentakrifkan pengaki untuk dokumen atau seksyen

<form>

Mentakrifkan bentuk HTML untuk input pengguna

<frame>

Tidak disokong dalam HTML5. Mentakrifkan tetingkap (bingkai) dalam frameset

Tidak disokong dalam HTML5. Mentakrifkan set bingkai

<h1> untuk <h6>

Mentakrifkan tajuk HTML

Mentakrifkan maklumat mengenai dokumen

Mentakrifkan header untuk dokumen atau seksyen

Kumpulan menuju (<h1> untuk <h6>) elemen

<hr>

Mentakrifkan perubahan tema dalam kandungan

<html>

Mentakrifkan akar dokumen HTML

<i>

Mentakrifkan sebahagian daripada teks dengan suara alternatif atau mood

Mentakrifkan bingkai sebaris

<img>

Mentakrifkan imej

<input>

Mentakrifkan kawalan input

<ins>

Mentakrifkan teks yang telah dimasukkan ke dalam dokumen

<kbd>

Mentakrifkan input papan kekunci

Mentakrifkan bidang penjana key-sepasang (untuk bentuk)

<label>

Mentakrifkan label untuk elemen <input>

Mentakrifkan kapsyen untuk <fieldset>, <angka>, atau elemen <details>

<li>

Mentakrifkan item senarai

<link>

Mentakrifkan hubungan antara dokumen dan sumber luaran (yang paling digunakan untuk menghubungkan kepada style sheet)

<map>

Mentakrifkan client-side-peta imej

<mark>

Mentakrifkan teks yang ditanda / diserlahkan

<menu>

Mentakrifkan senarai / menu arahan

<meta>

Mentakrifkan metadata tentang dokumen HTML

<meter>

Mentakrifkan ukuran skalar dalam lingkungan yang dikenali (tolok)

<nav>

Mentakrifkan Pautan navigasi

Tidak disokong dalam HTML5. Mentakrifkan kandungan alternatif bagi pengguna yang tidak menyokong bingkai

Mentakrifkan kandungan alternatif bagi pengguna yang tidak menyokong skrip client-side

Mentakrifkan objek terbenam

<ol>

Mentakrifkan senarai diperintahkan

Mentakrifkan kumpulan pilihan yang berkaitan dalam senarai drop-down

Mentakrifkan pilihan dalam senarai drop-down

Mentakrifkan hasil daripada pengiraan

<p>

Mentakrifkan perenggan

<param>

Mentakrifkan parameter bagi sesuatu objek

<pre>

Mentakrifkan teks diformat

Mewakili kemajuan tugas

<q>

Mentakrifkan petikan pendek

<rp>

Mentakrifkan apa untuk menunjukkan dalam pelayar yang tidak menyokong anotasi ruby

<rt>

Mentakrifkan penjelasan / sebutan aksara (tipografi Asia Timur)

<ruby>

Mentakrifkan anotasi ruby ??(tipografi Asia Timur)

<s>

Mentakrifkan teks yang tidak lagi betul

<samp>

Mentakrifkan output sampel dari program komputer

Mentakrifkan skrip client-side

Mentakrifkan seksyen dalam dokumen

Mentakrifkan senarai drop-down

<small>

Mentakrifkan teks kecil

Mentakrifkan pelbagai sumber media untuk unsur-unsur media (<video> dan <audio>)

<span>

Mentakrifkan seksyen dalam dokumen

Tidak disokong dalam HTML5. Dikecam dalam HTML 4.01. Mentakrifkan teks batal

Mentakrifkan teks penting

<style>

Mentakrifkan maklumat gaya untuk dokumen

<sub>

Mentakrifkan teks subscripted

Mentakrifkan tajuk dilihat untuk elemen <details>

<sup>

Mentakrifkan teks ditandakan

<table>

Mentakrifkan jadual

<tbody>

Kumpulan kandungan badan dalam jadual

<td>

Mentakrifkan sel dalam jadual

Mentakrifkan kawalan input multiline (kawasan teks)

<tfoot>

Kumpulan kandungan pengaki dalam jadual

<th>

Mentakrifkan sel pengepala dalam jadual

<thead>

Kumpulan kandungan pengepala dalam jadual

<time>

Mentakrifkan tarikh / masa

<title>

Mentakrifkan tajuk untuk dokumen

<br

Mentakrifkan berturut-turut dalam jadual

<track>

Mentakrifkan trek teks unsur-unsur untuk media (<video> dan <audio>)

Tidak disokong dalam HTML5. Mentakrifkan teks teletip

<u>

Mentakrifkan teks yang harus stylistically berbeza daripada teks biasa

<ul>

Mentakrifkan senarai tidak tertib

<var>

Mentakrifkan pembolehubah

<video>

Mentakrifkan video atau filem

<wbr>

Mentakrifkan mungkin line break

H. Tujuan adanya HTML5

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.

Selain itu, HTML5 juga membawa fungsi-fungsi yang baru seperti:

1. Element

Article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video.

2. Input Type pada Form

Dates and times, email, url, search

3. Attribut

ping (pada a dan area), charset (pada meta), async (pada script)

I. Kelebihan HTML5

Dari berbagai macam fitur yang telah di sebutkan diatas tentunya terdapat kelebihan yang terdapat pada HTML5. Kelebihan tersebut diantaranya adalah sebagai berikut.

Kelebihan yang dimiliki HTML 5 antara lain

· 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

· Penanagan kesalahan yang lebih baik

· Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )

· Lebih markup untuk menggantikan scripting

Adapun kelebihan yang paling menonjol dari HTML 5 adalah kemudahan akses yang lebih baik. Tag Baru seperti header, footer, nav, section, asidedll memungkinkan browser untuk mengakses konten dengan mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class.

BAB III

PENUTUP

A. Kesimpulan

Perkembangan teknologi akan selalu maju dan berkembang dengan pesat. Semakin kedepan teknologi adalah suatu kebutuhan dan bukan hal yang asing lagi. kemunculan HTML5 adalah salah satu upaya untuk dapat meningkatkan teknologi agar terus berkembang. Fitur-fitur baru pada HTML5 yang dimunculkan dan digunakan pada teknologi web memang pantas untuk diaktakan sebagai inovasi teknologi. Perkembangan dari HTML versi 4 terjawab sudah dengan kehadiran HTML5. Para pengembang dan kelomppok kerja teknologi web akan terus meningkatkan dan mengembangkan HTML5 agar bisa digunakan pada semua browser.

Kelebihan yang paling menonjol dari HTML5 adalah kemudahan akses yang lebih baik. Tag Baru seperti header, footer, nav, section, asidedll memungkinkan browser untuk mengakses konten dengan mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class. Dengan tag html 5 yang baru, browser mampu menjelajah dokumen HTML dengan lebih baik lagi. Selain itu dukungan yang lebih baik terhadap video dan audio. HTML5 diperkirakan akan terus hadir pada era selanjutnya. Pendesainan pada HTML5 juga dirancang untuk era mobile. Kita akan menunggu kehadiran era tersebut dan tentunya bisa memanfaatkan teknologi sebaik mungkin.

B. Saran

Seabagai masukan ataupun saran yang dapat penulis sampaikan adalah untuk para pengembang teknologi ciptakanlah suatu teknologi yang tentunya bisa mendatangkan manfaat dan kebaikan bagi para penggunanya. Tidak semata hanya mendatangkan keuntungan pribadi tetapi bisa mendatangkan keuntungan bagi semua pihak baik dari pihak pembuat maupun penikmat teknologi. Ciptakan teknologi yang bisa membawa perubahan dalam kehidupan.

Tugas TIK

Halaman

MAKALAH HTML 5

1 komentar: