Вы находитесь на странице: 1из 35

MENGENAL HTML5 Makalah ini disusun sebagai tugas mata kuliah Teknologi Informasi dan Komunikasi Dosen pengampu

: Septia Lutfi,S.Kom, M.Kom

Oleh Tiya Pangestika Putri 1102412114 Rombel 3

JURUSAN KURIKULUM DAN TEKNOLOGI PENDIDIKAN FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013

DAFTAR ISI

Halaman

Halaman Sampul Daftar Isi . 2 BAB I. PENDAHULUAN A. Latar Belakang 3 B. Tujuan . 4 BAB II. PEMBAHASAN A. Pengertian 4 B. Pengenalan Struktur HTML5... 4 C. Sejarah HTML5... 10 D. Cara Membuat Blog Valid dengan HTML5..17 E. HTML 5 Menjadi Solusi Para Web Development 24 F. Mampukah HTML5 Menggantikan Mobile Native Apps? . 29 BAB III. PENUTUP A. Kesimpulan . 32 B. Saran 33 DAFTAR PUSTAKA .. 34

BAB I PENDAHULUAN A. Latar Belakang Semakin pesatnya perkembangan teknologi menuntut otak manusia untuk berfikir keras demi memperoleh hasil karya yang bermanfaat untuk manusia itu sendiri di muka bumi. Perkembangan teknologi seakan membawa manusia ke dalam dunia modern dimana nantinya semua kegiatan manusia tidak luput dari yang namanya teknologi. Teknologi semakin lama semakin pesat dan mau tidak mau , manusia harus memenuhi kebutuhannya dengan memanfaatkan perkembangan teknologi tersebut. Kreatifitas yang dimiliki oleh masing-masing individu bisa dituangkan lewat dunia nyata maupun dunia maya . Hingga kreativitas yang dimiliki oleh masing-masing individu diketahui oleh khalayak, bahkan dari sebuah kreativitas tersebut individu bisa mendapatkan penghasilan untuk memenuhi kebutuhan hidup sehari-harinya. Dengan mempublikasikan kreativitas tersebut, individu mau tidak mau harus mengembangkan kreativitas untuk mampu bersaing di dalam bisnis tersebut . Nah, mungkin memublikasikannya bisa dengan lewat blog, dll. Sebelum masuk ke dalam dunia maya untuk mempublikasikan kreativitas yang ingin dituangkan, individu harus mangetahui konsekuensi apa saja yang harus diterima saat individu tersebut sudah masuk dalam dunia maya. Karena dalam dunia maya , terdapat semua hal apa saja yang dibutuhkan oleh semua manusia. Baik hal tersebut meliputi hal yang positif maupun hal negatif . Apalagi jika anak usia remaja yang menuangkan kreativitas tersebut masuk dalam dunia maya. Perlu pengawasan yang ketat dari orangtua dan orang-orang di sekitarnya , agar tidak terjerumus dalam dunia yang harusnya asik dan bermanfaat untuk kehidupannya. Nah, untuk publikasi di sunia maya, perlu adanya blog pribadi . Dalam blog tersebut bisa dibuat dengan html, html 5 misalnya. Dalam makalah ini, kita akan mempelajari bagaimana membuat blog dengan html 5 .

B. Tujuan Adapun tujuan pembuatan makalah ini adalah untuk memenuhi tugas mata kuliah teknologi informasi dan komunikasi, serta untuk mengetahui bagaimana cara membuat blog menggunakan html5.

BAB II PEMBAHASAN A. Pengertian Menurut wikipedia, html5 adalah sebuah bahasa markah untuk

menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web. HTML5 adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. Lalu apakah yang dimaksud dengan Semantic Web? Semantic berasal dari bahasa Yunani (Greek), merupakan bahasa pembelajaran semintic, yakni pembelajaran untuk memahami penanda. Semantic sendiri mempunyai arti bahasa yang berfokus pada penanda untuk mengetahui arti yang terkandung di dalamnya.

