Scribd
Unggah
80 tayangan5 halaman

Tutorial HTML 5 PDF

Teks ini memberikan tutorial tentang HTML 5, termasuk pengenalan fitur multimedia seperti video dan audio, jenis input baru seperti tanggal dan waktu, serta contoh kode untuk mengimplementasikan fitur-fitur tersebut. Tutorial ini juga menjelaskan cara menulis dokumen HTML 5 dan memperkenalkan beberapa bagian utama standar HTML 5.

Diunggah oleh

hery
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
80 tayangan5 halaman

Tutorial HTML 5 PDF

Teks ini memberikan tutorial tentang HTML 5, termasuk pengenalan fitur multimedia seperti video dan audio, jenis input baru seperti tanggal dan waktu, serta contoh kode untuk mengimplementasikan fitur-fitur tersebut. Tutorial ini juga menjelaskan cara menulis dokumen HTML 5 dan memperkenalkan beberapa bagian utama standar HTML 5.

Diunggah oleh

hery
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

TUTORIAL HTML 5 (Video, Audio, Form)

Author: Cakra_d'S Posted under: website


Sebenarnya HTML 5 ini sangat baik di gunakan, mungkin sudah banyak artikel menuliskan
kelebihan-kelebihannya. Tetapi, yang jelas hanya satu, yaitu browser yang tidak support dengan
beberapa scipt atau tag HTML 5 itu sendiri. Gunakanlah : http://html5test.com untuk melihat
berapa support browser yang anda miliki untuk mendukung performa html 5. Atau tidak dapat
melihat W3schools atau http://html5demos.com.

Penjelasan lengkap tentang HTML 5 mungkin ada di http://slides.html5rocks.com,


http://www.w3schools.com/html5/default.asp, http://www.html5rocks.com, mungkin beberapa
penjelasan saja.

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 bagianyang membedakan tiap jenisnya, yaitu :
• Graphics / Multimedia
• Semantics & Markup
• Offline / Storage
• Realtime / Communication
• File / Hardware Access
• CSS3
• Nuts & Bolts

HTML5 Multimedia
Pada HTML 5, kita dapat memutar suatu video maupun lagu hanya dengan scipt saja, tidak
membutuhkan bantuan dari player. Ada dua jenis HTML 5 multimedia, yaitu :
• HTML5-video
• HTML5-audio
HTML 5 video
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 :
<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 KETERANGAN


COLOR memilih warna
URL menghasilkan tulisan http:// tanpa mengetiknya
TEL Iput untuk nomor telp, dapat +,0-9
NUMBER input 0-9, jika tidak akan otomatis memfalidasi
input tinggal mendrag saja, berapa nilai yang kita
RANGE
inginkan
input harus berbentuk email, jika tidak akan
EMAIL
memvalidasi
akan memunculkan simbol search(kacamata
SEARCH
pembesar) di beberapa browser
Date pickers
Dapat memilih tanggal, minggi, hari, jam dalam
(date, month, week,
bentuk yang lebih menarik seperti J-Query
time, datetime,
datepicker. Tetapi saat ini hanya suport Opera saja.
datetime-local)

Penulisan dan Contoh:


*Bukalah halmana 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 berben
DATETIME
Script 2 : <input type="datetime">
Contoh 2 :

Keterangan 2 : Hasil dari Input type=datetime.tuk 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 .
Gambar di atas di ambil dari browser Google Chrome. Selain google chrome bentuk/gambar
input type-search hanya seperti input type biasa.

http://cakrads.blogspot.com/2012/01/tutorial-html-5-video-audio-form.html

Anda mungkin juga menyukai