Ristianawati 2114 r0800 html5

MAKALAH HTML5

DI SUSUN OLEH :

RISTIANAWATI

2114R0800

BAB IPENDAHULUAN

A. Latar BelakangPerkembangan 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.

B. Rumusan Masalah1. Bagaimana sejarah perkembangan HTML5?2. Apakah HTML5 itu?3. Apa saja fitur-fitur yang diberikan HTML5?

4. Apa saja Tag-tag HTML5?5. Apa saja kelebihan dan kekurangan HTML5?6. Berikan contoh-contoh website yang menggunakan HTML5?

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

D. Manfaat Saya berharap makalah ini dapat bermanfaat bagi para pembaca, yang

tadinya belum mengerti bahasa pemrograman HTML5 menjadi lebih mengerti dan mungkin justru bias membuat website menggunakan HTML5.

BAB IIPEMBAHASAN

1. Sejarah HTML5HTML5 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 :

Geolocation Web SQL Database, media penyimpanan database lokal. 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 CallPada 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 RekomendasiPada 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"

2. Pengertian HTML5Html5 adalah bahasa markup untuk penataan dan penyajian konten

untuk World Wide Web dan teknologi inti dari Internet. Ini adalah revisi kelima dari standar HTML (dibuat pada tahun 1990 dan standar sebagai HTML 4 per 1997) dan, pada Desember 2012, adalah Rekomendasi Calon W3C. Tujuan utamanya telah meningkatkan bahasa dengan dukungan untuk multimedia terbaru sambil menjaga mudah dibaca oleh manusia dan secara konsisten dipahami oleh komputer dan perangkat (web browser, parser, dll). HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tetapi XHTML 1 dan DOM Level 2 HTML.

Setelah pendahulunya terdekatnya HTML 4.01 dan XHTML 1.1, HTML5 adalah respon terhadap pengamatan bahwa HTML dan XHTML umum digunakan pada World Wide Web adalah campuran dari fitur diperkenalkan oleh berbagai spesifikasi, bersama dengan orang-orang yang diperkenalkan oleh produk perangkat lunak seperti web browser, yang didirikan oleh praktek umum, dan kesalahan sintaks banyak dokumen web yang ada. Ini juga merupakan upaya untuk mendefinisikan bahasa markup tunggal yang dapat ditulis baik dalam HTML atau sintaks XHTML. Ini termasuk model

pengolahan rinci untuk mendorong implementasi yang lebih interoperable, melainkan meluas, meningkatkan dan rationalises markup tersedia untuk dokumen, dan memperkenalkan markup dan antarmuka pemrograman aplikasi (API) untuk aplikasi web yang rumit. Untuk alasan yang sama, HTML5 juga. potensial kandidat untuk cross-platform aplikasi mobile. Banyak fitur dari HTML5 telah dibangun dengan pertimbangan untuk dapat dijalankan pada perangkat bertenaga rendah seperti smartphone dan tablet.

Pada Desember 2011, perusahaan riset Strategy Analytics memperkirakan penjualan ponsel HTML5 kompatibel akan atas 1 miliar pada tahun 2013.Secara khusus, HTML5 menambahkan banyak fitur baru sintaksis. Ini termasuk <video> baru, <audio> dan elemen <canvas>, serta integrasi scalable vector grafis konten (SVG) (yang menggantikan penggunaan tag generik <object>) dan MathML untuk rumus matematika. Fitur-fitur ini dirancang untuk memudahkan untuk memasukkan dan menangani konten multimedia dan grafis di web tanpa harus resor untuk plugin proprietary dan API. Elemen baru lainnya, seperti <section>, <article>, <header> dan <nav>, dirancang untuk memperkaya isi semantik dokumen. Atribut baru telah diperkenalkan untuk tujuan yang sama, sementara beberapa elemen dan atribut telah dihapus. Beberapa elemen, seperti <a>, <cite> dan <menu> telah diubah, atau didefinisikan ulang standar. API dan Document Object Model (DOM) tidak afterthoughts lagi, tetapi bagian fundamental dari spesifikasi HTML5. HTML5 juga mendefinisikan secara rinci proses yang diperlukan untuk dokumen yang tidak valid sehingga kesalahan sintaks akan diperlakukan secara seragam oleh semua browser conforming dan agen pengguna lainnya.

Tujuan dibuatnya HTML5 antara lain: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

Vokabular HTML dari jaman sebalumnya (HTML+, HTML 2.0, HTML 3.2) umumnya ditulis menggunakan aturan sintak SGML. Pada HTML 4 telah diterapkan dua sintak yaitu: SGML (disebut sebagai HTML 4.01) dan XML (disebut XHTML 1.0).

Halaman Web yang Biasa ditulis Dengan HTML 4:

<html> <head><title>Hobo Web LTD Scotland</title>

</head><body><div id="page">

<div id="header"><h1><a href="/blog/">Hobo Web</a></h1></div><div id="container">

<div id="center" class="column"><div class="post" id="post-102"><h2><a href="/test-page/">Test Page 1</a></h2> <div class="entry"><p>Article Text here</p>

</div></div><div class="post" id="post-101"><h2><a href="/test2/">Test 2</a></h2><div class="entry"><p>Article 2 Text here</p>

</div></div></div><div class="navigation"><div class="alignleft"><a href="/blog/page/2/">« Previous Entries</a></div><div class="alignright"></div>

</div></div><div id="right" class="column"><ul id="sidebar"><li><h2>Hobo Stuff</h2><ul><li><a href="/blog/comment-policy/">Comment Policy</a></li>

<li><a href="/blog/todo-list/">Todo List</a></li></ul></li><li><h2>Archives</h2><ul><li><a href='/blog/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li><li><a href='/blog/2008/02/'>February 2008</a></li><li><a href='/blog/2008/01/'>January 2008</a></li>

</ul></li></ul></div><div id="footer"><p>Copyright 2008 Hobo Web LTD</p></div></div>

</body>

</html>

Contoh Halaman Web yang Ditulis dengan HTML5:

<html> <head><title>Hobo Web LTD Scotland</title>

</head><body><header><h1><a href="http://blog/">Hobo Web</a></h1></header><section><article>

<h2><a href="/test-page/">Test Page 1</a></h2> <p>Article Text here</p></article><article><h2><a href="/test2/">

Test 2</a></h2><p>Article Text 2 here</p></article><nav><a href="/blog/page/2/">« Previous Entries</a></nav>

</section><nav><ul><li><h2>Hobo Stuff</h2><ul><li><a href="/blog/comment-policy/">Comment Policy</a></li>

<li><a href="/blog/todo-list/">Todo List</a></li></ul></li><li><h2>Archives</h2><ul><li><a href='/blog/2008/04/'>April 2008</a></li>

<li><a href='/blog/2008/03/'>March 2008</a></li><li><a href='/blog/2008/02/'>February 2008</a></li><li><a href='/blog/2008/01/'>January 2008</a></li>

</ul></li></ul></nav><footer><p>Copyright 2008 Hobo Web LTD</p></footer></body>

</html>

HTML 5 mendefinisikan kelima revisi besar bahasa inti dari World Wide Web – HTML dari W3C (World Wide Web Consortium). Juga disebut Aplikasi Web 1.0 – masih ada tidak ada ruang nama atau skema. Unsur tidak harus ditutup. Browser akan mengampuni kesalahan. Sebuah p masih p, dan meja masih meja.HTML 5 menambahkan unsur-unsur baru untuk secara khusus mengidentifikasi masing-masing konstruksi umum:

1. Section: Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML 4

2. Header: header Halaman yang ditampilkan pada halaman , tidak sama dengan unsur kepala

3. Footer: Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah pesan e-mail

4. Nav: Koleksi link ke halaman lain5. Article: Sebuah entri independen dalam sebuah blog, majalah,

ringkasan, dan sebagainya

3. Fitur HTML5

a. Penambahan input type & Validasi FormSebelum 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 VideoSejak 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 SupportSalah 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 & DropKelebihan 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. cek demonya disini.

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

4. Tag HTML5

Nama Tag Keterangan / Kegunaan

Basic

<!DOCTYPE> Tag untuk menentukan tipe dokumen

<html> Tag untuk membuat sebuah dokumen HTML

<title> Tag untuk membuat judul dari sebuah halaman

<body> Tag untuk membuat tubuh dari sebuah halaman

<h1> to <h6> Tag untuk membuat heading

<p> Tag untuk membuat paragraf

<br> Memasukan satu baris putus

<hr> Tag untuk membuat perubahan dasar kata didalam isi

 Tag untuk membuat komentar

Formatting

<acronym>Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5)

<abbr> Tag untuk membuat sebuah singkatan

<address> Tag untuk membuat kontak alamat

<b> Tag untuk membuat huruf bercetak tebal

<bdi>

Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)

<bdo> Mengganti arah teks

<big>Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)

<blockquote>Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain

<center>Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5)

<cite> Tag untuk membuat judul karya

<code>Tag untuk membuat potongan kode komputer di antara text

<del> Tag untuk membuat teks yang telah dihapus dari dokumen

<dfn> Tag untuk membuat sebuah istilah definisi

<em>Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5)

<font>Tag untuk membuat font, warna, dan ukuran untuk teks(tidak disupport lagi di HTML5)

<i>Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood

<ins>Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen

<kbd> Tag untuk membuat input keyboard

<mark>Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)

<meter> Tag untuk membuat pengukuran skalar

<pre> Tag untuk membuat teks terformat

<progress> Memperlihatkan kemajuan tugas (tag baru HTML5)

<q> Tag untuk membuat kutipan pendek

<rp>

Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5)

<rt>Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur)

<ruby>Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5)

<s> Tag untuk membuat teks yang tidak lagi benar

<samp>Tag untuk membuat contoh keluaran dari program komputer

<small> Tag untuk membuat teks kecil

<strike>Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5)

<strong> Tag untuk membuat teks penting

<sub>Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)

<sup>Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)

<time> Tag untuk membuat tanggal / waktu (tag baru HTML5)

<tt>Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)

<u>Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya

<var> Tag untuk membuat sebuah variabel

<wbr> Tag untuk membuat kemungkinan garis-putus

Forms

<form>Tag untuk membuat sebuah form HTML untuk input pengguna

<input> Tag untuk membuat sebuah kontrol input

<textarea>Tag untuk membuat sebuah kontrol input multibaris (text area)

<button> Tag untuk membuat sebuah tombol yang dapat diklik

<select> Tag untuk membuat sebuah daftar drop-down

<optgroup>Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down

<option> Tag untuk membuat pilihan dalam daftar drop-down

<label>Tag untuk membuat sebuah label untuk sebuah elemen <input>

<fieldset> Grup unsur terkait dalam bentuk

<legend>Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details>

<datalist>Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)

<keygen>Tag untuk membuat key-pair generator kolom input (tag baru HTML5)

<output>Tag untuk membuat hasil penghitungan (tag baru HTML5)

Frames

<frame>Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5)

<frameset>Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5)

<noframes>

Tag untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5)

<iframe> Tag untuk membuat sebuah bingkai

Images

<img> Tag untuk membuat gambar

<map> Tag untuk membuat gambar-peta

<area> Tag untuk membuat area dalam gambar-peta

<canvas>Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5)

<figcaption>Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)

<figure> Menentukan konten mandiri (tag baru HTML5)

Audio/Video

<audio> Tag untuk membuat isi suara (tag baru HTML5)

<source>Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5)

<track> Tag untuk membuat trek teks untuk elemen media

(<video> dan <audio>) (tag baru HTML5)

<video>Tag untuk membuat sebuah video atau film (tag baru HTML5)

Links

<a> Tag untuk membuat hyperlink

<link>

Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet)

<nav> Tag untuk membuat navigasi link (tag baru HTML5)

Lists

<ul> Tag untuk membuat daftar dengan selain nomor

<ol> Tag untuk membuat daftar dengan nomor

<li> Tag untuk membuat sebuah item daftar

<dir>Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5)

<dl> Tag untuk membuat sebuah daftar definisi

<dt> Tag untuk membuat istilah (item) dalam daftar definisi

<dd> Defines a description of an item in a definition list

<menu>Tag untuk membuat deskripsi dari item dalam daftar definisi

<command>Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag baru HTML5)

Tables

<table> Tag untuk membuat tabel

<caption> Tag untuk membuat sebuah caption tabel

<th> Tag untuk membuat sebuah sel header tabel

<tr> Tag untuk membuat baris dalam sebuah tabel

<td> Tag untuk membuat sel dalam sebuah tabel

<thead> Mengelompokan isi header dalam sebuah tabel

<tbody> Mengelompokanisi tubuh dalam sebuah tabel

<tfoot> Mengelompokan isi footer dalam sebuah tabel

<col>Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>

<colgroup>Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat

Style/Sections

Contoh penggunaan tag HTML5:

1 <!DOCTYPE HTML>

2 <html>

3 <head>

4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

5 <title>Your Website</title>

6 </head>

7 <body>

8 <header>

9 <nav>

10 <ul>

11 <li>Your menu</li>

12 </ul>

13 </nav>

14 </header>

15

16 <section>

17 <article>

18 <header>

19 <h2>Article title</h2>

20 <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>

21 </header>

22 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

23 </article>

24

25 <article>

26 <header>

27 <h2>Article title</h2>

28 <p>Posted on <time datetime="2009-09-04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a href="#comments">6 comments</a></p>

29 </header>

30 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

31 </article>

32

33 </section>

34

35 <aside>

36 <h2>About section</h2>

37 <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

38 </aside>

39

40 <footer>

41 <p>Copyright 2009 Your name</p>

42 </footer>

43 </body>

44

</html>

5.

Contoh kode html5:

http://1.bp.blogspot.com/-cSJq9o8OtCU/UnLagDA8aKI/AAAAAAAAAJc/O_om5g8pPDo/s1600/code1.jpg

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

6. Contoh-Contoh Website Menggunakan HTML51. James Anderson 613

http://jamesanderson613.com/

2. Yas Marina Circuit

Yas Marina Circuit

3. Brandongenerator

http://3.bp.blogspot.com/-qI8Y7ylXEDM/UnLb2gLbU0I/AAAAAAAAAJ4/5yExUjz4PEo/s1600/1.jpg

http://4.bp.blogspot.com/-hGk8sVOSir0/UnLb4furYRI/AAAAAAAAAKA/jpRTzcWeakM/s1600/2.jpg

http://www.brandongenerator.com/

4. Unfinished Business

http://www.unfinishedbusiness.is/

5. Roger Dubuis

http://1.bp.blogspot.com/-uMMJhiMDKzc/UnLb-_rnvAI/AAAAAAAAAKM/POSYM0SbRJs/s1600/3.jpg

http://3.bp.blogspot.com/-bgJ8VX_Ism4/UnLb_e4T7pI/AAAAAAAAAKU/dfTKj1kW6fU/s1600/4.jpg

http://www.rogerdubuis.com/

6. Shiny Demos

http://www.shinydemos.com/

7. Metropol Band

HTML5 Drag And Drop akan menghasilkan website seperti ini

http://1.bp.blogspot.com/-Nn_OaUcX3xE/UnLb_3-TfkI/AAAAAAAAAKc/rTlkrhH_Rts/s1600/5.jpg

http://3.bp.blogspot.com/-S2nqiXgjmHI/UnLb_ziticI/AAAAAAAAAKg/3Ideb2cOn-U/s1600/6.jpg

http://www.metropolband.com/

8. Gerkenwell Close

share.yu-as.com/smokers/

9. Where the fuck should i go for drinks

http://2.bp.blogspot.com/-2deoXR9JMu8/UnLcBYCC_qI/AAAAAAAAAKs/fYW-_T7JktI/s1600/7.jpg

http://3.bp.blogspot.com/-pKywe3WSOoY/UnLcBzTvAGI/AAAAAAAAAK0/n9P4r3K2ZQU/s1600/8.jpg

Dengan kemampuan Geolocation HTML5, kita bisa membuat aplikasi untuk memberikan masukan kemana kita harus pergi, atau mencari lokasi-lokasi yang ada di sekitar kita.

http://www.wherethefuckshouldigofordrinks.com/

10. Fridzo Keys | The Rational Keyboard Suara piano akan terdengar jika mouse berada diatasnya.

http://1.bp.blogspot.com/-ErLzZTNaCW8/UnLcCN4omgI/AAAAAAAAAK8/D_Zyh6r5K-A/s1600/9.jpg

http://1.bp.blogspot.com/-cooaMfWY84s/UnLcCxeqwYI/AAAAAAAAALA/6Tf732kr4Zk/s1600/10.jpg

http://fritzo.org/keys/

11. Web Cam ToyDengan website ini kita bisa bermain-main dengan web cam yang ada di

komputer

http://webcamtoy.com/

12. The Beast

http://3.bp.blogspot.com/-QUJxwVILZk0/UnLcEc1RhHI/AAAAAAAAALI/fxZSDaTpUgY/s1600/11.jpg

http://www.the-bea.st/

13. Sony tablet

Sony Tablet

14. Union Station Denver

http://1.bp.blogspot.com/-Jui07E5VvTc/UnLcEtHWFFI/AAAAAAAAALY/-HQ5eNTAXVA/s1600/12.jpg

http://4.bp.blogspot.com/-5KLVW_RASlo/UnLcFEEOQZI/AAAAAAAAALU/GmU4Wi7Pmv4/s1600/13.jpg

http://www.unionstationdenver.com/

BAB IIIPENUTUP

A. KesimpulanHTML5 merupakan salah satu bahasa pemrograman yang luar biasa, karena

dengan HTML5 sebuah website dapat diolah menjadi lebih menarik dan bagus. Dalam HTML5 juga telah dilakukan penambahan sintaks dengan struktur yang lebih baik dan sederhana daripada versi sebelumnya. Selain itu dalam mengembangkan website HTML5 sangat mudah digunakan. Akan tetapi HTML5 ini masih dalam tahap penyempurnaan sehingga masih sedikit website yang mendukung HTML5.

B. SaranMakalah ini masih sangat banyak sekali kekurangannya, oleh karena itu

penulis mohon kritik dan sarannya dari pembaca demi penyempurnaan makalah ini.

http://4.bp.blogspot.com/-NatLRQOoaSg/UnLcGu5cfsI/AAAAAAAAALg/fjY79lLexVQ/s1600/14.jpg

Ristianawati 2114 r0800 html5

Education

Transcript of Ristianawati 2114 r0800 html5