Apa itu HTML5?

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

What You'll Be Creating

Kredit: Topik Sederhana - Apa itu HTML5? Mereka membuat video animasi yang keren.

Pengenalan HTML5

Selamat datang di Envato Tuts+! Tutorial ini memberikan ikhtisar pengenalan dari HTML5. Jika Anda belum pernah mendengar banyak tentangnya atau hanya ingin memahami relevansinya, Anda telah datang ke tempat yang tepat.

HTML5 adalah standar terbaru browser untuk menampilkan dan berinteraksi dengan halaman web. Disetujui pada tahun 2014, itu merupakan pembaruan pertama HTML dalam 14 tahun terakhir. Di hari dan jaman ini, yang seumur hidup antara pembaruan.

Tujuan dari HTML5 adalah terutama untuk membuatnya lebih mudah bagi pengembang web dan pencipta browser untuk mengikuti standar berbasis konsensus yang membuat kepatuhan yang lebih efisien dan memberdayakan. Ini juga dirancang untuk memberikan pengalaman pengguna yang lebih baik, lebih cepat, lebih konsisten untuk pengunjung desktop dan mobile.

Berikut ini adalah beberapa kunci perbaikan dalam HTML5:

Ada yang lebih sederhana, struktur elemen yang lebih mudah ke halaman, yang membuat mereka lebih mudah untuk dibangun, disesuaikan, dan debug—dan untuk membangun layanan otomatis yang membantu Anda menemukan sumber-sumber penting di web.
Menyediakan elemen-elemen standar untuk objek media biasa yang sebelumnya membutuhkan plugin yang mengganggu untuk audio, video, dll. Plugin ini perlu diperbarui secara berkala, yaitu download yang diulang-ulang untuk mengelola keamanan.
Ada integrasi asli dengan antarmuka untuk memanfaatkan kebutuhan web dan mobile modern. Salah satu contoh favorit saya adalah geolocation, yang mengijinkan Anda untuk menentukan koordinat GPS dari pengunjung web melalui browser mereka. Fitur ini sebelumnya dibatasi untuk aplikasi ponsel yang dilengkapi GPS.

Sebagai contoh, di bawah ini adalah contoh geolocation HTML5 dari Membangun Startup Dengan PHP: Geolocation dan Google Places (Tuts+):

Siapa yang Dipedulikan HTML5?

Apakah Anda Hanya seorang Pengguna Web atau Penggemar YouTube?

HTML5 akan meningkatkan kecepatan, kemudahan penggunaan dan konsistensi di seluruh web. Ya, pengalaman YouTube Anda akan berangsur-angsur menjadi konsisten dengan indah. Akan ada sedikit pembaruan browser dan plugin, ancaman keamanan yang lebih sedikit, dan lebih elegan, lebih mudah dibaca, situs web yang lebih cepat.

Apakah Anda Seorang Pengembang Web?

HTML5 sangat memudahkan hidup Anda dan memperluas apa yang mungkin. Ini juga berarti Anda akan mampu membangun hal-hal dan lebih mengandalkan pembangun browser untuk menjamin konsistensi. Ini berarti kode tata letak bersyarat jauh lebih sedikit.

Apakah Anda Ingin Membangun Sebuah Web Browser?

Di satu sisi, Anda akan memiliki peta jalan besar di spesifikasi HTML5 yang merinci bagaimana dan apa yang harus Anda bangun. Di sisi lain, ada lebih banyak untuk melakukan dan mendapatkan yang benar. Ini tidak akan mudah untuk membedakan browser Anda vs gadis pembuat browser.

Ingin Belajar Lebih Banyak?

Hanya pengingat cepat sebelum kita menyelam! Saya mencoba untuk berpartisipasi dalam diskusi di bawah ini. Jika Anda memiliki pertanyaan atau saran topik untuk tutorial berikutnya, silakan posting komentar di bawah atau menghubungi saya di Twitter @reifman.

Latar belakang dari HTML5

Dari mana HTML5 Berasal?

HTML5 adalah standar pemrograman browser yang terbaru dalam lebih dari 20 tahun sejak peluncuran web pada tahun 1991.

Sejarah HTML

HTML pertama muncul sebagai standar pada tahun 1993, dan di sini adalah timeline dari versi HTML yang diterima oleh komite standar:

HTML 2.0: 1995
HTML 4.0: 1997
HTML 4.01: 2000
HTML 5: 2014

Tujuan dari HTML5

Menurut Wikipedia, HTML5 ditujukan untuk mengkonsolidasikan versi sebelumnya dan jenis dokumen yang dibedakan seperti XHTML 1 dan HTML DOM Level 2:

[HTML5] meluas, meningkatkan dan merasionalisasi markup yang tersedia untuk dokumen, dan memperkenalkan markup dan... (API) untuk aplikasi web kompleks... HTML5 adalah juga calon yang potensial untuk aplikasi mobile lintas-platform. Banyak fitur yang telah dirancang dengan perangkat bertenaga rendah seperti smartphone dan tablet yang dipertimbangkan.

Berikut ringkasan dari cara MakeUseOf menjelaskan tujuan HTML5:

Menghilangkan plugin seperti Flash untuk fitur umum yang dibutuhkan setiap orang. Membangun dukungan asli untuk hal-hal seperti audio, video, dll.
Mengurangi kebutuhan untuk JavaScript dan kode tambahan dengan elemen-elemen asli baru.
Memberikan konsistensi pada berbagai browser dan perangkat.
Melakukan semua ini semaksimal mungkin.

What is HTML5 Plugin Past for Video Element

Gambar kredit: Topik Sederhana

Fitur Baru Apa yang Ditawarkan HTML5?

Banyak, ternyata! HTML5 menyediakan daftar kemampuan baru yang mengesankan yang browser utama masih tidak sepenuhnya kompatibel bahkan 18 bulan setelah penerimaannya:

Gambar kredit: PHPFlow

Ada juga pelangi visual interaktif di HTML5Readiness. Hover ke atas lengkungan yang berbeda dan Anda akan melihat fitur mana yang didukung browsernya:

Ini menyenangkan, tapi grafik lain di situs lainnya mungkin lebih berfungsi intuitif untuk digunakan.

Tingkat Adopsi HTML5

Pada tahun 2011, Wikipedia melaporkan sekitar sepertiga dari top 100 situs Web mendukung beberapa HTML5. Pada bulan Agustus 2013, sekitar 153 dari situs Fortune 500 melakukannya.

Berikut adalah visualisasi dari kemampuan HTML5 yang sangat banyak:

Gambar kredit: Wikipedia

Elemen-elemen baru HTML5

Elemen-elemen baru yang paling dasar dari HTML5 membuatnya lebih mudah untuk menata letak halaman web dan debug kode Anda atau orang lain. Juga membuatnya lebih mudah untuk layanan otomatis untuk memindai web dan memahami pentingnya komponen halaman yang berbeda.

Untuk tata letak halaman dan fitur utama, sekarang ada elemen-elemen spesifik seperti:

<header> dan <footer>
<nav> untuk segala jenis menu
<aside> untuk sidebar atau konten terkait yang dekat
<article> dimana konten berada seperti posting blog
<section> mirip <div> tapi lebih berorientasi-konten
<audio> dan <video> tag agar browser asli mengelola pemutaran masing-masing. Tidak ada lagi pembaruan plugin dan keamanan untuk ini
<canvas> khususnya untuk mengijinkan Anda menggambar grafis dengan menggunakan bahasa skrip yang terpisah
<embed> untuk menempatkan konten atau aplikasi eksternal ke halaman

Berikut ini adalah gambaran visual yang bagus oleh Smashing Magazine:

Berikut adalah beberapa fitur yang lebih canggih dari HTML5, termasuk integrasi API, menjadikan mengkode dalam JavaScript untuk tindakan-tindakan canggih lebih mudah dan lebih konsisten di seluruh browser:

