HTML5 Migrasi - Information Technology

Information Technology

Berita IT & Tutorial

test banner
  • Home

    • Post Top Ad

    Responsive Ads Here
    HTML5 Migrasi
    Home HTML HTML5 Migrasi

    HTML5 Migrasi

    Share This

    Migrasi dari HTML4 ke HTML5

    Bab ini sepenuhnya tentang bagaimana bermigrasi dari khas HTML4 halaman untuk khas HTML5 halaman.
    Bab ini menunjukkan bagaimana mengkonversi halaman HTML4 yang ada ke dalam halaman HTML5, tanpa merusak apapun dari konten asli atau struktur.

    Sebuah Khas HTML4 Halaman

    Contoh:
    <!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">
    <title>HTML4</title>
    <style>
      body {font-family:Verdana,sans-serif;font-size:0.8em;}
      div#header,div#footer,div#content,div#post 
      {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
      div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
      div#content {background-color:#ddd;}
      div#menu ul {margin:0;padding:0;}
      div#menu ul li {display:inline; margin:5px;}
    </style>
    </head>
    <body>

    <div id="header">
      <h1>Monday Times</h1>
    </div>

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

    <div id="content">
    <h2>News Section</h2>

    <div id="post">
      <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
    </div>

    <div id="post">
      <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
    </div>

    </div>

    <div id="footer">
      <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
    </div>

    </body>
    </html>

    Ubah ke HTML5 DOCTYPE


    Mengubah DOCTYPE , dari doctype HTML4:

    Contoh:

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

    dengan DOCTYPE HTML5:
    <!DOCTYPE html>

    Ubah ke HTML5 Encoding

    Ubah pengkodean informasi, dari HTML4:
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    untuk HTML5:
    <meta charset="utf-8">

    Tambahkan The Shiv

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

    Tambahkan CSS untuk HTML5 Semantic Elements

    Lihatlah gaya CSS yang ada:
    div#header,div#footer,div#content,div#post {
        border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
    }
    div#header,div#footer {
        color:white;background-color:#444;margin-bottom:5px;
    }
    div#content {
        background-color:#ddd;
    }
    div#menu ul {
        margin:0;padding:0;
    }
    div#menu ul li {
        display:inline; margin:5px;
    }
    Duplikat dengan gaya CSS yang sama untuk HTML5 elemen semantik:
    header,footer,section,article {
        border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
    }
    header,footer {
        color:white;background-color:#444;margin-bottom:5px;
    }
    section {
        background-color:#ddd;
    }
    nav ul  {
        margin:0;padding:0;
    }
    nav ul li {
        display:inline; margin:5px;
    }

    Ubah ke HTML5 <header> dan <footer>

    Mengubah <div> elemen dengan id = "header" dan id = "footer" :
    <div id="header">
      <h1>Monday Times</h1>
    </div>
    .
    .
    .
    <div id="footer">
      <p>&amp;copy; 2014 W3Schools. All rights reserved.</p>
    </div>
    untuk HTML5 semantik <header> dan <footer> elemen:
    <header>
      <h1>Monday Times</h1>
    </header>
    .
    .
    .
    <footer>
      <p>&copy; 2014 W3Schools. All rights reserved.</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 HTML5 <nav> Elemen:
    <nav>
      <ul>
        <li>News</li>
        <li>Sports</li>
        <li>Weather</li>
      </ul>
    </nav>

    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 <div> elemen dengan class = "post" :
    <div class="post">
      <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
    </div>
    untuk HTML5 semantik <article> elemen:
    <article>
      <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
    </article>
    Hilangkan "tidak lagi diperlukan" <style> elemen:
    div#header,div#footer,div#content,div#post {
        border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
    }
    div#header,div#footer {
        color:white;background-color:#444;margin-bottom:5px;
    }
    div#content {
        background-color:#ddd;
    }
    div#menu ul {
        margin:0;padding:0;
    }
    div#menu ul li {
        display:inline; margin:5px;
    }

    Sebuah Khas HTML5 Halaman

    Akhirnya Anda dapat menghapus <head> tag. Mereka tidak diperlukan dalam HTML5:
    Contoh:
    <!DOCTYPE html>
    <html lang="en">
    <title>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:Verdana,sans-serif;font-size:0.8em;
    }
    header,footer,section,article {
        border:1px solid grey;
        margin:5px;margin-bottom:15px;padding:8px;
        background-color:white;
    }
    header,footer {
        color:white;background-color:#444;margin-bottom:5px;
    }
    section {
        background-color:#ddd;
    }
    nav ul {
        margin:0;padding:0;
    }
    nav ul li {
        display:inline; margin:5px;
    }
    </style>
    <body>

    <header>
      <h1>Monday Times</h1>
    </header>

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

    <section>
    <h2>News Section</h2>

    <article>
      <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
    </article>

    <article>
    <h2>News Article</h2>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
      <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
      lurum hurum turum.</p>
    </article>

    </section>

    <footer>
      <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
    </footer>

    </body>
    </html>

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

    Ada membingungkan (kurangnya) perbedaan dalam standar HTML5, antara <article> <section> dan <div>.
    Dalam standar HTML5, yang <section> elemen didefinisikan sebagai sebuah blok elemen terkait.
    The <article> elemen didefinisikan sebagai lengkap, blok mandiri elemen terkait.
    <Div> elemen didefinisikan sebagai blok 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>Famous Cities</h2>

    <article>
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </article>

    <article>
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </article>

    <article>
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </article>

    </article>

    <Div> di <article>:


    <article>

    <h2>Famous Cities</h2>

    <div class="city">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </div>

    <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </div>

    </article>

    <Div> di <section> di <article>:


    <article>

    <section>
    <h2>Famous Cities</h2>

    <div class="city">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </div>

    <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </div>
    </section>

    <section>
    <h2>Famous Countries</h2>

    <div class="country">
    <h2>England</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div class="country">
    <h2>France</h2>
    <p>Paris is the capital and most populous city of France.</p>
    </div>

    <div class="country">
    <h2>Japan</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
    </div>
    </section>

    </article>



    sumber:w3schools



    Tags
    Share This
    Author Image

    About Fafa

    By di
    Label:

    2 comments:

    Subscribe to: Post Comments (Atom)

    Post Bottom Ad

    Responsive Ads Here

    Author Details

    Templatesyard is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates which are professionally designed and perfectlly seo optimized to deliver best result for your blog.

    Pages