Saturday, April 13, 2013
7 Fitur Pemrograman Terbaru di HTML5
Kami mencoba menyusun uraian tentang 7 perubahan yang paling kentara pada penulisan kode di HTML5 dibanding versi sebelumnya.
Semoga dapat membantu anda dalam upaya update pengetahuan pemrograman anda.
1. Kemunculan Elelmen <Hgroup>
Ketika memasang judul diikuti dengan subheading di bagian header website, anda mungkin biasa menggunakan tag standar yaitu <h1> dan <h2>. Sayangnya. tidak ada cara yang semantik untuk mengaitkan hubungan di antara keduanya. Padahal secara hirarki,tag <h2> seharusnya berada di bawah <h1>. Nah, dengan elemen <hgroup>, kini kita dapat mengelompokkan tag heading agar sesuai hirarki, tanpa sedikitpun mempengaruhiskema aliran dokumen.
<header>
<hgroup>
<h1> Tulisan-Ady.blogspot.com </h1>
<h2> Supersite in just click away </h2>
</hgroup>
</header>
2. Kemunculan Elemen <Figure>
Perhatikan kode berikut, yang saat ini mungkin seringkali anda gunakan untuk menampilkan sebuah gambar:
<img src="path/to/image" alt="Leonidas" />
<p>Leonidas Berteriak Spartan. </p>
Sayangnya, kode di atas tidak semantik. Caption yang dibungkus dalam tag paragraf <p> benar-benar terpisah elemen <img> di atasnya. HTML5 memperbaiki hal ini dengan mengenalkan elemen <figure>. Jika anda mengkombinasikan dengan elemen <figcaption>, maka anda sekarang bisa mengasosiasikan caption yang secara hirarki sesuai dengan gambar masing-masing.
<figure>
<img src="path/to/image" alt="Leonidas" />
<figcaption> <p> Leonidas Berteriak Spartan. </p> </figcaption>
</figure>
3. Kemunculan Elemen <Mark>
Bayangkan sebuah efek stabilo yang muncul setiap kali anda melakukan pencarian kata di suatu halaman. Maka elemen <mark> adalah senjata baru HTML5 yang memungkinkan anda untuk memunculkannya. Anda dapat menggabungkan dengan JavaScript pula. Contohnya,jika ada penggunjung yang mencari kata "Spartan!" di website saya, saya bisa memanfaatkan JavaScript untuk wrap setiap string yang cocok dengan kata "Spartan!" dengan tag <mark> untuk memunculkan efek stabilo.
<h3> Hasil Pencarian </h3>
<p> Di hadapan Leonidas berbaris 100.000 pasukan Persia. Namun tanpa sedikitpun rasa gentar, dia menyerukan, <mark>"Spartan1"</mark>. </p>
4. HTML5 Melengkapi <Form> Dengan Berbagai Atribut Baru
Setiap programmer pasti tahu bagaimana caranya membuat form. Tambahkan sebuah tag <form> berisi elemen <input type="text">, <input type="password">, dan sebuah <input type="submit">, maka jadilah. Namun rupanya form yang sekarang ini anda kenal sudah tidak relevan lagi. HTML5 telah melengkapi form dengan sejumlah atribut-atribut baru yang lebih menarik, dinamis, dan mungkin tidak pernah anda kenal sebelumnya. Misalnya <placeholder>, <autofocus>. dan <type> dengan kapabilitas masing-masing. Sayangnya fitur-fitur baru ini mungkin masih belum dapat ditampilkan potensi sepenuhnya pada beberapa browser. Namun tidak ada salahnya untuk dipelajari dan diterapkan sekarang atau ketika di masa depa dimana browser versi lama telah kehilangan peminat dan punah dari permukaan bumi.
5. Form Dilengkapi Email Validation
Jika anda terapkan type "email" pada form, maka anda dapat memerintahkan browser untuk hanya mengijinkan isian yang sesuai dengan struktur alamat email saja. Artinya, HTML5 sudah dilengkapi email validation didalamnya. Meskipun pada beberapa browser (sebut saja IE), hasilnya tidak akan ditampilkan sesuai dengan yang anda inginkan.
<!DOCTYPE html>
<head> <title>untitled</title> </head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type"email" />
<button type="submit"> Submit Form </button> </form>
</body> </html>
6. Munculnya Attribut <Required> pada Form
Form pada HTML5 kini juga telah dilengkapi atribut <required>, yang mampu membuat isian tertentu menjadi wajib diisi.
<input type="text" name="isian" required>
Dengan kode ini, maka sebuah form tidak dapat disubmit bila field "isian" dibiarkan kosong. Berikut adalah contoh singkat mengenai penerapannya.
<form method="post" action="">
<label for="isian"> Nama: </label>
<input type="text" id="isian" name="isian" place-holder="King Xerxes" required>
<button type="submit">Go</button>
</form>
7. Munculnya Attribut <Pattern> pada Form
Dengan atribut <pattern>, kini anda dapat memerintahkan form untuk melakukan validasi isian sesuai aturan yang telah ditentukan. Misalnya pada kode berikut :
<form action="" method="post">
<label for="username">Membuat username baru: </label>
<input type"text" name="username" id="username" pattern="[A-Za-z]{4,10}" required>
<button type="submit">Go </button>
</form>
Jika anda familiar dengan "regular expression", maka pattern [A-Za-z]{1,10} memerintahkan pada form agar hanya menerima huruf besar dan kecil saja, sekaligus harus diisi dengan 1-10 karakter.
Sekian dulu 7 update tambahan yang membedakan HTML5 dengan versi sebelumnya, tapi perlu anda ketahui bahwa HTML5 lebih dari ini. Masih banyak fitur-fitur baru yang dapat kita eksplor lebih dalam demi menigkatkan potensi website anda. Jika ada kesempatan akan kita lanjutkan. Untuk sementara, kami sampaikan selamat berkarya dengan HTML5.
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment