SlideShare a Scribd company logo
1 of 19
AMIROH, S.Kom
SMKN 3 JOMBANG
MENGENAL HTML5
Mengenal HTML5
 Html 5 merupakan versi terbaru dari
HTML dan mulai dikenalkan pada tahun
2004
 HTML 5 menjadikan tampilan Website
lebih menarik dan interaktif dengan
berbagai Fitur, seperti Kontrol bentuk,
API, multimedia, struktur HTML, dan
semantik
Kelebihan HTML5
 Penulisan kode yang lebih efisien.
 Konten yang ada di situs lebih
mudah terindeks oleh search engine
Fitur Baru Dalam HTML5
 Video dan elemen audio untuk media
pemutaran
 Dukungan yang lebih baik untuk penyimpanan
secara offline
 Elemen konten yang lebih spesifik, seperti
artikel, footer, header, nav, section
 Bentuk kontrol form seperti kalender, tanggal,
waktu, email, url, search
 Unsur kanvas untuk menggambar
Perbedaan HTML dengan HTML5
 Gambar diatas menunjukkan bahwa
Elemen-elemen div dapat digantikan
dengan unsur-unsur baru: <header>,
<footer>, < article>, dan <section>.
 Contoh atribut control yang ada pada
HTML5, seperti number, date, time,
calendar, dan range.
 Contoh tag untuk grafis, seperti <svg> dan
<canvas>
 Sedangkan tag untuk menyisipkan
multimedia adalah <audio> and < video>
Tag yang dihapus di HTML5
HTML5 Browser Support
 HTML5 is supported in all modern
browsers.
Struktur HTML5
New Elements in
HTML5
Element Baru HTML5
<article> Defines an article in the document
<aside> Defines content aside from the page content
<dialog> Defines a dialog box or window
<figure>
Defines self-contained content, like illustrations,
diagrams, photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<menuitem>
Defines a command/menu item that the user can
invoke from a popup menu
<nav> Defines navigation links in the document
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break
Contoh Penggunaan
Source code
Adding New Elements
to HTML
Membuat Elemen/Tag Baru:
 Kita bisa membuat elemen/tag baru pada HTML
Hasilnya..
Referensi
 http://www.w3schools.com/html/html5_seman
tic_elements.asp
 http://www.w3schools.com/html/html5_brows
ers.asp

More Related Content

Similar to 12 mengenal html5

Similar to 12 mengenal html5 (20)

PPT HTML5
PPT HTML5PPT HTML5
PPT HTML5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Ppt html5
Ppt html5Ppt html5
Ppt html5
 
Tugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaTugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarina
 
html
htmlhtml
html
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
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
 
HTML5
HTML5HTML5
HTML5
 
Tugas 8 ku - 0316 1311511529
Tugas 8   ku - 0316 1311511529Tugas 8   ku - 0316 1311511529
Tugas 8 ku - 0316 1311511529
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Html 5
Html 5Html 5
Html 5
 
Hml5 ppt
Hml5 pptHml5 ppt
Hml5 ppt
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Html5
Html5 Html5
Html5
 
Tugas 8 – rekayasa web
Tugas 8 – rekayasa webTugas 8 – rekayasa web
Tugas 8 – rekayasa web
 

More from Amiroh S.Kom

10 html multimedia
10 html multimedia10 html multimedia
10 html multimediaAmiroh S.Kom
 
09 membuat hyperlink
09 membuat hyperlink09 membuat hyperlink
09 membuat hyperlinkAmiroh S.Kom
 
03 formatting page and text
03 formatting page and text03 formatting page and text
03 formatting page and textAmiroh S.Kom
 
01 Pengenalan Web & Jenis Profesi Di bidang Web
01 Pengenalan Web & Jenis Profesi Di bidang Web 01 Pengenalan Web & Jenis Profesi Di bidang Web
01 Pengenalan Web & Jenis Profesi Di bidang Web Amiroh S.Kom
 
14.tki c2-kikd-x-simulasi digital
14.tki c2-kikd-x-simulasi digital14.tki c2-kikd-x-simulasi digital
14.tki c2-kikd-x-simulasi digitalAmiroh S.Kom
 
Learning of future
Learning of futureLearning of future
Learning of futureAmiroh S.Kom
 
05 teknik pengkabelan
05 teknik pengkabelan05 teknik pengkabelan
05 teknik pengkabelanAmiroh S.Kom
 
Protocol jaringan komputer
Protocol jaringan komputerProtocol jaringan komputer
Protocol jaringan komputerAmiroh S.Kom
 

More from Amiroh S.Kom (20)

16 css menu
16  css menu16  css menu
16 css menu
 
15 membuat list
15  membuat list15  membuat list
15 membuat list
 
14 media query
14  media query14  media query
14 media query
 
13 html5 form
13  html5 form13  html5 form
13 html5 form
 
11 form
11 form11 form
11 form
 
10 html multimedia
10 html multimedia10 html multimedia
10 html multimedia
 
09 membuat hyperlink
09 membuat hyperlink09 membuat hyperlink
09 membuat hyperlink
 
08 insert image
08 insert image08 insert image
08 insert image
 
07 css box model
07 css box model07 css box model
07 css box model
 
06 css background
06 css background06 css background
06 css background
 
05 css
05 css05 css
05 css
 
04 html styling
04 html styling04 html styling
04 html styling
 
03 formatting page and text
03 formatting page and text03 formatting page and text
03 formatting page and text
 
02 mengenal html
02 mengenal html02 mengenal html
02 mengenal html
 
01 how web works
01 how web works01 how web works
01 how web works
 
01 Pengenalan Web & Jenis Profesi Di bidang Web
01 Pengenalan Web & Jenis Profesi Di bidang Web 01 Pengenalan Web & Jenis Profesi Di bidang Web
01 Pengenalan Web & Jenis Profesi Di bidang Web
 
14.tki c2-kikd-x-simulasi digital
14.tki c2-kikd-x-simulasi digital14.tki c2-kikd-x-simulasi digital
14.tki c2-kikd-x-simulasi digital
 
Learning of future
Learning of futureLearning of future
Learning of future
 
05 teknik pengkabelan
05 teknik pengkabelan05 teknik pengkabelan
05 teknik pengkabelan
 
Protocol jaringan komputer
Protocol jaringan komputerProtocol jaringan komputer
Protocol jaringan komputer
 

12 mengenal html5