SlideShare a Scribd company logo
1
HTML5
HTML5 merupakan kelanjutan dari HTML 4 yang tidak diupdate sejak tahun 1999. Dimana W3C
sebagai badan yang membuat standar HTML lebih berminat mengembangkan XHTML daripada
melanjutkan HTML.
Setelah beberapa tahun pengembangan, XHTML ternyata tidak sesuai dengan harapan. XHTML 2.0
tidak kunjung selesai, sehingga beberapa programmer web bergabung membentuk badan tersendiri:
WHATWG. WHATWG kemudian mengembangkan format yang akan menjadi cikal bakal HTML5.
Singkat cerita, W3C meninggalkan XHTML 2.0 dan ikut mengembangkan HTML5 bersama
WHATWG.
Tepat pada tanggal 28 Oktober 2014 lalu, W3C telah resmi merampungkan standar HTML5 (sumber
resminya dapat dibaca pada http://www.w3.org/blog/news/archives/4167). Walaupun demikian, saat
ini HTML5 telah didukung hampir oleh semua web browser modern, sehingga sudah saatnya kita
mulai membuat kode HTML menggunakan standar HTML5.
HTML5 datang membawa beberapa sekitar 30an tag baru. Kebanyakan tag ditujukan untuk membuat
struktur halaman, seperti <article>, <nav>, <aside> dan <header>. Selain tag-tag untuk struktur
halaman, HTML5 juga membawa 3 tag multimedia, yakni <audio>, <video> dan <canvas>.
Beberapa perbedaan yang akan ditemukan dalam HTML5:
 Penulisan doctipe pada HTML5 lebih sederhana. Mungkin inilah perbedaan paling mencolok
dari halaman HTML yang ditulis menggunakan HTML5 atau tidak. Penulisan Doctype atau
DTD pada HTML5 menjadi lebih sederhana: <!DOCTYPE html>.
 Penulisan type atribut untuk tag <style> dan <script> tidak diperlukan pada HTML5. Hal ini
karena secara default web browser akan menggunakan text/css untuk tag <style>, dan
text/javascript untuk tag <script>. Sebagai contoh, untuk menggunakan external CSS, Pada
HTML versi sebelumnya kita menuliskan tag <style> secara lengkap: <style
type=”text/css”>…kode CSS… </style>, namun dalam HTML5 kita bisa membuatnya lebih
sederhana: <style>…..kode CSS…..</style>
 Penulisan meta tag karakter set (charset) pada HTML5 menjadi lebih sederhana: <meta
charset=”utf-8″>, dibandingkan versi sebelumnya: <meta http-equiv=”content-type”
content=”text/html;charset=UTF-8″ />.
 Pada HTML5, tag yang berdiri sendiri (void element) tidak harus ditutup seperti dalam
XHTML. Penulisan tag <br> (break) dapat ditulis dengan <br> maupun <br />.
 Walaupun tidak dianjurkan, sebuah tag pada HTML5 boleh ditulis tanpa tag awal atau tanpa
tag akhir. Sebagai contoh, kita tidak perlu menutup tag <p> dengan tag </p>.
 Penulisan tag dan atribut adalah case-insensitive di dalam HTML5, sehingga tag <p> dan tag
<P> akan dianggap sama. Hal ini berbeda dengan XHTML yang mengharuskan seluruh tag
ditulis dalam huruf kecil.
 Penulisan atribut tidak harus di dalam tanda kutip. Sebagai contoh: <p class=satu> adalah
valid. Namun jika nilai atribut terdiri dari karakter spasi, maka tetap harus menggunakan
tanda kutip, seperti: <p class=”satu dua tiga”>.
 HTML5 mendukung multimedia secara langsung menggunakan tag <audio> dan <video>,
sehingga kita tidak perlu tergantung kepada aplikasi pihak ke-3 seperti flash player.
2
 HTML 5 hanya memiliki 1 versi, tidak seperti pendahulunya yang memiliki 3 versi (pada
HTML 4 dan XHTML, anda akan menemukan versi strict, transitional, dan frameset).
Sebagai contoh, kode HTML berikut dinyatakan valid oleh validator HTML5 di
http://validator.w3.org/:
3
Struktur HTML5
4
5
Contoh Pembuatan Web dengan HTML5
1. Membuat sketsa desain halaman web
6
2. Menuliskan Script konsep
3. Skrip struktur umum html
4. Membuat elemen header dan nav
7
5. Membuat elemen article
6. Membuat elemen aside
7. Membuat elemen footer
8
Hasil
9
8. Membuat skrip CSS dan gambar
10
11
12
13
14
15

More Related Content

What's hot

MODUL AJAR INFORMATIKA 4 - JARINGAN KOMPUTER DAN INTERNET.pdf
MODUL AJAR INFORMATIKA 4 - JARINGAN KOMPUTER DAN INTERNET.pdfMODUL AJAR INFORMATIKA 4 - JARINGAN KOMPUTER DAN INTERNET.pdf
MODUL AJAR INFORMATIKA 4 - JARINGAN KOMPUTER DAN INTERNET.pdf
ZiraWhiter
 
KUMPULAN SOAL MODUL LATIHAN - PROGRAM PROFESI GURU (PPG) - TEKNIK KOMPUTER & ...
KUMPULAN SOAL MODUL LATIHAN - PROGRAM PROFESI GURU (PPG) - TEKNIK KOMPUTER & ...KUMPULAN SOAL MODUL LATIHAN - PROGRAM PROFESI GURU (PPG) - TEKNIK KOMPUTER & ...
KUMPULAN SOAL MODUL LATIHAN - PROGRAM PROFESI GURU (PPG) - TEKNIK KOMPUTER & ...
Walid Umar
 
Konteks & proses manajemen proyek
Konteks & proses manajemen proyekKonteks & proses manajemen proyek
Konteks & proses manajemen proyek
Universitas Bina Darma Palembang
 
Kriptografi - Steganografi
Kriptografi - SteganografiKriptografi - Steganografi
Kriptografi - Steganografi
KuliahKita
 
Pengenalan cloud-computing
Pengenalan cloud-computingPengenalan cloud-computing
Pengenalan cloud-computing
Poss Upi
 
4. pengamanan sistem operasi
4. pengamanan sistem operasi4. pengamanan sistem operasi
4. pengamanan sistem operasi
Maghfir Muhammad Ramadhan
 
pertemuan 1 pengantar teknologi informasi.pptx
pertemuan 1 pengantar teknologi informasi.pptxpertemuan 1 pengantar teknologi informasi.pptx
pertemuan 1 pengantar teknologi informasi.pptx
hayatunmaghfirah
 
Interaksi manusia dan komputer
Interaksi manusia dan komputerInteraksi manusia dan komputer
Interaksi manusia dan komputer
Miftahul Khair N
 
INTERAKSI MANUSIA DAN KOMPUTER
INTERAKSI MANUSIA DAN KOMPUTERINTERAKSI MANUSIA DAN KOMPUTER
INTERAKSI MANUSIA DAN KOMPUTER
solikin6
 
materi imk Menu
materi imk Menumateri imk Menu
materi imk Menu
Kukuh Aji
 
S I Rental Mobil
S I Rental MobilS I Rental Mobil
S I Rental Mobildshesung
 
Pertemuan 1 Pemrograman Dasar
Pertemuan 1 Pemrograman DasarPertemuan 1 Pemrograman Dasar
Pertemuan 1 Pemrograman Dasar
Disma Ariyanti W
 
Html power point
Html power pointHtml power point
Html power point
minmon
 
Tahap Pengembangan_Peta Proses Bisnis
Tahap Pengembangan_Peta Proses BisnisTahap Pengembangan_Peta Proses Bisnis
Tahap Pengembangan_Peta Proses Bisnis
Kanaidi ken
 
Decision Support System (DSS)
Decision Support System (DSS)Decision Support System (DSS)
Decision Support System (DSS)
dhibah
 
Presentasi IT Master Plan
Presentasi IT Master PlanPresentasi IT Master Plan
Presentasi IT Master Plan
Fanky Christian
 
#1 PENGENALAN PYTHON
#1 PENGENALAN PYTHON#1 PENGENALAN PYTHON
#1 PENGENALAN PYTHON
Rachmat Wahid Saleh Insani
 
05 Model Proses
05 Model Proses05 Model Proses
05 Model Proses
Arif Rahman
 
Pembuatan Storyboard Game
Pembuatan Storyboard GamePembuatan Storyboard Game
Pembuatan Storyboard Game
Kokoy Komariah
 

What's hot (20)

MODUL AJAR INFORMATIKA 4 - JARINGAN KOMPUTER DAN INTERNET.pdf
MODUL AJAR INFORMATIKA 4 - JARINGAN KOMPUTER DAN INTERNET.pdfMODUL AJAR INFORMATIKA 4 - JARINGAN KOMPUTER DAN INTERNET.pdf
MODUL AJAR INFORMATIKA 4 - JARINGAN KOMPUTER DAN INTERNET.pdf
 
KUMPULAN SOAL MODUL LATIHAN - PROGRAM PROFESI GURU (PPG) - TEKNIK KOMPUTER & ...
KUMPULAN SOAL MODUL LATIHAN - PROGRAM PROFESI GURU (PPG) - TEKNIK KOMPUTER & ...KUMPULAN SOAL MODUL LATIHAN - PROGRAM PROFESI GURU (PPG) - TEKNIK KOMPUTER & ...
KUMPULAN SOAL MODUL LATIHAN - PROGRAM PROFESI GURU (PPG) - TEKNIK KOMPUTER & ...
 
Konteks & proses manajemen proyek
Konteks & proses manajemen proyekKonteks & proses manajemen proyek
Konteks & proses manajemen proyek
 
Kriptografi - Steganografi
Kriptografi - SteganografiKriptografi - Steganografi
Kriptografi - Steganografi
 
Pengenalan cloud-computing
Pengenalan cloud-computingPengenalan cloud-computing
Pengenalan cloud-computing
 
4. pengamanan sistem operasi
4. pengamanan sistem operasi4. pengamanan sistem operasi
4. pengamanan sistem operasi
 
pertemuan 1 pengantar teknologi informasi.pptx
pertemuan 1 pengantar teknologi informasi.pptxpertemuan 1 pengantar teknologi informasi.pptx
pertemuan 1 pengantar teknologi informasi.pptx
 
Interaksi manusia dan komputer
Interaksi manusia dan komputerInteraksi manusia dan komputer
Interaksi manusia dan komputer
 
INTERAKSI MANUSIA DAN KOMPUTER
INTERAKSI MANUSIA DAN KOMPUTERINTERAKSI MANUSIA DAN KOMPUTER
INTERAKSI MANUSIA DAN KOMPUTER
 
materi imk Menu
materi imk Menumateri imk Menu
materi imk Menu
 
S I Rental Mobil
S I Rental MobilS I Rental Mobil
S I Rental Mobil
 
Pertemuan 1 Pemrograman Dasar
Pertemuan 1 Pemrograman DasarPertemuan 1 Pemrograman Dasar
Pertemuan 1 Pemrograman Dasar
 
Html power point
Html power pointHtml power point
Html power point
 
Tahap Pengembangan_Peta Proses Bisnis
Tahap Pengembangan_Peta Proses BisnisTahap Pengembangan_Peta Proses Bisnis
Tahap Pengembangan_Peta Proses Bisnis
 
Decision Support System (DSS)
Decision Support System (DSS)Decision Support System (DSS)
Decision Support System (DSS)
 
Sistem Operasi -
Sistem Operasi - Sistem Operasi -
Sistem Operasi -
 
Presentasi IT Master Plan
Presentasi IT Master PlanPresentasi IT Master Plan
Presentasi IT Master Plan
 
#1 PENGENALAN PYTHON
#1 PENGENALAN PYTHON#1 PENGENALAN PYTHON
#1 PENGENALAN PYTHON
 
05 Model Proses
05 Model Proses05 Model Proses
05 Model Proses
 
Pembuatan Storyboard Game
Pembuatan Storyboard GamePembuatan Storyboard Game
Pembuatan Storyboard Game
 

Similar to Html5

Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa web
Ummi khairani
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
Arif Munandar
 
Tugas 8 rekayasa web
Tugas 8   rekayasa webTugas 8   rekayasa web
Tugas 8 rekayasa web
ikasulistiyani
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
044249
 
Training HTML
Training HTMLTraining HTML
Training HTML
Yanwar Purnama
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
menghilang
 
Ppt html5
Ppt html5Ppt html5
Ppt html5
rizki pradana
 
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
vicky alhuda
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtmlgueste0c708
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtmlgueste0c708
 
Tugas 8 individuu
Tugas 8 individuuTugas 8 individuu
Tugas 8 individuu
septianarul
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
T Ghazali
 
Tugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaTugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarina
osta92
 
Tugas 8 rekweb
Tugas 8   rekwebTugas 8   rekweb
Tugas 8 rekweb
rimaafauziaah
 
Tugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art davidTugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art david
art david
 
Desain web 1
Desain web 1Desain web 1
Desain web 1
Luiz Suarez Zikri
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
fikrinurfahmi1
 

Similar to Html5 (20)

Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa web
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
Tugas 8 rekayasa web
Tugas 8   rekayasa webTugas 8   rekayasa web
Tugas 8 rekayasa web
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Training HTML
Training HTMLTraining HTML
Training HTML
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Ppt html5
Ppt html5Ppt html5
Ppt html5
 
Html 5
Html 5Html 5
Html 5
 
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
 
Tugas 8 individuu
Tugas 8 individuuTugas 8 individuu
Tugas 8 individuu
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 
Tugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaTugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarina
 
Tugas 8 rekweb
Tugas 8   rekwebTugas 8   rekweb
Tugas 8 rekweb
 
Tugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art davidTugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art david
 
Desain web 1
Desain web 1Desain web 1
Desain web 1
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
 

More from Fajar Baskoro

Generasi Terampil Digital Skill-2023.pptx
Generasi Terampil Digital Skill-2023.pptxGenerasi Terampil Digital Skill-2023.pptx
Generasi Terampil Digital Skill-2023.pptx
Fajar Baskoro
 
Cara Membuat Kursus Online Wordpress-tutorstarter
Cara Membuat Kursus Online Wordpress-tutorstarterCara Membuat Kursus Online Wordpress-tutorstarter
Cara Membuat Kursus Online Wordpress-tutorstarter
Fajar Baskoro
 
PPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
PPT-Kick Off Double Track 2024 melaksanakan Festival RamadhanPPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
PPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
Fajar Baskoro
 
Buku Inovasi 2023 - 2024 konsep capaian KUS
Buku Inovasi 2023 - 2024 konsep capaian  KUSBuku Inovasi 2023 - 2024 konsep capaian  KUS
Buku Inovasi 2023 - 2024 konsep capaian KUS
Fajar Baskoro
 
Pemaparan Sosialisasi Program Dual Track 2024.pptx
Pemaparan Sosialisasi Program Dual Track 2024.pptxPemaparan Sosialisasi Program Dual Track 2024.pptx
Pemaparan Sosialisasi Program Dual Track 2024.pptx
Fajar Baskoro
 
Executive Millennial Entrepreneur Award 2023-1a-1.pdf
Executive Millennial Entrepreneur Award  2023-1a-1.pdfExecutive Millennial Entrepreneur Award  2023-1a-1.pdf
Executive Millennial Entrepreneur Award 2023-1a-1.pdf
Fajar Baskoro
 
1-Executive Millennial Entrepreneur Award 2023-1-cetak.pptx
1-Executive Millennial Entrepreneur Award  2023-1-cetak.pptx1-Executive Millennial Entrepreneur Award  2023-1-cetak.pptx
1-Executive Millennial Entrepreneur Award 2023-1-cetak.pptx
Fajar Baskoro
 
Executive Millennial Entrepreneur Award 2023-1.pptx
Executive Millennial Entrepreneur Award  2023-1.pptxExecutive Millennial Entrepreneur Award  2023-1.pptx
Executive Millennial Entrepreneur Award 2023-1.pptx
Fajar Baskoro
 
Pemrograman Mobile - JetPack Compose1.pptx
Pemrograman Mobile - JetPack Compose1.pptxPemrograman Mobile - JetPack Compose1.pptx
Pemrograman Mobile - JetPack Compose1.pptx
Fajar Baskoro
 
Evaluasi KPP Program Dual Track Provinsi Kaltim
Evaluasi KPP Program Dual Track Provinsi KaltimEvaluasi KPP Program Dual Track Provinsi Kaltim
Evaluasi KPP Program Dual Track Provinsi Kaltim
Fajar Baskoro
 
foto tenda digital skill program dari sekolah
foto tenda digital skill program dari sekolahfoto tenda digital skill program dari sekolah
foto tenda digital skill program dari sekolah
Fajar Baskoro
 
Meraih Peluang di Gig Economy yang cocok bagi remaja
Meraih Peluang di Gig Economy yang cocok bagi remajaMeraih Peluang di Gig Economy yang cocok bagi remaja
Meraih Peluang di Gig Economy yang cocok bagi remaja
Fajar Baskoro
 
Membangun aplikasi mobile dengan Appsheet
Membangun aplikasi mobile dengan AppsheetMembangun aplikasi mobile dengan Appsheet
Membangun aplikasi mobile dengan Appsheet
Fajar Baskoro
 
epl1.pdf
epl1.pdfepl1.pdf
epl1.pdf
Fajar Baskoro
 
user.docx
user.docxuser.docx
user.docx
Fajar Baskoro
 
Dtmart.pptx
Dtmart.pptxDtmart.pptx
Dtmart.pptx
Fajar Baskoro
 
DualTrack-2023.pptx
DualTrack-2023.pptxDualTrack-2023.pptx
DualTrack-2023.pptx
Fajar Baskoro
 
BADGE.pptx
BADGE.pptxBADGE.pptx
BADGE.pptx
Fajar Baskoro
 
womenatwork.pdf
womenatwork.pdfwomenatwork.pdf
womenatwork.pdf
Fajar Baskoro
 
Transition education to employment.pdf
Transition education to employment.pdfTransition education to employment.pdf
Transition education to employment.pdf
Fajar Baskoro
 

More from Fajar Baskoro (20)

Generasi Terampil Digital Skill-2023.pptx
Generasi Terampil Digital Skill-2023.pptxGenerasi Terampil Digital Skill-2023.pptx
Generasi Terampil Digital Skill-2023.pptx
 
Cara Membuat Kursus Online Wordpress-tutorstarter
Cara Membuat Kursus Online Wordpress-tutorstarterCara Membuat Kursus Online Wordpress-tutorstarter
Cara Membuat Kursus Online Wordpress-tutorstarter
 
PPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
PPT-Kick Off Double Track 2024 melaksanakan Festival RamadhanPPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
PPT-Kick Off Double Track 2024 melaksanakan Festival Ramadhan
 
Buku Inovasi 2023 - 2024 konsep capaian KUS
Buku Inovasi 2023 - 2024 konsep capaian  KUSBuku Inovasi 2023 - 2024 konsep capaian  KUS
Buku Inovasi 2023 - 2024 konsep capaian KUS
 
Pemaparan Sosialisasi Program Dual Track 2024.pptx
Pemaparan Sosialisasi Program Dual Track 2024.pptxPemaparan Sosialisasi Program Dual Track 2024.pptx
Pemaparan Sosialisasi Program Dual Track 2024.pptx
 
Executive Millennial Entrepreneur Award 2023-1a-1.pdf
Executive Millennial Entrepreneur Award  2023-1a-1.pdfExecutive Millennial Entrepreneur Award  2023-1a-1.pdf
Executive Millennial Entrepreneur Award 2023-1a-1.pdf
 
1-Executive Millennial Entrepreneur Award 2023-1-cetak.pptx
1-Executive Millennial Entrepreneur Award  2023-1-cetak.pptx1-Executive Millennial Entrepreneur Award  2023-1-cetak.pptx
1-Executive Millennial Entrepreneur Award 2023-1-cetak.pptx
 
Executive Millennial Entrepreneur Award 2023-1.pptx
Executive Millennial Entrepreneur Award  2023-1.pptxExecutive Millennial Entrepreneur Award  2023-1.pptx
Executive Millennial Entrepreneur Award 2023-1.pptx
 
Pemrograman Mobile - JetPack Compose1.pptx
Pemrograman Mobile - JetPack Compose1.pptxPemrograman Mobile - JetPack Compose1.pptx
Pemrograman Mobile - JetPack Compose1.pptx
 
Evaluasi KPP Program Dual Track Provinsi Kaltim
Evaluasi KPP Program Dual Track Provinsi KaltimEvaluasi KPP Program Dual Track Provinsi Kaltim
Evaluasi KPP Program Dual Track Provinsi Kaltim
 
foto tenda digital skill program dari sekolah
foto tenda digital skill program dari sekolahfoto tenda digital skill program dari sekolah
foto tenda digital skill program dari sekolah
 
Meraih Peluang di Gig Economy yang cocok bagi remaja
Meraih Peluang di Gig Economy yang cocok bagi remajaMeraih Peluang di Gig Economy yang cocok bagi remaja
Meraih Peluang di Gig Economy yang cocok bagi remaja
 
Membangun aplikasi mobile dengan Appsheet
Membangun aplikasi mobile dengan AppsheetMembangun aplikasi mobile dengan Appsheet
Membangun aplikasi mobile dengan Appsheet
 
epl1.pdf
epl1.pdfepl1.pdf
epl1.pdf
 
user.docx
user.docxuser.docx
user.docx
 
Dtmart.pptx
Dtmart.pptxDtmart.pptx
Dtmart.pptx
 
DualTrack-2023.pptx
DualTrack-2023.pptxDualTrack-2023.pptx
DualTrack-2023.pptx
 
BADGE.pptx
BADGE.pptxBADGE.pptx
BADGE.pptx
 
womenatwork.pdf
womenatwork.pdfwomenatwork.pdf
womenatwork.pdf
 
Transition education to employment.pdf
Transition education to employment.pdfTransition education to employment.pdf
Transition education to employment.pdf
 

Html5

  • 1. 1 HTML5 HTML5 merupakan kelanjutan dari HTML 4 yang tidak diupdate sejak tahun 1999. Dimana W3C sebagai badan yang membuat standar HTML lebih berminat mengembangkan XHTML daripada melanjutkan HTML. Setelah beberapa tahun pengembangan, XHTML ternyata tidak sesuai dengan harapan. XHTML 2.0 tidak kunjung selesai, sehingga beberapa programmer web bergabung membentuk badan tersendiri: WHATWG. WHATWG kemudian mengembangkan format yang akan menjadi cikal bakal HTML5. Singkat cerita, W3C meninggalkan XHTML 2.0 dan ikut mengembangkan HTML5 bersama WHATWG. Tepat pada tanggal 28 Oktober 2014 lalu, W3C telah resmi merampungkan standar HTML5 (sumber resminya dapat dibaca pada http://www.w3.org/blog/news/archives/4167). Walaupun demikian, saat ini HTML5 telah didukung hampir oleh semua web browser modern, sehingga sudah saatnya kita mulai membuat kode HTML menggunakan standar HTML5. HTML5 datang membawa beberapa sekitar 30an tag baru. Kebanyakan tag ditujukan untuk membuat struktur halaman, seperti <article>, <nav>, <aside> dan <header>. Selain tag-tag untuk struktur halaman, HTML5 juga membawa 3 tag multimedia, yakni <audio>, <video> dan <canvas>. Beberapa perbedaan yang akan ditemukan dalam HTML5:  Penulisan doctipe pada HTML5 lebih sederhana. Mungkin inilah perbedaan paling mencolok dari halaman HTML yang ditulis menggunakan HTML5 atau tidak. Penulisan Doctype atau DTD pada HTML5 menjadi lebih sederhana: <!DOCTYPE html>.  Penulisan type atribut untuk tag <style> dan <script> tidak diperlukan pada HTML5. Hal ini karena secara default web browser akan menggunakan text/css untuk tag <style>, dan text/javascript untuk tag <script>. Sebagai contoh, untuk menggunakan external CSS, Pada HTML versi sebelumnya kita menuliskan tag <style> secara lengkap: <style type=”text/css”>…kode CSS… </style>, namun dalam HTML5 kita bisa membuatnya lebih sederhana: <style>…..kode CSS…..</style>  Penulisan meta tag karakter set (charset) pada HTML5 menjadi lebih sederhana: <meta charset=”utf-8″>, dibandingkan versi sebelumnya: <meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />.  Pada HTML5, tag yang berdiri sendiri (void element) tidak harus ditutup seperti dalam XHTML. Penulisan tag <br> (break) dapat ditulis dengan <br> maupun <br />.  Walaupun tidak dianjurkan, sebuah tag pada HTML5 boleh ditulis tanpa tag awal atau tanpa tag akhir. Sebagai contoh, kita tidak perlu menutup tag <p> dengan tag </p>.  Penulisan tag dan atribut adalah case-insensitive di dalam HTML5, sehingga tag <p> dan tag <P> akan dianggap sama. Hal ini berbeda dengan XHTML yang mengharuskan seluruh tag ditulis dalam huruf kecil.  Penulisan atribut tidak harus di dalam tanda kutip. Sebagai contoh: <p class=satu> adalah valid. Namun jika nilai atribut terdiri dari karakter spasi, maka tetap harus menggunakan tanda kutip, seperti: <p class=”satu dua tiga”>.  HTML5 mendukung multimedia secara langsung menggunakan tag <audio> dan <video>, sehingga kita tidak perlu tergantung kepada aplikasi pihak ke-3 seperti flash player.
  • 2. 2  HTML 5 hanya memiliki 1 versi, tidak seperti pendahulunya yang memiliki 3 versi (pada HTML 4 dan XHTML, anda akan menemukan versi strict, transitional, dan frameset). Sebagai contoh, kode HTML berikut dinyatakan valid oleh validator HTML5 di http://validator.w3.org/:
  • 4. 4
  • 5. 5 Contoh Pembuatan Web dengan HTML5 1. Membuat sketsa desain halaman web
  • 6. 6 2. Menuliskan Script konsep 3. Skrip struktur umum html 4. Membuat elemen header dan nav
  • 7. 7 5. Membuat elemen article 6. Membuat elemen aside 7. Membuat elemen footer
  • 9. 9 8. Membuat skrip CSS dan gambar
  • 10. 10
  • 11. 11
  • 12. 12
  • 13. 13
  • 14. 14
  • 15. 15