dasar dasar html5

Eris Dwi Septiawan Rizal

Pemrograman WebDASAR- DASAR HTML5

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik

Elemen Semantik Baru

Contoh- Contoh

Materi Dasar

Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso NextBack

Created by. Eris Dwi Septiawan Rizal | X RPL | SMAKENSA | SMK Negeri 1 Bondowoso

HTML5HTML5 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.

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Contoh- Contoh

Materi Dasar

NextBack


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

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Contoh- Contoh

Materi Dasar

NextBack


Struktur Dasarnya • <!DOCTYPE html>• <html>• <head>• <meta charset="UTF-8">• <title>Title of the document</title>• </head>• • <body>• Content of the document......• </body>• • </html>

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Contoh- Contoh

Materi Dasar

NextBack


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

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Contoh- Contoh

Materi Dasar

NextBack


Dukungan BrowserHTML5 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

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Contoh- Contoh

Materi Dasar

NextBack


Elemen yang telah di hapus• <acronym>• <applet>• <basefont>• <big>• <center>• <dir>

• <font>• <frame>• <frameset>• <noframes>• <strike>• <tt>

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Contoh- Contoh

Materi Dasar

NextBack


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.

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Contoh- Contoh

Materi Dasar

NextBack


Elemen Semantic BaruBanyak 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>

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Contoh- Contoh

Materi Dasar

NextBack


<article>• 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>

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Contoh- Contoh

Materi Dasar

NextBack


<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>

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Materi Dasar

NextBack

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>

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Materi Dasar

NextBack

Contoh- Contoh


<header>• 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>

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Materi Dasar

NextBack

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>

HTML5

Aturan

Struktur

Fitur Baru

Dukungan

Elemen Yg Dihapus

Unsur Semantik


Materi Dasar

EndBack

Contoh- Contoh

dasar dasar html5

Documents