Hypertext Markup Language (HTML) telah menjadi teknologi inti untuk Web sejak awal 1990-an. Tim Berners-Lee menciptakan HTML pada tahun 1989 sebagai cara sederhana namun efektif untuk mengkodekan dokumen elektronik. Sebenarnya, tujuan awal browser Web adalah sebagai pembaca dokumen semacam itu. Dua dekade kemudian, browser itu sendiri telah menjadi portal ke dunia media online. Itulah mengapa HTML5 bukan sekadar revisi HTML, tetapi standar komprehensif tentang cara kerja halaman Web .
Untuk lebih memahami apa yang membuat HTML5 unik, mari kita putar waktu sedikit ke belakang. Kembali pada tahun 1994, HTML masih dalam revisi pertama, Mosaic dan Netscape mendominasi pasar browser, dan kebanyakan orang belum mengalami hal baru yang disebut World Wide Web. Tahun itu, pencipta HTML Berners-Lee memimpin grup standar Web yang baru didirikan yang dikenal sebagai World Wide Web Consortium (W3C).
Meskipun W3C adalah otoritas standar yang dihormati saat ini, para pemain komersial di pasar browser tahun 1990-an sebagian besar mengabaikan standar tersebut dan merintis jalan mereka sendiri. Pada tahun 1995, W3C telah menerbitkan revisi kedua dari standar HTML, dan pendatang baru Web Microsoft mulai berkembang dengan browser Internet Explorer (IE). Microsoft sebagian besar mengabaikan standar, dan Netscape berjuang untuk mempertahankan pangsa pasar yang terhormat sementara IE mulai mendominasi [sumber: Harris].
Selama perang browser awal ini, pengembang Web ditantang untuk menjaga agar situs mereka tetap kompatibel dengan setiap rilis baru dari browser utama serta dengan browser Opera dan Apple Safari yang jarang digunakan. Meskipun W3C telah menerbitkan HTML 3.2 pada tahun 1997, diikuti oleh HTML 4 pada tahun 1998, mengikuti standar tampaknya kurang penting daripada mengikuti fitur khusus browser. Hal ini berlangsung hingga tahun 2003 ketika Mozilla Foundation yang digerakkan oleh komunitas memecahkan tren tersebut. Setelah rilis browser Mozilla aslinya, diikuti oleh browser Firefox pada tahun 2004, Mozilla dengan cepat meretas dominasi IE. Selain itu, browser baru ini sebenarnya mengikuti standar W3C yang ada saat melakukannya.
Sementara Firefox Mozilla terus berkembang menggunakan standar HTML 4 yang menua, Mozilla bergabung dengan Apple dan Opera pada tahun 2004 untuk membentuk grup yang disebut Kelompok Kerja Teknologi Aplikasi Web Hypertext (WHATWG). Tujuan dari WHATWG adalah untuk menjaga pengembangan HTML tetap hidup. Meskipun awalnya ragu-ragu, W3C bergabung dengan kebangkitan HTML pada tahun 2006. Bersama-sama, WHATWG dan W3C menggabungkan spesifikasi yang ada untuk HTML dan XHTML dan mengembangkannya lebih lanjut untuk membuat spesifikasi HTML5 baru. Spesifikasi tersebut saat ini dipertahankan dan diterbitkan oleh W3C [sumber: W3C , WHATWG ].
Artikel ini mengeksplorasi teknologi HTML5 baru ini. Kita akan melihat XHTML dan teknologi lain yang telah masuk ke HTML5 dan membahas poin dasar tentang cara menggunakan HTML5 untuk membuat konten Web yang menarik dan sesuai standar. Kami juga akan melihat beberapa cara menarik orang menggunakan HTML5 di Web. Mari kita mulai dengan melihat tujuan HTML5 dan mengapa ini lebih dari sekedar HTML.
- HTML5 Melampaui HTML
- Teknologi Dasar HTML5
- Konten HTML Dasar
- Formulir
- Elemen Semantik
- Elemen Media dan Rivalitas Flash
- Kanvas
- Membuat Tampilan dengan CSS3
- JavaScript sebagai Komponen Utama
- Teknologi Aplikasi Web
- Bukti Konsep Terobosan
HTML5 Melampaui HTML
Dengan sendirinya, HTML berfokus pada penyajian dokumen statis, yang berarti teks, tautan, dan lainnya. Melalui HTML 4, standar HTML adalah satu sama dengan sintaks HTML yang digunakan untuk mencapai tujuan ini. Standar HTML5 memiliki tujuan yang lebih luas untuk mendeskripsikan konten, gaya, dan antarmuka aplikasi di balik halaman Web saat dimuat di browser Anda. Lebih khusus lagi, HTML5 menetapkan satu sintaks untuk berinteraksi dengan semua elemen yang telah dimuat halaman Web ke dalam memori komputer Anda.
Ada titik kebingungan potensial yang harus kita klarifikasi tentang istilah "HTML5" sebelum kita melanjutkan. Ada versi baru dari bahasa markup itu sendiri yang disebut HTML5. Namun, bahasa tersebut hanyalah salah satu bagian dari standar yang lebih luas yang memiliki nama HTML5. Artikel ini mencakup semua komponen standar HTML5, di mana bahasa HTML5 adalah pusatnya.
Dengan mengingat perbedaan itu, bagaimana browser memuat halaman yang ditulis menurut standar HTML5 yang lebih baru dan bukan bahasa HTML 4 yang sudah lama ada? Lagi pula, kami biasanya hanya mengandalkan browser kami untuk memuat halaman Web tanpa mengkhawatirkan HTML di belakangnya. Jawabannya sederhana: Selama browser itu sendiri dapat mendukung HTML5, browser itu dapat menangani apa pun yang Anda lakukan tanpa perlu membedakan antara revisi HTML.
Untuk mewujudkan keajaiban ini, standar HTML5 mengintegrasikan versi baru dari berbagai teknologi yang bekerja bersama menuju tujuan bersama. Tujuan tersebut antara lain sebagai berikut:
- Menjaga bahasa tetap sederhana dan intuitif
- Memastikan kode mudah dibaca dan dipelihara
- Mengatasi halaman sebagai aplikasi interaktif daripada dokumen statis
- Mengandalkan Cascading Style Sheets (CSS) untuk menata konten
- Mengenali JavaScript sebagai komponen skrip pusat untuk halaman Web
- Merangkul konten dinamis dari teknologi sisi server seperti PHP dan ASP
Sekarang setelah Anda mengetahui bahwa HTML5 lebih dari sekadar markup HTML itu sendiri, mari kita periksa teknologi dasar dalam standar.
Teknologi Dasar HTML5
Bahasa markup menggunakan serangkaian tag untuk menandai elemen dalam file. Markup bergantung pada semacam model yang mendefinisikan elemen-elemen tersebut dan bagaimana menggunakannya. Karena HTML selalu tentang penyandian dokumen, itu bergantung pada sesuatu yang disebut model objek dokumen (DOM). DOM tergabung dalam aplikasi browser Web itu sendiri. Dengan demikian, bahasa markup hanyalah cara memberikan instruksi browser berdasarkan model yang sudah dipahaminya.
Untuk lebih memahami hubungan antara DOM dan HTML, anggap DOM sebagai kotak stempel karet. Setiap cap adalah elemen yang berbeda dalam DOM. Setiap halaman yang ditulis dalam HTML hanyalah serangkaian cetakan yang dibuat dari prangko, yang diisi dengan konten khusus Anda sendiri. Browser Web dapat menampilkan apa pun yang dibuat dari perangko di dalam kotak itu.
Secara teknis, DOM adalah antarmuka pemrograman aplikasi (API) yang menyediakan cara netral platform untuk memproses dokumen HTML atau XML. (Extensible Markup Language, atau XML, terlihat mirip dengan HTML, tetapi memungkinkan pemrogram menambahkan serangkaian elemen khusus yang dapat Anda gunakan dalam dokumen.) Standar HTML5 memerlukan DOM yang dikenal sebagai DOM5 HTML. Disiapkan untuk pertumbuhan HTML5, versi terbaru browser Chrome , Firefox , IE, Safari, dan Opera dapat memproses semua halaman di bawah HTML DOM5.
Fondasi penting lainnya untuk HTML5 adalah jenis Multipurpose Internet Mail Extensions ( MIME ) yang terkait. MIME adalah standar Internet Engineering Task Force (IETF) untuk memperingatkan perangkat lunak berkemampuan Internet jenis konten apa yang coba diproses. Ini biasanya sesuai dengan jenis file tertentu, seperti dokumen HTML atau file audio MP3.
Pengembang web menentukan tipe MIME saat mereka menyandikan halaman Web. Ini meminta browser untuk memuat file yang sesuai dengan tepat sesuai dengan jenisnya. Ada dua jenis MIME yang bergabung dengan HTML DOM5 untuk membentuk dasar standar HTML5 baru: jenis MIME HTML (teks/html) dan jenis MIME XML (aplikasi/xhtml+xml). HTML5 menyertakan pembaruan dalam sintaks untuk kedua tipe MIME ini.
Singkatnya, teknologi dasar dalam standar HTML5 adalah HTML DOM5 dan tipe MIME yang kompatibel dengan HTML5 untuk HTML dan XML. Selanjutnya, mari kita beralih ke cara menyusun halaman Web menggunakan HTML5.
Konten HTML Dasar
Minimal, HTML5 menyertakan versi 5 dari sintaks HTML dasar. Kode contoh di bilah sisi pada halaman ini menunjukkan seperti apa tampilan kode HTML ini untuk halaman Web dasar. Saat Anda menjelajahi Web, gunakan "Lihat sumber" atau opsi serupa di browser Anda untuk melihat HTML (dan kode lain) yang dimuat untuk membuat halaman yang sedang Anda lihat. Semua kode yang ditampilkan dalam contoh kita juga kompatibel dengan HTML 4, artinya tidak ada tambahan baru yang tersedia di HTML5.
Meskipun tidak ada di semua halaman Web, merupakan praktik yang baik untuk memulai file HTML Anda dengan deklarasi tipe dokumen (doctype) seperti yang ditunjukkan pada contoh. Ini menegaskan bahwa browser harus mengharapkan HTML standar saat menafsirkan dokumen. Beberapa pengembang mengandalkan ekstensi ke standar HTML, yang menggunakan file definisi tipe dokumen (DTD). Jika demikian, pengembang menentukan lokasi DTD sebagai bagian dari doctype ini.
Selain doctype, kode yang tersisa dalam contoh adalah sintaks HTML standar. Jika Anda tidak terbiasa dengan sintaks ini, lihat artikel kami Cara Kerja Halaman Web .
Jadi, apa yang baru dari elemen dasar ini di HTML5? Inilah daftarnya, dan kita akan melihat lebih dekat masing-masing di halaman berikutnya.
- Elemen formulir baru dan yang diperbarui -- menata struktur formulir dan memproses input formulir dari pengguna
- Elemen semantik -- mengidentifikasi konten berdasarkan perannya dalam halaman Web
- Elemen media -- menyematkan audio, video, dan media interaktif lainnya tanpa memerlukan ekstensi browser pihak ketiga
- Elemen Ruby -- mendukung internasionalisasi untuk halaman Web berbahasa Asia
Formulir
Meskipun bentuk (bagian dari situs Web di mana pengguna dapat memasukkan data tertentu, seperti nama, alamat, dll) adalah bagian dari elemen paling awal yang tersedia dalam HTML, mereka tidak memiliki banyak fitur yang berguna sebelum HTML5. Untuk menebus ini, pengembang pihak ketiga membuat perangkat lunak formulir Web yang membuat formulir HTML dasar tampak hampir usang. HTML5 menghembuskan kehidupan baru ke dalam bentuk, dengan elemen bentuk baru, tipe input, dan atribut untuk elemen yang ada.
Without distinguishing between old and new syntax, let's examine the overall approach to creating a form for your Web page using HTML5. Here some recommended steps to get started:
- Establish a form block using the
- Designate a block of fields within the form using the
- Lay out each field in the field set using
- Within each label tag, add the field name as you want it displayed plus the tag for the field itself.
- Use the type attribute within the input tag () that prompts the browser to validate the user's input based on that type. This eliminates the need for additional code to handle validation and prompt for re-entry. HTML5 includes the following input types: date, time, datetime, datetime-local, month, week, number, e-mail, tel, url, range, color and search. You can also use the pattern attribute with a regular expression to create a custom validation pattern.
- Indicate required fields by adding the required attribute for an input element.
- Use the autofocus attribute to set a particular input element as the first element in the form. This is where a Web browser will automatically place the user's cursor after loading the form.
- Use the placeholder attribute if desired to add text hints about what to enter in a given field.
- Set CSS styles for ":required" and ":invalid" so the user has a visual cue to missing information or input that won't validate for a given input type.
Check an up-to-date HTML5 reference guide for a complete list of form elements and their attributes. Also, note that support for some form fields varies between Web browsers. Be sure to test your form in each type of browser you want your Web site to support.
While HTML form elements have more features in version 5, the next element type is completely new in HTML5.
Semantic Elements
Elemen semantik dalam HTML5 adalah, seperti namanya, yang merujuk pada makna konten tertentu. Hanya menggunakan tag saja tidak cukup, karena sebagian besar situs Web saat ini berisi beberapa jenis konten yang berbeda pada satu halaman. Pengembang web perlu menerapkan aturan terpisah tentang bagaimana setiap jenis konten harus terlihat atau berperilaku.
Tanpa elemen semantik, pengembang Web telah menggunakan
Seiring waktu, tipe konten tertentu menjadi sangat umum di situs Web, seperti header, footer, menu, dan titik navigasi. HTML5 menggabungkan ini dengan menambahkan elemen semantik standar. Ini berarti Anda dapat memecah blok Anda menjadi elemen semantik yang bermanfaat daripada serangkaian
Berikut ini adalah daftar elemen halaman semantik dengan definisi singkat masing-masing. Pastikan untuk menemukan referensi HTML5 yang dapat Anda percayai untuk daftar lengkap atribut yang valid dan elemen turunan untuk setiap elemen semantik.
Elemen blok:
- section -- divisi halaman umum yang digunakan untuk membantu memecah blok konten yang lebih besar
- artikel -- konten yang berasal dari sumber luar, terkadang ditambahkan secara dinamis pada pemuatan halaman dengan menggunakan skrip agregator
- header and footer -- blocks that appear at the top and bottom of each page
- hgroup -- a grouping of multiple related headers, such as a title and subtitle
- menu -- a list of commands (see the command element), and attributes that specify the menu's behavior
- nav -- identifies a block that's strictly for Web site navigation, typically some unordered list of links to other pages on the site
- address -- includes contact information for the author of the content within a block, such as an article, section or entire page body
- aside -- indicates that the content should be treated as a sidebar
Inline elements:
- ringkasan dan detail -- beralih antara teaser/ringkasan dan detail lengkap untuk konten yang sama
- figure dan figcaption -- elemen yang digunakan untuk menerapkan perilaku umum pada gambar, apa pun elemen media (img, svg, atau kanvas) yang digunakan untuk menyertakannya
- waktu -- teks yang mewakili tanggal kalender, waktu jam atau keduanya, diformat sehingga browser dapat menyesuaikan perbedaan zona waktu jika perlu
- perintah -- label dan perilaku yang terkait dengan label tersebut saat Anda menggunakan keyboard atau mouse untuk berinteraksi dengannya, biasanya digunakan di dalam blok menu
- dfn -- istilah yang didefinisikan dalam konten
- wbr -- sebuah tag yang menunjukkan tempat yang dapat diterima untuk memecah teks di dalam sebuah kata ketika ia membungkus beberapa baris
Elemen semantik dibuat sebagai peningkatan dari elemen HTML yang lebih umum. Jenis elemen baru berikutnya, bagaimanapun, bertujuan untuk menjadi pengganti habis-habisan untuk ekstensi media pihak ketiga di browser Web.
Ruang atau Tanpa Ruang?
Anda mungkin telah memperhatikan bahwa ketika kita merujuk ke versi HTML lain, seperti HTML 4, ada spasi sebelum angka, sedangkan referensi ke HTML5 tidak ada spasi. Ada banyak diskusi dan perdebatan tentang masalah ini di komunitas HTML, tetapi akhirnya, WHATWG dan W3C mengadopsi HTML5 sebagai ejaan resmi untuk menjaga konsistensi dokumentasi.
Elemen Media dan Rivalitas Flash
Salah satu fitur HTML5 yang paling banyak dibicarakan adalah pendekatan barunya untuk menyematkan media pada halaman Web . Kita akan melihat beberapa aplikasi luar biasa dari fitur HTML5 ini nanti di artikel ini. HTML5 menyelesaikan penyematan ini tanpa memerlukan plugin browser eksternal. Berikut ini adalah elemen media yang tersedia di HTML5:
- audio -- menyematkan audio di halaman dan menyertakan atribut untuk menentukan cara memainkannya; format file yang didukung akan bervariasi antara browser Web
- video -- menyematkan video di laman dan menyertakan atribut untuk menentukan cara memutarnya; format file yang didukung akan bervariasi antara browser Web
- sumber -- digunakan dengan elemen audio atau video untuk mengidentifikasi sumber; beberapa sumber dapat ditentukan untuk satu item
- embed -- menyematkan dan menentukan jenis media untuk konten yang mungkin kurang didukung dalam elemen media lain
- kanvas -- menyisihkan sebagian halaman, atau layar komputer, tempat JavaScript dapat menggambar gambar; selanjutnya, kami akan mencari tahu lebih lanjut tentang cara kerja fitur baru yang penting ini
- svg -- menyematkan grafik vektor yang dikodekan dengan bahasa markup SVG, memungkinkannya untuk diskalakan secara dinamis ke area halaman tempat mereka dimuat tanpa kehilangan kualitas grafik apa pun
Saat HTML5 dikembangkan, pakar pasar mempertanyakan apakah itu akan menggantikan Flash, yang saat ini dikendalikan oleh Adobe. Flash adalah pemutar media yang dapat Anda tambahkan sebagai plugin ke browser Web Anda. Karena Flash memiliki semua fitur yang diperlukan situs untuk menyematkan berbagai jenis media, situs seperti YouTube telah bergantung padanya selama bertahun-tahun. Bahkan ada beberapa aplikasi Web yang sepenuhnya mengandalkan Flash untuk menjalankan antarmuka interaktif mereka. Adopsi Flash begitu meluas pada tahun 2007 sehingga, setelah peluncuran iPhone Apple yang sangat dinanti, banyak konsumen yang kecewa mendengar bahwa sistem operasinya , Apple iOS, tidak mendukung Flash.
Ketika Google , bisa dibilang merek terbesar di Internet, terjun lebih dulu dalam mengembangkan aplikasinya dengan HTML5, para pendukung Flash memperhatikannya. Sebelum HTML5, satu-satunya ancaman terhadap dominasi Flash adalah pengembang aplikasi Web yang bersedia membangun dan memelihara alternatif HTML/JavaScript kustom. Dengan HTML5, penyesuaian rumit seperti itu tidak lagi diperlukan saat membuat pengalaman media interaktif untuk menyaingi teknologi Flash.
Jadi, siapa yang akan menang: Flash atau HTML5? Jawaban singkatnya adalah, "Tidak juga." Setiap teknologi memiliki fitur, kelebihan dan kekurangannya sendiri. Selain itu, Adobe dan Google telah mengerjakan alat konversi Flash ke HTML5. Pada saat penulisan ini, tampaknya meskipun HTML5 mendapatkan status, Flash kemungkinan akan mempertahankan popularitasnya sendiri untuk sementara waktu juga.
Flash ke halaman berikutnya di mana kami akan memecah elemen kanvas dan cara menggunakannya di halaman Web HTML5 Anda.
Kanvas
Salah satu fitur baru yang paling penting untuk HTML5 adalah kanvas. Fitur kanvas memungkinkan Anda mengidentifikasi bagian halaman Web , menggambar konten di dalamnya, dan menambahkan fungsionalitas interaktif. Semua ini dimungkinkan dengan melalui kombinasi kode HTML dan JavaScript . Mari kita lihat tiga bagian yang Anda perlukan untuk menyiapkan kanvas di HTML5:
Bagian 1: Gunakan
lebar = "400"
tinggi="300>
Jika Anda melihat teks ini, browser Anda
tidak memiliki dukungan kanvas HTML5.
Bagian 2: Buat JavaScript yang menarik konten ke dalam kanvas. Nanti, kita akan mengetahui cara menambahkan dan mengelola kode JavaScript yang terkait dengan halaman Web HTML5. Di sini, mari kita lihat beberapa contoh JavaScript yang dapat Anda gunakan untuk objek kanvas. Kode berikut menggambar persegi panjang di dalam kanvas di atas:
fungsi drawRectangle() {
var targetCanvas = document.getElementById("sampleCanvas");
var rectContext = sampleCanvas.getContext("2d");
rectContext.fillStyle = "biru";
rectContext.fillRect(50, 25, 150, 100);
}
Fungsi ini menggambar persegi panjang biru solid di dalam kanvas Anda. Dua baris "var" membuat variabel yang dapat Anda gunakan. Yang pertama (targetCanvas) mengidentifikasi elemen kanvas yang Anda targetkan menggunakan ID-nya dari HTML. Yang kedua (rectContext) menyiapkan konteks dua dimensi untuk menggambar. Pikirkan konteksnya sebagai lapisan kaca bening yang diletakkan di atas kanvas, dan Anda akan memanggil fungsi untuk menggambar di atas kaca itu.
Baris "fillStyle" mengidentifikasi warna biru berdasarkan nama, yang dikenali HTML dan diasosiasikan dengan salah satu warna bernama. Anda juga dapat menggunakan warna, pola, atau gradien apa pun seperti yang Anda lakukan saat menulis kode gaya dalam HTML atau CSS. Garis "fillRect" menggambar persegi panjang mulai dari offset dari kiri atas, dua angka pertama adalah offset x dan y seolah-olah kiri atas kanvas berada pada koordinat (0,0). Dua angka kedua masing-masing menunjukkan lebar dan tinggi persegi panjang.
Bagian 3: Panggil fungsi JavaScript dari kode HTML. Ini mengikat kedua bagian menjadi satu. Anda dapat memanggil fungsi tersebut segera setelah halaman Web dimuat, yang masuk akal jika Anda menggunakan kanvas untuk menggambar konten halaman interaktif yang perlu muncul segera setelah halaman dimuat. Pilihan lainnya adalah membuat tombol, menu, atau elemen lain dalam HTML yang memicu peristiwa menggambar. Berikut ini adalah contoh tombol yang dapat Anda gunakan untuk menjalankan contoh skrip di atas:
Dive Into HTML5 memiliki panduan yang mudah diikuti untuk membuat elemen kanvas untuk halaman Web Anda. Selain itu, referensi HTML5 yang andal harus menyediakan sumber daya yang luas untuk menggambar grafik yang canggih, baik diam maupun bergerak. Jika Anda ingin memanfaatkan kanvas secara ekstensif di HTML5, Anda harus menguasai pemrograman dalam JavaScript. Selanjutnya, mari kita jelajahi bagaimana CSS3 menciptakan tampilan dan nuansa halaman Web HTML5.
Membuat Tampilan dengan CSS3
Setiap elemen HTML memiliki sejumlah atribut yang Anda gunakan dalam kode untuk mengubah tampilan atau fungsi elemen tersebut. Gaya dan atribut terkait menyesuaikan ukuran, warna, penempatan, batas, dan aspek fisik elemen lainnya. Selama bertahun-tahun umur Web, pengembang situs secara luas mengadopsi praktik memisahkan gaya dari konten. Dengan membuat pemisahan ini, pengembang menikmati keuntungan sebagai berikut:
- Lebih sedikit kode untuk dipelihara: Beberapa elemen di beberapa halaman Web dapat berbagi gaya yang sama tanpa mengulangi kode gaya untuk masing-masing.
- Perawatan yang lebih mudah dari waktu ke waktu: Memperbarui ke gaya baru, atau memperbaiki yang sudah ada, berarti mengubah hanya satu bagian kode gaya daripada memperbarui setiap elemen menggunakan kode itu.
Oleh karena itu, meskipun gaya dapat ditempatkan sesuai dengan kode HTML, pilihan yang lebih populer bagi pengembang Web adalah menggunakan Cascading Style Sheets (CSS) untuk mengelola semua kode gaya yang terkait dengan situs Web. HTML untuk setiap halaman dapat mereferensikan satu atau beberapa lembar gaya, yang harus dimuat oleh browser Anda saat halaman dimuat. Lembar gaya ini, dalam bentuk file CSS, dimaksudkan untuk meniru apa yang mungkin Anda masukkan menggunakan
