Penulisan HTML 5
Deklarasi awal agar kita menggunakan HTML 5 ialah hanya menulis "<!DOCTYPE html>" pada awal halaman yang kita buat.Hal tersebut untuk membedakan HTML 5 dan HTML 4.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document....
</body>
</html>
Pengenalan HTML 5
Dalam HTML 5 ada beberapa bagian yang membedakan tiap jenisnya, yaitu:
Pada HTML 5,kita dapat memutar suatu video maupun lagu hanya dengan script saja,tidak membutuhkan dari player.Ada 2 jenis HTML 5 Multimedia,yaitu:
Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan Webm.
Setiap browser support berbeda-beda browser. Penulisannya :
Script :
<video width="320" height="240" controls="controls">
<source src="yourvideo.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Contoh :
Your browser does not support the video tag.
*anda tidak dapat memplay vidio ini karena file audio di atas hanya sebagai contoh.
HTML 5 audio
Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan Waw. Setiap
browser support berbeda-beda browser. Penulisannya :
Script :
<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>
Contoh:
Your browser does not support the audio element.
*anda tidak dapat memplay audio ini karena file audio di atas hanya sebagai contoh.
HTML 5 INPUT TYPE
Sudah di pastikan HTML 5 harus memiliki input type yang lebih baik dari pendahulunya HTML
4. Input type yang baru dalam HTML 5, yaitu :
INPUT TYPE
*Bukalah halaman ini di browser Opera agar anda dapat melihat fungsi input type dengan
maksimal..
1. Color Script : <input type="color">
Contoh :
Keterangan : Gambar di atas adalah hasil tampilan script “input type=color” yang di lakukan di
browser Opera. Gambar di kanan setelah klik “Other..”
2. Datepicker
DATE
Script 1 : <input type="date">
Contoh 1
Keterangan1 : Hasil inputan akan berbentuk bulan.
DATETIME
Script 2 : <input type="datetime">
Contoh 2 :
Keterangan 2 : Hasil dari Input type=datetime.untuk tahun-bulan-tanggal
DATETIME-LOCAL
Script 3 : <input type="datetime-local">
Contoh 3 :
Keterangan 3 : Sama seperti input type datetime, tetapi tidak ada keterangan UTC-nya.
MONTH
Script 4 : <input type="month">
Contoh 4 :
Keterangan 4 : Berbeda dengan “input type=date”, dalam “input type=month” kita memilih satu
bulan sekaligus dan hasilnya “tahun-bulan” saja.
WEEK
Script 5 : <input type="week">
Contoh 5 :
Keterangan 5 : Dalam “input type = week”,kita dapat memilih satu minggu langsung. Hasilnya
adalah “tahun-W0X”. “0X” adalah minggu ke berapa dalam bulan tersebut.
TIME
Script 6 : <input type="time">
Contoh 6 :
Keterangan : Dalam input type ini, kita dapal langsung mengketik pukul berapa sesuai keinginan
kita, kita juga dapat mengklik atas dan bawah.
3. Email
Script : <input type="email">
Contoh :
Keterangan : Jika kita salah menginputkan email(tidak ada “@ dan .”), maka akan ada perintah
“please enter a valid email address”, tergantung browser.
4. URL
Script : <input type="url">
Contoh :
Keterangan : Jika kita mengketik url kita tanpa http, sedangkan gambar di kanan secara langsung
menambahkan http di form tersebut saat mengklik submit.
5. Number
Script : <input max="10" min="0" type="number">
Contoh :
Keterangan : Pada input type-number ini, kita dapat menentukan nilai max dan min.
6. Range
Script : <input max="10" min="0" type="range">
Contoh :
Keterangan : Dalam input type ini kita dapat juga menentukan nilai max dan min. Perbedaan
input type ini dengan input type number adalah system klik dan system drag-nya. Range
menggunakan drag, sedangkan number klik atau type.
7. TEL
Script : <input type="tel">
Contoh :
Keterangan : Saya belum mengetahui pasti. Untuk angka maupun nomor sama-sama bisa.
8. SEARCH
Script : <input type="search" results="5" >
Contoh :
Keterangan : Perbedaannya hanya terletak pada gambar pencari seperti di atas, dan juga .
Deklarasi awal agar kita menggunakan HTML 5 ialah hanya menulis "<!DOCTYPE html>" pada awal halaman yang kita buat.Hal tersebut untuk membedakan HTML 5 dan HTML 4.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document....
</body>
</html>
Pengenalan HTML 5
Dalam HTML 5 ada beberapa bagian yang membedakan tiap jenisnya, yaitu:
- Graphichs/multimedia
- Semantics & Markup
- Offline / Storage
- Realtime / Communication
- File / Hardware Access
- CSS3
- Nuts & Bolts
Pada HTML 5,kita dapat memutar suatu video maupun lagu hanya dengan script saja,tidak membutuhkan dari player.Ada 2 jenis HTML 5 Multimedia,yaitu:
- HTML5-Video
- HTML5-Audio
Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan Webm.
Setiap browser support berbeda-beda browser. Penulisannya :
Script :
<video width="320" height="240" controls="controls">
<source src="yourvideo.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Contoh :
Your browser does not support the video tag.
*anda tidak dapat memplay vidio ini karena file audio di atas hanya sebagai contoh.
HTML 5 audio
Terdapat tiga jenis format video yang dapat di putar di HTML 5 ini, Ogg, mp4 dan Waw. Setiap
browser support berbeda-beda browser. Penulisannya :
Script :
<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>
Contoh:
Your browser does not support the audio element.
*anda tidak dapat memplay audio ini karena file audio di atas hanya sebagai contoh.
HTML 5 INPUT TYPE
Sudah di pastikan HTML 5 harus memiliki input type yang lebih baik dari pendahulunya HTML
4. Input type yang baru dalam HTML 5, yaitu :
INPUT TYPE
- COLOR :memilih warna
- URL :menghasilkan tulisan http:// tanpa mengetiknya
- TEL :Input untuk nomor telp, dapat +,0-9
- NUMBER :input 0-9, jika tidak akan otomatis memfalidasi
- RANGE :input tinggal mendrag saja, berapa nilai yang kita inginkan
- EMAIL :input harus berbentuk email, jika tidak akan memvalidasi
- SEARCH :akan memunculkan simbol search(kacamata pembesar) di beberapa browser
- Date pickers (date,month,week,time,datetime,datetime-local) :Dapat memilih tanggal, minggi, hari, jam dalam bentuk yang lebih menarik seperti J-Query datepicker. Tetapi saat ini hanya suport Opera saja.
*Bukalah halaman ini di browser Opera agar anda dapat melihat fungsi input type dengan
maksimal..
1. Color Script : <input type="color">
Contoh :
Keterangan : Gambar di atas adalah hasil tampilan script “input type=color” yang di lakukan di
browser Opera. Gambar di kanan setelah klik “Other..”
2. Datepicker
DATE
Script 1 : <input type="date">
Contoh 1
Keterangan1 : Hasil inputan akan berbentuk bulan.
DATETIME
Script 2 : <input type="datetime">
Contoh 2 :
Keterangan 2 : Hasil dari Input type=datetime.untuk tahun-bulan-tanggal
DATETIME-LOCAL
Script 3 : <input type="datetime-local">
Contoh 3 :
Keterangan 3 : Sama seperti input type datetime, tetapi tidak ada keterangan UTC-nya.
MONTH
Script 4 : <input type="month">
Contoh 4 :
Keterangan 4 : Berbeda dengan “input type=date”, dalam “input type=month” kita memilih satu
bulan sekaligus dan hasilnya “tahun-bulan” saja.
WEEK
Script 5 : <input type="week">
Contoh 5 :
Keterangan 5 : Dalam “input type = week”,kita dapat memilih satu minggu langsung. Hasilnya
adalah “tahun-W0X”. “0X” adalah minggu ke berapa dalam bulan tersebut.
TIME
Script 6 : <input type="time">
Contoh 6 :
Keterangan : Dalam input type ini, kita dapal langsung mengketik pukul berapa sesuai keinginan
kita, kita juga dapat mengklik atas dan bawah.
3. Email
Script : <input type="email">
Contoh :
Keterangan : Jika kita salah menginputkan email(tidak ada “@ dan .”), maka akan ada perintah
“please enter a valid email address”, tergantung browser.
4. URL
Script : <input type="url">
Contoh :
Keterangan : Jika kita mengketik url kita tanpa http, sedangkan gambar di kanan secara langsung
menambahkan http di form tersebut saat mengklik submit.
5. Number
Script : <input max="10" min="0" type="number">
Contoh :
Keterangan : Pada input type-number ini, kita dapat menentukan nilai max dan min.
6. Range
Script : <input max="10" min="0" type="range">
Contoh :
Keterangan : Dalam input type ini kita dapat juga menentukan nilai max dan min. Perbedaan
input type ini dengan input type number adalah system klik dan system drag-nya. Range
menggunakan drag, sedangkan number klik atau type.
7. TEL
Script : <input type="tel">
Contoh :
Keterangan : Saya belum mengetahui pasti. Untuk angka maupun nomor sama-sama bisa.
8. SEARCH
Script : <input type="search" results="5" >
Contoh :
Keterangan : Perbedaannya hanya terletak pada gambar pencari seperti di atas, dan juga .
