Time Line: May 2015

Atribut yang digunakan untuk menambahkan video:

Atribute	Value	Description
controls	controls	Menentukan kontrol video yang akan ditampilkan(Contoh: tombol play/pause)
autoplay	autoplay	Menentukan bahwa video akan mulaiberputar otomatis
src	URL	Menentukan alamat URL dari mana sumber video
width	pixels	Mengatur lebar dari video player
height	pixels	Mengatur tinggi dari video player
loop	loop	Untuk mengulang / memainkan kembali video yang telah selesai diputar.
muted	muted	Menentukan bahwa output suara akan dimute/dihilangkan
poster	URL	Menentukan gambaryang akan tampil ketika video masih belum berputar.
preload	auto metadata none	Menentukanjika dan bagaimana kapan video ini harus diputar menjalani proses loading ketika halaman terbuka.

format videoyang mendukung yaitu :

–Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)

–MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)

–WebM(File WebM dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)

Sintaks Penulisanya :

atau

</video>

atau

Contoh:

Hasil:

Membuat Struktur Halaman HTML dengan Tag <div>

Sebelum era HTML5 yang memiliki tag untuk membuat struktur halaman yang lengkap, web developer umumnya menggunakan tag <div> dengan atribut id atau class untuk memisahkan bagian-bagian struktur dalam halaman HTML, seperti header, footer, dan sidebar.

Sebagai contoh, berikut adalah gambar sederhana struktur sebuah website dengan 2 kolom:

Untuk membuat struktur diatas, berikut adalah kode HTMLnya:

Kode diatas sepenuhnya valid dan sangat sering digunakan hingga saat ini. Akan tetapi, HTML 5mencoba mengganti semua tag <div> menjadi semantic tag yang lebih bermakna.

Semantic Tag untuk membuat Struktur web dengan HTML5

Seperti yang telah kita bahas pada tutorial sebelumnya tentang semantic tag, HTML5 mencoba menggantikan tag ‘tanpa arti‘ <div> untuk sering digunakan untuk membuat struktur halaman web. Tag-tag yang bisa kita gunakan untuk keperluan ini adalah <header>, <nav>, <section>, <article>, <aside> dan <footer>.

Berikut adalah pembahasan beberapa tag HTML5 yang ditujukan untuk membuat struktur halaman:

Tag <header>

Tag <header> digunakan untuk bagian halaman web yang merupakan header. Tag ini bisa muncul lebih dari 1 kali, tergantung kebutuhan. Bagian atas web dimana kita meletakkan logo dan judul situs adalah tempat terbaik untuk tag <header>. Namun di bagian atas artikel dinama terdapat judul dan sub judul artikel juga bisa di ‘bungkus‘ dengan tag <header>.

Contoh penggunaan tag <header>:

<header>

<h1>Judul
  Website</h1>

<img src=”logo_website.png” />

</header>

Tag <nav>

Tag <nav> digunakan sebagai ‘container‘ dari menu navigasi. Sebaiknya digunakan untuk menu utama yang dirasa penting seperti pada bagian header.

Contoh penggunaan tag <nav>:

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

Tag <section>

Tag <section> digunakan untuk memisahkan bagian-bagian dari struktur web. Tag ini bisa digunakan sebagai container untuk kumpulan artikel, gallery, atau bagian lain dari halaman web yang perlu pemisahan. Walaupun tag <section> terkesan ‘generik’, tetapi jika yang kita butuhkan hanya kontainer tanpa makna apa-apa, sebaiknya tetap menggunakan tag <div>.

Bagian utama dimana kontent berada bisa ‘dibungkus’ menggunakan tag <section>. Dan jika halaman tersebut memiliki banyak bagian yang secara logika bisa dipisah, bisa menggunakan beberapa tag <section>.

Contoh penggunaan tag <section>:

<section>

<h1>Judul
  1</h1>

<p>...Kumpulan
  dari konten...</p>

</section>

<section>

<h1>Judul
  1</h1>

<p>...Kumpulan
  dari konten...</p>

</section>

Tag <main>

Tag <main> cocok digunakan untuk menandakan bagian utama dari sebuah halaman. Berbeda daritag <section>, tag <main> umumnya hanya digunakan 1 kali untuk bagian paling penting, yang biasanya berupa konten/artikel utama.

Contoh penggunaan tag <main>:

<main>

<h1>Judul
  Utama</h1>

<p>...penjelasan...</p>

<article>

<h2>Judul
  Artikel 1</h2>

<p>...penjelasan
  artikel 1...</p>

<p>...
  </p>

<p>...
  </p>

</article>

<article>

<h2>Judul
  Artikel 2</h2>

<p>...penjelasan
  artikel 2...</p>

<p>...
  </p>

<p>...
  </p>

</article>

</main>

Tag <article>

Tag <article> bertujuan untuk menampung konten web yang merupakan.. (ya, anda benar) artikel. Umumnya tag ini berada di dalam tag <section> atau <main>. Tag ini cocok sebagai container untuk artikel dalam sebuah blog.

Contoh penggunaan tag <article>:

<article>

<h2>Judul
  Artikel</h2>

<p>...penjelasan
  artikel...</p>

<p>...
  </p>

<p>...
  </p>

</article>

Tag <aside>

Tag <aside> bertujuan untuk menandai bagian web yang bukan berisi konten utama, tetapi memiliki kaitan dengan artikel yang saat ini ditampilkan. Bagian paling pas untuk tag <aside> adalahsidebar. Karena pada sidebar bisa terdiri dari berbagai konten yang tidak langsung berkaitan dengan konten utama seperti ’10 artikel terbaru’, atau ‘5 komentar terbaru’. Selain untuk sidebar, tag <aside> juga bisa digunakan di dalam artikel untuk menandai bagian tambahan.

Contoh penggunaan tag <aside>:

<article>

<h2>Judul
  Artikel 1</h2>

<p>...penjelasan
  artikel 1...</p>

<p>...
  </p>

<p>...
  </p>

</article>

<aside>

<p>...penjelasan
  tambahan...</p>

</aside>

Tag <footer>

Tag <footer> biasannya digunakan pada bagian bawah halaman, dimana kita menampilkan beberapa informasi mengenai website. Walapun penggunaan paling jelas adalah untuk bagianfooter halaman (meletakkan copyright, about us, dll), tag ini juga cocok digunakan pada bagian bawah artikel untuk menampung informasi tambahan seperti ‘tentang penulis‘ maupun link untuk share ke sosial media.

Contoh penggunaan tag <footer>

<main>

<h2>Judul Artikel 1</h2>

<p>...penjelasan artikel 1...</p>

<p>... </p>

</main>

<footer>

</footer>

Membuat Struktur Halaman HTML dengan tag HTML5

Dengan menggunakan tag-tag HTML5 diatas, kita akan merevisi struktur web sebelumnya dengan menggunakan HTML5. Struktur yang akan kita buat sama dengan contoh pertama:

Dan berikut adalah kode HTML5 yang digunakan untuk membuat struktur tersebut:

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML5</title>

</head>

<body>

<h1>Judul Website</h1>

</header>

<nav>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<h1>Judul Artikel 1</h1>

<h2>Sub Judul Artikel 1</h2>

</header>

<p>...Ini adalah isi dari artikel 1...</p>

</article>

<h1>Judul Artikel 2</h1>

<h2>Sub Judul Artikel 2</h2>

</header>

<p>...Ini adalah isi dari artikel 2...</p>

</article>

</section>

<aside>

<h1>Artikel Terbaru</h1>

<ul>

</ul>

</aside>

</footer>

</body>

</html>

Perhatikan bahwa pada kode diatas saya menggunakan 6 semantic tag dari HTML5, yakni <header>, <nav>, <section>, <artikel>, <aside> dan <footer>. Susunan kode HTML tersebut mungkin lebih mudah dipahami jika anda pernah mendesain layout halaman HTML dengan CSS.

Penggunaan semantic tag dari HTML5 juga akan bermanfaat bagi SEO (Search Engine Optimization). Struktur halaman akan lebih jelas, sehingga mesin pencari bisa memprioritaskan bagian mana yang perlu diberikan penekanan (seperti <header> atau <article>) dan bagian mana yang hanya berupa keterangan (seperti <aside> atau <footer>).

Refrensi:

www.duniailkom.com

Menu

Time Line

Tutorial Menambahkan Video pada Web dengan HTML5

Tutorial Menambahkan Audio Pada Web Menggunakan HTML5

Tutorial Membuat Struktur HTML5

Membuat Struktur Halaman HTML dengan Tag <div>

Semantic Tag untuk membuat Struktur web dengan HTML5

Tag <header>

Tag <nav>

Tag <section>

Tag <article>

Membuat Struktur Halaman HTML dengan tag HTML5

Search this blog

google plus

Popular Posts

Template Gallery

Labels

Blog Archive