HTML adalah bahasa markup standar untuk halaman Web. Namun tutorial HTML yang beredar memiliki beragam versi. Lantas, HTML versi berapakah yang mestinya kita pelajari menurut sudut pandang pemula?
HTML5 adalah revisi berikutnya dari standar HTML sebelumnya. Kehadiran versi ini menggantikan HTML 4.01, XHTML 1.0, serta XHTML 1.1. Dan versi terbaru ini merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG).
Standar baru yang menggabungkan banyak fitur terbaik. Salah satu contohnya yaitu kemampuan memutar video yang sebelumnya bergantung pada plug-in browser pihak ketiga, misalnya: Adobe Flash.
Dari penjelasan singkat di atas sudah bisa mengambil kesimpulan? Ya, HTML5 yang harus dipelajari sekarang meskipun pemula. Karena versi ini menyediakan fitur canggih yang biasanya harus menuliskan JavaScript untuk melakukannya.
Cara Menulis Dokumen HTML Versi 5
Sintaks HTML seperti biasa menggunakan tag pembuka dan penutup. Dan pada versi ini Anda akan mendapatkan beberapa fitur baru yang akan membuat HTML lebih mudah. Fitur pengenalan baru ini membuat tata letak situs web Anda lebih jelas bagi perancang dan pengguna situs web.
Karena demikianlah, HTML5 dirancang sebisa mungkin agar kompatibel dengan browser web yang ada. Fitur barunya telah dibangun di atas fitur yang sudah ada dan memungkinkan Anda menyediakan konten fallback untuk browser lama.
Dan pada kesempatan kali ini kita akan belajar tentang cara menulis dokumen HTML5. Singkatnya, pastikan untuk menyimpan dokumen HTML5 dengan ekstensi file .html. Setelah itu mulailah dengan tag <!DOCTYPE html> yang memberi tahu browser bahwa dokumen ini adalah dokumen HTML5.
Sebelum itu, dokumen HTML harus disertai dengan tag <html> dan diakhiri dengan tag </html>. Dan diantara tag <html> tersebut ada tag <head> dan </head> kemudian tag <body> and </body>.
Bagaimana penjelasan rincinya? Lebih jelasnya, untuk menulis dokumen HTML5 ini perlu mengikuti sintaks dan struktur dasar yang ditentukan oleh HTML5. Berikut adalah ketentuan umum tersebut sehingga kita bisa menulis dokumen HTML5.
Sintaks HTML5
Sintaks HTML5 merujuk pada aturan dan struktur yang harus diikuti saat menulis kode HTML5. Sintaks ini menentukan cara elemen dan atribut HTML ditempatkan dan digunakan dalam dokumen. Berikut adalah beberapa prinsip sintaks HTML5 yang penting untuk diketahui.
DOCTYPE
Doctype adalah pembukaan yang diperlukan untuk menegaskan kepada browser bahwa ini adalah dokumen HTML5. Cara penulisan DOCTYPE ini harus terdiri dari komponen-komponen yang sesuai dengan ketentuan sintaks HTML5. Dalam hal ini harus terdapat 6 komponen yang harus terpenuhi. Dan keenam komponen itu hasil jadinya yakni berupa tag: <!DOCTYPE html> tanpa disertai tag penutup. Adapun contoh penerapannya nanti akan dijelaskan pada praktikum.
ELemen-elemen
Elemen HTML dipisahkan dari teks lain dalam dokumen dengan "tag" yang terdiri dari nama elemen yang diapit oleh " <" dan " >". Nama elemen di dalam tag tidak peka huruf besar-kecil.
Artinya, elemen dapat ditulis dengan huruf besar, huruf kecil, atau campuran. Misalnya, tag <title> dapat ditulis sebagai <Title>, <TITLE>, atau dengan cara lain. Namun, praktik yang disarankan adalah menulis tag dalam huruf kecil.
Bisa disimpulkan bahwa elemen adalah komponen yang menyusun dokumen HTML yang bisa terdiri atas tag pembuka dan tag penutup serta content yang berada di antara keduanya.Dan sebuah elemen HTML juga bisa memiliki atribut, tag opsional atau comments. Agar jelas, elemen itu digambarkan MDN menjadi seperti berikut.
Penjelasan yang dikemukakan MDN Web Docs tersebut senada dengan w3schools. Sedangkan penjelasan tambahan menurut whatwg.org, elemen-elemen ini terdiri atas:
- Void elements (area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr).
- The template element (template)
- Raw text elements (script, style)
- Escapable raw text elements (textarea, title)
- Foreign elements, yaitu elemen dari MathML namespace dan SVG namespace.
- Normal elements, yaitu semua elemen HTML lain yang diizinkan.
Namun penjelasan dari whatwg.org tentang HTML5 di atas mungkin agak berat. Pembahasannya baku membuat kaku bagi siapapun yang tidak terbiasa dengannya.
Sehingga pemula yang sedang belajar desain web secara praktis. Maka poin utama yang harus dipelajari sebaiknya memahami macam-macam tag yang akan sering digunakan terlebih dahulu.
Contoh Praktek
HTML menggunakan "markup" untuk menganotasi teks, gambar, dan konten lainnya untuk ditampilkan di browser Web. Markup HTML menyertakan "elemen" khusus seperti <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li>dan banyak lagi.
Berikut ini contoh penulisan dokumen HTML5 yang sangat sederhana. Silahkan simpan kode di bawah ini pada software editor pilihan Anda. Kemudian berikan nama file dengan ekstensi .html. Setelah itu buka file tersebut dengan browser.
Dengan demikian file tersebut sudah bisa dibuka menggunakan browser
untuk melihat tampilan halaman web yang dibuat dengan HTML5. Dan bagi Anda pecinta Blogspot, baris kode di atas hanya perlu sedikit penyesuaian saja jika ingin diterapkan pada platform Blogger.
Akhir Kata
HTML (HyperText Markup Language) adalah blok bangunan paling dasar dari Web. HTML ini mendefinisikan arti dan struktur konten web. Berbeda dengan teknologi lain selain HTML yang umumnya digunakan untuk mendeskripsikan tampilan halaman web (yakni dengan CSS ) atau fungsionalitas (yakni dengan JavaScript ).
"Hypertext" sendiri mengacu pada tautan yang menghubungkan halaman web satu sama
lain, baik di dalam satu situs web atau di antara situs web. Sehingga tautan
juga merupakan aspek mendasar dari Web. Dan kita sudah bisa mempraktekannya dengan sedikit contoh di atas.
Sekian materi hari ini tentang cara menulis dokumen HTML5 dimulai dengan cara yang paling sederhana.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar