Seperti janji saya di artikel
HTML5: Apa Saja Yang Baru ? , akan membahas bagaimana
cara konvert HTML atau XHTML template/dokumen ke HTML 5 template,
inilah panduan lengkapnya. Seperti telah dijelaskan mengenai HTML 5
sebelumnya, HTML 5 adalah web HTML masa datang (future template), so ada
baiknya Anda melihat struktur HTML 5 ini, dan apa saja yang perlu
diketahui. Jika Anda sekarang menggunakan HTML 4.0 atau XHTML 1.0 dan
tertarik untuk merubahnya (convert) ke HTML 5, "
than you are in the right place".
Panduan berikut ini akan menjelaskan secara detail dan lengkap (saya
harap begitu) serta berusaha agar Anda dapat mudah memahaminya dalam
penjelasan langkah demi langkah convert Blogger Template menjadi valid
HTML 5.
Kenapa Harus HTML 5?
Menurut saya pribadi, dan alasan saya berpaling ke HTML5 tidak lain karena hal menarik berikut:
- Penggunaan <!DOCTYPE > lebih sederhana/lebih pendek
- Penggunaan <script> sebagai pengganti <script type="text/javascript">
- Pemakaian <style> daripada menggunakan <style type="text/css">
- Pasti lebih sedikit error (Error handling lebih mudah) dalam
standard pengkodean HTML dibandingkan XHTML (jika ditest dengan W3C
validator).
- Juga efisiensi beberapa elemen baru seperti header, section dst.
Ada banyak kelebihan HTML 5, lebih baik baca artikel saya selanjutnya tentang " 10 Keuntugan Menggunakan HTML 5"
Pada prinsipnya konvert HTML 4 atau XHTML 1,0 ke HTML 5 adalah terpusat pada 3 hal penting, yaitu : pembaruan kode (clean), efisiensi kode dan kode semantik (semantic code):
- Membuang pengidentifikasian PUBLIC FPI and SYSTEM PUBLIK dari deklarasi DOCTYPE.
- Ganti tag HTML usang atau tidak dipakai lagi (obsolete or deprecated HTML tags) atau rekonstruksi dengan kode HTML yang sesuai dengan standar HTML 5.
- Menerapkan fitur-fitur baru dari HTML 5, seperti mengkonversi dari tag <div> ke tag HTML 5 sectioning.
Langkah Konvert HTML 4 atau XHTML 1,0 menjadi HTML 5
Yang pertama kali Anda harus lakukan sebelum melakukan perubahan besar
terhadap dokumen template Anda yang sekarang digunakan, adalah BACK UP!!
Blogger > Template > klik tombol Cadangkan/Pulihkan > Unduh Template Lengkap
Simpan baik-baik (sebagai kenang-kenangan nantinya) di PC Anda
Langkah Pertama: Cleaning up Head Section
Perubahan dalam penggunaan <! DOCTYPE html> Deklarasi pada HTML 5.
Tidak ada DTD dalam HTML 5. Oleh karena itu, tag <DOCTYPE html!>
FPI PUBLIK dan identifier SISTEM bisa dihilangkan pada struktur bagian
atas HTML5.
Contoh sistem deklarasi dan sistem identifikasi pada HTML 4 dan XHTML 1.0
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Anda dapat menggantinya semua kode diatas dengan valid ! DOCTYPE untuk HTML 5 yang lebih pendek, berikut :
Secara lengkap umumnya HTML versi sebelumnya menggunakan <! DOCTYPE
html> seperti dibawah ini, pada HTML 5 Anda hanya perlu
menghilangkan/kode yang di beri tanda Strikethrough.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Sehingga DOCTYPE untuk HTML 5 hanya perlu satu kode deklarasi pendek, seperti ini :
<!DOCTYPE html>
Setelah Anda selesai merubah DOCTYPE, selanjutnya perubahan deklarasi xmlns, atau sering diawali dengan kode <xmlns:>. Karena
tidak ada referensi DTD lagi dalam HTML 5, maka tidak diperlukan lagi
deklarasi XML eksternal pada struktur dokumen. Anda bisa menghapusnya
deklarasi xmlns tersebut dengan aman.
Contoh xmlns (XML Namespace) pada XHTML atau HTML versi sebelumnya kurang lebih seperti berikut :
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Kalau dokumen Anda menggunakan XHTML , kode tersebut dapat Anda
temukan, setelah dibawah kode <! DOCTYPE html>, hapus saja
kode-kode yang berwarna merah sehingga hanya ada <html>. Akar dokumen Anda harus "html". Karena tidak ada standar bahasa resmi di HTML5, Anda harus selalu menentukan bahasa eksplisit.
Contoh seperti ini :
<html lang="en">
Pada bagian <head> biasanya memiliki beberapa informasi set
karakter (character set), meta data dan link ke stylesheet CSS. Yang
paling atas adalah tag charset atau tag character encoding , yang Anda
lihat sekarang mungkin akan seperti ini:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
So, pada HTML 5 Anda dapat mempersingkatnya menjadi :
Untuk link stylesheet, secara eksplisit mendefinisikan sebagai stylesheet CSS, pada HTML 5 jenis atribut ( type attribut) "type="text/css" dapat dibuang, ini juga berlaku untuk Javascript, tidak perlu memasang type="text/javascript" lagi.
Contoh penulisan link stylesheet di HTML 5 :
<link rel="stylesheet" type="text/css" href="...">
Boleh juga tidak menggunakan attribut type, sehingga menjadi :
<link rel="stylesheet" href="...">
Contoh untuk script :
<script type="text/javascript" src="....js"></script>
Anda boleh menghilangkan attribut type Javascript, menjadi:
<script src=".....js"></script>
Bagian HEAD dokumen HTML5 akan cukup akrab dengan siapa pun terbiasa
melihat HTML, so Anda bisa melihat contoh XHTML yang sudah di convert di
bagian DOCTYPE ,Head, dst. seperti panduan diatas (dengan penambahan
meta tag, title, link stylesheet, script):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Blog</title>
<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">
<!-- stylesheets -->
<link rel="stylesheet" href="css/reset.css">
<!-- javascript -->
<script src="js/jquery-1.3.2.min.js"></script>
<!--conditional comments -->
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
</head>
Untuk lay-out atau CSS Anda bisa menggunakan link "stylesheet" eksternal, seperti diatas, atau juga internal dengan penulisan <style>..code CSS...</style>.
Penambahan <script src="js/html5.js"></script>, ini berfungsi sebagai hack via Javascript
untuk IE 8 kebawah. Ini karena browser IE (khsusunya dibawah IE 9)
tidak bisa mengenali atau render dari elemen-elemen baru HTML 5 (seperti
<header>,<footer>, dan <aside>). Jadi perlu Anda memasang script tersebut, yang secara lengkap Anda juga dapat menulisnya seperti ini :
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Pada akhir langkah ini, Anda telah selesai convert HTML 5 pada
bagian <head> atau proses "clean up head section". Satu langkah
selesai dan langsung Anda ke langkah berikut ini, yaitu bagian semantik
(semantics tag), tahap ini tentang membuat kode lebih reliable dan aman
dengan fitur-fitur baru HTML 5. Jadi, mari kita mengkonversi halaman
pertama.
Langkah Kedua : Penerapan Elemen Baru HTML 5
Sekarang kita bisa menggunakan atau menerapkan beberapa tag semantik baru HTML 5, seperti <header>,<section>,<article>, <aside>, <footer>,<nav>, <footer>.
Mari kita mulai dengan <header>.
Ganti
<div id="header">
…
</div>
menjadi
<header>
…
</header>
Untuk bagian navigasinya :
<div id="nav">
<ul>
<li>...</li>
</ul>
</div>
Gantilah menjadi seperti ini :
<nav>
<ul>
<li>....</li>
</ul>
</nav>
Selanjutnya bagian post :
Ganti
<div id="posts">
<div id="post-1" class="post">
menjadi
<section id="posts">
<article id="post-1" class="post">
Mungkin ada perbedaan mengenai tag di bagian post ini, ada yang menggunakan <div id="main">,dst...tetapi intinya id ini untuk dimana artikel akan berada (letak postingan Anda).
Anda juga bisa merubahnya menjadi seperti ini :
<div id="main">
<article> atau
<article id="page-content">
<section>
Tergantung dari layout template Anda, sesuaikan saja dengan yang Anda
miliki sekarang. Yang perlu Anda ketahui pada HTML 5, elemen baru
seperti tag <section> digunakan sebagai elemen kontainer untuk semua posting dan tag <article> untuk elemen kointainer yang berisi sub-sub post dengan id unik.
Nah,
untuk bagian sidebar, Anda sekarang bisa menggunakan tag
<aside>, yang mendefisikan konten selain konten halaman bisa itu sidebar atau berisikan footnote.
<div id="sidebar">
....
</div>
Anda bisa merubahnya menjadi seperti ini:
<aside id="sidebar">
......
</aside>
Dan untuk bagian footer :
<div id="footer">
…
</div>
Ganti menjadi seperti ini :
<footer>
…
</footer>
Bingung Sobat? :) kebanyakan kode ya. Jangan kabur dulu.....
Kalau Anda bingung, langsung aja liat contohnya secara lengkap yang telah saya buat ini, berdasarkan langkah-langkah diatas.
Ok, setelah Anda menyelesaikan semua langkah bagaimana meng-konvert HTML
atau XHTML Blogger Template menjadi valid HTML 5, maka hasilnya kurang
lebih seperti ini (dengan penambahan nama blog,logo, naviagsi,CSS style,
dan artikel) :
Contoh HTML 5 Website Standard:
Hasil dari dokumen HTML 5 untuk website standar diatas akan seperti gambar dibawah:
Note :
Penggunaan trailing slash (slash penutup) seperti "<../>"
pada HTML 5 tidak harus digunakan, walaupun masih vaild jika Anda
memakainya. Tidak seperti dokumen berbasis XHTML, yang lebih tegas
(harus memasang slash penutup) yaitu semua tag harus nested properly.
Dalam beberapa kasus dokumen online tampaknya masih diperlukan
pemasangan trailing slash untuk tag seperti <img>, <link>, <meta>, <br>.
Contoh:
<img src="url_image.png" />
Ketika Anda menambahkan elemen baru HTML5, Anda juga harus menambahkan
Styling CSS berikut dalam style sheet Anda untuk membantu browser lama
memahami apa yang harus dilakukan dengan unsur-unsur baru tersebut :
Contoh :
article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
OK Sob, cukup dulu....semoga ga tambah bingung ya mas bro and sis bro dengan artikel Cara Konvert HTML/XHTML ke HTML 5 :)
Feel free to ask me,ok!
Related Posts :