Home > Pemrograman Web > Tag-tag HTML 5 yang harus Anda ketahui

Tag-tag HTML 5 yang harus Anda ketahui

30 August 2012 Leave a comment Go to comments

1. Apa itu HTML 5?

Jika kita perhatikan secara seksama komponen yang digunakan dalam halaman website yang rich content, para web developer dikagetkan dengan adanya flash yang sebenarnya bukan web, tetapi aplikasi yang dijalankan di atas sites.Sebagian besar orang menggunakan flash sehingga tak ada rujukan bahasa standar seperti HTML dan XHTML untuk sebuah halaman website, serta memperburuk jaringan karena setiap kali kita membuka halaman flash, seolah-olah jaringan dipaksa untuk mengambil seluruh konten yang ada di server akhirnya beban nya sangat tinggi.

Namun setelah berkembangnya javascript beserta AJAX nya, flash pun berangsur-angsur ditinggalkan karena “kecanggihan” nya hampir menyamai Flash. Tetapi satu lagi kekurangan yang harus dihadapi adalah tidak adanya bahasa standar yang digunakan secara world wide dalam menggunakan js, ini seperti tak adanya validator untuk bahasa ini sehingga perkembangannya benar-benar terlalu rapid soalnya bukan dikembangkan oleh organisasi W3 tetapi oleh komunitas seperti mootools dan jquery.

Karena alasan tersebut, W3.org sebagai organisasi resmi world wide, mengharuskan pembuatan standar baru setelah XHTML yang sudah tak mampu “menampung kekayaan” konten masa kini. Dibuatlah standar bahasa mark up baru yaitu HTML 5.

Selain terdapatnya fungsi-fungsi baru, HTML5 juga memberikan beberapa kemudahan seperti pada bagian awal file HTML kita tidak lagi dipusingkan menulis coding DOCTYPE yang panjang :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

Pada HTML5, DOCTYPE dapat ditulis lebih ringkas :

<!DOCTYPE html>

Kemudian pada baris berikutnya kita tulis seeprti ini:

<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />

Versi HTML5 berubah menjadi :

<meta charset=”utf-8″ />

Selain itu, coding CSS dan Javascript pada HTML5 tidak perlu lagi menulis seperti type=text/css dan type=text/javascript :

<style>
* { margin:0px; padding:0px;}
</style>

 

<script type="text/javascript" src="”http://www.google.com/jquery.js”"></script>&nbsp;

HTML5 juga menghilangkan beberapa tag ataupun element yang telah jarang dipakai dan digantikan oleh CSS seperti acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u.

HTML5 telah menyediakan banyak fungsi baru dan berbagai kemudahan tetapi apakah browser kita mendukung teknologi baru ini? Kebanyakan browser yang terkenal seperti Firefox, Opera, Safari dan Chrome dan lain-lain telah mendukung HTML5. Bila anda ingin mengetahui kompabilitas browser anda terhadap HTML5 bisa mencoba link ini.

CLIK FOR DEMO PAGE

</pre>
<!DOCTYPE html>
<html>
<body>
 <h3> HTML 5 FOR INPUT TYPE</h3>
 <p>&nbsp;</p>
 <b>1. Input Type: color</b> <br>Select your favorite color: <input type="color" name="favcolor" /><br />
 <p>&nbsp;</p>
 <b>2. Input Type: Date</b> <br> Birthday: <input type="date" name="bday" /><br />
 <p>&nbsp;</p>
 <b>3. Input Type: Email</b> <br> E-mail: <input type="email" name="usremail" /><br />
 <p>&nbsp;</p>
 <b>4. Input Type: number</b> <br> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" /><br />
 <p>&nbsp;</p>
 <b>5. Input Type: Range</b> <br> Points: <input type="range" name="points" min="1" max="10" /><br />
 <p>&nbsp;</p>
 <b>6. Input Type: URL</b> <br> Add your homepage: <input type="url" name="homepage" /><br />
 <p>&nbsp;</p>
 <b>7. Input Type: DATE</b> <br> Birthday: <input type="date" name="bday" /><br />
 <p>&nbsp;</p>

 <h3> HTML 5 FOR INPUT ATTRIBUTE</h3>
 <b>1. Input Attribute: Placeholder</b>
 <br> Kalo dulu saya pake JQuery Watermark sekrang cukup HTML5 <br><input type="text" name="fname" placeholder="First name" /><br />
 <input type="text" name="lname" placeholder="Last name" /><br />
 <p>&nbsp;</p>
 <b>2. Input Attribute: Pattern</b>
 <br> Kalo dulu saya pake javascript atau php sekrang cukup HTML5 <br>
 <form action="#">
 Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" />
 <input type="submit" />
