2. Materi Dasar
HTML5
Fitur Baru
Unsur Semantik
Aturan
Dukungan
Elemen
Semantik Baru
Struktur
Elemen Yg
Dihapus
Contoh- Contoh
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
3. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
HTML5
HTML5 adalah standar terbaru untuk HTML. Versi
sebelumnya dari HTML, HTML 4.01, datang pada tahun
1999, dan internet telah berubah secara signifikan sejak
saat itu. HTML5 dirancang untuk menggantikan HTML 4,
XHTML, dan HTML DOM Level 2. Hal ini khusus dirancang
untuk memberikan konten yang kaya tanpa membutuhkan
plugin tambahan. Versi saat memberikan segala sesuatu
dari animasi grafis, musik untuk film, dan juga dapat
digunakan untuk membangun aplikasi web yang rumit.
Contoh- Contoh
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
4. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Contoh- Contoh
Aturan HTML5
• Fitur baru harus didasarkan pada HTML, CSS,
DOM, dan JavaScript
• Kebutuhan untuk plugin eksternal (seperti Flash)
harus dikurangi
• Penanganan kesalahan harus lebih mudah
daripada versi sebelumnya
• Scripting harus diganti dengan yang lebih markup
• HTML5 harus perangkat-independen
• Proses pembangunan harus terlihat untuk umum
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
5. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Contoh- Contoh
Struktur Dasarnya
•
•
•
•
•
•
•
•
•
•
•
•
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
6. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Contoh- Contoh
Fitur Baru
• Unsur <canvas> untuk gambar 2D
• The <video> dan elemen <audio> untuk
media pemutaran
• Dukungan untuk penyimpanan lokal
• Baru-elemen konten tertentu, seperti
<article>, <footer>, <header>, <nav>,
<section>
• Bentuk kontrol baru, seperti kalender, tanggal,
waktu, email, url, pencarian
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
7. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Contoh- Contoh
Dukungan Browser
HTML5 adalah pekerjaan yang sedang berjalan.
Namun, semua browser utama (Chrome, Firefox,
Internet Explorer, Safari, Opera) mendukung
elemen HTML5 baru dan API, dan terus
menambahkan HTML5 baru fitur untuk versi
terbaru mereka. The HTML 5 kelompok kerja
termasuk AOL, Apple, Google, IBM, Microsoft,
Mozilla, Nokia, Opera, dan ratusan vendor
lainnya
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
8. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen yang telah di hapus
•
•
•
•
•
•
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
•
•
•
•
•
•
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
Elemen Semantik
Baru
Contoh- Contoh
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
9. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Unsur Semantik
• Semantic = Arti.
• Unsur semantik = Elemen dengan makna.
• Unsur semantik jelas menggambarkan maknanya
untuk kedua browser dan pengembang.
• Contoh non-semantik elemen: <div> dan <span>
- Menceritakan apa-apa tentang isinya.
• Contoh semantik elemen: <form>, <table>, dan
<img> - Jelas mendefinisikan isinya.
Contoh- Contoh
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
10. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Contoh- Contoh
Elemen Semantic Baru
Banyak situs web yang ada saat ini mengandung kode HTML
seperti ini: <div id="nav">, <div class="header">, atau <div
id="footer">, untuk menunjukkan link navigasi, header, dan
footer HTML5 menawarkan elemen semantik baru untuk jelas
mendefinisikan bagian yang berbeda dari sebuah halaman web:
• <header>
<figcaption>
• <footer>
<nav>
• <Detil>
<section>
• <summary>
<article>
• <mark>
<figure>
• <time>
<aside>
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
11. Materi Dasar
HTML5
<article>
•
Aturan
–
–
–
–
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Unsur <article> menetapkan independen, konten mandiri. Sebuah artikel harus
masuk akal sendiri dan itu harus mungkin untuk mendistribusikan secara mandiri
dari sisa situs web. Contoh di mana elemen <article> dapat digunakan:
•
Posting forum
Blog post
Berita
Komentar
Contoh
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
Contoh- Contoh
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
12. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Contoh- Contoh
<nav>
• Elemen <nav> mendefinisikan satu set link navigasi.
Unsur <nav> ditujukan untuk blok besar link navigasi.
Namun, tidak semua link dalam dokumen harus berada
di dalam elemen <nav>!
• Contoh
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
13. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Contoh- Contoh
<aside>
• Unsur <aside> mendefinisikan beberapa konten selain dari
konten itu ditempatkan di (seperti sidebar). Samping konten
harus berkaitan dengan isi sekitarnya.
• Contoh
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World,
Florida.</p>
</aside>
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
14. Materi Dasar
HTML5
<header>
•
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Contoh- Contoh
•
Elemen <header> menentukan header untuk dokumen atau bagian.
Unsur <header> harus digunakan sebagai wadah untuk konten
pengantar. Anda dapat memiliki beberapa elemen <header> dalam
satu dokumen.
Contoh
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released
to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
Next
15. Materi Dasar
HTML5
Aturan
Struktur
Fitur Baru
Dukungan
Elemen Yg Dihapus
Unsur Semantik
Elemen Semantik
Baru
Contoh- Contoh
<figure> dan <figcaption>
•
Tag <figure> menentukan konten mandiri, seperti
ilustrasi, diagram, foto, daftar kode, dll. Sedangkan isi dari elemen
<figure> adalah terkait dengan aliran utama, posisinya independen
dari arus utama, dan jika dihapus seharusnya tidak mempengaruhi
aliran dokumen. Tag <figcaption> mendefinisikan caption untuk
elemen <figure>. Unsur <figcaption> dapat ditempatkan sebagai
anak pertama atau terakhir dari elemen <figure>.
• Contoh
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304"
height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso
Back
End