B. Pengenalan Struktur HTML5

Seiring dengan perkembangan Web yang semakin inovatif, HTML 4 yang telah berkibar selama hampir satu dekade ini akhirnya mulai semakin dikembangkan kearah yang lebih baik atau kita kenal dengan nama HTML 5. HTML 5 menjanjikan fleksibilitas lebih bagi penulis, memungkinkan Website lebih menarik dan interaktif serta memperkenalkan dan meningkatkan berbagai Fitur, seperti Kontrol bentuk, API, multimedia, struktur, dan semantik. HTML 5 Mulai bekerja pada tahun 2004, dibawah asuhan W3C HTML WG dan WHATWG. Bahkan, Empat Vendor Browser besar seperti Firefox, Apple, Opera, Dan Google kabarnya ikut mengembangkan HTML 5. Struktur Dasar HTML dapat di lihat dibawah ini:

Gambar diatas adalah Struktur HTML 4 yang masih menggunakan Elemen div yang masing-masing memberikan id deskriptif atau kelas untuk menggambarkan bagian-bagian khusus. Versi HTML 4 masih kekurangan semantik. HTML 5 mulai memperbaiki hal ini dengan membuat masing-masing elemen mewakili bagian yang berbeda dan tidak perlu menggunakan penggambaran khusus. Contohnya seperti gambar dibawah ini :

Gambar diatas menunjukkan bahwa Elemen-elemen div dapat digantikan dengan unsur-unsur baru: header, nav, bagian, artikel, samping, dan footer. Markup untuk Dokumen dapat digambarkan sebagai berikut: <body> <header></header> <nav></nav> <article> <section> </section> </article> <aside></aside> <footer></footer> </body> Contohnya, Struktur Dibawah ini yang ditandai dengan bagian nested dan elemen h1: <section> <h1>Level 1</h1>

<section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section> </section> Perhatikan Struktur Diatas, Untuk kompabilitas yang lebih baik dengan Browser saat ini, telah dimungkinkan menggunakan elemen post lain (h2 untuk h6) tepat ditempat elemen h1. itulah salah satu keuntungan menggunakan elemen ini. Dengan mengidentifikasi halaman menggunakan elemen sectioning spesifik, teknologi bantu dapat membantu pengguna untuk lebih mudah menavigasi halaman. Misalnya, mereka dengan mudah dapat melompat ke bagian navigasi atau cepat melompat dari satu artikel ke berikutnya tanpa perlu bagi penulis untuk memberikan skip link. Pada elemen header anda dapat menyertakan sub judul, informasi atau lainnya. Seperti Struktur Dibawah Ini: <header> <h1>A Preview of HTML 5</h1> <p class=byline>By Ferdinand</p> </header>

<header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2> </header> Setelah itu bagian lainnya adalah Footer yang berisi data hak Cipta, Link ke halaman Terkait dan lainnya, Strukturnya seperti dibawah ini: <footer> 2010 DJ Note Inc.</footer> Selanjutnya adalah bagian link navigasi, dengan struktur seperti dibawah ini: <nav> <ul> <li><a href=/>Home</a></li> <li><a href=/prolog>Prolog</a></li> <li><a href=/contact>Contact</a></li> <li><a href=/about>About</a></li> </ul> </nav> Selanjutnya adalah Struktur Sidebar, seperti dibawah ini: <aside> <h1>Archives</h1>

<ul> <li><a href=/2010/09/>September 2010</a></li> <li><a href=/2010/08/>August 2010</a></li> <li><a href=/2010/07/>July 2010</a></li> </ul> </aside> Selanjutnya, Section yang merupakan bagian utama dalam sebuah dokument, misalnya kita bayangkan seperti sebuah Bab dengan Struktur seperti dibawah ini:

