HTML5 adalah generasi berikutnya dari HTML.

Tutorial ini mengajarkan Anda tentang fitur baru di HTML5.
Contoh dalam Bab Setiap

Dengan editor HTML kami, Anda dapat mengedit HTML, dan klik pada tombol untuk melihat hasilnya.
<html>
<body>

<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.ogg” type=”video/ogg” />
<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”movie.webm” type=”video/webm” />
Your browser does not support the video tag.
</video>

</body>
</html>

HTML5 adalah generasi berikutnya dari HTML.
Apa itu HTML5?

HTML5 akan menjadi standar baru untuk HTML, XHTML, dan DOM HTML.

Versi sebelumnya dari HTML datang pada tahun 1999. Web telah banyak berubah sejak saat itu.

HTML5 masih dalam proses. Namun, sebagian browser modern mempunyai dukungan HTML5.
Bagaimana Memulai Apakah HTML5?

HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG).

WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerja sama dan membuat versi baru dari HTML.

Beberapa aturan untuk HTML5 didirikan:

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
Mengurangi kebutuhan untuk plugin eksternal (seperti Flash)
Lebih baik penanganan kesalahan
Lebih markup untuk menggantikan scripting
HTML5 harus perangkat independen
Proses pembangunan harus terlihat untuk umum

Fitur Baru

Beberapa fitur baru yang paling menarik di HTML5:

Unsur kanvas untuk menggambar
Unsur-unsur video dan audio untuk media pemutaran
Dukungan yang lebih baik untuk penyimpanan offline lokal
Baru isi elemen tertentu, seperti artikel, footer, header, nav, bagian
New bentuk kontrol, seperti kalender, tanggal, waktu, email, url, cari

Dukungan Browser

HTML5 belum standar resmi, dan tidak ada browser memiliki dukungan penuh HTML5.

Tapi semua browser utama (Safari, Chrome, Firefox, Opera, Internet Explorer) terus menambahkan fitur HTML5 baru ke versi yang terbaru.

Elemen baru di HTML5

Internet telah berubah banyak sejak HTML 4.01 menjadi standar pada tahun 1999.

Hari ini, beberapa elemen dalam HTML 4.01 yang usang, tidak pernah digunakan, atau tidak menggunakan cara mereka dimaksudkan untuk. Elemen ini dihapus atau ditulis ulang di HTML5.

Untuk lebih menangani menggunakan internet saat ini, HTML5 juga mencakup unsur-unsur baru untuk struktur yang lebih baik, gambar, isi media, dan penanganan bentuk yang lebih baik.
Baru Markup Elemen

New elemen untuk struktur yang lebih baik:

Tag	Description
<article>	For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside>	For content aside from the content it is placed in. The aside content should be related to the surrounding content
<command>	A button, or a radiobutton, or a checkbox
<details>	For describing details about a document, or parts of a document
<summary>	A caption, or summary, inside the details element
<figure>	For grouping a section of stand-alone content, could be a video
<figcaption>	The caption of the figure section
<footer>	For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header>	For an introduction of a document or section, could include navigation
<hgroup>	For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark>	For text that should be highlighted
<meter>	For a measurement, used only if the maximum and minimum values are known
<nav>	For a section of navigation
<progress>	The state of a work in progress
<ruby>	For ruby annotation (Chinese notes or characters)
<rt>	For explanation of the ruby annotation
<rp>	What to show browsers that do not support the ruby element
<section>	For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time>	For defining a time or a date, or both
<wbr>	Word break. For defining a line-break opportunity.

New Media Elemen

HTML5 memberikan standar baru untuk konten media:

Tag	Description
<audio>	For multimedia content, sounds, music or other audio streams
<video>	For video content, such as a movie clip or other video streams
<source>	For media resources for media elements, defined inside video or audio elements
	For embedded content, such as a plug-in

Elemen kanvas

Unsur kanvas menggunakan JavaScript untuk membuat gambar di halaman web.

Tag	Description
<canvas>	For making graphics with a script

Elemen Formulir Baru

HTML5 menawarkan unsur-unsur bentuk yang lebih, dengan fungsionalitas yang lebih:

Tag	Description
<datalist>	A list of options for input values
<keygen>	Generate keys to authenticate users
<output>	For different types of output, such as output written by a script

Baru Nilai Atribut Tipe Input

Juga, atribut jenis elemen input yang memiliki nilai-nilai baru, untuk kontrol input yang lebih baik sebelum mengirimnya ke server:

