Fundamental HTML5

Fundamental HTML5
TRAINING HARI #1 – ACHMAD SOLICHIN (@ACHMATIM)

Agenda
1. HTML5 vs HTML
2. HTML5 Forms
3. HTML5 Semantics
4. Next Steps

What is HTML5 ?
HTML5 is an vocabulary and set of application programming interfaces that make up a core
declarative language for web sites and applications.
- @mollydotcom -
HTML5 is a core technology markup language of the Internet used for structuring and presenting
content for the World Wide Web.
- Wikipedia -

HTML5: More simple doctype
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 5
<!doctype html>

HTML5: More simple character sets
HTML 4
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
HTML 5
<meta charset="utf-8">

HTML5: More simple JS & CSS links
HTML 4
<script src="jquery.js” type="text/javascript"> </script>
<link href="style.css” type="text/css"></link>
HTML 5
<script src="jquery.js"> </script>
<link href="style.css"></link>

HTML5: The / is no longer required for
self-closing elements
HTML 4
<br />
<hr />
<img />
<input />
<link />
<meta />
HTML 5
<br>
<hr>
<img>!
<input>
<link>
<meta>

HTML5: Boolean attributes can be
minimized
HTML 4
checked="checked"
compact="compact"
declare="declare"
defer="defer"
disabled="disabled"
multiple="multiple”
selected="selected"
HTML 5
checked
compact
declare
defer
disabled
multiple
selected

HTML5: Some guidelines
 Tetap membiasakan penggunaan huruf kecil (lowercase) dalam penulisan tag dan atribut,
seperti halnya di XHTML, walaupun di HTML5 tidak diharuskan.
 Tetap menutup setiap tag yang memerlukan tag penutup, walaupun tidak diharuskan.
 Tetap gunakan kutip (“) untuk setiap value dari atribut, walaupun di HTML5 boleh tanpa kutip.
 Tetap menambahkan penutup / pada tag tunggal seperti <h1>, <input>
 Hindari penggunaan atribut Boolean secara berlebihan. Penggunaan <input
type=“checkbox” checked /> lebih baik dibanding <input type=“checkbox”
checked=“checked”/>.

HTML5: Don’t use this tags and atributes
Tags:
<font>
<center>
<frame>
<frameset>
<noframes>
<acronym>
<applet>
<basefont>
<big>
<dir>
<strike>
<tt>
Atributes:
align
bgcolor
height
width
size
type

HTML5: New features
 New form controls, like calendar , date , time , email , url , search …….And More
 New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
 The <canvas> element for 2D drawing
 The <video> and <audio> elements for media playback
 Support for local storage

HTML5 Input Type
JENIS INPUTAN LAMA
 button
 checkbox
 file
 hidden
 image
 password
 radio
 reset
 submit
 text
JENIS INPUTAN BARU
 search
 email
 url
 tel
 datetime
 date
 month
 week
 time
 datetime-local
 number
 range
 color

HTML5: New Form Atributes
 required
 placeholder
 pattern
 form
 autocomplete
 datalist
 autofocus

required
 Digunakan untuk validasi : Form inputan harus diisi (tidak boleh kosong)
<input type=“text” name=“nama” required />

placeholder
 Digunakan untuk memberi keterangan di dalam inputan.
<input type="text" name="nama" placeholder="Nama Lengkap"/>

pattern
 Digunakan untuk membatasi inputan dengan pola tertentu, misalnya pada inputan password
dengan panjang minimal 6 karakter.
<input type="password" name="password" pattern="S{6,}"/>

form
 Atribut “form” digunakan untuk menentukan inputan termasuk ke dalam form yang mana. Di
HTML5, suatu inputan tidak harus berada di dalam tag <form>
<form id=“form1”>
<input type=“text” name=“nim”/>
</form>
<input type=“text” name=“nama” form=“form1”/>

autocomplete
 Digunakan untuk mengaktifkan (on) atau menon-aktifkan (off) auto-complete pada suatu
inputan.
<input type="email" id="email2" name="email" autocomplete="off"/>

datalist, list
 Menampilkan pilihan seperti combobox, hanya saja kita juga dapat mengetikkan text inputan
dan bersifat auto-complete.
<label for="favcolor">Favorite Color</label>
<input type="text" list="colors" id="favcolor" name="favcolor">
<datalist id="colors">
<option value="Blue">
<option value="Green">
<option value="Pink">
<option value="Purple">
</datalist>

autofocus
 Digunakan untuk menentukan posisi cursor pada form inputan saat halaman pertama kali
ditampilkan.
 Dalam satu halaman hanya boleh memiliki satu form inputan yang autofocus.
<input type="text" name="fname" autofocus />

HTML5: New Elements
 <datalist>
 Menampilkan data dalam bentuk list / daftar
 <keygen>
 Menambah generator suatu key private dan public. Key private akan disimpan secara local dan key
public akan dikirimkan ke server bersamaan dengan proses form.
 <output>
 Menyajikan hasil dari suatu perhitungan
 <progress>
 Menampilkan progress bar dari suatu proses.
 <meter>
 Menampilkan ukuran dari suatu range tertentu

