Tutorial Komputer

Situs belajar bahasa pemrograman secara online, memberikan informasi, pengembang dan mitra. Termasuk siaran pers, video, screenshot dan download.

» Unlabelled » Migrasi HTML5

Migrasi HTML5



Migrasi dari HTML4 ke HTML5

Bab ini sepenuhnya tentang bagaimana untuk bermigrasi dari halaman HTML4 ke halaman HTML5.
Bab ini menunjukkan bagaimana mengkonversi halaman HTML4 yang ada ke dalam halaman HTML5, tanpa merusak apapun dari konten asli atau struktur.
anda dapat bermigrasi ke HTML5 dari HTML4, dan XHTML, menggunakan cara yang sama.
HTML4HTML5
<Div id = "header"><Header>
<Div id = "menu"><Nav>
<Div id = "content"><Section>
<Div id = "post"><Article>
<Div id = "footer"><Footer>


Contoh HTML4


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<style>
body {font-family:times new roman;font-size:0.8em;}
div#header,div#footer,div#content,div#post
{border:1px solid black; margin: 5px; margin-bottom:15px; padding:8px; background-color:white;}
div#header,div#footer{color:white;background-color:black;margin-bottom:5px;}
div#content{background-color:#ddd;}
div#menu ul {margin:0;padding:0;}
div#menu ul li {display:inline; margin:5px; border:1px solid white; color:black; background-color:white;}
</style>

<title>Latihan HTML4</title>
</head>

<body>

<div id="header">
<h1>Header</h1>
</div>

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

<div id="content">
<h2>Content</h2>

<div id="post">
<h2>Artikelku</h2>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
</div>


<div id="post">
<h2>Artikelku</h2>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
</div>

</div>

<div id="footer">
<p>&copy; Copyright .....</p>
</div>
</body>

</html>


Ubah DOCTYPE ke HTML 5

Mengubah DOCTYPE, dari DOCTYPE HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DOCTYPE HTML5:
<!DOCTYPE HTML>


Ubah Pengkodean ke HTML5 

Mengubah informasi encoding, dari HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

HTML 5:
<meta charset="utf-8">

Tambahkan The Shiv

HTML5 elemen semantik yang didukung di semua browser modern.
Selain itu, Anda dapat "mengajar" browser lama bagaimana menangani "unsur-unsur yang tidak diketahui".
Tambahkan shiv untuk dukungan Internet Explorer:
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Menambahkan CSS untuk HTML5 Semantic Elements

Lihatlah gaya CSS yang ada:
body {font-family:times new roman;font-size:0.8em;}
div#header,div#footer,div#content,div#post
{border:1px solid black; margin: 5px; margin-bottom:15px; padding:8px; background-color:white;}
div#header,div#footer{color:white;background-color:black;margin-bottom:5px;}
div#content{background-color:#ddd;}
div#menu ul {margin:0;padding:0;}
div#menu ul li {display:inline; margin:5px; border:1px solid white; color:black; background-color:white;}

Duplikat dengan gaya CSS yang sama untuk HTML5 elemen semantik:
body {font-family:times new roman;font-size:0.8em;}
header,footer,section,article
{border:1px solid black; margin: 5px; margin-bottom:15px; padding:8px; background-color:white;}
header,footer{color:white;background-color:black;margin-bottom:5px;}
section {background-color:#ddd;}
nav ul {margin:0;padding:0;}
nav ul li {display:inline; margin:5px; border:1px solid white; color:black; background-color:white;}

Ubah ke HTML5 <header> dan <footer>

Mengubah <div> elemen dengan id = "header" dan id = "footer":
<div id="header">
<h1>Header</h1>
</div>
.
.
.
<div id="footer">
<p>&copy; Copyright .....</p>
</div>
untuk HTML5 semantik <header> dan <footer> elemen:
<header>
<h1>Header</h1>
</header>
.
.
.
<footer>
<p>&copy; Copyright .....</p>
</footer>

Ubah ke HTML5 <nav>

Mengubah <div> elemen dengan id = "menu":
<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

ke semantik <nav> elemen HTML5:
<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>

Ubah ke HTML5 <section>

Mengubah <div> elemen dengan id = "content":
<div id="content">
.
.
.
</div>

ke HTML5 semantik <section> elemen:
<section>
.
.
.
</section>

Ubah ke HTML5 <article>

Mengubah semua elemen <div> dengan class = "post":
<div id="post">
<h2>Artikelku</h2>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
</div>

untuk HTML5 semantik <article> elemen:
<article>
<h2>Artikelku</h2>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
</article>

Sebuah Khas HTML5 Halaman

Akhirnya Anda dapat menghapus <head> tag. Mereka tidak diperlukan di HTML5:
<!DOCTYPE HTML>
<html lang="en">
<title>Latihan HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
body {font-family:times new roman;font-size:0.8em;}
header,footer,section,article
{border:1px solid black; margin: 5px; margin-bottom:15px; padding:8px; background-color:white;}
header,footer{color:white;background-color:black;margin-bottom:5px;}
section {background-color:#ddd;}
nav ul {margin:0;padding:0;}
nav ul li {display:inline; margin:5px; border:1px solid white; color:black; background-color:white;}
</style>

<body>

<header>
<h1>Header</h1>
</header>

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>

<section>
<h2>Content</h2>

<article>
<h2>Artikelku</h2>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
</article>


<article>
<h2>Artikelku</h2>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
</article>

</section>

<footer>
<p>&copy; Copyright .....</p>
</footer>
</body>

</html>

Perbedaan Antara <article> <section> dan <div>

Ada yang membingungkan, perbedaan dalam standar HTML5, antara <article> <section> dan <div>.
Dalam standar HTML5, <section> elemen didefinisikan sebagai sebuah blok elemen terkait.
The <article> elemen didefinisikan sebagai lengkap, blok mandiri elemen terkait.
<Div> elemen didefinisikan sebagai sebuah blok anak-anak elemen.
Bagaimana menafsirkan itu?
Dalam contoh di atas, kita telah menggunakan <section> sebagai wadah untuk berhubungan <artikel>.
Tapi, kita bisa menggunakan <article> sebagai wadah untuk artikel juga.
Berikut adalah beberapa contoh yang berbeda:

<Article> di <article>:

<article>
<h2>Content</h2>

<article>
<h2>Artikelku</h2>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
</article>

<article>
<h2>Artikelku</h2>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
</article>

</article>

<Div> di <article>:

<article>
<h2>Content</h2>

<div class="artikel">
<h2>Artikelku</h2>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
</div>

<div class="artikel">
<h2>Artikelku</h2>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
<p>post post post post post post post post post post post post post post post post
post post post post</p>
</div>

</article>



Kembali Keatas ⇑





0 komentar:

Posting Komentar

Migrasi HTML5