Embed Size (px)
DESCRIPTION
Materi pemrograman web di KuliahKita yang membahas mengenai teknologi HTML terbaru yaitu HTML5 beserta contoh-contoh yang mampu membantu pelajar mengaplikasikannya di http://kuliahkita.com/kelas/pengembangan-web/
Citation preview
Pendahuluan
HTML5 telah digunakan sebagai teknologi markup untuk pembuatan situs. Didesain untuk menggantikan HTML4, XHTML, dan DOM level 2.
HTML5 telah mendukung berbagai bentuk media yang mampu membuat tampilan dari sebuah halaman situs menjadi lebih baik dan interaktif
Penambahan di HTML5
Penambahan fitur baru di HTML5 antara lain:● canvas (2d drawing)● media playback: audio dan video● mendukung local storage● tag baru untuk konten spesifik
○ <article>, <header>, <footer>, <nav>, <section>, dll● Form control baru
○ calendar, date, time, url, email, dll
Struktur Halaman HTML5
Dengan pengenalan tag baru, HTML5 menjadi lebih terstruktur.
*Pada HTML4, biasanya digunakan id sebagai penanda area dari suatu situs.
Contoh: ● tag <header> dan <footer>● tag <nav> untuk navigasi● tag <figure> ● dll
Struktur Halaman HTML5Seperti yang dijelaskan pada materi sebelumnya yaitu:
<html>
<head><meta> … </meta> (deskripsi)<meta> … </meta> (deskripsi)<link> … </link> (link menuju style)
</head><body><div> … </div> → header
… → konten
<divr> … </div> → footer<script> … <script><script> … <script>
</body>
</html>
Elemen Halaman Dinamis
<menu> mempermudah pembuatan drop-down
Toolbar <details> membuat area informasi hanya ditampilkan ketika pengguna meng-klik di item <data-list>.
Juga terdapat auto-complete untuk form dengan pilihan yang terbatas.
Tipe Form Input
Masukan untuk form menjadi lebih teratur karena terklasifikasi:● Date - tanggal● Datetime - waktu dan tanggal lokal di suatu tempat● Month, week - bulan dan minggu● Color - pemilihan warna● Range - mendefinisikan angka pada kisaran tertentu● Email, url - alamat email (dengan @) dan url (http://)
HTML5 - Grafik dan Multimedia
<canvas> membuat ruang untuk menggambar grafik dengan javascript. Gambar yang dapat dibuat adalah:● Warna, styles, dan shadow● Line styles● Path (Pembuatan bentuk dan poligon)● Transformasi (skala, rotasi, perpindahan)● Manipulasi piksel
Selain gambar, juga dapat meng-embed video dan audio dengan tag masing-masing <video> dan <audio>
Mobile & Desain Responsif HTML5
Dengan tag <meta> untuk memberitahu device tertentu.
Contoh:<meta name=”viewport” content=”width=device-width, initial-scale=1.0,
minimum-scale=0.5 maximum-scale=1.0, user-scalable=yes/no”>
Akan memberitahu device untuk menggunakan:● lebar maksimum dari layar device● menerapkan initial scale● menentukan minimum maksimum scale yang dapat digunakan● menentukan apakah pengguna dapat melakukan zoom
Kelebihan HTML5 (ringkasan)
● Mengurangi third party program● Markup yang lebih bersih● Semantik yang lebih baik● Form control yang lebih baik● Konsistensi kode● Offline application cache● Client-side database● Browser compatibility, terutama mobile● Geolocation support● Simple doctype
