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

!eptia Lutfi"!#Kom" M#Kom

$leh Ti%a &angestika &utri ''()*')''* +ombel ,

-.+.!AN K.+IK.L.M DAN TEKN$L$GI &ENDIDIKAN /AK.LTA! ILM. &ENDIDIKAN .NI0E+!ITA! NEGE+I !EMA+ANG )(',

DA/TA+ I!I

Halaman

Halaman !ampul Daftar Isi 1111111111111111111111111111# ) 2A2 I# &ENDAH.L.AN A# Latar 2elakang 1111111111111111111111 , 2# Tu3uan 1111111111111111111111111# * 2A2 II# &EM2AHA!AN A# &engertian111111111111111111111111 * 2# &engenalan !truktur HTML511111111111###11111 * 4# !e3arah HTML51111##11111111111111111# '( D# 4ara Membuat 2log 0alid dengan HTML511111111111##'5 E# HTML 5 Men3adi !olusi &ara 6eb De7elopment111111111 )* /# Mampukah HTML5 Menggantikan Mobile Nati7e Apps8 11111# )9 2A2 III# &EN.T.& A# Kesimpulan 11111111111111111111111# ,) 2# !aran 11111111111111111111111111 ,, DA/TA+ &.!TAKA 11111111111111111111111## ,*

2A2 I &ENDAH.L.AN A. Latar Belakang !emakin pesatn%a perkembangan teknologi menuntut otak manusia untuk berfikir keras demi memperoleh hasil kar%a %ang bermanfaat untuk manusia itu sendiri di muka bumi# &erkembangan teknologi seakan memba:a manusia ke dalam dunia modern dimana nantin%a semua kegiatan manusia tidak luput dari %ang naman%a teknologi# Teknologi semakin lama semakin pesat dan mau tidak mau " manusia harus memenuhi kebutuhann%a dengan memanfaatkan perkembangan teknologi tersebut# Kreatifitas %ang dimiliki oleh masing;masing indi7idu bisa dituangkan le:at dunia n%ata maupun dunia ma%a # Hingga kreati7itas %ang dimiliki oleh masing;masing indi7idu diketahui oleh khala%ak" bahkan dari sebuah kreati7itas tersebut indi7idu bisa mendapatkan penghasilan untuk memenuhi kebutuhan hidup sehari;harin%a# Dengan mempublikasikan kreati7itas tersebut" indi7idu mau tidak mau harus mengembangkan kreati7itas untuk mampu bersaing di dalam bisnis tersebut # Nah" mungkin memublikasikann%a bisa dengan le:at blog" dll# !ebelum masuk ke dalam dunia ma%a untuk mempublikasikan kreati7itas %ang ingin dituangkan" indi7idu harus mangetahui konsekuensi apa sa3a %ang harus diterima saat indi7idu tersebut sudah masuk dalam dunia ma%a# Karena dalam dunia ma%a " terdapat semua hal apa sa3a %ang dibutuhkan oleh semua manusia# 2aik hal tersebut meliputi hal %ang positif maupun hal negatif # Apalagi 3ika anak usia rema3a %ang menuangkan kreati7itas tersebut masuk dalam dunia ma%a# &erlu penga:asan %ang ketat dari orangtua dan orang;orang di sekitarn%a " agar tidak ter3erumus dalam dunia

%ang harusn%a asik dan bermanfaat untuk kehidupann%a# Nah" untuk publikasi di sunia ma%a" perlu adan%a blog pribadi # Dalam blog tersebut bisa dibuat dengan html" html 5 misaln%a# Dalam makalah ini" kita akan mempela3ari bagaimana membuat blog dengan html 5 # B. Tujuan Adapun tu3uan pembuatan makalah ini adalah untuk memenuhi tugas mata kuliah teknologi informasi dan komunikasi" serta untuk mengetahui bagaimana <ara membuat blog menggunakan html5# 2A2 II &EM2AHA!AN A. Pengertian Menurut :ikipedia" html5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari 6aring 6era 6anua" sebuah teknologi inti dari Internet# HTML5 adalah re7isi kelima dari HTML =%ang pertama kali di<iptakan pada tahun '99( dan 7ersi keempatn%a" HTML*" pada tahun '995> dan hingga bulan -uni )('' masih dalam pengembangan# Tu3uan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru" mudah diba<a oleh manusia dan 3uga mudah dimengerti oleh mesin# HTML5 merupakan salah satu kar%a Konsortium 6aring 6era 6anua =World Wide Web Consortium" 6,4> untuk mendefinisikan sebuah bahasa markah tunggal %ang dapat ditulis dengan <ara HTML ataupun ?HTML# HTML5 merupakan 3a:aban atas pengembangan HTML *#(' dan ?HTML '#' %ang selama ini ber3alan terpisah" dan diimplementasikan se<ara berbeda;beda oleh ban%ak perangkat lunak pembuat :eb# HTML5 adalah 7ersi terbaru dari HTML =H%perTe@t Markup Language> %ang mana dikembangkan oleh 6,4 atau 6ord 6ide 6eb 4onsortium# Lalu apakah %ang dimaksud dengan !emanti< 6eb8 !emanti< berasal dari bahasa Aunani =Greek>" merupakan bahasa pembela3aran seminti<" %akni pembela3aran untuk memahami

penanda# !emanti< sendiri mempun%ai arti bahasa %ang berfokus pada penanda untuk mengetahui arti %ang terkandung di dalamn%a# B. Pengenalan Struktur HTML5

!eiring dengan perkembangan 6eb %ang semakin ino7atif" HTML * %ang telah berkibar selama hampir satu dekade ini akhirn%a mulai semakin dikembangkan kearah %ang lebih baik atau kita kenal dengan nama HTML 5# HTML 5 men3an3ikan fleksibilitas lebih bagi penulis" memungkinkan 6ebsite lebih menarik dan interaktif serta memperkenalkan dan meningkatkan berbagai /itur" seperti Kontrol bentuk" A&I" multimedia" struktur" dan semantik# HTML 5 Mulai beker3a pada tahun )((*" diba:ah asuhan 6,4 HTML 6G dan 6HAT6G# 2ahkan" Empat 0endor 2ro:ser besar seperti /irefo@" Apple" $pera" Dan Google kabarn%a ikut mengembangkan HTML 5# !truktur Dasar HTML dapat di lihat diba:ah ini

Gambar diatas adalah !truktur HTML * %ang masih menggunakan Elemen di7 %ang masing;masing memberikan id deskriptif atau kelas untuk menggambarkan bagian;bagian khusus# 0ersi HTML * masih kekurangan semantik# HTML 5 mulai memperbaiki hal ini dengan membuat masing;masing elemen me:akili bagian %ang
5

berbeda dan tidak perlu menggunakan penggambaran khusus# 4ontohn%a seperti gambar diba:ah ini

Gambar diatas menun3ukkan bah:a Elemen;elemen di7 dapat digantikan dengan unsur;unsur baru header" na7" bagian" artikel" samping" dan footer# Markup untuk Dokumen dapat digambarkan sebagai berikut Bbod%C BheaderC1BDheaderC Bna7C1BDna7C Barti<leC Bse<tionC 1 BDse<tionC BDarti<leC BasideC1BDasideC BfooterC1BDfooterC BDbod%C 4ontohn%a" !truktur Diba:ah ini %ang ditandai dengan bagian nested dan elemen h'

Bse<tionC Bh'CLe7el 'BDh'C Bse<tionC Bh'CLe7el )BDh'C Bse<tionC Bh'CLe7el ,BDh'C BDse<tionC BDse<tionC BDse<tionC &erhatikan !truktur Diatas" .ntuk kompabilitas %ang lebih baik dengan 2ro:ser saat ini" telah dimungkinkan menggunakan elemen post lain =h) untuk hE> tepat ditempat elemen h'# itulah salah satu keuntungan menggunakan elemen ini# Dengan mengidentifikasi halaman menggunakan elemen se<tioning spesifik" teknologi bantu dapat membantu pengguna untuk lebih mudah mena7igasi halaman# Misaln%a" mereka dengan mudah dapat melompat ke bagian na7igasi atau <epat melompat dari satu artikel ke berikutn%a tanpa perlu bagi penulis untuk memberikan skip link# &ada elemen header anda dapat men%ertakan sub 3udul" informasi atau lainn%a# !eperti !truktur Diba:ah Ini BheaderC Bh'CA &re7ie: of HTML 5BDh'C Bp <lassFGb%lineGC2% /erdinandBDpC

