Apa itu HTML5? Apa perbedaan HTML 5 dengan HTML biasa?
HTML 5 dikembangkan untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
Apa saja Tujuan dan fitur dari HTML 5?
Berikut tujuan dibuatnya HTML5 :
- Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
- Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
- Penanagan kesalahan yang lebih baik
- Lebih markup untuk menggantikan scripting
- HTML5 merupakan perangkat mandiri
- Proses pembangunan dapat terlihat untuk umum
Fitur baru dalam HTML5 :
- Unsur kanvas untuk menggambar
- Video dan elemen audio untuk media pemutaran
- Dukungan yang lebih baik untuk penyimpanan secara offline
- Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
- Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
1. Stuktur Dasar HTML5
<!DOCTYPE html>Contoh struktur video HTML5 :
<html>
<head>
<meta charset="UTF-8">
<title>Judul Web yang akan dibuat</title>
</head>
<body>
Isi website
</body>
</html>
<!DOCTYPE HTML>2. Masukkan Input HTML5
<html>
<head>
<meta charset="UTF-8">
<title>Video Online Mybroadcaster</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
- Membuat Input Tanggal
Tanggal Lahir : <input type="date" name="bday">
- Memasukkan warna di HTML5
Pilih Warna : <input type="color" name="favcolor">
- Memasukkan alamat email
Masukkan E-mail: <input type="email" name="email">
- Memasukkan bulan
Masukkan Tanggal Lahir: <input type="month" name="bdaymonth">
- Memasukkan Nomor
Masukkan Angka 1-5: <input type="number" name="quantity" min="1" max="5">
- Masukkan Range HTML5
<input type="range" name="points" min="1" max="10">
<audio controls>4. Membuat Video Player dengan HTML5
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Pesan jika tidak support.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
5. Membuat List Form ( Formulir ) HTML5
<input list="browsers">6. Membuat DRAG dan DROP dengan HTML5
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="http://www.w3schools.com/html/img_w3slogo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69"
</body>
</html>
Oke sekian dulu ya, yang lain pada postingan selanjutnya. terimakash
http://mybroadcaster.blogspot.com
sumber : W3Schools
No comments:
Post a Comment
Ayo diskusi disini ..