Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML5

Apa itu HTML5?

by
Read Time:12 minsLanguages:

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+):

What is HTML5 Geolocation ExampleWhat is HTML5 Geolocation ExampleWhat is HTML5 Geolocation Example

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 ElementWhat is HTML5 Plugin Past for Video ElementWhat 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:

What is HTML5 Browser compatiblityWhat is HTML5 Browser compatiblityWhat is HTML5 Browser compatiblity

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:

What is HTML5 Compatibility RainbowWhat is HTML5 Compatibility RainbowWhat is HTML5 Compatibility Rainbow

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:

What is HTML5 Feature OverviewWhat is HTML5 Feature OverviewWhat is HTML5 Feature Overview

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:

What is HTML5 New ElementsWhat is HTML5 New ElementsWhat is HTML5 New Elements

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:

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 MatrixWhat is HTML5 Feature Compatibility Browser MatrixWhat 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:

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:

What is HTML5 Video ExampleWhat is HTML5 Video ExampleWhat is HTML5 Video Example

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:

What is HTML5 Input Element ExampleWhat is HTML5 Input Element ExampleWhat is HTML5 Input Element Example

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:

What is HTML5 Range element exampleWhat is HTML5 Range element exampleWhat is HTML5 Range element example

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

What is HTML5 SVG Animated Clock DemoWhat is HTML5 SVG Animated Clock DemoWhat is HTML5 SVG Animated Clock Demo

Berikut ini contoh kode untuk demo di atas mengintegrasikan JavaScript:

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

What is HTML5 Demo site at HTML5TestcomWhat is HTML5 Demo site at HTML5TestcomWhat is HTML5 Demo site at HTML5Testcom

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:

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.