Downloaded 98 times
Uploaded byEris Dwi Septiawan Rizal
Dasar dasar html5
HTML5 adalah standar terbaru untuk HTML yang menggantikan HTML 4 dan dirancang untuk menyediakan konten yang kaya tanpa plugin tambahan. Ia memperkenalkan elemen semantik baru seperti <article>, <header>, <nav>, dan <footer>, serta mendukung multimedia dengan elemen seperti <video> dan <audio>. HTML5 secara bertahap didukung oleh semua browser utama dan memiliki aturan struktur yang membuat pengembangan web lebih mudah dan lebih modular.
![Project presentasi [X TKJ B]](https://cdn.slidesharecdn.com/ss_thumbnails/projectpresentasi-150121092601-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
Dasar dasar html5
- 1. Eris Dwi SeptiawanRizal
- 2. Materi Dasar HTML5 Fitur Baru UnsurSemantik 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 ElemenYg 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 ElemenYg 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 ElemenYg 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 ElemenYg 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 ElemenYg 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 ElemenYg 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 ElemenYg 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 ElemenYg 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 ElemenYg 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 ElemenYg 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 ElemenYg 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 ElemenYg 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 ElemenYg 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