Type	Description
tel	The input value is of type telephone number
search	The input field is a search field
url	The input value is a URL
email	The input value is one or more email addresses
datetime	The input value is a date and/or time
date	The input value is a date
month	The input value is a month
week	The input value is a week
time	The input value is of type time
datetime-local	The input value is a local date/time
number	The input value is a number
range	The input value is a number in a given range
color	The input value is a hexadecimal color, like #FF8800

Banyak situs web modern menunjukkan video. HTML5 menyediakan standar untuk menunjukkan kepada mereka.

Video di Web

Sampai saat ini, tidak pernah ada sebuah standar untuk menampilkan video pada halaman web.

Hari ini, video yang paling akan ditampilkan melalui plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama.

HTML5 menetapkan cara standar untuk memasukkan video, dengan elemen video.
Format video

Saat ini, ada 3 format video yang didukung untuk elemen video:

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = Ogg file dengan codec video Theora dan Vorbis audio codec
MPEG4 = MPEG 4 file dengan codec H.264 video dan AAC audio codec
WebM = WebM file dengan VP8 codec video dan audio codec Vorbis

Cara Bekerja

Untuk menampilkan video dalam HTML5, ini adalah semua yang Anda butuhkan:

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume.

Hal ini juga selalu ide yang baik untuk menyertakan atribut lebar dan tinggi.

Sisipkan konten antara <video> dan </ video> tag untuk browser yang tidak mendukung elemen video:

<html>

<body>

Your browser does not support the video tag.

</video>

</body>

</html>

Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome.

Untuk membuat karya video di Internet Explorer, Safari dan Chrome versi masa depan, kita harus menambahkan MPEG4 dan file WebM.

Elemen elemen video memungkinkan beberapa sumber. Sumber elemen dapat link ke file video yang berbeda. Browser akan menggunakan format diakui pertama:

<html>

<body>

Your browser does not support the video tag.

</video>

</body>

</html>

<video> Semua Atribut

Attribute	Value	Description
audio	muted	Defining the default state of the the audio. Currently, only “muted” is allowed
autoplay	autoplay	If present, then the video will start playing as soon as it is ready
controls	controls	If present, controls will be displayed, such as a play button
height	pixels	Sets the height of the video player
loop	loop	If present, the video will start over again, every time it is finished
poster	url	Specifies the URL of an image representing the video
preload	preload	If present, the video will be loaded at page load, and ready to run. Ignored if “autoplay” is present
src	url	The URL of the video to play
width	pixels	Sets the width of the video player

HTML5 Audio

HTML5 menyediakan standar untuk memutar audio.
Audio di Web

Sampai saat ini, tidak pernah ada standar untuk memainkan audio di sebuah halaman web.

Saat ini, sebagian besar audio diputar melalui sebuah plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama.

HTML5 menetapkan cara standar untuk memasukkan audio, dengan unsur audio.

Unsur audio bisa memutar file suara, atau stream audio.
Format audio

Saat ini, terdapat 3 format yang didukung untuk unsur audio:

Format	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	No	Yes	Yes	Yes	No
MP3	Yes	No	No	Yes	Yes
Wav	No	Yes	Yes	No	Yes

Cara Bekerja

Untuk memutar file audio di HTML5, ini adalah semua yang Anda butuhkan:

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume.

Sisipkan konten antara <audio> dan </ audio> tag untuk browser yang tidak mendukung elemen audio:

<html>

<body>

Your browser does not support the audio element.

</audio>

</body>

</html>

Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome.

Untuk membuat karya audio di Internet Explorer dan Safari, menambahkan file audio jenis MP3.

Elemen elemen audio memungkinkan beberapa sumber. Sumber elemen dapat link ke file audio yang berbeda. Browser akan menggunakan format diakui pertama:

<html>

<body>

Your browser does not support the audio element.

</audio>

</body>

</html>

<audio> Semua Atribut

Attribute	Value	Description
autoplay	autoplay	Specifies that the audio will start playing as soon as it is ready.
controls	controls	Specifies that controls will be displayed, such as a play button.
loop	loop	Specifies that the audio will start playing again (looping) when it reaches the end
preload	preload	Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
src	url	Specifies the URL of the audio to play

HTML5 kanvas

Unsur kanvas digunakan untuk menggambar grafik di halaman web.

Apa itu kanvas?

Unsur kanvas HTML5 menggunakan JavaScript untuk menggambar grafik di halaman web.