<section> <h1>Chapter 1: Saya Orang Kreatif</h1> <p> Banyak yang bilang saya gak cerdas dan bengal, dan saya akui demikianlah saya, tapi ditengah kebodohan saya, saya tetap bersyukur diberikan otak yang kreatif oleh Tuhan </p> </section> Terakhir adalah Unsur artikel, yang berisi konten, postingan, komentar dan lainnya, Strukturnya seperti dibawah ini: <article id=comment -3>

<header> <h4><a href=#comment -3 rel=bookmark>Comment #3</a> by <a href=http://example.com/>Google</a></h4&gt ; <p><time datetime=2010-08-29T13:58Z>August 29th, 2010 at 13:58</time> </header> <p>Blogwalking Gan!</p>

C. Sejarah HTML5 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.[2] Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.[3] Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web. a. 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.

10

4. Lebih banyak markup untuk menggantikan scripting. 5. HTML5 merupakan perangkat mandiri. b. Fitur baru dalam HTML5: Unsur kanvas untuk menggambar. Video dan elemen audio untuk media pemutaran. Dukungan yang lebih baik untuk penyimpanan secara offline. Elemen konten yang lebih spesifik, seperti artikel, footer, header, navigation, section. Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search. c. Beberapa kelebihan yang dijanjikan pada HTML5: Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya. Integrasi ('inline') dengan doctype yang lebih sederhana. Penulisan kode yang lebih efisien. Konten yang ada di situs lebih mudah terindeks oleh search engine. Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5. Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5. Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight. Semakin menjamurnya plugin didalam aplikasi atau browser membuat

11

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

<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv"> <param name="movie" value="flvplayer.swf?file=movies/holiday.flv" /> <param name="wmode" value="transparent" /> </object> Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini

<object width="300" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2" > <param name="source" value="SilverlightApplication1.xap"/> </object>

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

<video src=tutorialku.mp4></video>

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak
12

lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.

d. Logo HTML5 Pada 18 Januari 2011, W3C memperkenalkan sebuah logo untuk representasi penggunaan dan tujuan HTML5. Tidak seperti logo lain yang sebelumnya telah diperkenalkan W3C, logo ini tidak mengisyaratkan validitas atau kesesuaian terhadap standar tertentu. Logo ini menjadi logo resmi sejak 1 April 2011. Saat logo ini pertama kali diperkenalkan ke muka publik, W3C menyatakan logo HTML5 ini sebagai sebuah "identitas visual secara umum bagi kumpulan berbagai teknologi open web, termasuk HTML5 CSS, SVG, WOFF, dan lainnya." Beberapa pendukung standar web, termasuk Proyek Standar Web (The Web Standards Project), mengkritik definisi "HTML5" sebagai istilah umum, terutama bahwa terjadi pengaburan terminologi dan potensi munculnya miskomunikasi Tiga hari kemudian, W3C menanggapi umpan balik komunitas dengan mengubah definisi logo ini, yakni dengan menghapus bagian kesertaan berbagai teknologi terkait. W3C lantas menyatakan logo ini "representasi HTML5, si batu penjuru dari berbagai Aplikasi Web modern."

13

e. Yang Perlu Diketahui Tentang HTML5 1. DOCTYPE

DOCTYPE ditulis sebelum tag <html>. Fungsi dari DOCTYPE adalah memberitahukan ke browser bahwa tipe dokumen yang digunakan adalah HTML. Dalam dokumen HTML versi sebelumnya DOCTYPE dituliskan dengan : <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/ html4/loose.dtd> Sedangkan dalam HTML5 DOCTYPE hanya ditulis : <!DOCTYPE HTML> 2. Tidak adanya Type pada script dan link Source code yg baru : <link rel=stylesheet href=path/to/stylesheet.css /> <script src=path/to/cript.js></script> source code yg lama : <link rel=stylesheet href=path/to/stylesheet.css type=text/css /> <script type=text/javascript src=path/to/cript.js></script> 3. Attribute Required

14

Form mempunyai fitur baru yaitu required attribute, yang akan mengecek isi dari sebuah input text apakah kosong atau tidak saat di-submit. Jika kosong maka form tidak akan di-submit. <input type=text name=someinput required> 4. Mendukung audio HTML 5 mengenalkan <audio> element sudah mendukung penuh terhadap penggunaan audio pada halaman web. Penggunaannya seperti kode dibawah <audio autoplay=autoplay controls=controls> <source src=music.mp3 /> Unduh File ini. </audio>

5. Mendukung video Dan hebatnya lagi HTML juga mengenalkan <video> element. Tapi karena codec format video tidak semua browser mendukung, jadi video yang bisa diputar tergantung dari browser. Penggunaannya seperti kode dibawah :

<video controls preload> <source src=contohvideo.ogv type=video/ogg; codecs=vorbis, theora /> <source src=contohvideo.mp$ type=video/mp4; codecs=avc1.42E01E, mp4a.40.2 /> <p> Browser tidak mendukung, <a hreh=contohvideo.mp4> Silahkan unduh video.</a> </p> 1. </video>

15

f. Tag-tag baru yang letaknya didalam <body>

<header> <div id="header"> Didalam <header> ini bisa kita isi macam-macam, misal logo, navigasi, heading dan lain-lain. Bahkan diisi <div> pun tidak masalah. <hgroup> Jika kita memiliki satu atau lebih dari satu heading berurutan <h1> - <h6> maka kita bisa mengelompokkannya dengan <hgroup>. <nav> <nav> digunakan untuk ngelink kehalaman-halaman utama dari website atau bagian dari halaman itu sendiri. Kalau untuk paging, Social Networking atau list-list yang lain yang menggunakan <ul> nggak perlu dikasih <nav>. <section>, <article> dan <time>

Sesuai namanya <article> digunakan untuk membungkus teks artikel atau teks utama dalam halaman web. Apabila kita memiliki list atau daftar <article>, misal blog, maka kita perlu membungkusnya dengan <section> jika ada elemen lain yang bukan <article> dan menerangkan tentang <article>. <time> digunakan untuk menunjukan waktu, biasanya digunakan untuk menunjukkan waktu publish artikel, komentar, forum dan lain sebagainya. <time>memiliki atribut datetime yang berisi waktu bisa dalam format yyyy-mm-dd atau jam seperti 19:00. <figure> dan <figcaption> <figure> digunakan sebagai pembungkus untuk tag <img>. Tetapi tidak selalu semua

16

tag<img> kita bungkus dengan <figure>, hanya gambar-gambar yang utama saja atau gambar-gambar yang ingin kita beri label. Nah kita memberi labelnya dengan <figcaption>. <aside> <aside> digunakan sebagai sidebar pada website. <footer> <footer> diletakkan dibagian bawah website. D. Cara Membuat Blog Valid dengan HTML5 HTML5 adalah pengembangan dari versi sebelumnya, dimana tujuan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Intinya, agar web/blog terbaca sempurna di semua browser dan mudah dalam penggunaan.

Dari berbagai sumber saya temukan bahwa diantara keuntungan mevalidasi blog adalah : Membantu Search Engine meng-indeks dokumen website/blog lebih baik. Render browser lebih baik dan lebih cepat Document object model (dom) lebih stabil dan konsisten

17

Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru. Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.) Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini. a. Cara Membuat Blog Valid HTML5 Langkah 1 Langkah 2 : Backup template sebelum melakukan editing. : Cari kode seperti ini :

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head>

ganti dengan : <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> <head> <meta charset='utf-8'/>

18

Langkah 3 : Ganti kode </html> dengan </HTML> (paling bawah di template) Langkah 4 : ganti kode ini :

<b:include data='blog' name='all-head-content'/> dengan kode di bawah ini : <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.url' rel='canonical'/> <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/> <link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/> <link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/> <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:blog.postImageThumbnailUrl'> <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> </b:if> <b:if cond='data:blog.metaDescription != &quot;&quot;'> <meta expr:content='data:blog.metaDescription' name='description'/>

19

<b:else/> <meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/> </b:if> </b:if> Langkah 5 : Ganti <b:skin><![CDATA[ dengan kode dibawah :

<link href='//www.blogger.com/static/v1/widgets/3950009988widget_css_bundle.css' rel='stylesheet' type='text/css'/> &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]] <style>

Langkah 6 : Hapus semua kode ini :

<b:include name='quickedit'/> Setiap kali menambahkan widget baru, hapus kode di atas. Langkah 7: Hapus semua kode ini (opsional)

<a expr:name='data:post.id'/>

Langkah 8 : hapus kode seperti ini :

<b:include data='post' name='postQuickEdit'/>

atau seperti ini :

<b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'>


20

<span expr:class='&quot;item-control &quot; + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </b:if> </b:includable>

Langkah 9 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja)

<div class='post-share-buttons goog-inline-block'>...sampai...</div>

Langkah 10 : Ganti semua code & dengan &amp;

Dan yang harus diperhatikan adalah kemungkinan blog dengan langkahlangkah di atas belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini :

1. Selalu gunakan tag alt pada gambar, contoh :

<img alt="HTML5" src="http://2.bp.blogspot.com/H1eAI5Oya4w/UhqgqupQnyI/AAAAAAAAFLw/uPEK6ueaL2Q/s1600/html5.png" />

2. Jangan gunakan border="0" pada gambar, sebagai gantinya tambahkan kode :

style="border:none"
21

atau CSS terpisah seperti img{border:none}

3. Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode :

style="border:none;overflow:hidden"

atau CSS terpisah seperti

iframe{border:none;overflow:hidden} 4. Pada tag a jangan menggunakan tag name seperti :

<a name='comment-form'>

sebagai gantinya gunakan id seperti : <a href='#comment-form'> 5. Jangan ada dua id pada template.

6. Hapus kode <b:include name='quickedit'/> setiap menambah widget baru.

b. Langkah-Langkah mengurangi / meminimalisir errors dan warnings blog / website

Pertama, cari kode seperti di bawah ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml'
22

xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Ganti kode di atas menjadi :

<!DOCTYPE html> <html expr:dir='data:blog.languageDirection'>

Atau dengan yang ini :

<!DOCTYPE html> <HTML>

Langkah selanjutnya, copy kode di bawah ini dan pastekan tepat di bawah tag <head>

<meta charset='utf-8'/>

Lanjutkan dengan mencari kode di bawah ini kemudian Hapus

<b:include name='quickedit'/>

Cari tanda dash pada kode CSS kemudian hapus. Contohnya :

/*-------------- HEADER --------------*/

Sehingga menjadi :

/* HEADER */
23

Jangan simpan dulu, tetapi cari kode seperti di bawah ini :

<b:include name='nextprev'/>

Jika sudah ketemu, tambahkan kode conditional <b:if....> dan penutupnya sehingga akan terlihat seperti ini <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:include name='nextprev'/> </b:if> Selanjutnya, cari dan hapus kode seperti dibawah ini (optional)

<a expr:name='data:post.id'/>

E. HTML 5 Menjadi Solusi Para Web Development Kebutuhan akan informasi di dunia maya membuat para developer website berlomba-lomba menyajikan berbagai macam layanan sehingga para pengguna akan betah berkunjung ke dalam websitenya. Dari masa-masa ke masa teknologi website mengalami perkembangan yang begitu pesatnya dan kini bahkan memberalihkan aplikasi dektop yang selama ini kita kenal menjadi aplikasi berbasis web. Banyak aplikasi yang selama ini hanya sebatas akses di komputer dan harus diinstal terlebih dahulu, kini aplikasi website memberikan ruang pada kita untuk mencicipi aplikasi misanya game online, sehingga tidak perlu lagi yang namanya instalasi kita cuma butuh yang namanya koneksi internet. Perkembangan website tersebut di atas, tidak lepas yang namanya script/tag HTML (Hypertext Markup Language). Bagi para web development mungkin sudah familiar

