Anda di halaman 1dari 108

1.

HTML Lanjut
FORM HTML
Jadi panjang default untuk sebuah teks adalah 20 karakter

Menginputkan Radio Button


<input type=radio> mendefinisikan sebuah radio button
<form>
<inputtype="radio"name="gender"value="male"checked> Male<br>
<inputtype="radio"name="gender"value="female"> Female<br>
<inputtype="radio"name="gender"value="other"> Other
</form>

Radio Button digunakan untuk memilih salah satu dari beberapa bilihan. Ini adalah hasilnya bagaimana
kode HTML di atas akan ditampilkan dalam browser:

Tombol Submit
<Input type = "submit"> mendefinisikan tombol untuk mengirimkan formulir ke bentuk-handler. Bentuk-
handler biasanya halaman server dengan script untuk memproses input data. Bentuk-handler ditentukan
dalam atribut action form. Contoh:
<formaction="action_page.php">
First name:<br>
<inputtype="text"name="firstname"value="Mickey"><br>
Last name:<br>
<inputtype="text"name="lastname"value="Mouse"><br><br>
<inputtype="submit"value="Submit">
</form>
Ini adalah hasilnya bagaimana kode HTML di atas akan ditampilkan dalam browser:
Setelah disubmit:

Atribut Aksi
Atribut aksi mendefinisikan tindakan yang harus dilakukan ketika formulir dikirimkan. Cara umum untuk
mengirimkan formulir ke server adalah dengan menggunakan tombol kirim. Biasanya, formulir
dikirimkan ke halaman web pada web server.
Dalam contoh di atas, script server-side yang ditentukan untuk menangani formulir yang diajukan:
<Formaction = "action_page.php">
Jika atribut aksi dihilangkan, action akan diatur ke halaman saat ini.
Atribut Method
Atribut method menentukan metode HTTP (GET atau POST) yang akan digunakan ketika mengirimkan
formulir:
<Formaction = metode "action_page.php" = "mendapatkan">
atau:
<Formaction = metode "action_page.php" = "post">

Kapankah kita menggunakan GET?


Anda bisa menggunakan GET (default method). Jika pengiriman formulir itu pasif (seperti permintaan
mesin pencari), dan tanpa informasi sensitif. Ketika anda menggunakan GET, data form akan terlihat di
alamat halaman:
action_page.php? firstname = Mickey & lastname = Tikus
Catatan: GET paling cocok untuk jumlah pendek dari data. keterbatasan ukuran yang ditetapkan oleh
browser Anda.

Kapankah kita menggunakan POST?


Jika formulir adalah pemutakhiran data, atau berisi informasi sensitif (password). POST menawarkan
keamanan yang lebih baik karena data yang diajukan tidak terlihat di alamat halaman.

Nama Atribut
Untuk disampaikan dengan benar, masing-masing bidang masukan harus memiliki atribut nama.
Contoh ini hanya akan menyerahkan "Nama belakang" field input. Contoh:
<Formaction = "action_page.php">
Nama pertama: Situs
<Inputtype = "text" value = "Mickey"> Situs
Nama belakang: Situs
<Inputtype = "text" name = "nama belakang" value = "Mouse"> <br>
<Inputtype = "submit" value = "Submit">
</ Form>
Setelah Disubmit:

Pengelompokan data dengan menggunakan <fieldset>


<fieldset> merupakan kelompok elemen data yang terkait dalam formulir. <legend> mendefinisikan
keterangan untuk <fieldset> elemen. Contoh:
<Formaction = "action_page.php">
<Fieldset>
<Legend> Informasi pribadi: </ legend>
Nama pertama: Situs
<Inputtype = "text" name = "firstname" value = "Mickey"> Situs
Nama belakang: Situs
<Inputtype = "text" name = "nama belakang" value = "Mouse"> <br>
<Inputtype = "submit" value = "Submit">
</ Fieldset>
</ Form>

Ini adalah hasilnya bagaimana kode HTML di atas akan ditampilkan dalam browser:
Cobalah sendiri :

Setelah Disubmit:

Form Atribut HTML


Elemen <form> HTML , dengan semua atribut yang mungkin ditetapkan akan terlihat seperti ini :
< Formaction = " action_page.php " method = " post" target = " _ blank" menerima - charset = " UTF - 8
"
enctype = " application / x - www - form- urlencoded " autocomplete = " off " novalidate >
elemen form
< / Form>

LATIHAN
Latihan 1

Latihan 2
Latihan 3

Latihan 4

2. HTML Form Elemen


HTML Form Elemen
Elemen e <button>
- <button> elemen mendefinisikan sebuah tombol klik. Contoh :
<ButtonType = "button" onclick = "alert ( 'Hello World!')"> Click Me! </ Button>
Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:
HTML5 Form Elemen
- HTML5 menambahkan form elemen berikut:
<datalist>
<keygen>
<output>
Catatan : Secara default, browser tidak menampilkan elemen yang tidak diketahui. unsur-
unsur baru tidak akan merusak halaman Anda.
HTML5 <datalist> Elemen
- The <datalist> elemen menentukan daftar pilihan yang telah ditetapkan untuk <input>
elemen.
- Pengguna akan melihat daftar drop-down pilihan yang telah ditentukan karena mereka
input data.
- Daftar atribut dari <input> elemen, harus mengacu pada atribut id dari <datalist> elemen.
Contoh:
Sebuah <input> elemen dengan nilai-nilai yang telah ditetapkan dalam <datalist>:
<formaction = "action_page.php">
<inputlist = "browser">
<datalistid = "browser">
<optionValue = "Internet Explorer">
<optionValue = "Firefox">
<optionValue = "Chrome">
<optionValue = "Opera">
<optionValue = "Safari">
</ datalist>
</ form>

HTML5 <keygen> Elemen


- Tujuan dari <keygen> elemen adalah untuk menyediakan cara yang aman untuk
mengotentikasi pengguna.
- <keygen> elemen menentukan bidang key generator-pair dalam formulir.
- Ketika formulir dikirimkan, dua tombol dihasilkan, satu pribadi dan satu publik.
- Kunci pribadi disimpan secara lokal, dan kunci publik dikirim ke server.
- Kunci publik dapat digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi
pengguna di masa depan. Contoh :
Bentuk dengan bidang keygen:
<formaction = "action_page.php">
Username: <inputtype = "text" name = "user">
Enkripsi: <keygenname = "keamanan">
<inputtype = "submit">
</ form>

HTML5 <output> Elemen


- <output> elemen merupakan hasil dari perhitungan (seperti yang dilakukan oleh script).
Contoh:
Melakukan perhitungan dan menampilkan hasil dalam <keluaran> elemen:
<formaction = "action_page.asp"
oninput = "x.value = parseInt (a.value) + parseInt (b.value)">
0
<inputtype = "range" id = "a" name = "a" value = "50">
100 +
<inputtype = "angka" id = "b" name = "b" value = "50">
=
<outputname = "x" untuk = "a b"> </ output>
<br>
<inputtype = "submit">
</ form>
Latihan 1

Latihan 2

Latihan 3

HTML Elemen Form


= Baru di HTML5.
Tag Deskripsi
<form> Mendefinisikan sebuah form HTML untuk input pengguna
<input> Mendefinisikan kontrol input
<textarea> Mendefinisikan sebuah input control multiline (area teks)
<label> Mendefinisikan label untuk sebuah <input> elemen
<fieldset> Grup terkait unsur-unsur dalam bentuk
<legend> Mendefinisikan sebuah caption untuk <fieldset> elemen
<select> Mendefinisikan sebuah daftar drop-down
Mendefinisikan sekelompok opsi terkait dalam daftar drop-
<optgroup>
down
<option> Mendefinisikan pilihan dalam daftar drop-down
<button> Mendefinisikan sebuah tombol diklik
Menentukan daftar pilihan yang telah ditentukan untuk
<datalist>
kontrol input
Mendefinisikan sebuah field kunci-pasangan Generator
<keygen>
(untuk bentuk)
<output> Mendefinisikan hasil perhitungan

3. Jenis Masukan HTML


Jika Anda menghilangkan atribut nilai tombol submit ini, tombol akan mendapatkan teks default:
Contoh :
< Formaction = " action_page.php " >
Nama pertama : Situs
< Inputtype = " text " name = " firstname " value = " Mickey " > Situs
Nama belakang : Situs
< Inputtype = " text " name = " nama belakang " value = " Mouse" > <br>
< Inputtype = " submit" >
</Form>

Input Type : radio


<Input type = " radio " > mendefinisikan tombol radio .
Tombol radio membiarkan pengguna memilih HANYA SATU dari sejumlah pilihan :
Contoh :
<Form >
< Inputtype = " radio " name = "gender" value = " laki-laki " diperiksa > Pria <br>
< Inputtype = " radio " name = "gender" value = " perempuan " > Wanita Situs
< Inputtype = " radio " name = "gender" value = " lainnya " > Lain
</Form>

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser :
Male
Female
Other

Tipe Masukan : Kotak Centang


<Input type = " checkbox " > mendefinisikan sebuah kotak centang .
Centang membiarkan pengguna memilih ZERO atau LEBIH pilihan dari sejumlah pilihan.
Contoh:
<Form>
<Inputtype = " checkbox " name = " vehicle1 " value = " sepeda " > Saya memiliki sepeda Situs
<Inputtype = " checkbox " name = " vehicle2 " value = " Mobil " > Saya punya mobil
</Form>

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser :
I have a bike
I have a car
Tipe Masukan : tombol
<Input type = " button "> mendefinisikan tombol. Contoh
< Inputtype = " button " onclick = " alert ( ' Hello World ! ' ) " Value = " Click Me ! " >

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser

Jenis Masukan HTML5


HTML5 menambahkan beberapa jenis masukan baru :
Warna
Tanggal
tanggal Waktu
datetime lokal
e-mail
bulan
jumlah
jarak
pencarian
tel
waktu
url
minggu
Catatan : jenis masukan tidak didukung browser versi lama, mereka akan menganggapnya sebagai jenis
input teks.

Tipe Masukan : Nomor


<Input type = " angka" > digunakan untuk field input yang harus berisi nilai numerik. Anda dapat
mengatur pembatasan angka .
Tergantung pada dukungan browser , pembatasan dapat diterapkan pada field input. Contoh:
<Form >
Kuantitas ( antara 1 dan 5 ) :
< Inputtype = " angka" name = " kuantitas " min = " 1 " max = " 5 " >
< / Form>
Pembatasan masukan
Berikut adalah daftar dari beberapa pembatasan input yang umum ( beberapa baru di HTML5 ) :
Atribut Keterangan
Disabled Menentukan bahwa sebuah field input harus dinonaktifkan
Max Menentukan nilai maksimum untuk sebuah field input
Menentukan jumlah maksimum karakter untuk sebuah
Maxlength
field input
Min Menentukan nilai minimum untuk sebuah field input
Menentukan ekspresi reguler untuk memeriksa nilai
Pattern
masukan terhadap
Menentukan bahwa field input dibaca saja ( tidak dapat
Readonly
diubah )
Required Menentukan bahwa field input diperlukan ( harus diisi )
Menentukan lebar ( dalam karakter ) dari sebuah field
Size
input
Step Menentukan interval jumlah hukum untuk field input
Value Menentukan nilai default untuk field input

Anda akan belajar lebih banyak tentang pembatasan masukan dalam bab berikutnya. Contoh:
<form>
Quantity:
<inputtype="number"name="points"min="0"max="100"step="10"value="30">
</form>
Tipe Masukan : tanggal
<Input type = " date" > digunakan untuk field input yang harus berisi tanggal.Tergantung pada dukungan
browser , tanggal pemetik bisa muncul di bidang input. Contoh:
<Form >
Ulang tahun:
< Inputtype = " date" name = " bday " >
< / Form>

Anda dapat menambahkan pembatasan input. Contoh:


<Form >
Masukkan tanggal sebelum 1980/01/01 :
< Inputtype = " date" name = " bday " max = " 1979/12/31 " > Situs
Masukkan tanggal setelah 2000-01-01 :
< Inputtype = " date" name = " bday " min = " 2000/01/02 " > Situs
< / Form>
Tipe Masukan : warna
<Input type = " warna" > digunakan untuk field input yang harus berisi warna.
Tergantung pada dukungan browser , pemetik warna dapat ditampilkan dalam kolom input. Contoh:
<Form >
Pilih warna favorit Anda :
< Inputtype = " warna" name = " favcolor " >
< / Form>

Tipe Masukan : kisaran


The < input type = " range" > digunakan untuk field input yang harus berisi nilai dalam jangkauan .
Tergantung pada dukungan browser , kolom input dapat ditampilkan sebagai kontrol slider .

Contoh
<Form >
< Inputtype = " range" name = " poin " min = " 0 " max = " 10 " >
< / Form>

Anda dapat menggunakan atribut berikut untuk menentukan batasan : min , max , langkah, nilai.

Tipe Masukan: bulan


<Input type = "bulan"> memungkinkan pengguna untuk memilih bulan dan tahun.
Tergantung pada dukungan browser, tanggal pemetik bisa muncul di bidang input.
Contoh
<Form>
Ulang Tahun (bulan dan tahun):
<Inputtype = "bulan" name = "bdaymonth">
</ Form>

Tipe Masukan: minggu


<input type = "Minggu"> memungkinkan pengguna untuk memilih satu minggu dan tahun.
Tergantung pada dukungan browser, tanggal pemetik bisa muncul di bidang input.
Contoh

<Form>
Pilih seminggu:
<Inputtype = "Minggu" name = "week_year">
</ Form>

Tipe Masukan: waktu


<Input type = "waktu"> memungkinkan pengguna untuk memilih waktu (tidak ada zona waktu).
Tergantung pada dukungan browser, waktu pemetik dapat muncul di bidang input.
Contoh

<Form>
Pilih waktu:
<Inputtype = "waktu" name = "usr_time">
</ Form>

Tipe Masukan: datetime


<Input type = "datetime"> memungkinkan pengguna untuk memilih tanggal dan waktu (dengan zona
waktu).
Contoh

<Form>
Ulang Tahun (tanggal dan waktu):
<Inputtype = "datetime" name = "bdaytime">
</ Form>

Catatan input type datetime dihapus dari standar HTML. Gunakan datetime-lokal sebagai gantinya.

Tipe Masukan: datetime-lokal


<Input type = "datetime-lokal"> memungkinkan pengguna untuk memilih tanggal dan waktu (tidak ada
zona waktu).
Tergantung pada dukungan browser, tanggal pemetik bisa muncul di bidang input.
Contoh

<Form>
Ulang Tahun (tanggal dan waktu):
<Inputtype = "datetime-lokal" name = "bdaytime">
</ Form>
Tipe Masukan: email
<Input type = "email"> digunakan untuk field input yang harus berisi alamat e-mail.
Tergantung pada dukungan browser, alamat e-mail dapat secara otomatis divalidasi ketika disampaikan.
Beberapa smartphone mengenali jenis email, dan menambahkan ".com" ke keyboard untuk mencocokkan
masukan email.
Contoh

<Form>
E-mail:
<Inputtype = "email" name = "email">
</ Form>

Tipe Masukan: cari


<Input type = "search"> digunakan untuk bidang pencarian (kolom pencarian berperilaku seperti kolom
teks biasa).
Contoh

<Form>
Pencarian Google:
<Inputtype = "search" name = "Google Search">
</ Form>
Tipe Masukan: tel
<Input type = "tel"> digunakan untuk field input yang harus berisi nomor telepon.
Jenis tel saat ini didukung hanya di Safari 8.
Contoh

<Form>
Telepon:
<Inputtype = "tel" name = "usrtel">
</ Form>

Tipe Masukan: url


<Input type = "url"> digunakan untuk field input yang harus berisi alamat URL.
Tergantung pada dukungan browser, bidang url dapat secara otomatis divalidasi ketika disampaikan.
Beberapa smartphone mengenali jenis url, dan menambahkan ".com" ke keyboard untuk mencocokkan
masukan url.
Contoh

<Form>
Tambahkan situs Anda:
<Inputtype = "url" name = "homepage">
</ Form>
LATIHAN
Latihan 1

Latihan 2

Latihan 3

Latihan 4
Latihan 5

4. Input Attribut
Atribut Value
Atribut Value menentukan nilai awal untuk field input. Contoh :
<formaction="">
First name:<br>
<inputtype="text"name="firstname"value="John">
<br>
Last name:<br>
<inputtype="text"name="lastname">
</form>

Atribut Read-Only
Atribut readonly menetapkan bahwa field input hanya bisa dibaca saja (tidak dapat diubah). Contoh:
<formaction="">
First name:<br>
<inputtype="text"name="firstname"value="John">
<br>
Last name:<br>
<inputtype="text"name="lastname">
</form>
Catatan : Atribut readonly tidak perlu nilai. Hal ini sama seperti menulis readonly = "readonly".
Atribut Disabled
Atribut Disabled menetapkan bahwa field input dinonaktifkan. Elemen yang dinonaktifkan tidak dapat
digunakan dan tidak dapat diklik. Elemen yang dinonaktifkan tidak akan disubmit. Contoh
<formaction="">
First name:<br>
<inputtype="text"name="firstname"value="John"disabled>
<br>
Last name:<br>
<inputtype="text"name="lastname">
</form>
Catatan : Atribut Disabled tidak perlu nilai. Hal ini sama seperti menulis disabled = "disabled".

Atribut
Size
Atribut
Size

menentukan ukuran (dalam karakter) untuk bidang masukan. Contoh :


<formaction="">
First name:<br>
<inputtype="text"name="firstname"value="John"size="40">
<br>
Last name:<br>
<inputtype="text"name="lastname">
</form>
Atribut Maxlength
Atribut maxlength menentukan panjang maksimum yang diperbolehkan untuk bidang masukan. Contoh:
<formaction="">
First name:<br>
<inputtype="text"name="firstname"maxlength="10">
<br>
Last name:<br>
<inputtype="text"name="lastname">
</form>
Dengan atribut maxlength, kontrol masukan tidak akan menerima lebih dari jumlah yang diizinkan
karakter.
Catatan : atribut tidak memberikan umpan balik. Jika Anda ingin memperingatkan pengguna, anda harus
menulis kode JavaScript.
HTML5 Attributes
HTML5 menambahkan Atribut di bwah ini <input>:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
dan atribut di bawah ini untuk <form>:
autocomplete
novalidate

Atribut Autocomplete
Atribut autocomplete menentukan apakah bentuk atau masukan bidang harus memiliki autocomplete atau
menonaktifkan.Ketika autocomplete aktif, browser nilai otomatis lengkap berdasarkan nilai-nilai yang
pengguna telah masuk sebelumnya.
Tips: Hal ini dimungkinkan untuk memiliki autocomplete "On" untuk formulir, dan "off" untuk bidang
masukan tertentu, atau sebaliknya.
Atribut autocomplete bekerja dengan <form> dan berikut <input> jenis: teks, pencarian, url, tel, email,
password, datepickers, jangkauan, dan warna.
Contoh
<formaction="action_page.php"autocomplete="on">
First name:<inputtype="text"name="fname"><br>
Last name: <inputtype="text"name="lname"><br>
E-mail: <inputtype="email"name="email"autocomplete="off"><br>
<inputtype="submit">
</form>
Tips: Dalam beberapa browser Anda mungkin perlu mengaktifkan fungsi autocomplete untuk bekerja.

Novalidate Atribut
Atribut novalidate adalah <form> atribut.
Ketika hadir, novalidate menetapkan bahwa data formulir tidak harus divalidasi ketika disampaikan.
Contoh:
Menunjukkan bahwa bentuk tidak akan divalidasi di submit:
<Form action = "action_page.php" novalidate> E-mail: <inputtype = "email" name = "user_email">
<inputtype = "submit">
</ Form>
Atribut Autofocus
Atribut autofocus adalah atribut boolean. Ketika hadir, ia menentukan bahwa <input> elemen harus
secara otomatis mendapatkan fokus ketika beban halaman. Contoh:
Biarkan "Nama depan" field input secara otomatis mendapatkan fokus ketika beban halaman:
Nama depan: <input type = "text" name = "fname" autofocus>

Atribut Form
Atribut form menentukan satu atau lebih bentuk sebuah <input> elemen milik.
Tips: Untuk mengacu ke lebih dari satu bentuk, menggunakan daftar dipisahkan dengan spasi dari bentuk
ids. Contoh:
Field input yang terletak di luar bentuk HTML (tapi masih bagian dari formulir):
<formaction="action_page.php"id="form1">
First name: <inputtype="text"name="fname"><br>
<inputtype="submit"value="Submit">
</form>
Last name: <inputtype="text"name="lname"form="form1">
Atribut Formaction
Atribut form action menentukan URL dari file yang akan memproses input kontrol ketika formulir
dikirimkan. Atribut formaction menimpa atribut aksi <form> elemen.
Atribut formaction digunakan dengan type = "submit" dan ketik = "image".
Contoh
Bentuk HTML dengan dua tombol submit, dengan tindakan yang berbeda:
<formaction="action_page.php">
First name: <inputtype="text"name="fname"><br>
Last name: <inputtype="text"name="lname"><br>
<inputtype="submit"value="Submit"><br>
<inputtype="submit"formaction="demo_admin.asp"
value="Submit as admin">
</form>

Atribut Formenctype
Atribut bentuk enctype menentukan bagaimana bentuk-data harus dikodekan ketika mengirimkan ke
server (hanya untuk bentuk dengan metode = "post").
Atribut bentuk enctype menimpa atribut enctype dari <form> elemen.
Atribut formenctype digunakan dengan type = "submit" dan ketik = "image".
Contoh :
<formaction="demo_post_enctype.asp"method="post">
First name: <inputtype="text"name="fname"><br>
<inputtype="submit"value="Submit">
<inputtype="submit"formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
Atribut Formmethod
Atribut form method mendefinisikan metode HTTP untuk mengirimkan form-data ke URL tindakan.
Atribut form method menimpa atribut metode <form> elemen.
Atribut formmethod dapat digunakan dengan type = "submit" dan ketik = "image"
Contoh :
<formaction="action_page.php"method="get">
First name: <inputtype="text"name="fname"><br>
Last name: <inputtype="text"name="lname"><br>
<inputtype="submit"value="Submit">
<inputtype="submit"formmethod="post"formaction="demo_post.asp"
value="Submit using POST">
</form>

Atribut Formonvalidate
Novalidate atribut adalah atribut boolean. Ketika ada, itu menetapkan bahwa <input> elemen tidak harus
divalidasi ketika disampaikan.Atribut bentuk novalidate menimpa atribut novalidate dari <form> elemen.
Atribut formnovalidate dapat digunakan dengan type = "submit".

Contoh :
A form with two submit buttons (with and without validation):
<formaction="action_page.php">
E-mail: <inputtype="email"name="userid"><br>
<inputtype="submit"value="Submit"><br>
<inputtype="submit"formnovalidate value="Submit without validation">
</form>
Atribut Formtarget
Atribut formtarget menentukan nama atau kata kunci yang menunjukkan di mana untuk menampilkan
respon yang diterima setelah mengirimkan formulir.
Atribut target bentuk menimpa atribut target <form> elemen.
Atribut formtarget dapat digunakan dengan type = "submit" dan ketik = "image"
Contoh :
<formaction="action_page.php">
First name: <inputtype="text"name="fname"><br>
Last name: <inputtype="text"name="lname"><br>
<inputtype="submit"value="Submit as normal">
<inputtype="submit"formtarget="_blank"
value="Submit to a new window">
</form>

Atribut Weight & Height


Tinggi dan lebar atribut menentukan tinggi dan lebar dari <input> elemen. Tinggi dan lebar atribut hanya
digunakan dengan <input type = "image">. Tidak selalu menentukan ukuran gambar. Jika browser tidak
tahu ukuran, halaman akan berkedip sementara gambar memuat. Contoh:
Tentukan gambar sebagai tombol submit, dengan tinggi dan lebar atribut:
<inputtype="image"src="img_submit.gif"alt="Submit"width="48"height="48">
Atribut List
Atribut daftar mengacu pada <datalist> elemen yang berisi opsi yang telah ditetapkan untuk <input>
elemen. Contoh:
An <input> element with pre-defined values in a <datalist>:
<inputlist="browsers">
<datalistid="browsers">
<optionvalue="Internet Explorer">
<optionvalue="Firefox">
<optionvalue="Chrome">
<optionvalue="Opera">
<optionvalue="Safari">
</datalist>

Atribut Min & Max


Min dan max atribut menentukan minimum dan nilai maksimum untuk <input> elemen. Min dan max
atribut pekerjaan dengan jenis masukan berikut: jumlah, rentang, tanggal, datetime, datetime-lokal, bulan,
waktu dan minggu. Contoh:
<Input> elemen dengan nilai min dan max:
Masukkan tanggal sebelum 1980/01/01:
<Inputtype = "date" name = "bday" max = "1979/12/31">

Masukkan tanggal setelah 2000-01-01:


<Inputtype = "date" name = "bday" min = "2000/01/02">

Kuantitas (antara 1 dan 5):


<Inputtype = "angka" name = "kuantitas" min = "1" max = "5">

Atribut Multiple
Merupakan atribut boolean. Ketika hadir, itu menetapkan bahwa pengguna diperbolehkan untuk
memasukkan lebih dari satu nilai dalam <input> elemen. Atribut multiple bekerja dengan jenis berikut
masukan: email, dan berkas. Contoh:
A file upload field that accepts multiple values:
Select images: <inputtype="file"name="img"multiple>

Atribut Pattern
Atribut pola menentukan ekspresi reguler yang nilai <input> elemen diperiksa terhadap.
Atribut pola bekerja dengan jenis masukan berikut: teks, pencarian, url, tel, email, dan password.
Tip: Gunakan atribut judul global untuk menggambarkan pola untuk membantu pengguna.
Tip: Pelajari lebih lanjut tentang ekspresi reguler di tutorial JavaScript kami.
Contoh:
An input field that can contain only three letters (no numbers or special characters):
Country code: <inputtype="text"name="country_code"pattern="[A-Za-z]{3}"title="Three letter country
code">
Atribut PlaceHolder
Atribut placeholder menetapkan petunjuk yang menggambarkan nilai yang diharapkan dari sebuah field
input (nilai sampel atau deskripsi singkat dari format).Petunjuk ditampilkan dalam kolom input sebelum
pengguna memasukkan nilai.Atribut placeholder bekerja dengan jenis masukan berikut: teks, pencarian,
url, tel, email, dan password. Example:
An input field with a placeholder text:
<inputtype="text"name="fname"placeholder="First name">

Atribut Required
Atribut required adalah atribut boolean.Ketika ada, itu menetapkan bahwa sebuah field input harus diisi
sebelum mengirimkan formulir.Atribut required bekerja dengan jenis masukan: teks, pencarian, url, tel,
email, password, pemetik tanggal, nomor, checkbox, radio, dan berkas.
Example :
A required input field:
Username: <inputtype="text"name="usrname"required>

Atribut Step
Atribut step menentukan interval jumlah hukum untuk <input> elemen.Contoh: jika step = "3", nomor
hukum bisa menjadi -3, 0, 3, 6, dll
Tip: Atribut step dapat digunakan bersama-sama dengan max dan min atribut untuk menciptakan
berbagai nilai-nilai hukum. Atribut Langkah bekerja dengan jenis masukan berikut: jumlah, rentang,
tanggal, datetime, datetime-lokal, bulan, waktu dan minggu.
Example
An input field with a specified legal number intervals:
<inputtype="number"name="points"step="3">
LATIHAN
Latihan 1:

Latihan 2:
Latihan 3 :

Latihan 4 :

5. HTML Iframe
Iframe digunakan untuk menampilkan halaman web dalam halaman web.
Sintaks Iframe
Sintaks untuk menambahkan iframe adalah:
<iframe src="URL"></iframe>
Atribut src menentukan URL (alamat web) dari halaman iframe.
Iframe - Mengatur Tinggi dan Lebar
Gunakan atribut height dan width untuk menentukan ukuran.
Nilai atribut secara default ditentukan dalam pixel, tetapi mereka juga bisa dalam persen (seperti "80%").
Iframe - Hapus Border
Secara default, iframe memiliki batas hitam di sekitarnya.
Untuk menghapus batas, tambahkan atribut style dan gunakan properti CSS border:

Dengan CSS, Anda juga dapat mengubah ukuran, gaya dan warna perbatasan iframe:

Gunakan iframe sebagai Target untuk sebuah Link


Iframe dapat digunakan sebagai target bingkai untuk link.
Atribut Target link harus mengacu pada atribut nama dari iframe:

HTML Iframe Tag


Tag Deskripsi
<iframe> Mendefinisikan sebuah barisan frame
LATIHAN
Latihan 1

Latihan 2
Latihan 3

Latihan 4

6. HTML Head
HTML <head> Elemen
<Head> elemen merupakan wadah untuk metadata (data tentang data).
metadata HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan.
Metadata biasanya menentukan judul dokumen, gaya, link, script, dan informasi meta lainnya.
Tag berikut menggambarkan metadata: <title>, <style>, <meta>, <link>, <script>, dan <base>.

Menghilangkan <html> dan <body>?


Dalam standar HTML5, <html> tag, <body> tag, dan tag <head> dapat dihilangkan.
Kode berikut akan memvalidasi sebagai HTML5:
Contoh :
<!DOCTYPE html>
<title>Page Title</title>
<h1>Heading kulo</h1>
<p>paragraf kulo.</p>

W3Schools tidak merekomendasikan menghilangkan <html> dan <body> tag.


<Html> elemen root dokumen. Ini adalah tempat yang direkomendasikan untuk menentukan bahasa
halaman:
<!DOCTYPE html>
<html lang="en-US">
Mendeklarasikan bahasa adalah penting untuk aplikasi aksesibilitas (pembaca layar) dan mesin pencari.
Menghilangkan <html> dan <body> dapat crash buruk-ditulis DOM / software XML.
Akhirnya, menghilangkan <body> dapat menghasilkan kesalahan dalam browser lama (IE9).

Menghilangkan <head>
Dalam standar HTML5, <head> tag juga bisa dihilangkan.
Secara default, browser akan menambahkan semua elemen sebelum <body>, untuk default <head>
elemen.
Anda dapat mengurangi kompleksitas HTML, dengan menghilangkan tag <head>:
Contoh :
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>heading kulo</h1>
<p>paragraf kulo</p>
</body>
</html>

Menghilangkan tag asing bagi pengembang web. Ini butuh waktu untuk ditetapkan sebagai pedoman.

HTML <title> Elemen


<Title> elemen mendefinisikan judul dokumen.
<Title> elemen diperlukan dalam semua dokumen HTML / XHTML.
<Title> elemen:
mendefinisikan judul di tab browser
memberikan judul untuk halaman ketika ditambahkan ke favorit
menampilkan judul untuk halaman dalam hasil mesin pencari
Sebuah dokumen HTML sederhana. Contoh :
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<p>isi dokumen kulo.....</p>
<p>isi dokumen kulo.....</p>
<p>isi dokumen kulo.....</p>
</body>

</html>

HTML <style> Elemen


<Style> elemen digunakan untuk mendefinisikan informasi style untuk dokumen HTML.
Di dalam elemen <style> Anda menentukan bagaimana elemen HTML harus membuat dalam browser.
Contoh :
<style>
body {background-color:skyblue;}
h1 {color:purple;}
</style>
HTML <link> Elemen
<Link> elemen mendefinisikan hubungan halaman untuk sumber daya eksternal.
<Link> elemen yang paling sering digunakan untuk link ke style sheet. Contoh :
<link rel="stylesheet" href="mystyle.css">

HTML <meta> Elemen


The <meta> elemen digunakan untuk menentukan deskripsi halaman, kata kunci, penulis, dan metadata
lainnya.
Metadata digunakan oleh browser (bagaimana menampilkan konten), oleh mesin pencari (kata kunci),
dan layanan web lainnya.
Menentukan kata kunci untuk mesin pencari:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Mendefinisikan deskripsi dari halaman web Anda:
<meta name="description" content="Free Web tutorials on HTML and CSS">
Mendefinisikan set karakter yang digunakan:
<meta charset="UTF-8">
Mendefinisikan penulis halaman:
<meta name="author" content="Hege Refsnes">
Refresh dokumen setiap 30 detik:
<meta http-equiv="refresh" content="30">
Contoh <meta> tag. Contoh :
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta charset="UTF-8">

HTML <script> Elemen


<Script> elemen digunakan untuk mendefinisikan JavaScripts client-side.
script di bawah ini menulis Hello JavaScript! ke elemen HTML dengan id = "demo":
Contoh :
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
HTML <base> Elemen
The <base> elemen menentukan URL dasar dan sasaran dasar untuk semua URL relatif dalam halaman:
Contoh :
<base href="http://www.w3schools.com/images/" target="_blank">

Elemen Head HTML


Tag Description
<Head> Mendefinisikan informasi tentang dokumen
<Title> Mendefinisikan judul dokumen
Mendefinisikan sebuah alamat default atau target standar untuk
<Base>
semua link pada halaman
Mendefinisikan hubungan antara dokumen dan sumber daya
<Link>
eksternal
<Meta> Mendefinisikan metadata tentang dokumen HTML
<Script> Mendefinisikan sebuah script sisi klien
<Style> Mendefinisikan informasi style untuk dokumen

7. HTML Entitas
Karakter dalam HTML harus diganti dengan entitas karakter.
Karakter, tidak hadir pada keyboard Anda, bisa juga digantikan oleh entitas.
1. Entitas HTML
Beberapa karakter dicadangkan di HTML.
Jika Anda menggunakan kurang dari (<) atau lebih besar dari (>) tanda-tanda dalam teks Anda,
browser mungkin campuran mereka dengan tag.
Entitas karakter yang digunakan untuk menampilkan karakter yang dipesan di HTML.
Sebuah entitas karakter terlihat seperti ini:
&entity_name;
OR
&#entity_number;
Untuk menampilkan tanda lebih kita harus menulis: & lt; atau & # 60;
Keuntungan dari menggunakan nama entitas, bukan angka, adalah bahwa nama yang lebih
mudah diingat.
Kelemahannya adalah bahwa browser mungkin tidak mendukung semua nama entitas, tetapi
dukungan untuk nomor baik.
2. Non-breaking Space
Sebuah entitas karakter yang umum digunakan dalam HTML adalah ruang non-breaking: & nbsp;
Sebuah ruang non-breaking adalah ruang yang tidak akan masuk ke baris baru.
Dua kata yang dipisahkan dengan spasi non-breaking akan tetap bersama-sama di akhir baris. Hal
ini berguna saat berbuka kata mungkin mengganggu.
contoh:
10
10 m / s
10 km / h
10:00
penggunaan yang umum dari ruang non-breaking adalah untuk mencegah bahwa browser memotong
ruang di halaman HTML.
Jika Anda menulis 10 ruang dalam teks Anda, browser akan menghapus 9 dari mereka. Untuk
menambah ruang nyata untuk teks Anda, Anda dapat menggunakan & nbsp; entitas dengan karakter.
Tanda hubung non-breaking ( & # 8209; ) memungkinkan Anda menggunakan karakter
tanda hubung yang tidak akan merusak.
3. Fungsi beberapa karakter entitas lainnya pada HTML

Nama-nama entitas adalah case sensitif.

4. Combining Diactrical Marks


Sebuah tanda diakritik adalah "mesin terbang" ditambahkan ke surat.
Beberapa tanda diakritik, seperti kuburan () dan akut () disebut aksen.
tanda diakritik dapat muncul baik di atas dan di bawah surat, di dalam surat, dan di antara dua huruf.
tanda diakritik dapat digunakan dalam kombinasi dengan karakter alfanumerik, untuk menghasilkan
karakter yang tidak hadir dalam set karakter (encoding) yang digunakan dalam halaman.
Berikut adalah beberapa contoh:

Anda akan melihat simbol HTML lainnya di bab berikutnya dari tutorial ini.
8. HTML5 Introduction
Apa yang baru di HTML5
Deklarasi DOCTYPE untuk HTML5 sangat sederhana:
<! DOCTYPE html>
Karakter koding (charset) deklarasi juga sangat sederhana:
<Meta charset = "UTF-8">
Contoh HTML5:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>
Karakter encoding default dalam HTML5 adalah UTF-8.

Elemen baru HTML5


Unsur-unsur baru yang paling menarik adalah:
elemen semantik baru seperti <header>, <footer>, <article>, dan <section>.
kontrol bentuk baru atribut seperti nomor, tanggal, waktu, kalender, dan jangkauan.
unsur-unsur baru grafis: <svg> dan <canvas>.
unsur-unsur baru multimedia: <audio yang> dan <video>.
Catatan Dalam bab HTML5 Support, Anda akan belajar bagaimana untuk "mengajarkan" browser lama
untuk menangani HTML5 semantik.

HTML5 API (Application Programming Interfaces) baru


API baru yang paling menarik adalah:
HTML Geolocation
Drag and Drop HTML
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
Catatan penyimpanan lokal adalah pengganti yang kuat untuk cookies.
Elemen yang dihapus di HTML5
Berikut HTML 4 elemen telah dihapus dari HTML5:
Element Use instead
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS
<tt> CSS

Sejarah HTML
Sejak hari-hari awal web, ada banyak versi HTML:
Versi Tahun
Tim Berners-Lee invented www 1989
Tim Berners-Lee invented HTML 1991
Dave Raggett drafted HTML+ 1993
HTML Working Group defined HTML 2.0 1995
W3C Recommended HTML 3.2 1997
W3C Recommended HTML 4.01 1999
W3C Recommended XHTML 1.0 2000
HTML5 WHATWG First Public Draft 2008
HTML5 WHATWG Living Standard 2012
HTML5 W3C Final Recommendation 2014

Tim Berners-Lee menciptakan "World Wide Web" pada tahun 1989, dan internet melepas pada 1990-an.
Dari tahun 1991 hingga 1998, HTML dikembangkan dari versi 1 ke versi 4.
Pada tahun 2000, World Wide Web Consortium (W3C) direkomendasikan XHTML 1.0.
Sintaks XHTML adalah ketat, dan pengembang dipaksa untuk menulis valid dan "well-formed" kode.
Pada tahun 2004, WHATWG (Web Hypertext Application Technology Working Group) dibentuk sebagai
jawaban untuk memperlambat perkembangan W3C, dan keputusan W3C untuk menutup pengembangan
HTML, mendukung XHTML.
WHATWG ingin mengembangkan HTML, konsisten dengan bagaimana web itu digunakan, sementara
kompatibel dengan versi HTML.
Pada periode 2004-2006, inisiatif WHATWG mendapat dukungan oleh vendor browser utama.
Pada tahun 2006, W3C mengumumkan bahwa mereka akan mendukung WHATWG.
Pada tahun 2008, draft publik HTML5 pertama dirilis.
Pada 2012, WHATWG dan W3C memutuskan pemisahan:
WHATWG akan mengembangkan HTML sebagai "Living Standard".
Sebuah standar hidup tidak pernah sepenuhnya lengkap, tapi selalu diperbarui dan diperbaiki. Fitur baru
dapat ditambahkan, tapi fungsi lama tidak dapat dihapus.
WHATWG Living Standard diterbitkan pada tahun 2012, dan terus diperbarui.
W3C akan mengembangkan HTML5 definitif dan standar XHTML5, sebagai "snapshot" dari WHATWG.
W3C HTML5 rekomendasi dirilis 28 Oktober 2014.

9. Elemen-elemen baru HTML


Elemen-elemen Baru di HTML 5
Berikut ini adalah daftar elemen-elemen baru pada HTML 5 dan deskripsi tantang kegunaanya.
Elemen-elemen Sematik/Struktural Baru
HTML 5 menawarkan elemen-elemen baru untuk struktur dokumen yang lebih baik:
Tag Deskripsi
<article> Mendefinisikan sebuah artikel dalam dokumen.
<aside> Mendefinisikan konten samping dari konten halaman.
Mendefinisikan bagian teks yang diformat dengan arah
<bdi>
penulisan yang berbeda dari teks lain.
Mendefinisikan detail-detail yambahan yang dapat
<details>
ditampilkan atau disembunyikan oleh user.
<dialog> Mendefinisikan kotak atau jendela dialog.
Mendefinisikan sebuah caption untuk sebuah elemen
<figcaption>
<figure>.
Mendefinisikan conten yang self-contained, seperti
<figure>
ilustrasi, diagram, foto, listing kode, dan lain-lain.
Mendefinisikan sebuah footer untuk sebuah bagian atau
<footer>
sebuah dokumen.
Mendefinisikan sebuah header untuk dokumen atau
<header>
sebuah bagian.
<main> Mendefinisikan konten utama dari sebuah dokumen.
<mark> Mendefinisikan teks yang ditandai atau disoroti.
mendefinisikan sebuah perintah/item menu yang mana
<menuitem>
user dapat terlibat dengannya dari menu popup.
Mendefinisikan besaran skalar dengan ukuran yang
<meter>
diketahui.
<nav> Mendefinisikan link-link navigasi dalam dokumen.
<progress> Mendefinisikan preogress suatu pekerjaan.
Mendefinisikan apa yang akan ditampilkan dalam browser
<rp>
yang tidak didukung oleh anotasi ruby.
Mendefinisikan sebuah penjelasan atau pengucapan dari
<rt>
suatu karakter (untuk tipografi Asia Timur).
<ruby> Mendefinisikan anotasi ruby (untuk tipografi Asia Timur).
<section> Mendefinisikan suatu bagian dalam dokumen.
Mendefinisikan heading yang terlihat untuk elemen
<summary>
<details>.
<time> Mendefinisikan tanggal/waktu.
<wbr> Mendefinisikan line-break yang mungkin.
Elemen-elemen Form Baru
Tag Deskripsi
<datalist> Mendefinisikan opsi yang belum didefinisikan
untuk kontrol input.
<keygen> Mendefinisikan field generator key-pair (untuk
form).
<output> Mendefinisikan hasil dari perhitungan.
Baca selengkapnya tentang elemen-elemen form yang lama dan yang baru dalam Elemen-elemen Form
HTML.
Atribut-atribut Input Baru
autocomplete step
autofocus color
form date
formaction datetime
formenctype datetime-local
formmethod email
formnovalidate month
formtarget number
height and width range
list search
min and max tel
multiple time
pattern (regexp) url
placeholder Week
required
Baca selengkapnya tentang tipe-tipe input yang lama dan yang baru dalam Tipe-tipe Input HTML.
Pelajari lebih lanjut tentang atribut-atribut input dalam Atribut-atribut Input HTML.

HTML 5 - Sintaks Atribut Baru


HTML 5 menizinkan empat sintaks yang berbeda untuk banyak beberapa atribut.
Berikut adalah contoh demonstrasi sintaks yang berbeda yang dipakai dalam tag <input>:
Type Contoh
Empty <input type="text" value="John" disabled>
Unquoted <input type="text" value=John>
Double- <input type="text" value="John Doe">
quoted
Single- <input type="text" value='John Doe'>
quoted

Dalam HTML5, keempat sintaks boleh digunakan, tergantung pada apa yang dibutuhkan bagi atribut.

Grafis-grafis HTML 5
Tag Deskripsi
<canvas> Mendefinisikan penggambaran
grafis menggunakan JavaScript.
<svg> Mendefinisikan penggambaran
grafis menggunakan SVG.
Baca lebih lanjut tentang Canvas pada HTML 5.
Baca lebih lanjut tentang SVG pada HTML 5.

Elemen-elemen Media Baru


Tag Deskripsi
<audio> Mendefinisikan konten suara atau musik
<embed> Mendefinisikan wadah untuk aplikasi
eksternal (semisal plugins)
<source> Mendefinisikan sumber untuk <video> dan
<audio>
<track> Mendefinisikan trek untuk <video> dan
<audio>
<video> Mendefinisikan konten video atau film

Baca lebih lanjut tentang Video pada HTML 5.


Baca lebih lanjut tentang Audio pada HTML 5.

10. Elemen Semantic HTML5


Semantik adalah studi tentang makna kata-kata dan frase dalam bahasa.
unsur semantik adalah elemen dengan makna.
What are Semantic Elements?
Unsur semantik jelas menggambarkan artinya untuk kedua browser dan pengembang.
Contoh non-semantik elemen: <div> dan <span> - Menceritakan apa-apa tentang isinya.
Contoh semantik elemen: <form>, <table>, dan <img> - Jelas mendefinisikan isinya.

Dukungan Browser
HTML5 elemen semantik yang didukung di semua browser modern.
Selain itu, Anda dapat "mengajar" browser lama bagaimana menangani "unsur-unsur yang tidak
diketahui".
Membacanya di HTML5 Browser Support .
New Semantic Elements in HTML5
Banyak situs web berisi kode HTML seperti: <div id = "nav"> <div class = "header"> <div id = "footer">
untuk menunjukkan navigasi, header, dan footer.
HTML5 menawarkan elemen semantik baru untuk menentukan bagian yang berbeda dari halaman web:
<Article>
<Aside>
<Rincian>
<Figcaption>
<Figure>
<Footer>
<Header>
<Utama>
<Mark>
<Nav>
<Section>
<Summary>
<Time>
HTML5 <section> Elemen
The <section> elemen mendefinisikan bagian dalam sebuah dokumen.
Menurut W3C dokumentasi HTML5: "Bagian adalah pengelompokan tematik konten, biasanya dengan
judul."
Halaman rumah Sebuah situs web bisa dibagi menjadi beberapa bagian untuk pengenalan, konten, dan
informasi kontak.
Contoh
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Try it yourself

HTML5 <article> Element


<Article> elemen menentukan independen, konten mandiri.
Sebuah artikel harus masuk akal sendiri, dan itu harus mungkin untuk membacanya secara independen
dari sisa situs web.
Contoh di mana <article> elemen dapat digunakan:
posting forum
blog post
Artikel koran
Contoh
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
Try it Yourself
Nesting Semantic Elements
Dalam standar HTML5, <article> mendefinisikan lengkap, blok mandiri elemen terkait.
The <section> elemen didefinisikan sebagai sebuah blok elemen terkait.
Dapatkah kita menggunakan definisi untuk memutuskan bagaimana elemen sarang? Tidak, kita tidak bisa!
Di Internet, Anda akan menemukan halaman HTML dengan <section> elemen berisi <article> elemen,
dan <article> elemen yang mengandung <bagian> elemen.
Anda juga akan menemukan halaman dengan <section> elemen berisi <section> elemen, dan <article>
elemen yang mengandung <article> elemen.

Koran: Olahraga artikel di olahraga bagian , memiliki teknis bagian di setiap artikel .

HTML5 <header> Element


<header> elemen menentukan header untuk dokumen atau bagian.
The <header> elemen harus digunakan sebagai wadah untuk konten pengantar.
Anda dapat memiliki beberapa <header> elemen dalam satu dokumen.
Contoh berikut mendefinisikan header untuk sebuah artikel:
Contoh
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
Try it Yourself
HTML5 <footer> Element
<footer> elemen menentukan footer untuk dokumen atau bagian.
A <footer> elemen harus berisi informasi tentang elemen yang mengandung.
Sebuah footer biasanya berisi penulis informasi dokumen, hak cipta, link ke persyaratan penggunaan,
informasi kontak, dll
Anda dapat memiliki beberapa <footer> elemen dalam satu dokumen.
Contoh
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer>
Try it Yourself

HTML5 <nav> Element


The <nav> mendefinisikan satu set link navigasi.
The <nav> elemen ditujukan untuk blok besar link navigasi. Namun, tidak semua link dalam dokumen
harus di dalam <nav> elemen!
Contoh
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Try it Yourself

HTML5 <aside> Element


<aside> Elemen mendefinisikan beberapa konten selain dari konten itu ditempatkan di (seperti sidebar).
Samping konten harus berkaitan dengan isi sekitarnya.
Contoh
<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
Try it Yourself
HTML5 <figure> and <figcaption> Elements

Dalam buku-buku dan surat kabar, itu adalah umum untuk memiliki keterangan dengan gambar.
Tujuan dari keterangan adalah menambahkan penjelasan visual untuk gambar.
Dengan HTML5, gambar dan teks dapat dikelompokkan bersama dalam <figure> elemen:
Contoh
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>
Try it Yourself

<img> elemen mendefinisikan gambar, <figcaption> elemen mendefinisikan judul.

Why Semantic HTML5 Elements?


Dengan HTML4, pengembang digunakan favorit mereka sendiri atribut nama ke halaman elemen gaya:
header, atas, bawah, footer, menu, navigasi, utama, wadah, konten, artikel, sidebar, topnav, ...
Hal ini membuat tidak mungkin untuk mesin pencari untuk mengidentifikasi konten halaman web yang
benar.
Dengan unsur-unsur HTML5 seperti: <header> <footer> <nav> <section> <article>, ini akan menjadi
lebih mudah.
Menurut W3C, Semantic Web:
"Memungkinkan data yang akan dibagi dan digunakan kembali seluruh aplikasi, perusahaan, dan
masyarakat."
11.Migrasi HTML5
Migrasi dari HTML4 ke HTML5
Bab ini menjelaskan bagaimana bermigrasi dari halaman tipikal HTML4 menjadi tipikal HTML5. Bab ini
mendemonstrasikan bagaimana mengkonversi sebuah halaman HTML4 menjadi HTML5, tanpa merusak
apapun dari konten atau struktur originalnya.
Tips : kamu dapat bermigrasi menggunakan cara yang sama.

Typical HTML4 Typical HTML5


<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

Tipikal Halaman HTML4


Contoh:
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
class="highGT">>
<htmllang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
body {font-family:Verdana,sans-serif;font-size:0.8em;}
div#header,div#footer,div#content,div#post
{border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
div#content {background-color:#ddd;}
div#menu ul {margin:0;padding:0;}
div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<divid="header">
<h1>Monday Times</h1>
</div>
<divid="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<divid="content">
<h2>News Section</h2>
<divid="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>
<divid="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>
</div>
<divid="footer">
<p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html>
Mengubah ke Doctype HTML5
Mengubah doctype, dari HTML4 doctype:
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
class="highGT">>
to the HTML5 doctype:
Example
<!DOCTYPEhtml>

Mengubah Encoding HTML5


<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">

to HTML5:
Example
<metacharset="utf-8">

Tambahkan Shiv
Elemen semantic HTML5 didukung oleh semua browser modern. Dengan tambahan, kamu dapat
mengajari browser lama untuk menghandle elemen yang tidak diketahui. Tambahkan the shiv agar
dapat digunakan pada IE:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Tips: Baca tentang the shiv di Browser yang mendukung HTML5

Tambahkan CSS untuk Elemen Semantik HTML5


Lihat pada CSS Style milik anda yang tersedia :
div#header,div#footer,div#content,div#post {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
color:white;background-color:#444;margin-bottom:5px;
}
div#content {
background-color:#ddd;
}
div#menu ul {
margin:0;padding:0;
}
div#menu ul li {
display:inline;margin:5px;
}
Gandakan dengan CSS Style yang digunakan untuk elemen semantic HTML.
Contoh :
header,footer,section,article {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline;margin:5px;
}

Mengubah dari HTML5<header> dan <footer>


Ubah elemen <div> dengan id=header dan id=footer
<divid="header">
<h1>Monday Times</h1>
</div>
.
.
.
<divid="footer">
<p>&amp;copy; 2014 W3Schools. All rights reserved.</p>
</div>
Ke elemen semantic HTML5 <header> dan <footer>:
Contoh:
<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p>&copy; 2014 W3Schools. All rights reserved.</p>
</footer>

Mengubah ke <nav> HTML5


Ubah elemen <div> menjadi id=menu
<divid="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
Contoh:
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>

Mengubah ke <section> HTML5


Ubah elemen <div> menjadi id=content
<divid="content">
.
.
.
</div>
Contoh HTML5 :
<section>
.
.
.
</section>
Mengubah ke <article> HTML5
Ubah semua elemen <div> dengan class=post
<divclass="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>
Menjadi semantic elemen HTML5
Contoh:
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
Remove these "no longer needed" <style> elements:
Example
div#header,div#footer,div#content,div#post {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
color:white;background-color:#444;margin-bottom:5px;
}
div#content {
background-color:#ddd;
}
div#menu ul {
margin:0;padding:0;
}
div#menu ul li {
display:inline;margin:5px;
}
Tipikal Halaman HTML5
Akhirnya kamu dapat menghapus tag <head> . Itu tidak dibutuhkan di HTML 5. Contoh:
<!DOCTYPEhtml>
<htmllang="en">
<title>HTML5</title>
<metacharset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
</section>
<footer>
</footer>
</body>
</html>

Perbedaan antara <article> <section> dan <div>


Ada perbedaan yang membingungkan di standar HTML5, antara <article> dan <div>. Pada standar
HTML5, elemen <section> terdefinisikan sebagai sebuah blok dari kumpulan elemen-elemen yang saling
berhubungan. Elemen <article> terdefinisikan sebagai sebuah blok dari kumpulan tersendiri yang lengkap
dengan elemen-elemen yang saling berhubungan, dan elemen <div> terdefinisikan sebagai elemen-
elemen kecil. Di contoh diatas, kita sudah menggunakan <section> sebagai wadah untuk elemen <article>
yang berhubungan, tetapi kita harus tetap menggunakan <article> sebagai wadah untuk artikel itu sendiri.
Inilah beberapa contoh yang berbeda :
article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</article>

<div> pada <article>:


<article>
<h2>Famous Cities</h2>
<divclass="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<divclass="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<divclass="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</article>
<div> dalam <section> yang ada di <article>
<article>
<section>
<h2>Famous Cities</h2>
<divclass="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<divclass="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<divclass="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<divclass="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<divclass="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<divclass="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
</article>
a
12. Petunjuk Style HTML5
Penemuan Pemrograman HTML
Seorang pengembang website sering ragu dalam hal kode style dan sintaks yang akan digunakan
pada HTML. Diantara tahun 2000 dan 2010, banyak pengembang website yang yang berpindah dari
HTML ke XHTML. Dengan XHTML, pengembang website dipaksa untuk menulis kode yang valid
dan tersusun rapi. HTML5 sedikit lebih tidak rapi bila tentang validasi kode. Dengan HTML5, anda
harus membuat kode konvensional anda sendiri yang mudah digunakan dan dapat dengan mudah
mengatur stylenya.
Jadilah Pintar dan Berpikirlah Kedepan
Dengan menggunakan style, orang lain dapat dengan mudah memahami dan menggunakan HTML
anda. Dimasa depan, program seperti XML readers, mungkin ingin membaca HTML anda.
Menggunakan sintaks yang yang tersusun rapi yang hampir seperti XHTML sangat dianjurkan.
Gunakan Tipe Dokumen yang Benar
Jangan lupa untuk selalu mendeklarasikan tipe dokumen pada line awal didokumen HTML anda.
Contoh:
<!DOCTYPE html> atau <!doctype html> sama saja karena tidak case sensitive.
Gunakan Huruf Kecil untuk Memberi Nama
HTML5 memungkinkan anda untuk mengkombinasi huruf besar dan kecil pada nama elemen.
Tapi kami menyarankan untuk menggunakan haruf kecil pada nama elemen:
Menggabungkan huruf besar dan kecil adalah kebiasaan buruk pada HTML.
Pengembang terbiasa menggunakan huruf kecil sebagai nama elemen (seperti pada XHTML).
Penggunaan huruf kecil terlihat lebih rapi.
Huruf kecil mudah untuk ditulis.
Contoh:
- Buruk:
<SECTION>
<p>This is a paragraph</p>
</SECTION>
- Buruk Sekali:
<Section>
<p>This is a paragraph</p>
</SECTION>
- Baik:
<section>
<p>This is a paragraph</p>
<section>

Menutup semua elemen HTML5


Pada HTML5, anda tidak perlu menutup semua elemen (contohnya elemen <p>). Tapi kami
merekomendasikan untuk menutup semua elemen HTML.
- Buruk
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
- Baik
<section>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</section>

Penggunaan Huruf Kecil Untuk Nama Atribut


HTML5 memungkinkan anda untuk mengkombinasi huruf besar dan kecil pada nama atribut. Tapi
kita merekomendasikan untuk menggunakan huruf kecil sebagai nama atribut:
Mengkombinasi huruf besar dan kecil sebagai nama atribut adalah kebiasaan buruk pada HTML.
Pengembang terbiasa menggunakan huruf kecil sebagai nama atribut (serpeti pada XHTML).
Huruf kecil terlihat lebih bersih dan rapi.
Huruf kecil lebih mudah untuk ditulis.
Nilai Atribut Quotes
HTML5 memungkinkan anda memberikan nilai kepada atribut tanda menggunakan tanda kutip.
Tapi kami menyarankan untuk menggunakan tanda kutip ketika member nilai pada atribut:
Anda harus member tanda kutip bila nilai mengandung spasi.
Mengkombinasi style sangat tidak baik.
Nilai atribut yang diberi tanda kutip mudah untuk dibaca.
Contoh:
Kode ini tidak dapat bekerja, karena nilai atribut mengandung spasi.
<table class=table striped>

Kode yang benar.


<table class=table striped>

Atribut Gambar
Selalu gunakan atribut alt pada gambar. Hal ini sangat penting bila gambar tidak bisa ditampilkan.
<img src=html5.gif alt=HTML5 style=width:128px;height:128px>
Selalu tentukan ukuran gambar. Hal ini mengurangi akan mengurangi flickering karena browser
dapat memesankan tempat untuk gambar sebelum gambar ditampilkan.
Spasi dan Penyamaan
Spasi disekitar tanda sama dengan adalah legal, namun akan lebih mudah dibaca bila tanpa
menggunakan spasi dan lebih mudah untuk mengelompokkan entitas.
<link rel = stylesheet href = styles.css>
<link rel=stylesheet href=styles.css>
Avoid Long Code Lines
Ketika menggunakan HTML editor, sangat tidak nyaman bila harus meng-scroll kekiri dan
kekanan halaman bila ingin membaca kode HTML. Cobalah untuk menghindari menulis kode lebih
dari 80 karakter tiap line.
Blank Lines and Indentation
Jangan tambahkan jarak/line kosong tanpa adanya suatu alas an. Untuk memudahkan pembacaan,
tambahkan jarak.line kosong untuk memisahkan blok kode selain itu juga tambahkan 2 spasi indent
(jangan gunakan TAB).jangan gunakan jarak, line atau inden untuk hal yang tidak perlu. Tidak perlu
menambahkan line/jarak kosong diantara item pendek dan terkait.dan juga tidak perlu untuk
memberikan inden pada setiap elemen.
- Unnecessary:
<body>

<h1>famous</h1>

<h1>Tokyo</h1>

<p> This is a paragraph.


</p>

</body>

- Better:
<body>
<h1>famous</h1>
<h2>Tokyo</h2>
<p> This is a paragraph.</p>
</body>
- Table:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
- List;
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>

Menghilangkan tag <html> dan <body>?


Pada HTML5 standart, tag <html> dan tag <body> bisa dihilangkan. Kode berikut ini akan
dikenali dengan HTML5:

Kami tidak menyarankan untuk menghilangkan tag <html> maupun tag <body>. Elemen
<html> adalah dokumen root. Itu adalah hal yang diperlukan untuk menspesifikkan bahasa yang
digunakan pada halaman HTML:

<!DOCTYPEhtml>
<htmllang="en-US">

Mendeklarasi sebuah bahasa sangat diperlukan untuk mempermudah dalam hal aksesibilitas
(pembaca) dan search engine. Menghilangkan <html> dan <body> dapat mebuat DOM dan software
XML menjadi crash. Menghilangkan <body> dapat mengakibatkan error pada browser versi lama
(IE9).

Menghilangkan tag <head>?


Pada HTML5, tag <head> juga dapat dihilangkan. Secara default, browser akan menambahkan
semua elemen sebelum <body>, kepada default elemen <head>. Anda juga dapat mengurangi tingkat
kompleksitas dari HTML dengan cara menghilangkan tag <head>
Data Meta
Elemen <title> diperlukan pada HTML5. Buatlah title bermakna sebaik mungkin:
<title> HTML5 Syntax and Coding Style</title>
Untuk memastikan penafsiran yang tepat, dan pengindeksan search engine yang tepat, baik bahasa
maupun karakter pengkodean harus didefinisikan sejak awal pada dokumen:

<!DOCTYPEhtml>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>

Komentar-komentar HTML
Komentar singkat harus ditulis di satu baris, dengan spasi setelah <! dan spasi sebelum -->
<!This is a comment -->
Komentar panjang yang mengandung banyak line harus ditulis dengan <!dan --> pada line yang
terpisah:
<!--
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
Komentar panjang akan lebih mudah diamati bila ditambahi indent sebanyak 2 spasi.

Permodelan Sheet
Gunakan sintaks yang simple untuk menghubungkan style sheets:
<link rel=stylesheet) href=styles.css>
Aturan penulisan secara singkat dapat ditulis dengan cara dikompresi pada satu baris:
p.into {font-family: verdana;font-size:16em;}
Aturan penulisan secara panjang dapat ditulis pada beberapa baris:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

- Letakkan bracket pembuka/ tanda kurung kurawal buka pada baris yang sama dengan tag, elemen,
id, class yang dipilih.
- Gunakan spasi sebelum bracket pembuka/ tanda kurung kurawal buka.
- Gunakan indentasi.
- Gunakan tanda titik dua dan spasi diantara tiap property dan nilainya.
- Gunakan spasi setelah tanda koma dan titik koma.
- Gunakan titik koma setelah pemberian nilai pada property termasuk yang paling akhir.
- Gunakan tanda kutip disekitar nilai jika nilai mengandung spasi.
- Letakkan bracket penutup pada baris baru tanpa ditamabahi spasi.
- Hindari kode diatas 80 baris.

Meloading JavaScript pada HTML


Gunakan sintaks yang simple untuk memuat skrip eksternal:
<script src=myscript.js>

Mengakses elemen HTML dengan JavaScript


Konsekuensi menggunakan style HTML yang tidak rapi, mungkin mengakibatkan JavaScript error.
Jika memungkinkan, gunakan penamaan konvensional yang sama (seperti JavaScript).

Gunakan huruf kecil untuk nama file


Sebagian besar web server (apache, unix) case sensitive terhadap nama file: London.jpg tidak
dapat dituliskan sebagai London.jpg. Web server lain (Microsoft, IIS) tidak case sensitive: London.jpg
dapat dituliskan dengan London.jpg atau London.jpg. Jika anda mengkombinasikan huruf besar dan
huruf kecil maka anda harus sangat konsisten pada apa yang anda tulis. Jika anda berpindah dari case
insensitive ke case sensitive server maka kesalahan sekecil apapun dapat merusak web anda. Untuk
menghindari masalah ini, selalu gunakan huruf kecil jika memungkinkan.

File Ekstensi
File HTML harus memiliki ektensi .html atau .htm.
File CSS harus memiliki ekstensi .css
File JavaScript harus memiliki ekstensi .js

Perbedaan antara .htm dan .html


Tidak ada perbedaan antara ekstemsi .htm dengan .html. keduanya akan diakui sebagai HTML
pada semua browser atau web server. Perbedaannya terletak secara cultural, .htm merupakan ekstensi
dari DOS sistem dimana sistem melimit ekstensi menjadi 3 karakter saja. Sedangkan .html merupakan
ekstensi dari sistem operasi Unix yang tidak ada limit pada ekstensi.
Secara teknik, berbeda
Ketika URL tidak menspesifikkan sebuah filename (seperti http://www.w3schools.com/css/),
server akan mengembalikan nama file default, nama file default yang umum adalah index.html,
index.htm, default.html, dan default.htm.
Jika server anda terkonfigurasi hanya dengan index.html sebagai nama file default, maka file anda
harus bernama index.html bukan index.htm.
Namun, server dapat dikonfigurasi lebih dari satu nama file default, dan normalnya anda dapat
mengeset banyak nama file default sesuai keperluan anda.
Bagaimanapun juga, ekstensi full dari HTML adalah .html, dan tidak ada alas an itu tidak dapat
digunakan.
11. Migrasi HTML5
Migrasi dari HTML4 ke HTML5
Bab ini menjelaskan bagaimana bermigrasi dari halaman tipikal HTML4 menjadi tipikal HTML5. Bab ini
mendemonstrasikan bagaimana mengkonversi sebuah halaman HTML4 menjadi HTML5, tanpa merusak
apapun dari konten atau struktur originalnya.
Tips : kamu dapat bermigrasi menggunakan cara yang sama.

Typical HTML4 Typical HTML5


<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

Tipikal Halaman HTML4


Contoh:
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
class="highGT">>
<htmllang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
body {font-family:Verdana,sans-serif;font-size:0.8em;}
div#header,div#footer,div#content,div#post
{border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
div#content {background-color:#ddd;}
div#menu ul {margin:0;padding:0;}
div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<divid="header">
<h1>Monday Times</h1>
</div>
<divid="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
<divid="content">
<h2>News Section</h2>
<divid="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>
<divid="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>
</div>
<divid="footer">
<p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html>

Mengubah ke Doctype HTML5


Mengubah doctype, dari HTML4 doctype:
<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
class="highGT">>
to the HTML5 doctype:
Example
<!DOCTYPEhtml>
Mengubah Encoding HTML5
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">

to HTML5:
Example
<metacharset="utf-8">

Tambahkan Shiv
Elemen semantic HTML5 didukung oleh semua browser modern. Dengan tambahan, kamu dapat
mengajari browser lama untuk menghandle elemen yang tidak diketahui. Tambahkan the shiv agar
dapat digunakan pada IE:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Tips: Baca tentang the shiv di Browser yang mendukung HTML5

Tambahkan CSS untuk Elemen Semantik HTML5


Lihat pada CSS Style milik anda yang tersedia :
div#header,div#footer,div#content,div#post {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
color:white;background-color:#444;margin-bottom:5px;
}
div#content {
background-color:#ddd;
}
div#menu ul {
margin:0;padding:0;
}
div#menu ul li {
display:inline;margin:5px;
}
Gandakan dengan CSS Style yang digunakan untuk elemen semantic HTML.
Contoh :
header,footer,section,article {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline;margin:5px;
}

Mengubah dari HTML5<header> dan <footer>


Ubah elemen <div> dengan id=header dan id=footer
<divid="header">
<h1>Monday Times</h1>
</div>
.
.
.
<divid="footer">
<p>&amp;copy; 2014 W3Schools. All rights reserved.</p>
</div>
Ke elemen semantic HTML5 <header> dan <footer>:
Contoh:
<header>
<h1>Monday Times</h1>
</header>
.
.
.
<footer>
<p>&copy; 2014 W3Schools. All rights reserved.</p>
</footer>

Mengubah ke <nav> HTML5


Ubah elemen <div> menjadi id=menu
<divid="menu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</div>
Contoh:
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>

Mengubah ke <section> HTML5


Ubah elemen <div> menjadi id=content
<divid="content">
.
.
.
</div>
Contoh HTML5 :
<section>
.
.
.
</section>
Mengubah ke <article> HTML5
Ubah semua elemen <div> dengan class=post
<divclass="post">
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</div>
Menjadi semantic elemen HTML5
Contoh:
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
Remove these "no longer needed" <style> elements:
Example
div#header,div#footer,div#content,div#post {
border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
color:white;background-color:#444;margin-bottom:5px;
}
div#content {
background-color:#ddd;
}
div#menu ul {
margin:0;padding:0;
}
div#menu ul li {
display:inline;margin:5px;
}
Tipikal Halaman HTML5
Akhirnya kamu dapat menghapus tag <head> . Itu tidak dibutuhkan di HTML 5. Contoh:
<!DOCTYPEhtml>
<htmllang="en">
<title>HTML5</title>
<metacharset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>
<body>
<header>
<h1>Monday Times</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
</ul>
</nav>
<section>
<h2>News Section</h2>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
<article>
<h2>News Article</h2>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
<p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
lurum hurum turum.</p>
</article>
</section>
<footer>
</footer>
</body>
</html>

Perbedaan antara <article> <section> dan <div>


Ada perbedaan yang membingungkan di standar HTML5, antara <article> dan <div>. Pada standar
HTML5, elemen <section> terdefinisikan sebagai sebuah blok dari kumpulan elemen-elemen yang saling
berhubungan. Elemen <article> terdefinisikan sebagai sebuah blok dari kumpulan tersendiri yang lengkap
dengan elemen-elemen yang saling berhubungan, dan elemen <div> terdefinisikan sebagai elemen-
elemen kecil. Di contoh diatas, kita sudah menggunakan <section> sebagai wadah untuk elemen <article>
yang berhubungan, tetapi kita harus tetap menggunakan <article> sebagai wadah untuk artikel itu sendiri.
Inilah beberapa contoh yang berbeda :
article>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</article>

<div> pada <article>:


<article>
<h2>Famous Cities</h2>
<divclass="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<divclass="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<divclass="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</article>
<div> dalam <section> yang ada di <article>
<article>
<section>
<h2>Famous Cities</h2>
<divclass="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<divclass="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<divclass="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<divclass="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<divclass="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<divclass="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
</article>

13. HTML5 Canvas


Elemen HTML <canvas> digunakan untuk menggambar grafik pada halaman web.
Grafik ke kiri dibuat dengan <canvas>. Ini menunjukkan empat unsur: persegi panjang merah,
persegi panjang gradien, persegi panjang multicolor, dan teks multicolor.

Apa itu HTML Canvas?


Elemen HTML <canvas> digunakan untuk menggambar grafik, dengan cepat, melalui scripting
(biasanya JavaScript).
Elemen <Canvas> hanya sebuah wadah untuk grafis. Anda harus menggunakan script untuk
benar-benar menggambar grafis.
Kanvas memiliki beberapa metode untuk menggambar garis, kotak, lingkaran, teks, dan
menambahkan gambar.

Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh elemen <canvas>.
Contoh Penggunaan Canvas
Kanvas adalah area persegi pada halaman HTML. Secara default, kanvas tidak memiliki
pembatas dan tidak ada konten.
Markupnya terlihat seperti ini:
<canvas id="myCanvas" width="200" height="100"></canvas>
Catatan: Selalu tentukan atribut id (untuk disebut dalam naskah), dan atribut width dan atribut
height untuk menentukan ukuran kanvas.
Untuk menambahkan pembatas, gunakan atribut style:

Contoh Dasar Canvas

Menggambar dengan JavaScript

Menggambar Garis
Menggambar Lingkaran

Menggambar Teks

Teks Stroke
Menggambar Gradient Linear

Menggambar Gradient Circular


Menggambar Gambar

Tutorial HTML Canvas


Untuk belajar semua tentang HTML <canvas>. Kunjungi tutorial penuh HTML Canvas kami.

14. HTML Canvas Drawing


Menggambar di kanvas Dengan JavaScript
Semua gambar di kanvas HTML harus dilakukan dengan JavaScript :
Contoh :
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Langkah 1: Cari Element kanvas
Pertama-tama, kamu harus menemukan elemen <canvas>.
Hal ini dilakukan dengan menggunakan metode HTML DOM getElementById () :
var canvas = document.getElementById("myCanvas");

Langkah 2: Buat objek Drawing


Kedua, Anda perlu objek gambar untuk kanvas.
The getContext() adalah built-in objek HTML, dengan sifat dan metode untuk menggambar :
var ctx = canvas.getContext ("2d");

Langkah 3: Menggambar di Canvas


Terakhir, kamu dapat menggambar di atas kanvas.
Atur style isi dari objek gambar ke warna merah :
ctx.fillStyle = "# FF0000";
Properti fillStyle bisa warna CSS, gradien, atau pola. Default fillStyle hitam.
The fillRect (x,y,width,height) metode gambar persegi panjang, diisi dengan style isi, di kanvas :
ctx.fillRect (0,0,150,75);
15. Koordinat Kanvas HTML
Koordinat Kanvas
Kanvas HTML adalah gabungan dua dimensi. Bagian kiri atas pojok dari kanvas memiliki koordinat (0,0).
Di bab sebelumnya, kamu melihat metode ini menggunakan : fillRect(0, 0, 150, 75). Ini berarti : dimulai
dari bagian pojok kiri atas (0,0) dan gambar sebuah persegi ukuran 150x75 piksel.

Contoh Koordinat
Gambarlah sebuah garis
Untuk membuat sebuah garis lurus pada sebuah kanvas, gunakan metode dibawah ini :
- moveTo(x,y) = menyatakan titik start dari garis
- lineTo(x,y) = menyatakan titik akhir dari garis
Untuk benar benar membuat sebuah garis, kamu harus menggunakan salah satu dari metode ink,
seperti stroke(). Contoh:
Untuk menyatakan titik start di posisi (0,0) dan sebuah titik akhir di posisi (200, 100) lalu
gunakan metode stroke() untuk benar benar membuat garis:
var canvas = document.getElementById(myCanvas);
var ctx = canvas.getContext(2d);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Gambar sebuah lingkaran


Untuk menggambar sebuah lingkaran pada sebuah kanvas, menggunakan metode dibawah ini :
- beginPath();
- arc(x,y,r,start,stop)
Contoh:
Menyatakan sebuah lingkaran dengan metode arc(), lalu gunakan metode stroke() untuk benar
benar menggambar lingkarannya:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

16. HTML Canvas Gradien


Canvas Gradien
Gradien dapat digunakan untuk mengisi persegi panjang, linkaran, garis, teks, dll. Bentuk di kanvas tidak
terbatas pada warna solid.
Ada dua jenis yang berbeda dari gradien:
createLinearGradient ( x, y, x1, y1 ) - menciptakan gradien linier
createRadialGradient ( x, y, r, x1, y1, r1 ) - menciptakan radial / melingkar gradien
Setelah kami memiliki objek gradien, kita harus menambahkan dua atau lebih berhenti warna.
The addColorStop () metode menentukan berhenti warna, dan posisinya di sepanjang gradien.posisi
gradien dapat di mana saja antara 0-1.
Untuk menggunakan gradien, mengatur fillStyle atau strokeStyle properti untuk gradien, kemudian
menggambar bentuk (persegi panjang, teks, atau garis).

Menggunakan createLinearGradient ()
Contoh
Buat gradien linier. Isi persegi panjang dengan gradien:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient


ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Menggunakan createRadialGradient ():


Contoh
Buat radial / melingkar gradien. Isi persegi panjang dengan gradien:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient


ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

17. HTML Canvas Text


Menggambar teks pada kanvas
Untuk menggambar teks pada kanvas, properti yang paling penting dan metode adalah:
Font - mendefinisikan properti font untuk teks
FillText (teks, x, y) - menarik teks "fill" di kanvas
StrokeText (teks, x, y) - menarik teks pada kanvas (no fill)
Menggunakan fillText ()
Contoh
Mengatur font untuk 30px "Arial" dan menulis teks penuh di kanvas:
JavaScript:
var canvas = document.getElementById ( "myCanvas");
var ctx = canvas.getContext ( "2d");
ctx.font = "30px Arial";
ctx.fillText ( "Hello World", 10,50);
Menggunakan strokeText ()
Contoh:
Mengatur font untuk 30px "Arial" dan menulis teks, tanpa mengisi, di kanvas:
JavaScript:
var canvas = document.getElementById ( "myCanvas");
var ctx = canvas.getContext ( "2d");
ctx.font = "30px Arial";
ctx.strokeText ( "Hello World", 10,50);

Tambahkan warna dan Pusat Text


Contoh:
Mengatur font untuk 30px "Comic Sans MS" dan menulis teks merah diisi di tengah kanvas:
JavaScript:
var canvas = document.getElementById ( "myCanvas");
var ctx = canvas.getContext ( "2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText ( "Hello World", canvas.width / 2, canvas.height / 2);

18. HTML Gambar Kanvas


Kanvas-Gambar
Untuk menggambar sebuah gambar pada kanvas, gunakan metode dibawah ini:
drawImage(image,x,y)
Contoh:

JavaScript:
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};

Kamu tidak dapat membuat sebuah gambar sebelum gambar selesai meloading. Panggil fungsi
dari window.onload().