Kanvas adalah area persegi, dan Anda mengontrol setiap pixel itu.

Unsur kanvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, karakter, dan menambahkan gambar.
Membuat Elemen kanvas

Tambahkan elemen kanvas ke halaman HTML5.

Tentukan id, lebar, dan tinggi dari elemen:

Draw Dengan JavaScript

Unsur kanvas tidak memiliki kemampuan menggambar sendiri. Semua gambar harus dilakukan di dalam JavaScript:

<html>

<body>

Your browser does not support the canvas element.

</canvas>

var c=document.getElementById(“myCanvas”);

var cxt=c.getContext(“2d”);

cxt.fillStyle=”#FF0000″;

cxt.fillRect(0,0,150,75);

</script>

</body>

</html>

JavaScript menggunakan id untuk menemukan elemen kanvas:

var c=document.getElementById(“myCanvas”);

Kemudian, membuat objek konteks:

var cxt=c.getContext(“2d”);

The getContext (“2d”) Objek adalah built-in HTML5 objek, dengan banyak metode untuk menggambar jalur, kotak, lingkaran, karakter, gambar dan banyak lagi.

Dua baris berikutnya menarik persegi panjang merah:

cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);

Metode fillStyle membuatnya merah, dan metode fillRect menentukan bentuk, posisi, dan ukuran.
Memahami Koordinat

Metode fillRect di atas memiliki parameter (0,0,150,75).

Ini berarti: Gambarlah sebuah persegi 150×75 di kanvas, dimulai dari pojok kiri atas (0,0).

Kanvas ‘X dan Y koordinat digunakan untuk posisi gambar di kanvas.

Mouse ke kotak di bawah ini untuk melihat koordinat:

Lebih kanvas Contoh

Di bawah ini adalah contoh-contoh gambar pada elemen kanvas:
Contoh – Line

Menarik garis dengan menentukan di mana untuk memulai, dan di mana untuk berhenti:

<html>

<body>

Your browser does not support the canvas element.

</canvas>

var c=document.getElementById(“myCanvas”);

var cxt=c.getContext(“2d”);

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

</script>

</body>

</html>

Contoh – Circle

Menggambar sebuah lingkaran dengan menentukan ukuran, warna, dan posisi:

<html>

<body>

Your browser does not support the canvas element.

</canvas>

var c=document.getElementById(“myCanvas”);

var cxt=c.getContext(“2d”);

cxt.fillStyle=”#FF0000″;

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

</script>

</body>

</html>

Contoh – Gradient

Menggambar gradien latar belakang dengan warna yang Anda tentukan:

<html>

<body>

Your browser does not support the canvas element.

</canvas>

var c=document.getElementById(“myCanvas”);

var cxt=c.getContext(“2d”);

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,”#FF0000″);

