Mengenal Fitur HTML5

Contoh :

<!DOCTYPE html> <html> <body> <audio autoplay="autoplay" controls="controls"> <source src="file.ogg"> <source src="file.mp3"> </audio> </body> </html>

HTML

Pada HTML belum ada atribut audio

Video

Digunakan untuk menambahkan video ke halaman web

HTML5

Format video yang disupport browser :

BrowserMP4WebMOggInternet Exploer 9+YESNONOChrome 6+YESYESYESFirefox 3.6+NOYESYESSafari 5+YESNONOOpera 10.6+NOYESYES

Contoh :

<!DOCTYPE html> <html> <body> <video width="320" height="240" controls preload> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> </video> </body> </html>

HTML

Pada HTML belum ada atribut video

Data Attributes

Data attributes adalah fitur baru di HTML5, maka pada HTML sebelumnya fitur data atrribut belum tersedia.

Data attributes digunakan untuk menyimpan kustomasi data secara pribadi.

Data yang disimpan (kustomasi) kemudian dapat digunakan di halaman JavaScript untuk menampilkan halaman yang lebih menarik.

sintaks :

<element data-*="somevalue">

data-* attributes terdiri dari 2 bagian

Nama atribut

Tidak boleh berisi huruf besar, dan setidaknya harus memiliki panjang satu karakter setelah awalan "data-"

Nilai atribut

Bisa berupa string apa pun.

Contoh :

<div id="myDiv" data-custom-attr="MyValue"> Text</div>

Semantic Tags

Semantic tags mendefinisikan dengan jelas fungsi / makna penggunaan tags tersebut, semantic tags dapat memudahkan developer dan browser memahami konten.

HTML

Pada HTML belum terdapat semantic tags, biasanya menggunakan tag

dan untuk pembuatan konten.

HTML 5

Elemen semantic tags

Nama ElemenKeteranganMendefinisikan konten selain konten utamaMendefinisikan artikelMenentukan detail tambahan yang dapat dilihat atau disembunyikan oleh penggunaMenentukan keterangan untuk elemenMenentukan konten yang berdiri sendiri, seperti ilustrasi, diagram, foto dll.Mendefiniskan footer suatu halaman / dokumenMendefiniskan header suatu halaman / dokumenMenentukan isi utama suatu halaman / dokumenMenentukan teks yang ditandai / disorotMenentukan tautan/link navigasiMendefinisikan bagian dalam dokumenMenentukan heading yang terlihat untuk elemenMenentukan tanggal / waktu

Contoh penulisan semantic tags:

<nav> <a href="html">HTML</a> | <a href="css">CSS</a> | <a href="js">JavaScript</a> | <a href="jquery">jQuery</a> </nav> <header><p>Codepolitan</p></header> <article> <section> Semantic tags mendefinisikan dengan jelas fungsi / makna penggunaan tags tersebut, semantic tags dapat memudahkan developer dan browser memahami konten. </section> </article> <aside> <p>Belajar HTML5</p> </aside> <footer> <p>Posted by: Rizka Rizka</p> </footer>

Komentar

Posting Komentar

Jika ingin mengkritik :
"Dimohon untuk menggunakan bahasa yang sopan santun."

Postingan populer dari blog ini

Mengenal Fitur CSS3

Gambar
Chrome | 43.0  4.0 -webkit- | | Internet Explore / Edge | 10.0 | | Firefox | 16.0 5.0 -moz- | | Safari | 9.0 4.0 -webkit- | | Opera | 30.0 15.0 -webkit- 12.0 -o- | Keterangan : Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti. Angka-angka yang diikuti oleh -webkit-, -moz-, atau -o- menentukan versi pertama yang bekerja dengan awalan -webkit-, -moz-, atau -o-. Contoh Pengguna opera versi 30.0 ke atas : div { animation-iteration-count: 2; } Sedangkan pengguna opera versi 15.0 hingga 29.0 : div { -webkit-animation-iteration-count: 2; } Nilai Properti : animation-name menentukan nama  keyframe  yang akan dikaitkan ke  selector animation-duration menetukan berapa lama waktu (dalam satuan detik atau mili detik) yang diperlukan untuk menyelesaikan animasi animation-timing-function Menentukan kurva kecepatan animasi Nilai properti : linear mengatur animasi dengan kecepatan yang sama dari awal hingga akhir ease Nilai default  an
Baca selengkapnya

Command Line

Gambar
Version control system  atau disingkat VCS adalah kategori perangkat lunak yang dapat membantu Kamu atau tim Kamu untuk mengelola setiap perubahan yang dilakukan dari waktu ke waktu. VCS merekam setiap perubahan kode yang dilakukan sehingga jika terjadi kesalahan kita dapat melakukan rollback untuk membanding code sebelum dan sesudah perubahan dilakukan sehingga dapat membantu kita dalam meminimalisir kesalahan. Bagi seorang programmer source yang telah dibuat adalah aset yang berharga karena berisi kumpulan solusi dari masalah yang telah dipecahkan dan diselesaikan. Dengan adanya VCS dapat melindungi source code dari kesalahan yang dilakukan oleh manusia dan dari hal-hal lain yang tidak diinginkan. Tanpa VCS Kamu akan kesulitan dalam mengelola dan berkordinasi dengan tim terkait perubahan yang telah dilakukan sehingga tidak saling timpa-menimpa satu sama lain. Dalam mengembangkan perangkat lunak tanpa menggunakan VCS sangat beresiko, seperti tidak memiliki backup. VCS juga dapat memb
Baca selengkapnya

7+ Tipe Data C++ Berserta Contoh Program dan Jangkauannya

Mari kita ingat kembali, tipe data digunakan untuk menentukan jenis nilai atau value yang akan disimpan ke dalam variabel untuk kemudian di proses dalam program kita. Ketika anda mendeklarasikan sebuah variabel, pada dasarnya anda sedang memesan sebuah ruang didalam memori. Lalu besarnya memori dipengaruhi oleh Tipe Data. Nah tugas besar seorang programmer adalah bisa menentukan tipe data yang tepat, karena kita dituntut untuk membuat program yang efektif dan tidak boros memori. Untuk itu, kita akan mengenal beberapa tipe data dalam Bahasa C++. Tipe Data Primive C++ Pada dasarnya tipe data dibagi menjadi 3 jenis: Tipe Data Angka  - untuk angka dan berhubungan dengan aritmetika. Tipe Data Karakter  - untuk karakter dan angka bukan untuk operasi aritmetika. Tipe Data Logika  - untuk logika benar ( true ) atau salah ( false ). Untuk penjelasan lebih detail silahkan baca:  macam macam tipe data dan fungsinya Pada dasarnya C++ memiliki beberapa tipe data  built-in
Baca selengkapnya