Pemutaran audio dan video: menyediakan pemutaran media di browser tanpa plugin.
Geolocation: mengidentifikasi lokasi pengunjung.
Drag dan drop: untuk meng-upload file dari browser dengan gerakan sederhana.
Cache aplikasi: menyediakan dukungan untuk menjalankan situs HTML secara offline.
Web workers: menjalankan JavaScript di latar belakang (non-blocking).
Server sent events: mengijinkan server untuk memperbarui halaman web pada browser setelah mereka dimuat, lebih sederhana dan lebih efisien daripada AJAX dan JavaScript.
Penyimpanan data offline: menyediakan cara untuk menyimpan data secara lokal di cookie browser independen. Cara Menggunakan Penyimpanan Offline HTML5 di Situs web Anda menyediakan panduan yang bagus.

HTML5 dan Masa Depan Web menawarkan panduan lain untuk fitur ini. Berikut adalah salah satu fakta mereka—mereka sangat menghargai cache aplikasi:

Google Gears memberikan kita penyimpanan data offline dan memperkenalkan dengan singkat ke kita kepada kekuatan cache aplikasi (Pandora menggunakannya untuk menyimpan informasi login Anda). Dengan HTML5, kemampuan ini sekarang tersedia untuk digunakan langsung dalam bahasa dan dapat dengan mudah diperluas dengan JavaScript.

Perlu melihat fitur mana yang didukung di browser? HTML5Test memiliki penilaian interaktif yang berguna untuk fitur dan dukungan browser:

What is HTML5 Feature Compatibility Browser Matrix

Ada begitu banyak fitur baru yang tidak mungkin untuk menampilkan semuanya di sini. Periksa sumber link di bagian bawah dari tutorial ini untuk sumber daya yang lebih dalam saya sarankan.

Beberapa Contoh Aksi HTML5

Mari kita lihat beberapa contoh keren dari aksi HTML5.

Sebuah Boilerplate Halaman HTML5

Kesederhanaan dari HTML5 adalah jelas pada tata letak halaman yang baru. Elemen-elemen yang lebih berorientasi konten membuat mengkode halaman lebih mudah untuk memahami dan debug. Berikut adalah contoh sederhana yang saya bangun dengan proyek HTML5-Reset:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>
    <meta name="author" content="" />
  <meta name="description" content="" />

 <link rel="stylesheet" href="assets/css/style.css" />

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header>
    	<h1><a href="/">Page Title</a></h1>
		<nav>
			<ol>
				<li><a href="">Nav Link 1</a></li>
				<li><a href="">Nav Link 2</a></li>
				<li><a href="">Nav Link 3</a></li>
			</ol>
		</nav>
	</header>
	<article>
		<h1>Article Header</h1>
		<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>

		<h2>Article Subhead</h2>
		<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>

	</article>

	<aside>
		<h2>Sidebar Content</h2>
	</aside>

	<footer>
		<p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>
	</footer>

</div>

  <script src="scripts/js/scripts.js"></script>
</body>
</html>

Perhatikan ada tag doctype yang lebih sederhana, tag link dan tag script. Skrip HTML5Shiv menyediakan dukungan warisan untuk versi Internet Explorer sebelum 9.x.

Jika Anda ingin melihat beberapa pendekatan lain, periksa HTML5 Boilerplate, default halaman HTML5 open-source yang lebih luas.

Elemen Video dan Pemutar

Berikut ini contoh video dari W3Schools yang menampilkan kode sumber di sebelah kiri dan pemutar yang dihasilkan di sebelah kanan:

Tidak ada plugin yang diperlukan dan tidak ada pembaruan.

Form

HTML5 memiliki berbagai macam perangkat tambahan untuk form dan elemen-elemen input untuk membuat pemrograman web lebih mudah dan pengalaman pengguna yang jauh lebih baik. Sebagai contoh, elemen-elemen input sekarang mendukung berbagai validasi built-in. Berikut adalah validasi untuk nomor dalam rentang tertentu:

Berikut ini adalah beberapa tutorial yang sangat baik untuk pergi selangkah lebih dalam di form pada HTML5 Doctor:

Sebagai contoh, berikut ini adalah demonstrasi dari elemen range yang ditampilkan di browser Chrome:

Scalable Vector Graphics (SVG)

Dalam HTML5, Anda dapat lebih mudah menganimasikan elemen-elemen dengan JavaScript dan HTML5. Berikut ini animasi jam sederhana yang dapat diskala (mengubah zoom):

Berikut ini contoh kode untuk demo di atas mengintegrasikan JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: SVG clock animation</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="js/h5utils.js"></script></head>
<body>
<section id="wrapper">
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
    <header>
      <h1>SVG clock animation</h1>
    </header>

<style>
  /* any custom styles live here */
  line {
  stroke-width: 3px;
  stroke: black;
  }      
</style>
<article>
  <p>SVG clock animation by <a href="http://twitter.com/davidbasoko">David Basoko</a>.</p>
    <div>
      <label for="zoominput">Zoom</label>
      <select id="rangeinput" onchange="CLOCK.zoom();">
        <option value="1" selected="selected">1x</option>
        <option value="2">2x</option>
        <option value="3">3x</option>
        <option value="4">4x</option>
        <option value="5">5x</option>
      </select>
    </div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" >
        <g>
          <circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/>
          <line id="hour0" x1="100" y1="10"  x2="100" y2="0"/>
          <line id="hour1" x1="150" y1="13"  x2="145" y2="22"/>
          <line id="hour2" x1="187" y1="50"  x2="178" y2="55"/>
          <line id="hour3" x1="190" y1="100" x2="200" y2="100"/>
          <line id="hour4" x1="187" y1="150" x2="178" y2="145"/>
          <line id="hour5" x1="150" y1="187" x2="145" y2="178"/>
          <line id="hour6" x1="100" y1="190" x2="100" y2="200"/>
          <line id="hour7" x1="50"  y1="187" x2="55"  y2="178"/>
          <line id="hour8" x1="13"  y1="150" x2="22"  y2="145"/>
          <line id="hour9" x1="0"   y1="100" x2="10"  y2="100"/>
          <line id="hour10" x1="13"  y1="50"  x2="22"  y2="55" />
          <line id="hour11" x1="50"  y1="13"  x2="55"  y2="22" />
        </g>
        <g>
          <line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/>
          <line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;"  id="minutehand"/>
          <line x1="100" y1="100" x2="100" y2="5"  style="stroke-width: 2px; stroke: red;"   id="secondhand"/>
        </g>
      </svg>
    </div>

</article>
<script>
var CLOCK = (function() {
    var drawClock = function() {
        var INITIAL_R = 100;

        var zoom = document.getElementById("rangeinput").value;
        
        var r = INITIAL_R * zoom;

        // Draw Circle
        var circle = document.getElementById("circle");
        circle.setAttribute('r', r);
        circle.setAttribute('cx', r);
        circle.setAttribute('cy', r);

        // Draw Hours
        for(var i = 0; i < 12; i++) {
            var hour = document.getElementById("hour"+i);
            var degrees = i * 30;
            hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length.
            hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length.
            hour.setAttribute('x2', getX(degrees, r));
            hour.setAttribute('y2', getY(degrees, r));
        }

        // Draw hands
        drawHands();
    };

    var drawHands = function() {
        // Constants for hand's sizes.
        var SECONDS_HAND_SIZE = 0.95,
        MINUTES_HAND_SIZE = 0.85,
        HOURS_HAND_SIZE = 0.55;

        var circle = document.getElementById("circle");

        // Clock Circle's Properties
        var r = circle.getAttribute('r'),
        cx = parseInt(circle.getAttribute('cx')),
        cy = parseInt(circle.getAttribute('cy'));

        // Current time.
        var currentTime = new Date();

        // Draw Hands
        drawHand(document.getElementById("secondhand"),
                 currentTime.getSeconds(),
                 SECONDS_HAND_SIZE,
                 6);
        drawHand(document.getElementById("minutehand"),
                 currentTime.getMinutes(),
                 MINUTES_HAND_SIZE,
                 6);
        drawHand(document.getElementById("hourhand"),
                 currentTime.getHours(),
                 HOURS_HAND_SIZE,
                 30);
        
        function drawHand(hand, value, size, degrees) {
            var deg = degrees * value;
            x2 = getX(deg, r, size, cx),
            y2 = getY(deg, r, size, cy);
            
            hand.setAttribute('x1', cx);
            hand.setAttribute('y1', cy); 
            hand.setAttribute('x2', x2);
            hand.setAttribute('y2', y2); 
        }
    };

    /*
     * Get a Point X value.
     * degress. Angle's degrees.
     * r. Circle's radio.
     * adjust. Percent of length.
     * x. Start of X point.
     */
    function getX(degrees, r, adjust, x) {
        var x = x || r, 
        adj = adjust || 1;
        return x + r * adj * Math.cos(getRad(degrees));
    }

    /*
     * Get a Point Y value.
     * degress. Angle's degrees.
     * r. Circle's radio.
     * adjust. Percent of length.
     * x. Start of Y point.
     */   
    function getY(degrees, r, adjust, y) {
        var y = y || r,
        adj = adjust || 1;
        return y + r * adj * Math.sin(getRad(degrees));
    }

    // Convert from degrees to radians.
    function getRad(degrees) {
        var adjust = Math.PI / 2;
        return (degrees * Math.PI / 180) - adjust;
    }
        
    return {
        init: function() {
            drawClock();
            setInterval(drawHands, 1000);
        },
        zoom: function() {
            drawClock();
        }
    };
})();
CLOCK.init();
</script>
<a id="html5badge" href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage">
</a>
    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> 
</section>
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script src="js/prettify.packed.js"></script>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>

Apa yang Berikutnya?

Saya harap Anda menikmati gambaran ini dari kemunculan dan manfaat dari HTML5. Jika Anda ingin menjelajahi HTML5 lebih lanjut, ada dua sumber daya lebih banyak yang saya ingin menyarankan:

Pengenalan HTML5: Pengenalan yang sangat baik ke kemajuan HTML5 bagi pengembang yang ingin panduan cepat dari semua elemen-elemen baru.
Demo dan Contoh-contoh HTML5: Sempurna untuk menunjukkan Anda menu yang terorganisir dari berbagai demo HTML5, menunjukkan kepada Anda apa yang mungkin.

Berikut ini contoh Demo yang dapat dijelajahi di HTML5 (tidak semua dari mereka bekerja dengan saya):

Jika Anda adalah seorang pengelola situs WordPress seperti banyak pembaca Envato Tuts+, Anda mungkin ingin menilai tema masa depan untuk kepatuhan mereka terhadap HTML5. Pengembangan berbasis standar dengan dukungan browser yang konsisten membuat pengembangan web menjadi lebih mudah bagi banyak dari kita dan akan mengurangi jumlah bug yang dihadapi pelanggan seiring dengan semakin bertambah memberikan pengalaman pengguna yang lebih baik.

Secara keseluruhan, saya telah cukup terkesan dengan HTML5. Dan tampaknya itu akan terus berkembang lebih cepat daripada setiap 14 tahun.

Selain itu, jika Anda sedang mencari utilitas lain untuk membantu mengembangkan keahlian HTML5 Anda, jangan lupa untuk melihat apa yang kami miliki di Envato Market.

Saya ingin mendengar lebih banyak umpan balik tentang HTML5 dan saran dari Anda untuk topik masa depan yang ingin Anda pelajari lebih lanjut tentangnya. Jangan ragu untuk mem-posting pertanyaan Anda dan berkomentar di bawah ini. Anda juga dapat menghubungi saya di Twitter @reifman secara langsung. Untuk melihat tutorial lain saya sudah menulisnya, browse halaman instruktur Envato Tuts+ saya.

Link Terkait

Karena ada begitu banyak sumber daya yang berguna untuk HTML5, saya sudah memasukkan bantuan tambahan dari beberapa dari mereka yang saya menemukannya paling berguna: