Pemrograman Web - HTML5
•
1 like•739 views
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/
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Pemrograman Web - HTML5
Similar to Pemrograman Web - HTML5 (20)
More from KuliahKita
More from KuliahKita (20)
Pemrograman Web - HTML5
- 1. HTML5 Pengembangan Web Edwin Lunando edwin@kuliahkita.com
- 2. 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
- 3. 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
- 4. 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
- 5. Struktur Halaman HTML5 Seperti 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>
- 6. 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.
- 7. 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://)
- 8. 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>
- 9. 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
- 10. 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