</form>
 <p>&nbsp;</p>
 <b>3. Input Attribute: Autofocus</b>
 <br> Kalo dulu saya pake javascript/JQuery sekrang cukup HTML5 <br> First name:<input type="text" name="fname" autofocus="autofocus" /><br />
 <p>&nbsp;</p>
 <b>4. Input Attribute: Required</b>
 <form action="#">
Username: <input type="text" name="usrname" required="required" />
<input type="submit" />
</form>
 <p>&nbsp;</p>
 <h3> HTML 5 FORM ELEMENT</h3>
 <p>&nbsp;</p>
 <b>1. HTML5 <*datalist> tag</b> <br>
 Klo dulu saya harus pake jquery autocomplete skrng cukup html5<br>
 <input list="browsers" />

<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
 </datalist>
 <br />
 <p>&nbsp;</p>
 <b>2. HTML5 <*optgroup> tag</b> <br>
 <select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="vw">VW</option>
<option value="audi">Audi</option>
</optgroup>
</select>
 <br />
 <p>&nbsp;</p>
 <b>3. HTML5 <*progress> tag</b> <br>
 Downloading progress:<progress value="22" max="100"></progress><br />
 <p>&nbsp;</p>
 <b>3. HTML5 <*video> tag</b> <br>
 <video width="320" height="240" controls="controls">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 Your browser does not support the video tag.
</video><br />
 <p>&nbsp;</p>

 <h3>Details tag sample</h3>
<details>The internet has changed a lot since HTML 4.01 became a standard in 1999.

Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are removed or re-written in HTML5.
 To better handle today's internet use, HTML5 includes new elements for better structure, better form handling, drawing, and for media content.</details>
 <br>
 <h3>Figure tag sample</h3>
 <figure>The internet has changed a lot since HTML 4.01 became a standard in 1999.

Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are removed or re-written in HTML5.

To better handle today's internet use, HTML5 includes new elements for better structure, better form handling, drawing, and for media content.</figure>
 <br>
 <h3>Mark tag sample</h3>
 <mark>The internet haschanged a lot since HTML 4.01 became a standard in 1999.

Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are removed or re-written in HTML5.

To better handle today's internet use, HTML5 includes new elements for better structure, better form handling, drawing, and for media content.</mark>
 <h3>Address tag sample</h3>
 <address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br />
Visit us at:<br />
Example.com<br />
Box 564, Disneyland<br />
USA
</address>
 <h3>Audio tag sample</h3>
 <audio controls="controls">
 <source src="horse.ogg" type="audio/ogg" />
 <source src="horse.mp3" type="audio/mp3" />
 Your browser does not support the audio element.
</audio>
 <h3>Legend tag sample</h3>
<form>
 <fieldset>
 <legend>Personalia:</legend>
 Name: <input type="text" size="30" /><br />
 Email: <input type="text" size="30" /><br />
 Date of birth: <input type="text" size="10" />
 </fieldset>
</form>

</body>
</html>​
<pre>

Source

Source

Categories: Pemrograman Web Tags: , , , , , , , , , , ,
  1. gleam
    30 August 2012 at 05:08
    Reply

    Nice share gan

  2. Aan Ubaid
    5 June 2014 at 12:40
    Reply

    sangat membantu gan buat ane yang baru belajar website.. tq..

  1. No trackbacks yet.

Leave a comment