24

yang namanya HTML ini karena untuk membangun website yang dinamis para web development harus memahami konsep-konsep dasar dari HTML. Banyak orang bilang HTML itu bahasa yang mudah sederhana dan struktur dan sering pula di anggap remeh karena kemampuan HTML itu sendiri, jauh di bawah Java Script (client side) apalagi di bantingkan dengan script server side seperti PHP, ASP, ASPX, dan bahasa lain sebagainya. Mengabaikan pemahaman tentang membanding-bandingkan HTML dengan yang lain, perlu di ketahui HTML merupakan dokument standar yang di akses dengan menggunakan HTTP (Hypertext Tranfer Protocol) sebagai protokol yang berfungsi mengirimkan data dari web server ke web broser pada sisi klient. Awal pertama di perkenalkan yang namanya HTML ini sekita tahun 1991 yang hanya mencakup 22 elemen dan kemudian di lanjutkan dengan HTML +, maka di dalam perkembangan HTML tidak di kenal yang namanya HTML1. Dan pada tahun 1995 barulah kemudian di perkenalkan yang namanya HTML 2.0. Pada perkembangannya HTML 2.0 kemudian oleh W3C (Word Wide Web Consortium) sebuah organisasi menentukan standar internasional word Wide Web pada tahun 1997 memperkenalkan HTML 3.2 yang memiliki banyak fitur tambahan seperti table, applet, superscript, sub script dan marque. Pada tahun 1997 akhir, baru kemudian HTML 4.0 secara resmi di umumkan dan kemudian pada tahun 1999 dilanjutkan dengan HML 4.1. Pada perkembangan sekarang mungkin sebagian orang masih merasakan yang namanya HTML 4 adalah kemampuan design web yaitu dengan menggunakan css (Cascading Style Sheets) . CSS ini memberikan kemuduhan dalam memberikan tampilan yang terbaik pada browser-browser Anda. Pada tahun Januari 2008, HTML 5 diumkan sebagai draft, walaupun belum di rekomentasikan secara resmi, beberapa sfesifikasi HTML 5 mulai di dukung oleh berbagai macam layout dan engine. Pada perkembangannya HTML 5 ini ada

25

beberapa penambahan tag baru yang hanya dapat dimengerti oleh browser -browser baru. Tag tersebut diantaranya section, article, footer, audio, video, progress, nav, meter, time, aside, canvas serta datagrid. Tag-tag tersebut hanya dikenali oleh browser-browser keluaran terbaru, sebagai misal Firefox 3.5, Opera 9.6, Chrome, Safari, IE 8. Nah bagaimana dengan browser-browser lama seperti IE6, Firefox 1.5. Maaf browser-browser tersebut belum mendukung tag-tag baru di HTML 5. Kelebihan dan kekurangan HTML 5 Beberapa kelebihan yang dijanjikan pada HTML 5:

Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML. Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya. Integrasi (inline) MathML dan SVG dengan doctype yang lebih seder hana. Penulisan kode yang lebih efisien. Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah deprecated tidak akan diperlukan lagi.

Yang masih diperdebatkan dalam pengembangan HTML 5:


Makna semantik beberapa elemen presentasioal. Fitur aksesibilitasnya. Seperti atribut alt dan summary

Teknologi apa yang akan di perkenalkan HTML5 API (Aplication Programming Interface) merupakan teknologi yang akan di usung oleh HTML5, berikut ini adalah batasan-batasannya : 1. Offline Data Storage

26

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. Jadi, tanpa menyalakan koneksi internet pun kita bisa mengakses hal apa saja dengan internet . 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). Masih terdapat banyak API lainya dan terus di kembangkan. Dalam implementasinya, Anda akan memerlukan pemrogramanan Java Script penggunaan API ini. Elemen baru di HTML 5 Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:

untuk menjembatani

section serupa seperti h1-h6. article bisa berupa entri blog atau tulisan konten. aside menyajikan konten pelengkap. header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi. footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.

27

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

yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.

Atribut baru di HTML 5 Dikenalkan pula beberapa atribut baru, seperti:


atribut media, ping pada elemen pranala, autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input dan form,

reversed pada elemen ol untuk urutan besar ke kecil.

Perubahan makna elemen

Ada beberapa elemen yang berubah makna, diantaranya:

Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak deprecated (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen i.

Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.

Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.

dan lain-lain.

Elemen dan atribut yang tidak digunakan Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5:

28

center, font, strike, u, big, frame, frameset, noframes, acronym, longdesc, scope pada td, dan sebagainya. Sulit di pungkiri kehadiran HTML 5 akan menggerakkan banyak hal,

browser-browser beradaptasi untuk mendukungnnya, berbagai CMS mengarahkan developementnya untuk ikut mengimplementasikan yang pada akhirnya pera pemakai internet di paksa untuk menggeser kebiasaan lama menjadi kebiasaan tren baru. Tetapi pada prinsipnya yang berubah hanyalah tool dan caranya. Semoga penjelasan mengenai HTML 5 ini merealisasikan pengetahuan untuk memajukan web development ke depan. F. Mampukah HTML5 Menggantikan Mobile Native Apps?

Jika ingin membuat sebuah aplikasi untuk iPhone atau iPad maka Anda harus develop dengan komputer Macintosh dan menggunakan bahasa Objective-C. Jika ingin membuat aplikasi berbasis Android maka setidaknya harus memiliki dasar Java dan paham bagaimana menggunakan API Android. Jadi seperti yang bisa dilihat, ketika ingin membuat aplikasi yang sama untuk dua platform, kita harus menulis code dua kali untuk dua platform itu.

29

HTML5 berjalan di Mobile Itu sebabnya orang melihat HTML5 bisa menjadi alternatif menarik untuk membuat aplikasi yang dapat dijalankan di semua platform. Write once, run everywhere. HTML5 jika dipadukan dengan CSS3 dan JavaScript memang terbukti bisa menghasilkan aplikasi yang sangat interaktif. Apalagi saat ini hampir semua gadget ataupun komputer yang memiliki browser. Oleh karena itu, tidak mengherankan apabila di Internet muncul berbagai artikel mengenai bagaimana membuat aplikasi untuk iPhone ataupun Android dengan HTML. Sebagai teknologi yang tergolong baru, menggunakan HTML5 untuk membuat aplikasi untuk mobile menggantikan native app bukanlah tanpa tantangan. Mari kita pilah-pilah beberapa poin yang menjadi masalah:

1. Native App lebih cepat daripada HTML5 Pada dasarnya aplikasi native lebih cepat dikarenakan langsung dijalankan di sistem, dibandingkan HTML5 yang masih harus transfer data dari server ke perangkat tangan Anda.

2. Tampilan Native App lebih seirama dibandingkan HTML5

30

Biasanya tampilan aplikasi native lebih menyatu dengan perangkat daripada aplikasi berbasis Web. Mungkin juga tampilan native lebih menarik dibandingkan dengan aplikasi berbasis web.

3. Masalah keamanan pada HTML5 Bagi pengguna yang mengerti pemograman dan sejenisnya, peluang untuk mendobrak aplikasi HTML5 jauh lebih mudah dibandingkan aplikasi native. Misalnya saja, aplikasi Angry Bird berbasis HTML5 dapat dengan mudah di-hack untuk membuka semua level setelah beberapa jam di-launching.

4. HTML5 belum tentu bisa dijalankan di semua perangkat. Walaupun dikatakan write once run everywhere, HTML5 tidak sepenuhnya bisa dijalankan di mana-mana. Salah satu akibatnya adalah dukungan browser sendiri yang belum tentu mendukung semua fitur dari HTML5, apalagi W3C selaku badan yang membuat standar HTML5 menyatakan standar HTML5 mungkin baru akan rampung 2014.

5. HTML5 tidak efisien. Aplikasi native cenderung lebih efisien dibandingkan HTML5 karena aplikasi native dibuat hanya ditujukan untuk perangkat itu saja. Developer IPhone dapat memaksimalkan segalanya supaya aplikasinya dapat berjalan sempurna di Iphone. Berbeda dengan developer berbasis Web HTML5, dia harus memikirkan berbagai kemungkinan yang pada ujungnya harus mengorbankan efisiensi.

Itulah secuil kelemahan HTML5 dibandingkan native app. Tetapi walaupun hari ini HTML5 belum mencapai tahap rampung, bukan berarti native app bisa

31

berjaya terus. Untuk saat ini HTML5 masih memiliki kekurangan sana sini, tetapi perkembangannya sangatlah cepat. Dukungan HTML5 semakin hari akan semakin membaik. Saat ini saja, kita sudah mampu membuat aplikasi HTML5 berbasis sentuh yang dapat berjalan di Web maupun di mobile. Google sendiri merilis JavaScript engine V8 yang telah membuktikan mampu memproses JavaScript jauh lebih cepat. Serta saat ini sudah terdapat App Store untuk aplikasi berbasis HTML5 yang bisa dipasang ke gadget yang dinamakan openappmkt.com. Jadi, mungkin saja jika hari ini jika developer lebih memilih develop native app daripada berbasis HTML5. Tetapi penulis yakin dalam waktu beberapa tahun, dengan kecepatan perkembangannya seperti saat ini, aplikasi berbasis HTML5 akan mulai menjadi pilihan favorit developer.

BAB III PENUTUP

A. Kesimpulan Dari penjelasan di atas, dapat diambil kesimpulan untuk makalah ini bahwa html5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. HTML5 dapat digunakan untuk membuat blog agar valid, dapat juga untuk mengetahui blog yang telah dibuat sudah valid apa belum . HTML5 juga memperkenalkan beberapa teknologi canggih yang bermanfaat untuk kegiatan manusia di dalam kehidupan sehari-harinya.

32

B. Saran HTML5 memiliki kelebihan dan kekurangan,. HTML5 juga memiliki fiturfitur terbaru yang mungkin tidak dimiliki oleh HTML sebelumnya. Namun, dalam pembuatan makalah ini , penulis masih belum mengerti betul inti dari HTML5 tersebut. Jadi, penulis mohon maaf bahwa dalam pembuatan makalah ini masih terdapat kekeliruan. Penulis mohon masukan dan saran untuk perbaikan makalah selanjutnya.

33

DAFTAR PUSTAKA

Rossydian. 2012 Diambil dari url : http://rossydian.wordpress.com/2012/08/08/makalah-tutorial-html5/. Diakses pada tanggal 21 Oktober, 2013 Fadli Saldi. 2009. Diambil dari url : http://sukamikir.wordpress.com/2009/10/20/html-5-menjadi-solusi-para-webdevelopment/. Diakses pada tanggal 24 Oktober, 2013 Mario Ardi. 2013. Diambil dari url : http://assets.computesta.com/html5native/. Diakses pada tanggal 21 Oktober, 2013 Rezza. 2013. Diambil dari url : http://pelitarezza.blogspot.com/2013/01/kelebihandan-kekurangan-html5.html. Diakses pada tanggal 21 Oktober, 2013 Yanuar. 2012. Diambil dari url : http://yanuarsulistyowibowo.blogspot.com/2012/11/sejarah-perkembangan-html5css3.html. Diakses pada tanggal 18 Oktober, 2013

34

35