Embed Size (px)
DESCRIPTION
Pengenalan HTML 5 dan mempelajari elemen DOM dalam fungsional Selector API. Author : Herwin Anggeriana
Citation preview
Sejarah HTML 5
HTML pertama kali dipublikasi pada tahun 1993 ( versi draft ). HTML versi yang
terakhir yaitu HTML 5 merupakan platform web yang di-develop oleh sekumpulan orang
dalam group kecil bernama WHATWG ( Web Hypertext Application Working Group )
pada tahun 2004. Ide terciptanya HTML 5 relatif sederhana di mana saat itu mereka
mengalami masalah pengembangan HTML dalam web 2.0 khususnya dalam penerapan
browse pada sisi HTML dan API apps.
HTML 5 dikembangkan bersama WHATWG, W3C dan IETF dengan ruang lingkup (
scope ) terfokus pada compatibility, utility, interoperability, dan universal access.
Pada sisi kompatibel ( compatibility ), kehadiran HTML 5 tidak untuk meniadakan
ataupun mengubah secara keseluruhan HTML versi sebelumnya, begitu banyak halaman
web berbagai model yang dikembangkan dengan versi HTML sebelumnya tersebar di
internet dan existing. Google memberikan analisa secara mayoritas HTML memiliki
komponen ID dan Class yang diterapkan dalam DIV tags ( contoh DIV id=”header ). Maka
timbul pertanyaan kenapa harus bersusah payah menggunakan DIV id=”header”, ada
kah kemungkinan untuk dipersingkat menjadi <header> saja?
2012
http://herw1n.wordpress.com Herwin Anggeriana, S.Kom, M.Kom Follow Author Twitter : @aherwin Facebook – http://www.facebook.com/ITlinks.co.id
2 Follow author twitter : @aherwin
Pada sisi utilitas ( utility ), HTML 5 memprioritaskan “The user is king”. Dari
konsep “the user is king”, hal ini sudah mencerminkan bagaimana HTML 5 ingin
mengoptimalkan elemen authors, aplikasi browser ( bebas plug ins ), dan berbagai
spesifikasi baru yang diterapkan W3C/WHATWG dan berbagai penerapan aplikasi
lainnya.
Pada sisi keamanan ( secure design ), HTML 5 memberikan model keamanan baru
yang tidak hanya mudah untuk digunakan tetapi konsisten secara majority untuk
penerapan API yang berbeda – beda serta multi accros domain sehingga
mengoptimalkan interoperability.
Secara keseluruhan pengembangan HTML 5 memberikan evolusi model fitur yang
berbeda dan terbaru yaitu ; canvas ( 2D dan 3D ), multi across document messaging,
geolocation, audio video, forms, MathML, microdata, server-sent events, svg,
websocket API berikut protocol yang digunakan, web storage, indeks database, cache
browser, XMLHttpRequest level 2, dan konsep drag drop.
Perbedaan Source Code HTML 5
Sebelum saya membahas lebih dalam mengenai pemograman HTML 5, mari kita
mengintip ke belakang pada versi HTML sebelumnya. Berikut ini saya lampirkan sepotong
source code yaitu :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 Follow author twitter : @aherwin
Siapa yang sanggup mengingat source code tersebut ketika memulai pemograman HTML?
Umumnya kita menggunakan copy paste atas source code tersebut atau secara automatic
terbentuk ketika kita menggunakan aplikasi web editor.
Dengan HTML 5, kita cukup menggantinya dengan <!DOCTYPE html>, jauh lebih
sederhana, mudah diingat serta jelas.
Lalu bagaimana dengan source code ini : <meta http-equiv="Content-Type"
content="text/html; charset=utf-8" /> ?
Dengan HTML 5, anda cukup mengetikan dengan : <meta charset=”utf-8”>
Jika kita perhatikan perbedaan source code tersebut, timbul pertanyaan bagaimana
proses rendering yang terjadi dalam aplikasi browser? Seperti kita ketahui, setiap halaman web
memiliki model rendering yang berbeda – beda seperti Quirks model ( rendering mayoritas
yang digunakan ) dan Standards model. Pada element DOCTYPE dari HTML 5 memberikan
kebebasan kepada browser untuk menentukan mode rendering yang sesuai dan
memvalidasikan halaman tersebut. Pada fig 1.0 merupakan halaman weblog dari wordpress
yang sudah mendukung element HTML 5 dan dibandingkan halaman web yang tidak
menerapkan HTML 5.
4 Follow author twitter : @aherwin
Fig 1.0 : Perbedaan halaman web yang sudah mendukung HTML 5.
Dalam Fig 1.0 terlihat perbedaan halaman web yang sudah mendukung HTML 5,
perbedaan akan terlihat ketika kita menggunakan aplikasi browser dan mengklik “Page info”.
Dalam contoh di fig 1.0 dari halaman weblog http://herw1n.wordpress.com/ jika diklik page
info akan terlampir “ms.validate.01 DC2C7BA66BC5F630AD61607BECB14424” dalam hal ini
halaman tersebut telah divalidasi dan melalui proses rendering aplikasi browser.
Elements HTML 5 Terbaru
Dalam HTML 5, diterapkan element – element terbaru sebanyak tujuh elemen seperti
yang tercantum dalam tabel 1.0 berikut ini :
Type element Penjelasan
Embedded Element Content yang bertanggung jawab dalam melakukan
proses import terhadap sumber yang dibutuhkan ke dalam
dokumen. Sumber tersebut bisa berupa audio, video, canvas, dan
5 Follow author twitter : @aherwin
iframe.
Flow Element ini berfungsi dan digunakan dalam body dokumen dan
aplikasi. Misalnya form, h1 dan small.
Heading Section headers
Interactive Element content yang bertanggung jawab terhadap proses
interaksi ( interaktif ) user terhadap sumber yang dibutuhkan.
Misalnya interaktif tombol play dalam video, audio dan canvas.
Metadata Umumnya elemen ini berada dalam head section, tetapi dalam
HTML 5, elemen metadata dipisahkan ke dalam presentation.
Phrasing Element markup text ( text markup element ).
Sectioning Element ini bertanggung jawab dalam proses mendefiniskan
dokumen web. Misalnya article, aside, dan title.
Tabel 1.0 : element terbaru dalam HTML 5.
Pada HTML 5 memungkinkan penggunaan semantic markup dalam mendefinisikan
element content meskipun penggunaan semantic markup tidak memberikan hasil significant
bagi pengguna, tetapi memberikan dampak kesederhanaan model dalam mendesign halaman
HTML.
Pada sisi lain penggunaan semantic markup memberikan optimalisasi fungsi pencarian
dan optimalisasi fungsi indexing di search engine, yang nantinya mengoptimalkan fungsi crawl
maupun spider dari search engine.
6 Follow author twitter : @aherwin
Pada tabel 1.1 terlampir beberapa element section dari HTML 5 yang mengalami
penambahan fungsi yaitu :
Sectioning Element Penjelasan
Header Header content
Footer Footer content
Section Section halaman web
Article Content article yang bersifat independent
Aside Terkait content dan biasanya berfungsi sebagai quotes dari
halaman web.
Nav Navigasi aids
Tabel 1.1 : Element section HTML 5.
Berikut ini dilampirkan source code dari HTML 5 pada halaman weblog :
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Herwin Anggeriana</title> <link rel="pingback" href="http://herw1n.wordpress.com/xmlrpc.php" /> <link href="http://s2.wp.com/wp-content/themes/pub/regulus/style.css?m=1323834012g" type="text/css" rel="stylesheet" /> <link href="http://s2.wp.com/wp-content/themes/pub/regulus/switch.css?m=1158640643g" type="text/css" rel="stylesheet" /> <meta name="google-site-verification" content="ZSXiMyraqIrIMpqEQ-pfR0DNWqhY7XAPoWlma35Qq9o" /> <meta name="msvalidate.01" content="DC2C7BA66BC5F630AD61607BECB14424" /> <link rel="alternate" type="application/rss+xml" title="Herwin Anggeriana » Feed" href="http://herw1n.wordpress.com/feed/" /> <link rel="alternate" type="application/rss+xml" title="Herwin Anggeriana » Comments Feed" href="http://herw1n.wordpress.com/comments/feed/" /> <script type="text/javascript"> function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!='function'){window.onload=func;}else{window.onload=function(){oldonload();func();}}}
7 Follow author twitter : @aherwin
</script> <link rel='stylesheet' id='all-css-0' href='http://s1.wp.com/_static/??/wp-content/blog-plugins/loggedout-follow/widget.css,/wp-content/mu-plugins/post-flair/style.css,/wp-content/mu-plugins/post-flair/sharing/sharing.css,/wp-content/themes/h4/global.css,/wp-content/mu-plugins/widgets/css/widget-grid-and-list.css?m=1350004034j' type='text/css' media='all' /> <link rel='stylesheet' id='print-css-0' href='http://s0.wp.com/wp-content/mu-plugins/global-print/global-print.css?m=1335386953g' type='text/css' media='print' /> <script type='text/javascript'> var LoggedOutFollow = {"invalid_email":"Your subscription did not succeed, please try again with a valid email address."}; </script> <script type='text/javascript' src='http://s2.wp.com/_static/??/wp-includes/js/jquery/jquery.js,/wp-content/blog-plugins/loggedout-follow/widget.js,/wp-content/mu-plugins/widgets/js/widget-bump-view.js?m=1349903959j'></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://herw1n.wordpress.com/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://herw1n.wordpress.com/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress.com" /> <link rel='shortlink' href='http://wp.me/ps1H' /> <meta property="og:type" content="blog" /> <meta property="og:title" content="Herwin Anggeriana" /> <meta property="og:url" content="http://herw1n.wordpress.com/" /> <meta property="og:description" content="Articles, Journal Science from IT until business" /> <meta property="og:site_name" content="Herwin Anggeriana" /> <meta property="og:image" content="http://1.gravatar.com/blavatar/7a86570ba88761d9ec10b2e8997166b0?s=200" /> <meta property="fb:app_id" content="249643311490" /> <link rel="shortcut icon" type="image/x-icon" href="http://0.gravatar.com/blavatar/e91011e0d3b03f38f793622519a8900f?s=16" sizes="16x16" /> <link rel="icon" type="image/x-icon" href="http://0.gravatar.com/blavatar/e91011e0d3b03f38f793622519a8900f?s=16" sizes="16x16" /> <link rel="apple-touch-icon-precomposed" href="http://1.gravatar.com/blavatar/7a86570ba88761d9ec10b2e8997166b0?s=114" /> <link rel='openid.server' href='http://herw1n.wordpress.com/?openidserver=1' /> <link rel='openid.delegate' href='http://herw1n.wordpress.com/' /> <link rel="search" type="application/opensearchdescription+xml" href="http://herw1n.wordpress.com/osd.xml" title="Herwin Anggeriana" /> <link rel="search" type="application/opensearchdescription+xml" href="http://wordpress.com/opensearch.xml" title="WordPress.com" /> <style> .reblog-from img { margin: 0 10px 0 0; vertical-align: middle; padding: 0; border: 0; } .reblogger-note img.avatar { float: left; padding: 0; border: 0; } .reblogger-note-content { margin: 0 0 20px; } .reblog-post .wpcom-enhanced-excerpt-content { border-left: 3px solid #eee; padding-left: 15px; }
8 Follow author twitter : @aherwin
.reblog-post ul.thumb-list { display: block; list-style: none; margin: 2px 0; padding: 0; clear: both; } .reblog-post ul.thumb-list li { display: inline; margin: 0; padding: 0 1px; border: 0; } .reblog-post ul.thumb-list li a { margin: 0; padding: 0; border: 0; } .reblog-post ul.thumb-list li img { margin: 0; padding: 0; border: 0; } .reblog-post .wpcom-enhanced-excerpt { clear: both; } .reblog-post .wpcom-enhanced-excerpt address, .reblog-post .wpcom-enhanced-excerpt li, .reblog-post .wpcom-enhanced-excerpt h1, .reblog-post .wpcom-enhanced-excerpt h2, .reblog-post .wpcom-enhanced-excerpt h3, .reblog-post .wpcom-enhanced-excerpt h4, .reblog-post .wpcom-enhanced-excerpt h5, .reblog-post .wpcom-enhanced-excerpt h6, .reblog-post .wpcom-enhanced-excerpt p { font-size: 100% !important; } .reblog-post .wpcom-enhanced-excerpt blockquote, .reblog-post .wpcom-enhanced-excerpt pre, .reblog-post .wpcom-enhanced-excerpt code, .reblog-post .wpcom-enhanced-excerpt q { font-size: 98% !important; } </style> <meta name="application-name" content="Herwin Anggeriana" /><meta name="msapplication-window" content="width=device-width;height=device-height" /><meta name="msapplication-tooltip" content="Articles, Journal Science from IT until business" /><meta name="msapplication-task" content="name=Subscribe;action-uri=http://herw1n.wordpress.com/feed/;icon-uri=http://0.gravatar.com/blavatar/e91011e0d3b03f38f793622519a8900f?s=16" /><meta name="msapplication-task" content="name=Sign up for a free blog;action-uri=http://wordpress.com/signup/;icon-uri=http://s2.wp.com/i/favicon.ico" /><meta name="msapplication-task" content="name=WordPress.com Support;action-uri=http://support.wordpress.com/;icon-uri=http://s2.wp.com/i/favicon.ico" /><meta name="msapplication-task" content="name=WordPress.com Forums;action-uri=http://forums.wordpress.com/;icon-uri=http://s2.wp.com/i/favicon.ico" /><meta name="title" content="Herwin Anggeriana on WordPress.com" /> <meta name="description" content="Articles, Journal Science from IT until business (by Herwin Anggeriana)" /> <style type="text/css"> #header { background:url( http://herw1n.files.wordpress.com/2010/01/bg_2.jpg ) #fff; } </style> </head> <body class="home blog blue highlander-enabled highlander-light"> <div id="wrapper"> <div id="header">
9 Follow author twitter : @aherwin
<ul id="nav"> <li class="current_page_item" ><a href="http://herw1n.wordpress.com/">Home</a></li> <li class="page_item page-item-2"><a href="http://herw1n.wordpress.com/about-me/">About Me</a></li> </ul> </div> <a href="#nav" class="skipnav">jump to navigation</a> <div id="content"> <div class="post-436 post type-post status-publish format-standard hentry category-general-knowledge category-it-knowledge tag-flash-html-5 tag-flash-support tag-html-5 tag-html-5-windows-8 tag-internet-explorer-10 tag-native-platform tag-natvie-platform-win8 tag-release-html5 tag-silverlight-html-5 tag-silverlight-support"> <h2><a href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/" title="Permalink to HTML 5 di Windows 8, nasibnya Silverlight dan Adobe Flash?" rel="bookmark">HTML 5 di Windows 8, nasibnya Silverlight dan Adobe Flash?</a> <em>October 16, 2012</em> </h2> <em class="info">Posted by Herwin Anggeriana in <a href="http://herw1n.wordpress.com/category/general-knowledge/" title="View all posts in General Knowledge" rel="category tag">General Knowledge</a>, <a href="http://herw1n.wordpress.com/category/it-knowledge/" title="View all posts in IT Knowledge" rel="category tag">IT Knowledge</a>. <br /> Tags: <a href="http://herw1n.wordpress.com/tag/flash-html-5/" rel="tag">Flash HTML 5</a>, <a href="http://herw1n.wordpress.com/tag/flash-support/" rel="tag">Flash Support</a>, <a href="http://herw1n.wordpress.com/tag/html-5/" rel="tag">HTML 5</a>, <a href="http://herw1n.wordpress.com/tag/html-5-windows-8/" rel="tag">HTML 5 windows 8</a>, <a href="http://herw1n.wordpress.com/tag/internet-explorer-10/" rel="tag">internet explorer 10</a>, <a href="http://herw1n.wordpress.com/tag/native-platform/" rel="tag">native platform</a>, <a href="http://herw1n.wordpress.com/tag/natvie-platform-win8/" rel="tag">natvie platform win8</a>, <a href="http://herw1n.wordpress.com/tag/release-html5/" rel="tag">release HTML5</a>, <a href="http://herw1n.wordpress.com/tag/silverlight-html-5/" rel="tag">Silverlight HTML 5</a>, <a href="http://herw1n.wordpress.com/tag/silverlight-support/" rel="tag">SIlverlight support</a><br /> <a href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/" class="comments">comments closed</a></em> <div class="pd-rating" id="pd_rating_holder_8281_post_436"></div><br/><p><img class="alignnone alignleft" alt="" src="http://i1250.photobucket.com/albums/hh531/sandman_okto/HTML5_zps815a1532.jpg" height="127" width="126" />Windows 8 terbaru mendukung penuh HTML 5 dan javascript dalam plug ins Internet Explorer 10. Ini mungkin menjadi kekuatan dan fitur yang dihandalkan dalam Windows 8, HTML 5 menjadi native platform dalam pengembangan Windows 8 apps. Jadi gimana nasibnya Silverlight dan Adobe Flash? Akankah bernasib dengan product foxpro?</p> <p>Menurut sumber ( teman saya yang bekerja di Silverlight ) yang tidak ingin disebutkan namanya, Silverlight tetap akan didukung dan tidak akan menjadi produk discontinue dalam waktu cepat, Silverlight merupakan produk teknologi dari .NET Family. Silverlight tetap menjadi platform rich media
10 Follow author twitter : @aherwin
plug ins web. Untuk saat ini tidak ada perubahan yang harus dilakukan oleh pengembang Silverlight dalam mengadopsi HTML 5.</p> <p>Almarhum Steve Jobs, pada tahun 2010 bulan april mengatakan bahwa kehadiran dan pengembangan HTML 5 dalam menyaksikan video, dan konten apapun di web maka Adobe Flash tidak akan dibutuhkan lagi ( source : wikipedia ).</p> <p>HTML 5 merupakan programming HTML versi lima yang diperkenalkan tahun 2004 oleh W3C, hasil pengembangan dari HTML 4, sejak tahun 2010 bulan maret HTML 5 menjadi draft standar dan diharapkan menjadi standar rekomendasi teknologi di tahun 2012.</p> <p>Kehadiran Windows 8 yang akan segera meluncur di 26 Oktober 2012 serta dukungan native platform terhadap HTML 5, hal ini memberikan pelajaran berharga bagi para pengembang bagaimana senantiasa beradaptasi sinergi terhadap platform dasar seperti HTML5.</p> <p>Hmmm tentunya akan hadir update terbaru dari Silverlight dalam mengadaptasi HTML 5, saya berharap Silverlight tetap continue pengembangannya. And the ending of point, whatever HTML 5, HTML 6, maupun HTML 7 sekalipun, yuk googling belajar HTML 5.</p> <p>»» Read : <a title="Tips dan Trik Windows 8" href="http://herw1n.wordpress.com/2012/10/16/tips-dan-trik-windows-8/">Tips dan Trik Windows 8</a></p> <div id="jp-post-flair" class="sharedaddy sd-rating-enabled sd-sharing-enabled"><div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon sd-sharing"><h3 class="sd-title">Share this:</h3><div class="sd-content"><ul><li class="share-stumbleupon"><a rel="nofollow" class="share-stumbleupon sd-button share-icon no-text" href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?share=stumbleupon" title="Click to share on StumbleUpon"><span></span></a></li><li class="share-facebook"><a rel="nofollow" class="share-facebook sd-button share-icon no-text" href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?share=facebook" title="Share on Facebook" id="sharing-facebook-436"><span></span></a></li><li class="share-linkedin"><a rel="nofollow" class="share-linkedin sd-button share-icon no-text" href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?share=linkedin" title="Click to share on LinkedIn" id="sharing-linkedin-436"><span></span></a></li><li class="share-pinterest"><a rel="nofollow" class="share-pinterest sd-button share-icon no-text" href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?share=pinterest" title="Click to share on Pinterest"><span></span></a></li><li class="share-reddit"><a rel="nofollow" class="share-reddit sd-button share-icon no-text" href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?share=reddit" title="Click to share on Reddit"><span></span></a></li><li class="share-twitter"><a rel="nofollow" class="share-twitter sd-button share-icon no-text" href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?share=twitter" title="Click to share on Twitter" id="sharing-twitter-436"><span></span></a></li><li class="share-digg"><a rel="nofollow" class="share-digg sd-button share-icon no-text" href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?share=digg" title="Click to Digg this post"><span></span></a></li><li class="share-tumblr"><a rel="nofollow" class="share-tumblr sd-button share-icon no-text" href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?share=tumblr" title="Click to share on Tumblr"><span></span></a></li><li class="share-email"><a rel="nofollow"
11 Follow author twitter : @aherwin
class="share-email sd-button share-icon no-text" href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?share=email" title="Click to email this to a friend"><span></span></a></li><li class="share-print"><a rel="nofollow" class="share-print sd-button share-icon no-text" href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/" title="Click to print"><span></span></a></li><li class="share-google-plus-1"><div class="googleplus1_button"><div class="g-plusone" data-size="medium" data-callback="sharing_plusone" data-href="http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/"></div></div></li><li class="share-end"></li></ul><div class="sharing-clear"></div></div></div></div><div class="wpl-likebox sd-block sd-like"><h3 class="sd-title">Like this:</h3><div class="sd-content"><div id="like-436" class="wpl-button "><a href='http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?like=1&_wpnonce=008de9a736' title='I like this.' class='like needs-login sd-button' rel='nofollow'><span>Like</span></a></div><div class="wpl-count sd-like-count">Be the first to like this.</div></div></div></div></div><div id="pageNav"><a href="http://herw1n.wordpress.com/page/2/" >« older posts</a></div> </div> <div id="sidebar"> <form action="http://herw1n.wordpress.com" method="get" id="search"> <p><label for="s">search</label> <input value="" name="s" id="s" /> <input type="submit" value="go!" class="button" id="searchbutton" name="searchbutton" /></p> </form> <ul> <li> <h2>Admin Controls</h2> <ul id="wp-admin-bar"> <li><a href="http://herw1n.wordpress.com/wp-login.php">Log in</a></li> </ul></li><li id="categories-329506332" class="widget widget_categories"><h2 class="widgettitle">Categories</h2> <ul> <li class="cat-item cat-item-53362"><a href="http://herw1n.wordpress.com/category/accounting-finance/" title="View all posts filed under Accounting & Finance">Accounting & Finance</a> </li> <li class="cat-item cat-item-26610662"><a href="http://herw1n.wordpress.com/category/audit-log-server/" title="Information about IT Audit at Log Server">Audit Log Server</a> <ul class='children'> <li class="cat-item cat-item-26610746"><a href="http://herw1n.wordpress.com/category/audit-log-server/audit-methodology-data-log-server/" title="View all posts filed under Audit Methodology Data Log Server">Audit Methodology Data Log Server</a> </li> <li class="cat-item cat-item-26610694"><a href="http://herw1n.wordpress.com/category/audit-log-server/introduction-data-log/" title="View all posts filed under Introduction Data Log">Introduction Data Log</a> </li> <li class="cat-item cat-item-26610976"><a href="http://herw1n.wordpress.com/category/audit-log-server/performance-and-
12 Follow author twitter : @aherwin
benefits-log-server/" title="View all posts filed under Performance and Benefits Log Server">Performance and Benefits Log Server</a> </li> <li class="cat-item cat-item-26610728"><a href="http://herw1n.wordpress.com/category/audit-log-server/risk-management-refrences-it-audit-data-log/" title="View all posts filed under Risk Management refrences IT Audit Data Log">Risk Management refrences IT Audit Data Log</a> </li> <li class="cat-item cat-item-26612644"><a href="http://herw1n.wordpress.com/category/audit-log-server/scp-versus-syslog/" title="View all posts filed under SCP versus Syslog">SCP versus Syslog</a> </li> </ul> </li> <li class="cat-item cat-item-4332901"><a href="http://herw1n.wordpress.com/category/business-flow/" title="View all posts filed under Business Flow">Business Flow</a> </li> <li class="cat-item cat-item-49851"><a href="http://herw1n.wordpress.com/category/general-knowledge/" title="View all posts filed under General Knowledge">General Knowledge</a> </li> <li class="cat-item cat-item-15382453"><a href="http://herw1n.wordpress.com/category/it-general-control/" title="View all posts filed under IT General Control">IT General Control</a> </li> <li class="cat-item cat-item-201588"><a href="http://herw1n.wordpress.com/category/it-knowledge/" title="View all posts filed under IT Knowledge">IT Knowledge</a> </li> <li class="cat-item cat-item-196"><a href="http://herw1n.wordpress.com/category/programming/" title="View all posts filed under Programming">Programming</a> <ul class='children'> <li class="cat-item cat-item-2425"><a href="http://herw1n.wordpress.com/category/programming/aspnet/" title="Programming in ASP.net Framework">ASP.net</a> </li> <li class="cat-item cat-item-458"><a href="http://herw1n.wordpress.com/category/programming/php/" title="View all posts filed under PHP">PHP</a> </li> </ul> </li> <li class="cat-item cat-item-116095161"><a href="http://herw1n.wordpress.com/category/research-it-journal/" title="Kumpulan IT Research Journal oleh Herwin Anggeriana">Research IT Journal</a> </li> <li class="cat-item cat-item-15590208"><a href="http://herw1n.wordpress.com/category/windows-server-family/" title="View all posts filed under Windows Server Family">Windows Server Family</a> </li>
13 Follow author twitter : @aherwin
<li class="cat-item cat-item-355"><a href="http://herw1n.wordpress.com/category/wireless/" title="wireless">Wireless</a> </li> <li class="cat-item cat-item-12088824"><a href="http://herw1n.wordpress.com/category/world-market-watch/" title="View all posts filed under World Market Watch">World Market Watch</a> </li> </ul> </li> <li id="authors" class="widget widget_authors"> <h2 class="widgettitle">Author</h2> <ul> <li> <a href="http://herw1n.wordpress.com/author/h3rwin/"> <img alt='' src='http://0.gravatar.com/avatar/6d44bb91a26412a088b48fc794545490?s=1&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D1' class='avatar avatar-1' height='1' width='1' /> <strong>Herwin Anggeriana</strong></a> </li> </ul> </li> <li id="twitter-3" class="widget widget_twitter"><h2 class="widgettitle"><a href='http://twitter.com/aherwin'>Twitter</a></h2> <ul class='tweets'> <li> Saatnya HTML 5 dikembangkan. Jika ingin enhanced career, pengembangan HTML 5 menjanjikan. Links :... <a href="http://fb.me/1JCN9ULpQ"> fb.me/1JCN9ULpQ</a> - ITLinks <a href="http://twitter.com/aherwin/statuses/258482499225784321" class="timesince">1 day ago</a> </li> <li> Dlm Social Media Festival 2012, tlah dibahas qty followers nd fan page bukan lah KPI - <a href="http://bit.ly/UHH1sS"> bit.ly/UHH1sS</a> - ITLinks <a href="http://twitter.com/aherwin/statuses/257774013345050624" class="timesince">2 days ago</a> </li> <li> Women in IT industry - they're more involved than you think <a href="http://herw1n.wordpress.com/2012/10/12/menjadi-wanita-spesial-melalui-ubuntu-women/"> herw1n.wordpress.com/2012/10/12/men…</a> - ITLinks <a href="http://twitter.com/aherwin/statuses/257027413622521856" class="timesince">5 days ago</a> </li> <li> Real condition Wallpaper Windows XP, you can search on google maps with coordinate 38.248966, -122.410269 - <a href="http://goo.gl/RiCJY"> goo.gl/RiCJY</a> - ITLins <a href="http://twitter.com/aherwin/statuses/256145036658503680" class="timesince">1 week ago</a> </li> </ul><a href="http://twitter.com/aherwin" class='twitter-follow-button' data-show-count='false' data-link-color='#333333' data-text-color='#666666'>Follow @aherwin</a></li> <li id="top-posts-3" class="widget widget_top-posts"><h2 class="widgettitle">Top Pages</h2>
14 Follow author twitter : @aherwin
<ul><li><a href="http://herw1n.wordpress.com/2009/09/29/perbedaan-kabel-utp-cat5-cat5e-cat6-dan-cat7/" class="bump-view" data-bump-view="tp">Perbedaan kabel UTP cat5, cat5e, cat6 dan cat7</a></li> <li><a href="http://herw1n.wordpress.com/2009/03/20/double-declining-method/" class="bump-view" data-bump-view="tp">Double Declining Method</a></li> <li><a href="http://herw1n.wordpress.com/2012/09/23/zorin-os-linux-terbaik-bagi-pengguna-windows-dan-mac/" class="bump-view" data-bump-view="tp">Zorin OS, Linux Terbaik bagi Pengguna Windows dan Mac</a></li> <li><a href="http://herw1n.wordpress.com/2012/10/08/memahami-saas-cloud-computing/" class="bump-view" data-bump-view="tp">Memahami SaaS Cloud Computing</a></li> <li><a href="http://herw1n.wordpress.com/2012/10/16/tips-dan-trik-windows-8/" class="bump-view" data-bump-view="tp">Tips dan Trik Windows 8</a></li> </ul></li> <li id="blog_subscription-3" class="widget widget_blog_subscription"><h2 class="widgettitle"><label for="subscribe-field">Follow via Email</label></h2> <form action="https://subscribe.wordpress.com" method="post" accept-charset="utf-8" id="subscribe-blog"> <p>Enter your email address to follow this blog and receive notifications of new posts by email.</p> <p><input type="text" name="email" style="width: 95%; padding: 1px 2px" value="" id="subscribe-field"/></p> <p> <input type="hidden" name="action" value="subscribe"/> <input type="hidden" name="blog_id" value="6065937"/> <input type="hidden" name="source" value="http://herw1n.wordpress.com/"/> <input type="hidden" name="sub-type" value="widget"/> <input type="hidden" name="redirect_fragment" value="blog_subscription-3" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="4012b46f09" /> <input type="submit" value="Click To Follow" /> </p> </form> </li> <li id="blog-stats" class="widget widget_statscounter"> <h2 class="widgettitle">Blog Followers</h2> <ul> <li>24,431 </li> </ul> </li> <li id="facebook-likebox-3" class="widget widget_facebook_likebox"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FITLinks.co.id&width=200&height=110&colorscheme=light&show_faces=false&stream=false&header=false&force_wall=false" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 200px; height: 110px; background: #fff"></iframe></li> </ul> <ul id="feeds"> <li><h3>Feeds</h3></li> <li><a href="http://herw1n.wordpress.com/feed/">Full</a></li> <li><a href="http://herw1n.wordpress.com/comments/feed/">Comments</a></li> </ul> </div>
15 Follow author twitter : @aherwin
<ul id="footer"> <li>Theme: <a href="http://theme.wordpress.com/themes/regulus/" title="Learn more about this theme">Regulus</a> by <a href="http://www.binarymoon.co.uk/" rel="designer">Binary Moon</a>.</li> <li><a href="http://wordpress.com/?ref=footer" rel="generator">Blog at WordPress.com</a>.</li> <li><a href="#nav" title="Jump to top of page">Top</a></li> </ul> </div> <script type="text/javascript"> var _qevents = _qevents || [], wpcomQuantcastData = {"qacct":"p-18-mFEk4J448M","labels":",language.en,type.wpcom"}; function wpcomQuantcastPixel( labels, options ) { var i, defaults = wpcomQuantcastData, data = { event: 'ajax' }; labels = labels || ''; options = options || {}; if ( typeof labels != 'string' ) options = labels; for ( i in defaults ) { data[i] = defaults[i]; } for ( i in options ) { data[i] = options[i]; } if ( data.labels ) { data.labels += ',' + labels; } else { data.labels = labels; } _qevents.push( data ); }; (function() {var elem = document.createElement('script');elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";elem.async = true;elem.type = "text/javascript";var scpt = document.getElementsByTagName('script')[0];scpt.parentNode.insertBefore(elem, scpt); })(); _qevents.push( wpcomQuantcastData ); </script> <noscript><div style="display: none;"><img src="//pixel.quantserve.com/pixel/p-18-mFEk4J448M.gif?labels=%2Clanguage.en%2Ctype.wpcom" height="1" width="1" alt="" /></div></noscript> <script type='text/javascript' src='http://s.gravatar.com/js/gprofiles.js?ver=201242ab'></script> <script type='text/javascript'> var WPGroHo = {"my_hash":""}; </script> <script type='text/javascript' src='http://s1.wp.com/wp-content/mu-plugins/gravatar-hovercards/wpgroho.js?m=1318621548g'></script> <script>jQuery(document).ready(function($){ Gravatar.profile_cb = function( h, d ) { WPGroHo.syncProfileData( h, d ); }; Gravatar.my_hash =
16 Follow author twitter : @aherwin
WPGroHo.my_hash; Gravatar.init( 'body', '#wp-admin-bar-my-account' ); });</script> <div style="display:none"> </div> <div id="bit" class="loggedout-follow-normal"> <a class="bsub" href="javascript:void(0)"><span id='bsub-text'>Follow</span></a> <div id="bitsubscribe"> <h3><label for="loggedout-follow-field">Follow “Herwin Anggeriana”</label></h3> <form action="https://subscribe.wordpress.com" method="post" accept-charset="utf-8" id="loggedout-follow"> <p>Get every new post delivered to your Inbox.</p> <p id="loggedout-follow-error" style="display: none;"></p> <p class="bit-follow-count">Join 26 other followers</p> <p><input type="email" name="email" style="width: 95%; padding: 1px 2px" value="Enter your email address" onfocus='this.value=(this.value=="Enter your email address") ? "" : this.value;' onblur='this.value=(this.value=="") ? "Enter email address" : this.value;' id="loggedout-follow-field"/></p> <input type="hidden" name="action" value="subscribe"/> <input type="hidden" name="blog_id" value="6065937"/> <input type="hidden" name="source" value="http://herw1n.wordpress.com/"/> <input type="hidden" name="sub-type" value="loggedout-follow"/> <input type="hidden" id="_wpnonce" name="_wpnonce" value="4012b46f09" /><input type="hidden" name="_wp_http_referer" value="/" /> <p id='bsub-subscribe-button'><input type="submit" value="Sign me up" /></p> </form> <div id='bsub-credit'><a href="http://wordpress.com/signup/?ref=lof">Powered by WordPress.com</a></div> </div> </div> <script type='text/javascript' charset='UTF-8' src='http://i.polldaddy.com/ratings/rating.js'></script><script type='text/javascript' src='http://s2.wp.com/wp-content/mu-plugins/post-flair/sharing/sharing.js?m=1349904728g'></script> <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function(){ jQuery( '.share-facebook' ).click(function(){ window.open( jQuery(this).attr( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; }); }); </script> <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function(){ jQuery( '.share-linkedin' ).click(function(){ window.open( jQuery(this).attr( 'href' ), 'wpcomlinkedin', 'menubar=1,resizable=1,width=580,height=450' ); return false; });
17 Follow author twitter : @aherwin
}); </script> <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function(){ jQuery( '.share-pinterest' ).click(function(){ window.open( jQuery(this).attr( 'href' ), 'wpcompinterest', 'menubar=1,resizable=1,width=650,height=280' ); return false; }); }); </script> <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function(){ jQuery( '.share-twitter' ).click(function(){ window.open( jQuery(this).attr( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' ); return false; }); }); </script> <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function(){ jQuery( '.share-tumblr' ).click(function(){ window.open( jQuery(this).attr( 'href' ), 'wpcomtumblr', 'menubar=1,resizable=1,width=450,height=450' ); return false; }); }); </script> <div id="sharing_email" style="display: none;"> <form action="" method="post"> <label for="target_email">Send to Email Address</label> <input type="text" name="target_email" id="target_email" value="" /> <label for="source_name">Your Name</label> <input type="text" name="source_name" id="source_name" value="" /> <label for="source_email">Your Email Address</label> <input type="text" name="source_email" id="source_email" value="" /> <div class="recaptcha" id="sharing_recaptcha"></div><input type="hidden" name="recaptcha_public_key" id="recaptcha_public_key" value="6LcYW8MSAAAAADBAuEH9yaPcF7lWh11Iq62ZKtoo" /> <img style="float: right; display: none" class="loading" src="http://s2.wp.com/wp-content/mu-plugins/post-flair/sharing/images/loading.gif?m=1315610318g" alt="loading" width="16" height="16" /> <input type="submit" value="Send Email" class="sharing_send" /> <a href="#cancel" class="sharing_cancel">Cancel</a> <div class="errors errors-1" style="display: none;"> Post was not sent - check your email addresses! </div> <div class="errors errors-2" style="display: none;"> Email check failed, please try again</div> <div class="errors errors-3" style="display: none;"> Sorry, your blog cannot share posts by email. </div>
18 Follow author twitter : @aherwin
</form> </div> <script type="text/javascript" charset="utf-8"> function sharing_plusone( obj ) { jQuery.ajax( { url: 'http://herw1n.wordpress.com/2012/10/16/html-5-di-windows-8-nasibnya-silverlight/?share=google-plus-1', type: 'POST', data: obj } ); } </script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type='text/javascript' src='http://platform.twitter.com/widgets.js?ver=20111117'></script> <script type="text/javascript" src="http://b.scorecardresearch.com/beacon.js"></script><script type="text/javascript">try{COMSCORE.beacon({c1:2,c2:7518284});}catch(e){}</script><noscript><p class="robots-nocontent"><img src="http://b.scorecardresearch.com/p?cj=1c1=2&c2=7518284" alt="" style="display:none" width="1" height="1" /></p></noscript><script type='text/javascript' src='http://s1.wp.com/wp-content/js/devicepx.js?m=1349105731g'></script> <script type="text/javascript"> (function() { try{ if ( window.external &&'msIsSiteMode' in window.external) { if (window.external.msIsSiteMode()) { var jl = document.createElement('script'); jl.type='text/javascript'; jl.async=true; jl.src='/wp-content/plugins/ie-sitemode/custom-jumplist.php'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jl, s); } } }catch(e){} })(); // ]]> </script><script src="http://s.stats.wordpress.com/w.js?21" type="text/javascript"></script> <script type="text/javascript"> st_go({'blog':'6065937','v':'wpcom','user_id':'0','subd':'herw1n'}); ex_go({'crypt':'UE40eW5QN0p8M2Y/RE1LVmwrVi5vQS5fVFtfdHBbPyw1VXIrU3hWLHhmK2FURjVLLSxrUXxTRWFBSGJ8X1R+OVpIL0c0Rks9UzMrK2NddnlQJkNEcVpCSDVnRm1UalJrPXRJZjUxX0kwY1pnK2tWa2RnY2JSXXVddUw2NUVBLEpqSnVLa2lqbCtHampKWTVoT09JWko3RkpvdmpnZltPT2dGPWc/TTlXTltpJVFXQ344YlpYb11panVXS2NocmRpY1BUMEVkfHZlVXhzbXorK1Z6RjlXMlc4TGUmdFQsQ2hjNy9BdFQwLyUuTmpkME53MkY3Qiw3TUtYMWFbeDY3ZHZqTkt0UTgxNFtVS1ldaC1jbUJSbWxfVjFSb3NVZUR0W2Y/L1JBN0xQck1VXzVsRk5HN040UDJ4cENQQmo9cQ=='}); addLoadEvent(function(){linktracker_init('6065937',0);}); </script> <noscript><img src="http://stats.wordpress.com/b.gif?v=noscript" style="height:0px;width:0px;overflow:hidden" alt="" /></noscript> </body> </html>
19 Follow author twitter : @aherwin
Penjelasannya source code diatas ; hal yang cukup significant dalam penerapan HTML 5
dalam source code tersebut yaitu tidak tercantum element style dalam setiap element contents
seperti yang kita lakukan dalam HTML 4.
Element stylesheet pada css, didefinisikan dalam intro folder ( di awal halaman ), dalam
element (<link href="http://s2.wp.com/wp-content/themes/pub/regulus/style.css?m=1323834012g"
type="text/css" rel="stylesheet" /> ) dideklarasikan terlebih dahulu, dimana css tersebut
merupakan themes yang di-embeded-kan ke dalam dokumen dengan link alamat seperti yang
terlampir. CSS yang digunakan masih model function CSS versi kedua, belum menggunakan CSS
versi ketiga karena CSS versi ketiga masih dalam tahap pengembangan webkit.
Penggunaan Elemen DOM dalam fungsional Selectors API.
HTML 5 memperkenal konsep baru dalam penerapan elemen DOM untuk fungsional
API. Konsep yang lebih sederhana dalam menemukan elemen DOM untuk fungsional API secara
pemodelan functional. Dalam class javascript versi html sebelumnya, jika kita ingin memanggil
maupun mendeklarasikan fungsi CSS untuk element spesifik biasanya kita menggunakan syntax
javascript yaitu ; getElementById(), getElementsByName(), atau getElementsByTagName().
Pada HTML 5 kita dapat menggunakan fungsional Selectors API, dengan element ini
maka kita dapat menerapkan aturan ( selector rules ) dalam element CSS pada halaman web.
Element Selector API akan memproses penerimaan aturan ( selector rules ) secara automatic
tanpa harus mensorting ulang, dan melakukan fungsi iteration ke dalam dokumen dari halaman
web.
20 Follow author twitter : @aherwin
Sebagai contoh pada javascript versi HTML sebelumnya yaitu <input
type=”text”>getElementsByTagName(“input”); maka dalam HTML 5 kita dapat menggunakan
document.querySelector(“input error”); , mudah bukan.
Functional Contoh Syntax Penjelasan hasil
querySelector() document.querySelector(“input
error”);
Elemen ini secara automatic
menuju elemen yang kita
inginkan dari dokumen web dan
menerapkan functional class
error. Pada contoh syntax,
aturan yang diterapkan adalah
class error. Maka elemen
selector API akan menuju
elemen input field dari dokumen
web dan menerapkan functional
class error.
Query.SelectorAll() document.querySelectorAll(“#results
td”);)
Elemen ini secara automatic
akan menuju tabel dari
dokumen web dengan tabel
berlabel “results”.
Tabel 1.2 : penggunaan elemen DOM dalam fungsional Selector API.
21 Follow author twitter : @aherwin
Pada tabel 1.2 terlihat cukup jelas dan sederhana dalam penerapan fungsional Selector
API pada elemen DOM. Untuk lebih jelas saya akan memberikan contoh lain yang dapat anda
terapkan sebagai uji coba.
<form id="myform"><b>Your hobbies:</b><input name="hobbies" type="checkbox" value="movies" />Movies <input name="hobbies" type="checkbox" value="sports" />Sports <input name="hobbies" type="checkbox" value="reading" />Reading <input name="hobbies" type="checkbox" value="sleeping" />Sleeping <br /> <input type="submit" /> </form> <script type="text/javascript"> if (document.querySelector){ document.querySelector('#myform').onsubmit=function(){ var checkedhobbies=this.querySelectorAll('input[name="hobbies"]:checked') for (var i=0; i<checkedhobbies.length; i++){ alert(checkedhobbies[i].value) } return false } } </script>
Jika kita menjalankan dalam aplikasi browser. maka hasilnya akan terlihat seperti pada
fig 1.1
Fig 1.1 : Form berlabel “myForm” dengan empat checkbox button. Ketika form tersebut di-checked dan kita mengklik tombol “Submit” maka browser akan
memberikan hasil seperti pada fig 1.2.
22 Follow author twitter : @aherwin
Fig 1.2 : Hasil setelah form berlabel “myForm” diklik tombol “Submit”.
![Introduction à PHP php-intro Introduction à PHP · • voir aussi exemple 3-2 “Simple variables, tableaux et un peu de génération HTML” [15] Introduction à PHP - 3. Introduction](https://img.pdfslide.tips/doc/110x75/5f128c1db93f4e06a15be12b/introduction-php-php-intro-introduction-php-a-voir-aussi-exemple-3-2-aoesimple.jpg)
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph](https://img.pdfslide.tips/doc/110x75/56649e7e5503460f94b810e8/-introduction-to-html-tables-html-is-used-to-give-websites-structure-5.jpg)