BDheaderC BheaderC Bh'CE@ample 2logBDh'C Bh)CInsert tag line here#BDh)C BDheaderC !etelah itu bagian lainn%a adalah /ooter %ang berisi data hak 4ipta" Link ke halaman Terkait dan lainn%a" !trukturn%a seperti diba:ah ini BfooterCH )('( D- Note In<#BDfooterC !elan3utn%a adalah bagian link na7igasi" dengan struktur seperti diba:ah ini Bna7C BulC BliCBa hrefFGDGCHomeBDaCBDliC BliCBa hrefFGDprologGC&rologBDaCBDliC BliCBa hrefFGD<onta<tGC4onta<tBDaCBDliC BliCBa hrefFGDaboutGCAboutBDaCBDliC BDulC BDna7C !elan3utn%a adalah !truktur !idebar" seperti diba:ah ini BasideC Bh'CAr<hi7esBDh'C
8

BulC BliCBa hrefFGD)('(D(9DGC!eptember )('(BDaCBDliC BliCBa hrefFGD)('(D(IDGCAugust )('(BDaCBDliC BliCBa hrefFGD)('(D(5DGC-ul% )('(BDaCBDliC BDulC BDasideC !elan3utn%a" !e<tion %ang merupakan bagian utama dalam sebuah dokument" misaln%a kita ba%angkan seperti sebuah 2ab dengan !truktur seperti diba:ah ini

Bse<tionC Bh'C4hapter ' !a%a $rang KreatifBDh'C BpC 2an%ak %ang bilang sa%a gak <erdas dan bengal" dan sa%a akui demikianlah sa%a" tapi ditengah kebodohan sa%a" sa%a tetap bers%ukur diberikan otak %ang kreatif oleh Tuhan 1BDpC BDse<tionC Terakhir adalah .nsur artikel" %ang berisi konten" postingan" komentar dan lainn%a" !trukturn%a seperti diba:ah ini Barti<le idFG<omment;,JC

BheaderC Bh*CBa hrefFGK<omment;,J relFGbookmarkGC4omment K,BDaC b% Ba hrefFGhttp DDe@ample#<omDGCGoogleBDaCBDh*LgtM BpCBtime datetimeFG)('(;(I;)9T', 5INGCAugust )9th" )('( at ', 5IBDtimeC BDheaderC BpC2log:alking GanOBDpC

C. Sejarah HTML5 Kelompok Ker3a Teknologi Aplikasi 6eb H%perteks =6eb H%perte@t Appli<ation Te<hnolog% 6orking Group" 6HAT6G> mulai membuat standar baru ini pada tahun )((* ketika Konsortium 6,4 sedang fokus pada pengembangan ?HTML )#( di masa depan" sementara HTML *#(' belum pernah diperbarui se3ak tahun )(((#P)Q !e3ak tahun )((9" 6,4 dan 6HAT6G beker3a sama dalam pengembangan HTML5 setelah 6,4 mengakhiri Kelompok Ker3a &engembangan ?HTML )#(#P,Q Meskipun HTML5 telah dikenal luas oleh para pengembang :eb se3ak lama" HTML5 baru men<uat pada April )('( setelah 4E$ Apple In<#" !te7e -obs" mengatakan bah:a dengan pengembangan HTML5" RAdobe /lash sudah tidak dibutuhkan lagi untuk men%aksikan 7ideo atau men%aksikan konten apapun di :eb# a. Tujuan dibuatnya HTML5 antara lain: '# /itur baru harus didasarkan pada HTML" 4!!" D$M " dan -a7a!<ript# )# Mengurangi kebutuhan untuk plugin eksternal =seperti /lash>#

10

,# &enanganan kesalahan %ang lebih baik# *# Lebih ban%ak markup untuk menggantikan s<ripting# 5# HTML5 merupakan perangkat mandiri# b. Fitur baru dalam HTML5: .nsur kan7as untuk menggambar# 0ideo dan elemen audio untuk media pemutaran# Dukungan %ang lebih baik untuk pen%impanan se<ara offline# Elemen konten %ang lebih spesifik" seperti artikel" footer" header" na7igation" se<tion# 2entuk kontrol form seperti kalender" tanggal" :aktu" e;mail" .+L" sear<h# c. Bebera a kelebihan yang dijanjikan ada HTML5: Dapat ditulis dalam sintaks HTML =dengan tipe media te@tDHTML> dan?ML# Integrasi %ang lebih baik dengan aplikasi situs dan pemrosesann%a# Integrasi =SinlineS> dengan do<t%pe %ang lebih sederhana# &enulisan kode %ang lebih efisien# Konten %ang ada di situs lebih mudah terindeks oleh sear<h engine# !aat ini HTML5 masih dalam pengembangan" namun han%a beberapa bro:ser sudah mendukung HTML5# 2eberapa bro:ser tersebut seperti !afari" 4hrome"

11

/irefo@" dan $pera# Kabarn%a IE9 =Internet E@plorer> akan mendukung beberapa fitur dari HTML5# &embuatan HTML5 3uga di karenakan !tandard HTML* %ang di3umpai ban%ak memiliki kelemahan untuk mendukung aplikasi :eb %ang interaktif# Akibat hal ini ban%ak orang menambahkan fitur baru baik disisi aplikasi :eb ataupun disisi bro:ser# !olusi ini dikenal dengan plugin dan salah satun%a adalah /lash dan !il7erlight# !emakin men3amurn%a plugin didalam aplikasi atau bro:ser membuat aplikasi :eb ini susah untuk menembus ban%ak bro:ser# Hal ini dikarenakan setiap plugin mempun%ai <ara %ang berbeda;beda" sebagai <ontoh kita ingin memasang plugin flash untuk sharing 7ideo maka pada halaman :eb kita harus ditulis sebagai berikut

Bob3e<t t%peFRappli<ationD@;sho<k:a7e;flashR :idthFR*((R heightFR))(R :modeFRtransparentR dataFRfl7pla%er#s:f8fileFmo7iesDholida%#fl7RC Bparam nameFRmo7ieR 7alueFRfl7pla%er#s:f8fileFmo7iesDholida%#fl7R DC Bparam nameFR:modeR 7alueFRtransparentR DC BDob3e<tC 4ontoh diatas menggunakan plugin /lash dari Adobe untuk men3alankan aplikasi :eb pada bro:ser maka lain <aran%a bila kita menggunakan !il7erlight# Teknologi !il7erlight dikembangkan oleh Mi<rosoft# 4ontoh penggunaan !il7erlight pada halaman :eb dapat dilihat pada HTML diba:ah ini Bob3e<t :idthFR,((R heightFR,((R dataFRdata appli<ationD@;sil7erlight;)"R t%peFRappli<ationD@;sil7erlight;)R C Bparam nameFRsour<eR 7alueFR!il7erlightAppli<ation'#@apRDC BDob3e<tC

12

HTML5 ini dibuat men%ederhanakan kompleksitas penggunaan media 7ideo dengan standard baru %aitu penggunaan tag B7ideoC# Dengan fitur baru ini maka kita <ukup menulis s<ript untuk men3alankan file 7ideo sebagai berikut B7ideo sr<Ftutorialku#mp*CBD7ideoC Isu bagaimana men3alankan file 7ideo pada aplikasi :eb merupakan salah satu <ontoh bagaimana HTML* tidak dapat men<akup masalah ini dan masih ban%ak lagi isu pada HTML*# $leh karena itu" kita sudah saatn%a memanfaatkan HTML5 sebagai standard aplikasi :eb kita# d. L!g! HTML5 &ada 'I -anuari )(''" 6,4 memperkenalkan sebuah logo untuk representasi penggunaan dan tu3uan HTML5# Tidak seperti logo lain %ang sebelumn%a telah diperkenalkan 6,4" logo ini tidak mengis%aratkan 7aliditas atau kesesuaian terhadap standar tertentu# Logo ini men3adi logo resmi se3ak ' April )(''# !aat logo ini pertama kali diperkenalkan ke muka publik" 6,4 men%atakan logo HTML5 ini sebagai sebuah Ridentitas 7isual se<ara umum bagi kumpulan berbagai teknologi open :eb" termasuk HTML5 4!!" !0G" 6$//" dan lainn%a#R 2eberapa pendukung standar :eb" termasuk &ro%ek !tandar 6eb =The 6eb !tandards &ro3e<t>" mengkritik definisi RHTML5R sebagai istilah umum" terutama bah:a ter3adi pengaburan terminologi dan potensi mun<uln%a miskomunikasi Tiga hari kemudian" 6,4 menanggapi umpan balik komunitas dengan mengubah definisi logo ini" %akni dengan menghapus bagian kesertaan berbagai teknologi terkait# 6,4 lantas men%atakan logo ini Rrepresentasi HTML5" si batu pen3uru dari berbagai Aplikasi 6eb modern#R

13

e. "ang Perlu #iketahui Tentang HTML5 $. #%CT"P&

D$4TA&E ditulis sebelum tag BhtmlC# /ungsi dari D$4TA&E adalah memberitahukan ke bro:ser bah:a tipe dokumen %ang digunakan adalah HTML# Dalam dokumen HTML 7ersi sebelumn%a D$4TA&E dituliskan dengan BOD$4TA&E HTML &.2LI4 T;DD6,4DDDTD HTML *#(' TransitionalDDENG Thttp DD:::#:,#orgDT+D html*Dloose#dtdGC !edangkan dalam HTML5 D$4TA&E han%a ditulis BOD$4TA&E HTMLC '. Tidak adanya Ty e ada (cri t dan link !our<e <ode %g baru

14

Blink relFGst%lesheetG hrefFGpathDtoDst%lesheet#<ssG DC Bs<ript sr<FGpathDtoD<ript#3sGCBDs<riptC sour<e <ode %g lama Blink relFGst%lesheetG hrefFGpathDtoDst%lesheet#<ssG t%peFGte@tD<ssG DC Bs<ript t%peFGte@tD3a7as<riptG sr<FGpathDtoD<ript#3sGCBDs<riptC ). Attribute *e+uired /orm mempun%ai fitur baru %aitu reUuired attribute" %ang akan menge<ek isi dari sebuah input te@t apakah kosong atau tidak saat di;submit# -ika kosong maka form tidak akan di;submit# Binput t%peFGte@tG nameFGsomeinputG reUuiredC ,. Mendukung audi! HTML 5 mengenalkan BaudioC element sudah mendukung penuh terhadap penggunaan audio pada halaman :eb# &enggunaann%a seperti kode diba:ah Baudio autopla%FGautopla%G <ontrolsFG<ontrolsGC Bsour<e sr<FGmusi<#mp,G DC .nduh /ile ini# BDaudioC 5. Mendukung -ide! Dan hebatn%a lagi HTML 3uga mengenalkan B7ideoC element# Tapi karena <ode< format 7ideo tidak semua bro:ser mendukung" 3adi 7ideo %ang bisa diputar tergantung dari bro:ser# &enggunaann%a seperti kode diba:ah

15

B7ideo <ontrols preloadC Bsour<e sr<FG<ontoh7ideo#og7G t%peFG7ideoDoggM <ode<sFV7orbis" theoraVG DC Bsour<e sr<FG<ontoh7ideo#mpWG t%peFG7ideoDmp*M X<ode<sFVa7<'#*)E('E" mp*a#*(#)VG DC BpC 2ro:ser tidak mendukung" Ba hrehFG<ontoh7ideo#mp*C !ilahkan unduh 7ideo#BDaC BDpC '# BD7ideoC

.. Tag/tag baru yang letaknya didalam 0b!dy1 0header1 Bdi7 idFRheaderRC Didalam BheaderC ini bisa kita isi ma<am;ma<am" misal logo" na7igasi" heading dan lain;lain# 2ahkan diisi Bdi7C pun tidak masalah# 0hgr!u 1 -ika kita memiliki satu atau lebih dari satu heading berurutan Bh'C ; BhEC maka kita bisa mengelompokkann%a dengan BhgroupC# 0na-1 Bna7C digunakan untuk ngelink kehalaman;halaman utama dari :ebsite atau bagian dari halaman itu sendiri# Kalau untuk paging" !o<ial Net:orking atau list;list %ang lain %ang menggunakan BulC nggak perlu dikasih Bna7C# Bse<tionC" Barti<leC dan BtimeC !esuai naman%a Barti<leC digunakan untuk membungkus teks artikel atau teks utama dalam halaman :eb# Apabila kita memiliki list atau daftar Barti<leC" misal blog" maka kita perlu membungkusn%a dengan Bse<tionC 3ika ada elemen lain %ang bukan Barti<leC dan menerangkan tentang Barti<leC# 0time1
16

digunakan untuk menun3ukan :aktu" biasan%a digunakan untuk menun3ukkan :aktu publish artikel" komentar" forum dan lain sebagain%a# BtimeCmemiliki atribut datetime %ang berisi :aktu bisa dalam format %%%%;mm;dd atau 3am seperti '9 ((# 0.igure1 dan 0.igca ti!n1 BfigureC digunakan sebagai pembungkus untuk tag BimgC# Tetapi tidak selalu semua tagBimgC kita bungkus dengan BfigureC" han%a gambar;gambar %ang utama sa3a atau gambar;gambar %ang ingin kita beri label# Nah kita memberi labeln%a dengan Bfig<aptionC# 0a(ide1 BasideC digunakan sebagai sidebar pada :ebsite# 0.!!ter1 BfooterC diletakkan dibagian ba:ah :ebsite# #. Cara Membuat Bl!g 2alid dengan HTML5 HTML5 adalah pengembangan dari 7ersi sebelumn%a" dimana tu3uan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru" mudah diba<a oleh manusia dan 3uga mudah dimengerti oleh mesin# Intin%a" agar :ebDblog terba<a sempurna di semua bro:ser dan mudah dalam penggunaan#

Dari berbagai sumber sa%a temukan bah:a diantara keuntungan me7alidasi blog adalah

17

 Membantu !ear<h Engine meng;indeks dokumen :ebsiteDblog lebih baik# +ender bro:ser lebih baik dan lebih <epat Do<ument ob3e<t model =dom> lebih stabil dan konsisten /uture &roof" %ang berarti HTML lebih kompatible" ba<k:ard <ompatible terhadap bro:ser terbaru# Mengetahui kondisi :ebsiteDblog lebih detail = link;link broken" link mati" dst#> Lebih disukai bro:ser;bro:ser dan tentu masih ban%ak lagi keuntungan lain dari 7alidasi HTML ini# a. Cara Membuat Bl!g 2alid HTML5 Langkah $ Langkah ' 2a<kup template sebelum melakukan editing# 4ari kode seperti ini

B8@ml 7ersionFR'#(R en<odingFR.T/;IR 8C BOD$4TA&E html &.2LI4 R;DD6,4DDDTD ?HTML '#( !tri<tDDENR Rhttp DD:::#:,#orgDT+D@html'DDTDD@html';stri<t#dtdRC Bhtml b 7ersionFS)S <lassFS7)S e@pr dirFSdata blog#languageDire<tionS @mlnsFShttp DD:::#:,#orgD'999D@htmlS @mlns bFShttp DD:::#google#<omD)((5DgmlDbS @mlns dataFShttp DD:::#google#<omD)((5DgmlDdataS @mlns e@prFShttp DD:::#google#<omD)((5DgmlDe@prSC BheadC ganti dengan :

18

B8@ml 7ersionFR'#(R en<odingFR.T/;IR 8C BOD$4TA&E htmlC BHTMLC BheadC Bmeta <harsetFSutf;ISDC Langkah ) Ganti kode </html> dengan </HTML> =paling ba:ah di template> Langkah , ganti kode ini Bb in<lude dataFSblogS nameFSall;head;<ontentSDC dengan kode di ba:ah ini Bmeta <ontentFSte@tDhtmlM <harsetF.T/;IS http;eUui7FS4ontent;T%peSDC Bmeta <ontentFSbloggerS nameFSgeneratorSDC Blink e@pr hrefFSdata blog#homepage.rl Y LUuotMfa7i<on#i<oLUuotMS relFSi<onS t%peFSimageD@;i<onSDC Blink e@pr hrefFSdata blog#urlS relFS<anoni<alSDC Blink e@pr hrefFSdata blog#homepage.rl Y LUuotMfeedsDpostsDdefaultLUuotMS e@pr titleFSdata blog#title Y LUuotM ; AtomLUuotMS relFSalternateS t%peFSappli<ationDatomY@mlSDC Blink e@pr hrefFSdata blog#homepage.rl Y LUuotMfeedsDpostsDdefault8altFrssLUuotMS e@pr titleFSdata blog#title Y LUuotM ; +!!LUuotMS relFSalternateS t%peFSappli<ationDrssY@mlSDC Blink e@pr hrefFSLUuotMhttp DD:::#blogger#<omDfeedsDLUuotM Y data blog#blogId Y LUuotMDpostsDdefaultLUuotMS e@pr titleFSdata blog#title Y LUuotM ; AtomLUuotMS relFSalternateS t%peFSappli<ationDatomY@mlSDC Blink hrefFShttp DD:::#blogger#<omDopenid;ser7er#gS relFSopenid#ser7erSDC Blink e@pr hrefFSdata blog#homepage.rlS relFSopenid#delegateSDC

19

Bb if <ondFSdata blog#pageT%pe FF LUuotMitemLUuotMSC Bb if <ondFSdata blog#postImageThumbnail.rlSC Blink e@pr hrefFSdata blog#postImageThumbnail.rlS relFSimageZsr<SDC BDb ifC Bb if <ondFSdata blog#metaDes<ription OF LUuotMLUuotMSC Bmeta e@pr <ontentFSdata blog#metaDes<riptionS nameFSdes<riptionSDC Bb elseDC Bmeta e@pr <ontentFSdata blog#pageName Y LUuotM ; LUuotM Y data blog#titleS nameFSdes<riptionSDC BDb ifC BDb ifC Langkah 5 Ganti Bb skinCBOP4DATAP dengan kode diba:ah Blink hrefFSDD:::#blogger#<omDstati<D7'D:idgetsD,95(((99II; :idgetZ<ssZbundle#<ssS relFSst%lesheetS t%peFSte@tD<ssSDC LltMst%le t%peFLUuotMte@tD<ssLUuotMLgtM LltMO;; D[Bb skinCBOP4DATAP[DQQ Bst%leC Langkah 3 Hapus semua kode ini Bb in<lude nameFSUui<keditSDC !etiap kali menambahkan :idget baru" hapus kode di atas# Langkah 4 Hapus semua kode ini =opsional> Ba e@pr nameFSdata post#idSDC Langkah 5 : hapus kode seperti ini

20

Bb in<lude dataFSpostS nameFSpost\ui<kEditSDC atau seperti ini Bb in<ludable idFSpost\ui<kEditS 7arFSpostSC Bb if <ondFSdata post#edit.rlSC Bspan e@pr <lassFSLUuotMitem;<ontrol LUuotM Y data post#admin4lassSC Ba e@pr hrefFSdata post#edit.rlS e@pr titleFSdata top#edit&ostMsgSC Bimg altFSS <lassFSi<on;a<tionS heightFS'IS sr<FShttp DDimg)#blogblog#<omDimgDi<on'IZeditZallbkg#gifS :idthFS'ISDC BDaC BDspanC BDb ifC BDb in<ludableC Langkah 6 Hapus kode diba:ah ini =kalau ditemukan" kalau tidak ada" le:ati sa3a> Bdi7 <lassFSpost;share;buttons goog;inline;blo<kSC###sampai###BDdi7C Langkah $7 Ganti semua <ode & dengan &amp;

Dan %ang harus diperhatikan adalah kemungkinan blog dengan langkah; langkah di atas belum 7alid# !upa%a men3adi '((]" silahkan perhatikan beberapa hal diba:ah ini '# !elalu gunakan tag alt pada gambar" <ontoh

21

Bimg altFRHTML5R sr<FRhttp DD)#bp#blogspot#<omD; H'eAI5$%a*:D.hUgUup\n%IDAAAAAAAA/L:Du&EKEueaL)\Ds'E((Dhtml5#pngR D C -angan gunakan borderFR(R pada gambar" sebagai gantin%a tambahkan kode

2.

st%leFRborder noneR atau 4!! terpisah seperti img^border none_ &ada i/rame" 3angan menggunakan frameborderFR(R atau allo:transparen<% RtrueR s<rollingFRnoR" sebagai gantin%a gunakan kode st%leFRborder noneMo7erflo: hiddenR atau 4!! terpisah seperti iframe^border noneMo7erflo: hidden_
4.

3.

&ada tag a 3angan menggunakan tag name seperti

Ba nameFS<omment;formSC sebagai gantin%a gunakan id seperti Ba hrefFSK<omment;formSC 5# -angan ada dua id pada template# baru# E# Hapus kode <b:include name='quic edit'/> setiap menambah :idget

22

b. Langkah/Langkah mengurangi 8 meminimali(ir err!r( dan 9arning( bl!g 8 9eb(ite &ertama" <ari kode seperti di ba:ah ini BOD$4TA&E html &.2LI4 R;DD6,4DDDTD ?HTML '#( !tri<tDDENR Rhttp DD:::#:,#orgDT+D@html'DDTDD@html';stri<t#dtdRC Bhtml @mlnsFShttp DD:::#:,#orgD'999D@htmlS @mlns bFShttp DD:::#google#<omD)((5DgmlDbS @mlns dataFShttp DD:::#google#<omD)((5DgmlDdataS @mlns e@prFShttp DD:::#google#<omD)((5DgmlDe@prSC Ganti kode di atas men3adi BOD$4TA&E htmlC Bhtml e@pr dirFSdata blog#languageDire<tionSC Atau dengan %ang ini BOD$4TA&E htmlC BHTMLC Langkah selan3utn%a" <op% kode di ba:ah ini dan pastekan tepat di ba:ah tag BheadC Bmeta <harsetFSutf;ISDC Lan3utkan dengan men<ari kode di ba:ah ini kemudian Hapus Bb in<lude nameFSUui<keditSDC
23

4ari tanda dash pada kode 4!! kemudian hapus# 4ontohn%a D[;;;;;;;;;;;;;; HEADE+ ;;;;;;;;;;;;;;[D !ehingga men3adi D[ HEADE+ [D -angan simpan dulu" tetapi <ari kode seperti di ba:ah ini Bb in<lude nameFSne@tpre7SDC -ika sudah ketemu" tambahkan kode <onditional <b:if....> dan penutupn%a sehingga akan terlihat seperti ini Bb if <ondFSdata blog#homepage.rl OF data blog#urlSC Bb in<lude nameFSne@tpre7SDC BDb ifC !elan3utn%a" <ari dan hapus kode seperti diba:ah ini =optional> Ba e@pr nameFSdata post#idSDC &. HTML 5 Menjadi S!lu(i Para :eb #e-el! ment Kebutuhan akan informasi di dunia ma%a membuat para de7eloper :ebsite berlomba;lomba men%a3ikan berbagai ma<am la%anan sehingga para pengguna akan betah berkun3ung ke dalam :ebsiten%a# Dari masa;masa ke masa teknologi :ebsite mengalami perkembangan %ang begitu pesatn%a dan kini bahkan memberalihkan aplikasi dektop %ang selama ini kita kenal men3adi aplikasi berbasis :eb#

24

2an%ak aplikasi %ang selama ini han%a sebatas akses di komputer dan harus diinstal terlebih dahulu" kini aplikasi :ebsite memberikan ruang pada kita untuk men<i<ipi aplikasi misan%a game online" sehingga tidak perlu lagi %ang naman%a instalasi kita <uma butuh %ang naman%a koneksi internet# &erkembangan :ebsite tersebut di atas" tidak lepas %ang naman%a s<riptDtag HTML =H%perte@t Markup Language># 2agi para :eb de7elopment mungkin sudah familiar %ang naman%a HTML ini karena untuk membangun :ebsite %ang dinamis para :eb de7elopment harus memahami konsep;konsep dasar dari HTML# 2an%ak orang bilang HTML itu bahasa %ang mudah sederhana dan struktur dan sering pula di anggap remeh karena kemampuan HTML itu sendiri" 3auh di ba:ah -a7a !<ript =<lient side> apalagi di bantingkan dengan s<ript ser7er side seperti &H&" A!&" A!&?" dan bahasa lain sebagain%a# Mengabaikan pemahaman tentang membanding;bandingkan HTML dengan %ang lain" perlu di ketahui HTML merupakan dokument standar %ang di akses dengan menggunakan HTT& =H%perte@t Tranfer &roto<ol> sebagai protokol %ang berfungsi mengirimkan data dari :eb ser7er ke :eb broser pada sisi klient# A:al pertama di perkenalkan %ang naman%a HTML ini sekita tahun '99' %ang han%a men<akup )) elemen dan kemudian di lan3utkan dengan HTML Y" maka di dalam perkembangan HTML tidak di kenal %ang naman%a HTML'# Dan pada tahun '995 barulah kemudian di perkenalkan %ang naman%a HTML )#(# &ada perkembangann%a HTML )#( kemudian oleh 6,4 =6ord 6ide 6eb 4onsortium> sebuah organisasi menentukan standar internasional :ord 6ide 6eb pada tahun '995 memperkenalkan HTML ,#) %ang memiliki ban%ak fitur tambahan seperti table" applet" supers<ript" sub s<ript dan marUue# &ada tahun '995 akhir" baru kemudian HTML *#( se<ara resmi di umumkan dan kemudian pada tahun '999 dilan3utkan dengan HML *#'# &ada perkembangan sekarang mungkin sebagian orang
25

masih merasakan %ang naman%a HTML * adalah kemampuan design :eb %aitu dengan menggunakan <ss =4as<ading !t%le !heets> # 4!! ini memberikan kemuduhan dalam memberikan tampilan %ang terbaik pada bro:ser;bro:ser Anda# &ada tahun -anuari )((I" HTML 5 diumkan sebagai draft" :alaupun belum di rekomentasikan se<ara resmi" beberapa sfesifikasi HTML 5 mulai di dukung oleh berbagai ma<am la%out dan engine# &ada perkembangann%a HTML 5 ini ada beberapa penambahan TtagG baru %ang han%a dapat dimengerti oleh bro:ser;bro:ser baru# Tag tersebut diantaran%a T(ecti!n" article" .!!ter" audi!" -ide!" r!gre((" na-" meter" time" a(ide" can-a( serta datagridT# Tag;tag tersebut han%a dikenali oleh bro:ser;bro:ser keluaran terbaru" sebagai misal /irefo@ ,#5" $pera 9#E" 4hrome" !afari" IE I# Nah bagaimana dengan bro:ser;bro:ser lama seperti IEE" /irefo@ '#5# Maaf bro:ser;bro:ser tersebut belum mendukung tag;tag baru di HTML 5# ;elebihan dan kekurangan HTML 5 2eberapa kelebihan %ang di3an3ikan pada HTML 5

Dapat ditulis dalam sintaks HTML =dengan tipe media te@tDhtml> dan ?ML# Integrasi %ang lebih baik dengan aplikasi :eb dan pemrosesann%a# Integrasi =VinlineV> MathML dan !0G dengan do<t%pe %ang lebih sederhana# &enulisan kode %ang lebih efisien# Dapat dimengerti oleh peramban la:as =ba<k:ards <ompatible># !ehingga istilah Xdepre<atedV tidak akan diperlukan lagi#

Aang masih diperdebatkan dalam pengembangan HTML 5

Makna semantik beberapa elemen presentasioal#

26

/itur aksesibilitasn%a# !eperti atribut alt dan summar%

Tekn!l!gi a a yang akan di erkenalkan HTML5 A&I =Apli<ation &rogramming Interfa<e> merupakan teknologi %ang akan di usung oleh HTML5" berikut ini adalah batasan;batasann%a 1. Offline Data Storage Memungkinkan kita bisa mengakses data lama di bro:ser dalam keadaan offline# 4ontoh offline data seperti kita memba<a arsip e;mail pada program $utlook atau Thunderbird# -adi" tanpa men%alakan koneksi internet pun kita bisa mengakses hal apa sa3a dengan internet # 2. Drag and Drop Drag and Drop ini kita dapat dengan memudahkan mendrag atau mendrop misaln%a te@t" h%perlink" bahkan file di aplikasi dekstop sekalipun# 3. Geolocation Aplikasi ini memungkinkan kita untuk untuk mengetahui lokasi geografis" sumber informasi di ambil dari G&! =Global &osition !%stem># Masih terdapat ban%ak A&I lain%a dan terus di kembangkan# Dalam implementasin%a" Anda akan memerlukan pemrogramanan -a7a !<ript untuk men3embatani penggunaan A&I ini# &lemen baru di HTML 5 Demi me:u3udkan struktur halaman :eb %ang lebih baik semantik dan aksesibilitasn%a" dikenalkanlah beberapa elemen baru" diantaran%a

27

se<tion serupa seperti h';hE# arti<le bisa berupa entri blog atau tulisan konten# aside men%a3ikan konten pelengkap# header bisa men%a3ikan 3udul" deskripsi" bahkan na7 untuk na7igasi# footer berisi <atatan kaki seperti informasi hak <ipta" penulis" kontak" dan sebagain%a#

dialog %ang dikombinasikan dengan dt dan dd =seperti pada halaman /A\> dapat digunakan untuk men%a3ikan per<akapan#

%ang fenomenal adalah penggunaan elemen figure" 7ideo" audio" sour<e" embed" <an7as" dan elemen terkait berkas multimedia lainn%a#

Atribut baru di HTML 5 Dikenalkan pula beberapa atribut baru" seperti

atribut media" ping pada elemen pranala" autofo<us" pla<eholder" reUuired" auto<omplete" dan sebagain%a" terkait elemen input dan form"

re7ersed pada elemen ol untuk urutan besar ke ke<il# Perubahan makna elemen Ada beberapa elemen %ang berubah makna" diantaran%a

Elemen b dilegalkan sebagai tipografi penegas" seperti pada kata kun<i %ang ingin diton3olkan" tidak Xdepre<atedV =bukan fitur %ang dianggap usang># Tidak lebih dari itu# -adi tetap tidak bermakna semantik tertentu# Hal %ang sama berlaku pula untuk elemen i#

28

Elemen strong menegaskan le7el kepentingan" bukan sekadar penekanan emphasis lagi#

Elemen hr dapat digunakan untuk memisahkan le7el paragraf sesuai pokok pikirann%a#

dan lain;lain#

&lemen dan atribut yang tidak digunakan 2erikut ini beberapa elemen dan atribut %ang tidak lagi mun<ul pada HTML 5

<enter" font" strike" u" big" frame" frameset" noframes" a<ron%m" longdes<" s<ope pada td" dan sebagain%a# !ulit di pungkiri kehadiran HTML 5 akan menggerakkan ban%ak hal"

bro:ser;bro:ser beradaptasi untuk mendukungnn%a" berbagai 4M! mengarahkan de7elopementn%a untuk ikut mengimplementasikan %ang pada akhirn%a pera pemakai internet di paksa untuk menggeser kebiasaan lama men3adi kebiasaan tren baru# Tetapi pada prinsipn%a %ang berubah han%alah tool dan <aran%a# !emoga pen3elasan mengenai HTML 5 ini merealisasikan pengetahuan untuk mema3ukan :eb de7elopment ke depan#
29

F. Mam ukah HTML5 Menggantikan M!bile <ati-e A

(=

-ika ingin membuat sebuah aplikasi untuk i&hone atau i&ad maka Anda harus de7elop dengan komputer Ma<intosh dan menggunakan bahasa $b3e<ti7e;4# -ika ingin membuat aplikasi berbasis Android maka setidakn%a harus memiliki dasar -a7a dan paham bagaimana menggunakan A&I Android# -adi seperti %ang bisa dilihat" ketika ingin membuat aplikasi %ang sama untuk dua platform" kita harus menulis <ode dua kali untuk dua platform itu#

HTML5 berjalan di M!bile Itu sebabn%a orang melihat HTML5 bisa men3adi alternatif menarik untuk membuat aplikasi %ang dapat di3alankan di semua platform# 6rite on<e" run e7er%:here# HTML5 3ika dipadukan dengan 4!!, dan -a7a!<ript memang terbukti bisa menghasilkan aplikasi %ang sangat interaktif# Apalagi saat ini hampir semua gadget ataupun komputer %ang memiliki bro:ser# $leh karena itu" tidak mengherankan apabila di Internet mun<ul berbagai artikel mengenai bagaimana membuat aplikasi untuk i&hone ataupun Android dengan HTML#

30

!ebagai teknologi %ang tergolong baru" menggunakan HTML5 untuk membuat aplikasi untuk mobile menggantikan nati7e app bukanlah tanpa tantangan# Mari kita pilah;pilah beberapa poin %ang men3adi masalah '# Nati7e App lebih <epat daripada HTML5 &ada dasarn%a aplikasi nati7e lebih <epat dikarenakan langsung di3alankan di sistem" dibandingkan HTML5 %ang masih harus transfer data dari ser7er ke perangkat tangan Anda# )# Tampilan Nati7e App lebih seirama dibandingkan HTML5 2iasan%a tampilan aplikasi nati7e lebih men%atu dengan perangkat daripada aplikasi berbasis 6eb# Mungkin 3uga tampilan nati7e lebih menarik dibandingkan dengan aplikasi berbasis :eb# ,# Masalah keamanan pada HTML5 2agi pengguna %ang mengerti pemograman dan se3enisn%a" peluang untuk mendobrak aplikasi HTML5 3auh lebih mudah dibandingkan aplikasi nati7e# Misaln%a sa3a" aplikasi Angr% 2ird berbasis HTML5 dapat dengan mudah di;ha<k untuk membuka semua le7el setelah beberapa 3am di;laun<hing# *# HTML5 belum tentu bisa di3alankan di semua perangkat# 6alaupun dikatakan :rite on<e run e7er%:here" HTML5 tidak sepenuhn%a bisa di3alankan di mana;mana# !alah satu akibatn%a adalah dukungan bro:ser sendiri %ang belum tentu mendukung semua fitur dari HTML5" apalagi 6,4 selaku badan %ang membuat standar HTML5 men%atakan standar HTML5 mungkin baru akan rampung )('*#

31

5# HTML5 tidak efisien# Aplikasi nati7e <enderung lebih efisien dibandingkan HTML5 karena aplikasi nati7e dibuat han%a ditu3ukan untuk perangkat itu sa3a# De7eloper I&hone dapat memaksimalkan segalan%a supa%a aplikasin%a dapat ber3alan sempurna di Iphone# 2erbeda dengan de7eloper berbasis 6eb HTML5" dia harus memikirkan berbagai kemungkinan %ang pada u3ungn%a harus mengorbankan efisiensi# Itulah se<uil kelemahan HTML5 dibandingkan nati7e app# Tetapi :alaupun hari ini HTML5 belum men<apai tahap rampung" bukan berarti nati7e app bisa ber3a%a terus# .ntuk saat ini HTML5 masih memiliki kekurangan sana sini" tetapi perkembangann%a sangatlah <epat# Dukungan HTML5 semakin hari akan semakin membaik# !aat ini sa3a" kita sudah mampu membuat aplikasi HTML5 berbasis sentuh %ang dapat ber3alan di 6eb maupun di mobile# Google sendiri merilis -a7a!<ript engine 0I %ang telah membuktikan mampu memproses -a7a!<ript 3auh lebih <epat# !erta saat ini sudah terdapat App !tore untuk aplikasi berbasis HTML5 %ang bisa dipasang ke gadget %ang dinamakan openappmkt#<om# -adi" mungkin sa3a 3ika hari ini 3ika de7eloper lebih memilih de7elop nati7e app daripada berbasis HTML5# Tetapi penulis %akin dalam :aktu beberapa tahun" dengan ke<epatan perkembangann%a seperti saat ini" aplikasi berbasis HTML5 akan mulai men3adi pilihan fa7orit de7eloper#

2A2 III &EN.T.& A. ;e(im ulan Dari pen3elasan di atas" dapat diambil kesimpulan untuk makalah ini bah:a html5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan
32

isi dari 6aring 6era 6anua" sebuah teknologi inti dari Internet# HTML5 adalah re7isi kelima dari HTML =%ang pertama kali di<iptakan pada tahun '99( dan 7ersi keempatn%a" HTML*" pada tahun '995> dan hingga bulan -uni )('' masih dalam pengembangan# HTML5 dapat digunakan untuk membuat blog agar 7alid" dapat 3uga untuk mengetahui blog %ang telah dibuat sudah 7alid apa belum # HTML5 3uga memperkenalkan beberapa teknologi <anggih %ang bermanfaat untuk kegiatan manusia di dalam kehidupan sehari;harin%a#

B. Saran HTML5 memiliki kelebihan dan kekurangan"# HTML5 3uga memiliki fitur; fitur terbaru %ang mungkin tidak dimiliki oleh HTML sebelumn%a# Namun" dalam pembuatan makalah ini " penulis masih belum mengerti betul inti dari HTML5 tersebut# -adi" penulis mohon maaf bah:a dalam pembuatan makalah ini masih terdapat kekeliruan# &enulis mohon masukan dan saran untuk perbaikan makalah selan3utn%a#

33

DA/TA+ &.!TAKA

+oss%dian# )(') Diambil dari url http DDross%dian#:ordpress#<omD)(')D(ID(IDmakalah;tutorial;html5D# Diakses pada tanggal )' $ktober" )(', /adli !aldi# )((9# Diambil dari url http DDsukamikir#:ordpress#<omD)((9D'(D)(Dhtml;5;men3adi;solusi;para;:eb; de7elopmentD# Diakses pada tanggal )* $ktober" )(', Mario Ardi# )(',# Diambil dari url http DDassets#<omputesta#<omDhtml5nati7eD# Diakses pada tanggal )' $ktober" )(', +e``a# )(',# Diambil dari url http DDpelitare``a#blogspot#<omD)(',D('Dkelebihan; dan;kekurangan;html5#html# Diakses pada tanggal )' $ktober" )(', Aanuar# )(')# Diambil dari url http DD%anuarsulist%o:ibo:o#blogspot#<omD)(')D''Dse3arah;perkembangan;html5; <ss,#html# Diakses pada tanggal 'I $ktober" )(',

34

35