grd.addColorStop(1,”#00FF00″);

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

</script>

</body>

</html>

Contoh – Gambar

Pasang gambar di kanvas:

<html>

<body>

Your browser does not support the canvas element.

</canvas>

var c=document.getElementById(“myCanvas”);

var cxt=c.getContext(“2d”);

var img=new Image();

img.src=”img_flwr.png”;

cxt.drawImage(img,0,0);

</script>

</body>

</html>

Web HTML5 Penyimpanan

Menyimpan Data Klien

HTML5 menawarkan dua objek baru untuk menyimpan data pada klien:

localStorage – menyimpan data tanpa batas waktu
sessionStorage – menyimpan data untuk satu sesi

Sebelumnya, ini dilakukan dengan cookie. Cookies tidak cocok untuk data dalam jumlah besar, karena mereka diteruskan oleh SETIAP permintaan ke server, sehingga sangat lambat dan in-efektif.

Dalam HTML5, data TIDAK disampaikan oleh setiap permintaan server, tetapi digunakan HANYA ketika ditanya untuk. Adalah mungkin untuk menyimpan data dalam jumlah besar tanpa mempengaruhi kinerja website.

Data disimpan di daerah yang berbeda untuk website yang berbeda, dan situs web hanya dapat mengakses data yang disimpan dengan sendirinya.

HTML5 menggunakan JavaScript untuk menyimpan dan mengakses data.
Objek localStorage

Menyimpan objek localStorage data tanpa batas waktu. Data akan tersedia pada hari berikutnya, minggu, atau tahun.

Cara membuat dan mengakses sebuah localStorage:

<html>

<body>

localStorage.lastname=”Smith”;

document.write(“Last name: ” + localStorage.lastname);

</script>

</body>

</html>

Contoh berikut menghitung berapa kali pengguna telah mengunjungi halaman:
Contoh

<html>

<body>

if (localStorage.pagecount)

{

localStorage.pagecount=Number(localStorage.pagecount) +1;

}

else

{

localStorage.pagecount=1;

}

document.write(“Visits: ” + localStorage.pagecount + ” time(s).”);

</script>

<p>Refresh the page to see the counter increase.</p>

<p>Close the browser window, and try again, and the counter will continue.</p>

</body>

</html>

Objek sessionStorage

Menyimpan objek sessionStorage data untuk satu sesi. Data dihapus ketika pengguna menutup jendela browser.

Cara membuat dan mengakses sebuah sessionStorage:
Contoh

<html>

<body>

sessionStorage.lastname=”Smith”;

document.write(sessionStorage.lastname);

</script>

</body>

</html>

Contoh berikut menghitung berapa kali pengguna telah mengunjungi halaman, dalam sesi saat ini:
Contoh

<html>

<body>

if (sessionStorage.pagecount)

{

sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;

}

else

{

sessionStorage.pagecount=1;

}

document.write(“Visits ” + sessionStorage.pagecount + ” time(s) this session.”);

</script>

<p>Refresh the page to see the counter increase.</p>

<p>Close the browser window, and try again, and the counter has been reset.</p>

</body>

</html>

Input HTML5 Jenis

HTML5 Input Jenis Baru

HTML5 memiliki tipe beberapa masukan baru untuk formulir. Fitur-fitur baru yang memungkinkan untuk kontrol input yang lebih baik dan validasi.

Bab ini mencakup jenis input baru:

email
url
nomor
jarak
Tanggal pemetik (tanggal, bulan, minggu, waktu, datetime, datetime-lokal)
pencarian
warna

Dukungan Browser

Input type	IE	Firefox	Opera	Chrome	Safari
email	No	4.0	9.0	10.0	No
url	No	4.0	9.0	10.0	No
number	No	No	9.0	7.0	No
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	No
search	No	4.0	11.0	10.0	No
color	No	No	11.0	No	No

Catatan: Opera memiliki dukungan terbaik untuk jenis masukan baru. Namun, Anda sudah bisa mulai menggunakan mereka di semua browser utama. Jika mereka tidak didukung, mereka akan berperilaku sebagai bidang teks biasa.
Input Type – email

Jenis email digunakan untuk field input yang harus berisi alamat e-mail.

Nilai bidang email secara otomatis divalidasi ketika formulir dikirimkan.
Contoh

<html>

<body>

E-mail: <input type=”email” name=”user_email” /><br />

</form>

</body>

</html>

Tip: Safari pada iPhone mengakui jenis input email, dan perubahan keyboard pada layar untuk pertandingan itu (menambahkan @ dan pilihan com.).
Input Type – url

Jenis url digunakan untuk field input yang seharusnya berisi alamat URL.

Nilai bidang url secara otomatis divalidasi ketika formulir dikirimkan.
Contoh

<html>

<body>

Homepage: <input type=”url” name=”user_url” /><br />

</form>

</body>

</html>

Tip: Safari pada iPhone mengakui jenis input url, dan perubahan keyboard pada layar untuk pertandingan itu (menambahkan opsi com.).
Input Type – jumlah

Jenis nomor digunakan untuk field input yang seharusnya berisi nilai numerik.

Anda juga dapat mengatur pembatasan apa nomor yang diterima:
Contoh

<html>

<body>

Points: <input type=”number” name=”points” min=”1″ max=”10″ />

</form>

</body>

</html>

Gunakan atribut berikut ini untuk menentukan pembatasan untuk jenis nomor:

Attribute	Value	Description
max	number	Specifies the maximum value allowed
min	number	Specifies the minimum value allowed
step	number	Specifies legal number intervals (if step=”3″, legal numbers could be -3,0,3,6, etc)
value	number	Specifies the default value

oba contoh dengan semua pembatasan atribut: Coba sendiri

Tip: Safari pada iPhone mengakui jenis masukan nomor, dan perubahan keyboard pada layar untuk pertandingan itu (menunjukkan angka).
Input Type – kisaran

Jenis rentang digunakan untuk field input yang harus mengandung nilai dari kisaran angka.

Jenis rentang ditampilkan sebagai slider bar.

Anda juga dapat mengatur pembatasan apa nomor yang diterima:
Contoh

<html>

<body>

Points: <input type=”range” name=”points” min=”1″ max=”10″ />

</form>

</body>

</html>

Gunakan atribut berikut ini untuk menentukan pembatasan untuk jenis kisaran:

Attribute	Value	Description
max	number	Specifies the maximum value allowed
min	number	Specifies the minimum value allowed
step	number	Specifies legal number intervals (if step=”3″, legal numbers could be -3,0,3,6, etc)
value	number	Specifies the default value

Input Type – Pengumpul Tanggal

HTML5 memiliki tipe beberapa masukan baru untuk memilih tanggal dan waktu:

tanggal – Memilih tanggal, bulan dan tahun
bulan – Memilih bulan dan tahun
minggu – Memilih minggu dan tahun
waktu – waktu Memilih (jam dan menit)
datetime – Memilih waktu, tanggal, bulan dan tahun (waktu UTC)
datetime-lokal – Memilih waktu, tanggal, bulan dan tahun (waktu setempat)

Contoh berikut ini memungkinkan Anda untuk memilih tanggal dari kalender:
Contoh

<html>

<body>

Date: <input type=”date” name=”user_date” />

</form>

</body>

</html>

Tipe Input “bulan”: Coba sendiri

Tipe Input “minggu”: Coba sendiri

Tipe Input “waktu”: Coba sendiri

Input ketik “datetime”: Coba sendiri

Input tipe “datetime-lokal”: Coba sendiri
Input Type – search

Jenis pencarian digunakan untuk bidang pencarian, seperti pencarian situs, atau pencarian Google.

Kolom pencarian berperilaku seperti field teks biasa.
Input Type – warna

Jenis warna yang digunakan untuk field input yang harus mengandung warna.

Jenis input akan memungkinkan Anda untuk memilih warna dari color picker:
Contoh

Baru! Klik kata di atas untuk melihat terjemahan alternatif. Singkirkan

<html>

<body>

Color: <input type=”color” name=”user_color” />

</form>

</body>

</html>

Formulir HTML5 Elemen

Elemen HTML5 Formulir Baru

HTML5 memiliki beberapa elemen baru dan atribut untuk formulir.

Bab ini meliputi unsur-unsur bentuk baru:

datalist
keygen
output

Dukungan Browser

Attribute	IE	Firefox	Opera	Chrome	Safari
datalist	No	4.0	9.5	No	No
keygen	No	4.0	10.5	3.0	No
output	No	No	9.5	10.0	No

Elemen datalist

Elemen datalist menetapkan daftar pilihan untuk sebuah field input.

Daftar ini dibuat dengan unsur pilihan dalam datalist.

Untuk mengikat datalist ke field input, biarkan atribut daftar kolom input mengacu pada id dari datalist:
Contoh

<html>

<body>

Webpage: <input type=”url” list=”url_list” name=”link” />

</datalist>

</form>

</body>

</html>

Tip: Unsur-unsur opsi harus selalu memiliki nilai atribut.
Elemen keygen

Tujuan dari elemen keygen adalah untuk menyediakan cara yang aman untuk mengotentikasi pengguna.

Elemen keygen adalah generator kunci-pasangan. Bila formulir dikirimkan, dua tombol yang dihasilkan, satu swasta dan satu umum.

Kunci pribadi disimpan pada klien, dan kunci publik dikirim ke server. Kunci publik dapat digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi pengguna di masa depan.

Saat ini, dukungan browser untuk elemen ini tidak cukup baik menjadi standar keamanan berguna.
Contoh

<html>

<body>

Username: <input type=”text” name=”usr_name” />

Encryption: <keygen name=”security” />

</form>

</body>

</html>

Elemen keluaran

Unsur keluaran digunakan untuk berbagai jenis output, seperti perhitungan atau output script:
Contoh

<html>

<head>

function resCalc()

{

numA=document.getElementById(“num_a”).value;

numB=document.getElementById(“num_b”).value;

document.getElementById(“result”).value=Number(numA)+Number(numB);

}

</script>

</head>

<body>

<p>Simple calculator using the output element:</p>

<input id=”num_a” /> +

<input id=”num_b” /> =

</form>

</body>

</html>

Mr. Red

grab your hand and touches your heart.

HTML5 adalah generasi berikutnya dari HTML.

HTML5 adalah generasi berikutnya dari HTML.

Tinggalkan komentar Batalkan balasan

Bagikan ini:

Tinggalkan komentar Batalkan balasan