desain web 2: review html5

Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP

Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi

Desain Web IIDesain Web II

Review HTML5Review HTML5Pertemuan ke-2Pertemuan ke-2



Review HTML5Review HTML5

HTML5 adalah kelanjutan teknologi HTML5 adalah kelanjutan teknologi 'markup language' yang berisi fitur-fitur 'markup language' yang berisi fitur-fitur baru, memperbaiki fitur yang sudah ada, baru, memperbaiki fitur yang sudah ada, dan antar muka pemrograman dan antar muka pemrograman berdasarkan script.berdasarkan script.

HTML5 dirancang utamanya agar dapat HTML5 dirancang utamanya agar dapat bekerja di semua platform, harmonis bekerja di semua platform, harmonis terhadap browser lama, dan mampu terhadap browser lama, dan mampu menangani error dengan baik.menangani error dengan baik.



Referensi HTML5Referensi HTML5

Kuliah Desain Web 1Kuliah Desain Web 1 http://slideshare.com/adai21http://slideshare.com/adai21

http://www.w3schools.com/html5/html5_http://www.w3schools.com/html5/html5_reference.asp reference.asp

http://html5tutorial.net/html-5-http://html5tutorial.net/html-5-reference/html-5-reference.html reference/html-5-reference.html



Fitur Baru HTML5Fitur Baru HTML5

Elemen CanvasElemen Canvas Document editingDocument editing Web form yang lebih banyakWeb form yang lebih banyak Drag and DropDrag and Drop Memainkan berkas audio dan video secara Memainkan berkas audio dan video secara

nativenative Elemen struktur meningkatkan semantik→Elemen struktur meningkatkan semantik→



Elemen StrukturElemen Struktur

<header><header> <nav><nav> <section><section> <article><article> <figure><figure>

<dialog><dialog> <aside><aside> <footer><footer>



Implementasi Struktur Implementasi Struktur HTML5HTML5



Membuat dasarMembuat dasardokumen HTML5dokumen HTML5

Menambahkan tipe dokumen html5Menambahkan tipe dokumen html5<!doctype html><!doctype html>

Tambahkan tag <html> beserta atributnyaTambahkan tag <html> beserta atributnya<html lang=”id”> ditutup dengan <html lang=”id”> ditutup dengan </html></html>

Tambahkan tag <head> sebagai tempat Tambahkan tag <head> sebagai tempat metadatametadata



Membuat dasarMembuat dasardokumen HTML5dokumen HTML5

Tambahkan tag <body> dimana semua Tambahkan tag <body> dimana semua content dan struktur layout halaman web content dan struktur layout halaman web beradaberada<body> isi content </body><body> isi content </body>

Tambahkan struktur dokumen webTambahkan struktur dokumen web<header></header><header></header><nav></nav><nav></nav><article></article><article></article><aside></aside><aside></aside><footer></footer><footer></footer>



??

desain web 2: review html5

Technology