Jumat, 05 Juni 2015

HTML 5

Assalamu'alaikum.. wr.. wb..

Pada kesempatan kali ini, saya akan membahas mengenai materi perkuliahan pertemuan keenam di tanggal 23 Maret 2015 Mata Kuliah Web 2.0 Technology. Pada pertemuan ini, kami membahas mengenai “HTML 5” .

HTML5 merupakan hasil proyek dari   W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web".

Tujuan dibuatnya HTML5 antara lain:
  1. Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.
  2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
  3. Penanganan kesalahan yang lebih baik.
  4. Lebih banyak markup untuk menggantikan scripting.
  5. HTML5 merupakan perangkat mandiri.


Fitur baru dalam HTML5:
  1. Unsur kanvas untuk menggambar.
  2. Video dan elemen audio untuk media pemutaran.
  3. Dukungan yang lebih baik untuk penyimpanan secara offline.
  4. Elemen  konten yang  lebih  spesifik, seperti  artikel, footer, header, navigation, section.
  5. Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.


Beberapa kelebihan yang dijanjikan pada HTML5:
  1. Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.
  2. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
  3. Integrasi ('inline') dengan doctype yang lebih sederhana.
  4. Penulisan kode yang lebih efisien.
  5. Konten yang ada di situs lebih mudah terindeks oleh search engine. 
  6. Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browser sudah mendukung HTML5. Beberapa browser tersebut seperti Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.


Untuk mempermudah, yuk langsung praktek penggunaan HTML 5 tersebut !!

Contoh 1 :
(Menggunakan HTML biasa)

<!DOCTYPE html>
<html>
<head>
<title>HTML 5</title>
</head>
<body>

<h1 style="color:blue;text-align:center">ISI FORM BERIKUT</h1>
Nama: <br> <input type="text" name="nama" value="" /><br />
NIM: <br> <input type="text" name="NIM" /><br />
Jurusan: <br> <input type="text" name="Jurusan" value="" /><br />

<br /> Jenis Kelamin : <input type="radio" name="jenis_kelamin" value="laki-laki" checked /> Laki - Laki <input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan  

<br />
</br> Hobi: </br> <input type="checkbox" name="hobi_baca" /> Reading
</br><input type="checkbox" name="hobi_nulis" checked /> Travelling
</br><input type="checkbox" name="hobi_mancing" /> Shopping
</br><input type="checkbox" name="hobi_mancing" /> Eating
</br><input type="checkbox" name="hobi_mancing" /> Listening
</br><input type="checkbox" name="hobi_mancing" /> Watching

<br />
</br> Asal Kota: <select name="asal_kota" >
<option value="Kota Jakarta"> Pangkapinang </option>
<option> Mentok </option>
<option value="Kota Semarang" selected> Jebus </option> </select>

<br />
</br>
Komentar Anda:<br>
<textarea name="komentar" rows="5" cols="20">
Silahkan Isi Komentar Anda
</textarea>
<br />
<input type="submit" value="Mulai Proses!" >
               
</body>
</html>

Output :


 Contoh 2 :
(Menggunakan HTML 5)

<!DOCTYPE html>
<html>
<head>
<title>HTML 5</title>
<link href="style1.css" rel="stylesheet">
 
<style>
  textarea:required:invalid, input:required:invalid{
  background-color: lightyellow;
  border-color: red;
  }
</style>

<script>
function validateComments(input) {
if (input.value.length < 20) {
input.setCustomValidity("You need to comment in more detail.");
}
else {
// There's no error. Clear any error message.
input.setCustomValidity("");
}
}

</script>
</head>
<body>

<center><h2><strong>Form Registrasi</strong></h2></center> <br />
<form id="form" action="#" onsubmit="return validateForm()">
<p><i>Please complete the form </i><em>*</em></p>

<fieldset>
<legend>Contact Details</legend>
<label for="name">Nama <em>*</em></label>
<input id="name" placeholder="nfrachmah" autofocus required><br>
<label for="telephone">Telephone</label>
<input id="telephone" placeholder="(xxx) xxx-xxxx"><br>
<label for="email">Email <em>*</em></label>
<input id="email" type="email" required><br>
</fieldset>
  
<fieldset>
<legend>Personal Information</legend>
<label for="birthDate">Birth Date<em>*</em></label>
<input id="birthDate" type="date" required><br>
<label for="age">Age<em>*</em></label>
<input id="age" type="number" min="0" max="120" step="0.1" required><br>
<label for="gender">Gender</label>
<select id="gender" >
<option value="female">Female</option>
<option value="male">Male</option>
</select><br>
<label for="comments">Your Comment</label>
<textarea id="comments" oninput="validateComments(this)" required></textarea>
</fieldset>

<fieldset>
<legend>What's Your Favourite Language</legend>
<datalist id = "languagechoice">
<span class ="label"> Pick an Option : </span>
<select id="language">
<option label="sunda" value ="Sundanese">
<option label="france" value = "France">
<option label="english" value = "English">
<option label="german" value = "German">
<option label="japan" value = "Japan">
<option label="korean" value = "Korean">
<option label="chinese" value = "Chinese">
<option label="indo" value = "Indonesian">
</select><br>
<span class ="label"> Or type it in : </span>
</datalist>
<input list="languagechoice" name "list">
</legend>
</fieldset>
 
  <fieldset>
    <legend>Pick Your Favorite Language </legend>
    <label for="zebra"><input id="sunda" type="checkbox"> Sundanese </label>
    <label for="cat"><input id="france" type="checkbox"> France </label>
    <label for="anaconda"><input id="english" type="checkbox"> English </label>
    <label for="human"><input id="german" type="checkbox"> German </label>
    <label for="elephant"><input id="japan" type="checkbox"> Japan </label>
    <label for="wildebeest"><input id="korean" type="checkbox"> Korean </label>
    <label for="pigeon"><input id="chinese" type="checkbox"> Chinese </label>
    <label for="crab"><input id="indo" type="checkbox"> Indonesian </label>
  </fieldset>
 
  <p><input type="submit" value="Submit Application"></p>
 
</form>
</body>

</html>

Output : 


Saya rasa cukup sekian pembahasan saya mengenai HTML secara sederhana.. semoga bisa bermanfaat dan nantikan pembahasan saya di kesempatan lainnya..
Wassalamu'alaikum.. wr.. wb..

Referensi :
http://www.jeanotnahasan.com/2012/02/pengertian-tujuan-fitur-baru-dan.html [060615 - 09.47]

2 komentar: