Downloaded 63 times
Uploaded byKuliahKita
Pemrograman Web - HTML5
Dokumen ini membahas HTML5 sebagai teknologi markup terbaru yang menggantikan HTML4 dan XHTML, dengan berbagai fitur baru seperti elemen untuk multimedia, form kontrol yang lebih baik, dan struktur halaman yang lebih semantik. HTML5 juga mendukung desain responsif dan memungkinkan pengembangan aplikasi offline dengan dukungan geolocation. Selain itu, markup yang lebih bersih dan konsistensi kode yang lebih baik menjadi kelebihan utama HTML5.
More Related Content
![Project presentasi [X TKJ B]](https://cdn.slidesharecdn.com/ss_thumbnails/projectpresentasi-150121092601-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Pemrograman Web - HTML5
Pemrograman Web - HTML5
- 1. HTML5 Pengembangan Web Edwin Lunando edwin@kuliahkita.com
- 2. Pendahuluan HTML5 telahdigunakan 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 - Grafikdan 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 & DesainResponsif 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