HTML5: Other New Elements
 <video>
 <audio>
 <track>
 <source>
 <embed>
 <mark>
 <progress>
 <meter>
 <time>
 <canvas>
 <ruby>
 <rt>
 <rp>
 <wbr>
 <command>
 <menu>
 <details>
 <summary>

<video>
 Menampilkan media video secara native di browser.
 Tipe video yang didukung:
 .flv
 .mp4
 .avi
 .m4v
 .ogg
 .webm
 Tags:
 <video>
 <source>

<audio>
<audio controls>
<source src="let-it-go.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

A New Perspective on Types of Content
 Metadata content
 Menyajikan informasi mengenai halaman itu sendiri.
 Termasuk: <title>, <link>, <meta>, <style>
 Flow content
 Elemen-elemen yang digunakan untuk mengatur tata letak isi di halaman.
 Termasuk: <header>, <footer>, <p>
 Sectioning content
 Terkait pengaturan bagian-bagian halaman
 Termasuk: <section>, <article>, <aside>, <nav>
 Heading content
 Terkait dengan pengaturan level heading
 <h1>…<h6>, <hgroup>

A New Perspective on Types of Content
 Phrasing content
 Pengaturan tampilan tulisan pada suatu paragraf.
 <em>, <i>, <cite>, <strong>, <b>
 Embedded content
 Berhubungan dengan penyertaan media seperti image, audio dan video
 <img>, <object>, <embed>, <video>, <audio>, <canvas>
 Interactive content
 Berhubungan dengan interaksi dengan pengguna.
 <form>, <input>

<header>
 Digunakan untuk mendefinisikan bagian header dari sebuah halaman maupun blok (section)
di dalam halaman.
 Di dalam header dapat terdiri dari beberapa komponen seperti form pencarian dan logo.
<header>
<h1>Site name</h1>
<h2>Site slogan</h2>
<p>Supplementary information</p>
</header>

<header>
<article>
<header>
<h1>Article Title</h1>
<p>By Jon Smith</p>
</header>
<p>Lorem Ipsum set amet...</p>
</article>

<footer>
 Digunakan untuk mendefinisikan bagian bawah dari suatu halaman.
 Di dalam footer umumnya terdiri dari informasi perusahaan seperti kontak, tentang perusahaan dan copyright.
<footer>
<ul>
<li>copyright info</li>
<li>sitemap link</li>
<li>contact link</li>
<li>to top link</li>
</ul>
</footer>

<nav>
 Digunakan untuk mendefinisikan navigasi yang menghubungkan suatu halaman dengan halaman
lainnya, atau bagian tertentu dari suatu halaman.
 Pada umumnya kumpulan link yang dimasukkan ke dalam kelompok <nav> adalah link utama,
misalnya untuk menampilkan navigasi atau menu utama yang berada di sebelah atas halaman
<nav>
<ul>
<li><a href=”#">home</a></li>
<li><a href=”#">about</a></li>
</ul>
</nav>

<section>
 Digunakan untuk membuat blok wilayah tertentu pada suatu halaman.
 Pada umumnya, didalam <section> selalu terdapat bagian heading
<section>
<h1>Apple</h1>
<p>The apple is the fruit...</p>
...
</section>

<article>
 Digunakan untuk mendefinisikan bagian artikel atau tulisan yang dapat digunakan dan
didistribusikan kembali, misalnya untuk ditampilkan di RSS.
 Bagian <article> umumnya berupa posting blog, berita, artikel majalah, komentar dsb
<article>
<h1>Apple</h1>
<p>The apple is the fruit...</p>
...
</article>

<aside>
 Digunakan untuk mendefinisikan bagian khusus dari suatu halaman yang berada di sisi samping. Sering disebut
sebagai sidebar.
 Di dalam <aside> dapat terdiri dari menu, link atau kategori tertentu.
<aside>
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Best Friend</a></li>
</ul>
</aside>

Fleksibilitas Pengaturan Halaman
<header>

Batasan
 Beberapa elemen / tag HTML5 semantics tidak didukung dengan baik oleh IE 6-8. Browser modern
lainnya tidak ada masalah.
 Solusi:
Javascript:

CSS:
article, aside, details, figcaption, figure, footer, header, hgroup,
nav, section { display: block;}

Next Steps
 Canvas
 Web Storage
 Web Font
 Geolocation
 HTML5 Helper: Modernzr

Resources
 (Book) Alexis Goldstein, Louis Lazaris, and Estelle Weyl. 2011. HTML5 & CSS3 FOR THE REAL
WORLD. SitePoint Pty. Ltd
 (Presentation) Steven Chipman. An Introduction to HTML5.
http://www.slideshare.net/sgchipman/an-introduction-to-html5-5518668
 (Presentation) Srinivas Tamada. HTML5 CSS3 Basics.
http://www.slideshare.net/SrinivasTamada/html5-css3-basics
 (Presentation) Russ Weakley. A quick introduction to HTML5.
http://www.slideshare.net/maxdesign/a-quick-introduction-to-html5

Terima Kasih
 http://achmatim.net
 achmatim@gmail.com
 http://twitter.com/achmatim
 http://facebook.com/achmatim
 http://slideshare.net/achmatim

Fundamental HTML5

More Related Content

What's hot (11)

Similar to Fundamental HTML5 (20)

More from Achmad Solichin (20)

Recently uploaded (20)

Fundamental HTML5