HTML 5

element-element baru dalam HTML 5

• markup element

<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.

• media element 

<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

<embed> = For embedded content, such as a plug-in

• canvas element

<canvas> = For making graphics with a script

• form element  

<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

• attribute values

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

• HTML 5 Video

html 5 menyuport 3 jenis file : ogg, MPEG4, WebM.
best browser yg menyuport semua format video untuk HTML 5 : chrome 6.0+

contoh

single video<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

multiple video
<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> 

content "Your browser does not support the video tag." dimaksudkan jika web browser yg user pakai tidak suport, maka akan muncul tulisan tersebut.

attribute :
attribute value deskripsi

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

• HTML 5 Audio

HTML 5 menyuport file audio : ogg vorbis, mp3, wav.
sama seperti video, web browser yg menyuport : chrome 6.0+

contoh :

single audio<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

multiple audio
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio> 

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

• HTML 5 Canvas

berfungsi untuk menggambar graphic dalam web kita. Menggunakan JavaScript dalam penggambaran'a. Canvas berbentuk persegi panjang, dan anda mengontrol setiap pixel dalam canvas tersebut. anda bisa menggambar garis, kotak, lingkaran, charackter, dan memasukkan image kedalamnya.

contoh:

contoh kanvas element<canvas id="myCanvas" width="200" height="100"></canvas> 

javascript untuk menggambar<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script> 

contoh gambar garis
<script type="text/javascript">
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>

contoh gambar lingkaran
<script type="text/javascript">
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>

contoh gradient warna
<script type="text/javascript">
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>

contoh untuk menyisipkan gambar
<script type="text/javascript">
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>

untuk mencoba gbr garis klik disini

untuk mencoba gbr lingkaran klik disini

untuk mencoba gradient warna klik disini

untuk mencoba memasukkan gambar klik disini 

untuk menggambar sebuah bentuk dalam canvas, anda diharuskan mengetahui koordinat.

contoh :

(0,0,150,75)

150,175 >>> yang berarti menggambar persegi panjang dengan besar 150x75

0,0 >>> yang berarti dimulai dari koordinat 0,0  (X=0, Y=0)

HTML 5 Web Storage

kalau di lihat dari fungsinya, html 5 ini tidak terlalu beda dari fungsi "cookies", tapi tetap ada bedanya lha ya....  



bedanya dari cookies, web storage ini bisa menyimpan data yg ukuran'a 
lebih besar. web storage ini tidak selalu me-request ke server, berbeda 
dengan cookies yg selalu me-request ke server, yg menjadikan performa 
website internet anda berkurang.

Dalam web storage, data dari stiap web yang berbeda disimpan di tempat 
yang berbeda pula, dan website tersebut hanya bisa meng-akses data 
stored dari website itu sendiri. HTML 5 web storage menggunakan 
javascript untuk men-store dan mengakses data.



jenis-jenis web storage :



local storage object

local storage object menyimpan data tanpa mengenal batasan waktu. Data 
akan tetap ada sampai besok, minggu depan, tahun depan (sampai komputer 
anda mleduk pokok'a  ).



contoh:

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script> 


dan untuk melihat berapa kali user telah melihat web tersebut
<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script> 






Session Storage Object

berbeda dengan local storage, session storage ini hanya menyimpan data 
sampai user menutup browser nya, dan data tersebut akan automatis 
di-delete.



contoh:

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script> 

dan untuk melihat berapa kali user telah melihat web tersebut
<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script> 

HTML 5 Input Type

HTML 5 mempunyai beberapa input type baru:

* email

* url

* number

* range

* Date pickers (date, month, week, time, datetime, datetime-local)

* search

* color



browser yg terbaik untuk men-suport html 5 input type : Opera 11.0+

note : jika memakai html 5 ini pada browser yang tidak suport, maka akan dibaca sebagai text biasa.



Email

digunakan untuk yg berisikan email address. value dari email address tersebut akan langsung di validasi setelah form di submit.

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



Url

digunakan untuk yg berisikan alamat URL. value dari email ini juga akan 
langsung di validasi setelah form di submit (mirip kayak email, cuma yg 
ini bedanya url).

website: <input type="url" name="user_url" />



Number

input ini digunakan untuk input field yang berupa angka (hanya angka !).
 Anda juga bisa membatasi angka apa saja yang bisa di-isi.

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

attribute>>value >>penjelasan :
[color="#FF0000"]max[/color]            [color="#00BFFF"]number[/color]         Specifies the maximum value allowed[color="#FF0000"]min[/color]            [color="#00BFFF"]number[/color]         Specifies the minimum value allowed[color="#FF0000"]step[/color]           [color="#00BFFF"]number[/color]         Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
[color="#FF0000"]value[/color]  [color="#00BFFF"]number[/color]         Specifies the default value


Range

digunakan untuk input field yang berupa value from a range of number. 
Range type ditampilkan sebagai slide bar. Menurut saya input type ini 
sama aja sama input type number...

<input type="range" name="points" min="1" max="10" />

attribute>>value >>penjelasan
[color="#FF0000"]max[/color]            [color="#00BFFF"]number[/color]         Specifies the maximum value allowed
[color="#FF0000"]min[/color]            [color="#00BFFF"]number[/color]         Specifies the minimum value allowed
[color="#FF0000"]step[/color]           [color="#00BFFF"]number[/color]         Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
[color="#FF0000"]value[/color]  [color="#00BFFF"]number[/color]         Specifies the default value


Date Picker

date picker berfungsi untuk input type berupa tanggal. (biasanya kan ada kalau registrasi harus mencantumkan tgl lahir..).

fungsi-fungsi input type date picker :

* date : Selects date, month and year

* month : Selects month and year

* week : Selects week and year

* time : Selects time (hour and minute)

* datetime : Selects time, date, month and year (UTC time)

* datetime-local : Selects time, date, month and year (local time)



contohnya :

[/code]

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

[/code]



Color

digunakan untuk input type berupa warna.

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

HTML 5 Form Element

input - input terbaru dari HTML 5 form :

* datalist

* keygen

* output





Datalist

Datalist element memberikan list yang lebih spesifikasi dari sebuah 
option di dalam input type. List di buat dengan option di dalam 
datalist.

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist> 




K3yg3n (3 ganti 'e')

tujuan dari element ini untuk memberikan security, dengan cara 
autentikasi user. Element ini mempunyai 2 buah generator, 1 private dan 1
 public. private key di simpan di client, sedangkan public key disimpan 
di server. Public key digunakan untuk men-generate client sertifikat, 
untuk autentikasi user.

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <[JaMu] name="security" /><input type="submit" />
</form> 




Output

Output element digunakan untuk berbagai macam output, seperti kalkulasi, atau script output.

<output id="result" onforminput="resCalc()"></output>
     

HTML 5 Form Attributes

New form attributes:

* autocomplete

* novalidate



New input attributes:

* autocomplete

* autofocus

* form

* form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)

* height and width

* list

* min, max and step

* multiple

* pattern (regexp)

* placeholder

* required



langsung saja...



Autocomplete

Autocomplete attribute menjelaskan bahwa form/ input type tersebut 
mempunyai autocomplete. Saat user mengetik di autocomplete input type, 
browser akan men-display option list untuk mengisi field tersebut.



note : autocomplete bekerja dengan tag <form> dan <input> 
type : text, search, url, telephone, email, password, datepickers, 
range, dan color.

contoh

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>





Autofocus

fungsi autofocus : memfokuskan suatu field saat page selesai load.

note : autofocus bekerja dengan tag <input>



contoh:

User name: <input type="text" name="user_name"  autofocus="autofocus" /> 




Form Attribute

form attribute men-spesifikasikan 1 atau lebih form dari suatu input field

note :untuk men-spesifikasikan lebih dari 1 form gunakan space-separated list, dan hanya bekerja pada <input> type.

contoh:

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />





Form Overrides

fungsi : mengijinkan anda untuk me-overrides form attribute :

-action

-enctype

-method

-novalidate

-target

note : hanya bekerja pada <input> type : submit dan image.

contoh :

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true"
value="Submit without validation" />
<br />
</form>





height dan Width

height dan width men-spesifikasikan height dan width dari sebuah gambar di dalam input field.

contoh:

<input type="image" src="img_submit.gif" width="24" height="24" />