apaCara
.com
editor
HTML
CSS
JS
PREVIEW
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Mengenal Web Standard</title> <style> /* CSS Code */ body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; max-width: 960px; margin:0 auto; padding: 1em; font-size: 100%; } p { font-family: Arial, Helvetica, sans-serif; font-size: 0.875em; line-height: 1.5; } a { text-decoration: none; } a:hover { border-bottom: 1px solid blue; } ul { margin:0; padding:0; list-style:none; } #header ul li { display:inline-block; padding: .5em; } #content{ width: 70%; float: left; } #content section { margin-top: 2em; border-top: 2px solid #ccc; } #sidebar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 30%; float: right; padding-left: 1em; } section h3+p { border-bottom: 1px solid #ccc; padding-bottom: 1em; } section article { border-bottom: 1px solid #ccc; line-height:normal; } #footer { clear:both; text-align:center; padding-top: 1em; } </style> </head> <body> <!-- <header> untuk <body> element - header utama --> <header id="header" role="banner"> <h1>Belajar Bersama dul</h1> <!-- <nav> navigasi --> <nav role="navigation"> <ul> <li><a href="#">Artikel Terbaru</a></li> <li><a href="#">Artikel Populer</a></li> <li><a href="#">Penulis</a></li> <li><a href="#">Hubungi Kami</a></li> </ul> </nav> </header> <!-- <main> element --> <main id="content" class="group" role="main"> <!-- <article> element --> <article id="post" role="article"> <!-- <header> untuk <article> element --> <header> <h2>Mengenal Web Standard</h2> <p>Ditulis oleh: dul, <time datetime="2015-03-07T13:00">07 Maret 2015, pkl. 13:00</time> </p> </header> <p> Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua <em>device</em> (smartphone, tablet, desktop dan lain sebagainya). Web Standard mencakup beberapa hal berikut: </p> <section> <h3>HTML5</h3> <p> HTML5 adalah versi terbaru dari spesifikasi HTML yang yang dikembangkan oleh W3C. Sebenarnya ada dua versi spesifikasi, satu dikembangkan oleh WHATWG dan satunya lagi oleh W3C. </p> </section> <section> <h3>CSS 3</h3> <p> CSS3 atau CSS Level 3 adalah versi terbaru dari Cascading Style Sheets yang digunakan untuk menggambarkan presentasi sebuah halaman web atau memberi style tampilan web. </p> </section> <!-- <aside> untuk <article> element --> <aside> <h3>Istilah Kata:</h3> <dl> <dt>W3C</dt> <dd>World Wide Web Consortium. Organisasi dunia yang mengelola dan membakukan web standard.</dd> </dl> <dl> <dt>Device</dt> <dd>Alat. Alat yang dimaksud adalah semua teknologi yang digunakan untuk mengakses internet/web.</dd> </dl> </aside> <!-- <section> untuk <article> element --> <section> <h3>Komentar</h3> <p>Berkomentarlah dengan bijak!</p> <!-- article> pada <section> element - komentar user menggunakan <article> --> <article> <!-- article header --> <header> <h4>Halwa Fadhilah</h4> <p><em><time datetime="2015-03-07T16:00">07 Maret 2015, pkl. 16:00</time></em></p> </header> <p>Terima Kasih. Web standar memang penting, supaya bisa dinikmati semua orang, bahkan yang cacat sekalipun. Sebagai tambahan, W3C bisa dikunjungi di w3.org</p> <!-- article footer --> <footer> <p><a href="#" rel="nofollow">Halwa Blog</a></p> </footer> </article> <!-- <article> pada <section> element - komentar user menggunakan <article> --> <article> <header> <h4>Rodi4h Design</h4> <p><em><time datetime="2015-03-07T20:00">07 Maret 2015, pkl. 20:00</time></em></p> </header> <p>W3C terbuka untuk siapapun diseluruh penjuru dunia. Kita bisa bergabung dan berbagi bersama.</p> <footer> <p><a href="#" rel="nofollow">Rodiah Blog</a></p> </footer> </article> </section> </article> </main> <!-- <aside> pada <body> element --> <aside id="sidebar" role="complementary"> <h3>Arsip</h3> <ul> <li><a href="#">Maret 2015</a></li> <li><a href="#">Februari 2015</a></li> <li><a href="#">Januari 2015</a></li> <li><a href="#">Desember 2014</a></li> <li><a href="#">November 2014</a></li> </ul> </aside> <!-- <footer> pada <body> element --> <footer id="footer" role="contentinfo"> <p>© 2017 Fadlullah Fadul. All Rights Reserved.</p> <ul> <li><a href="https://www.apacara.com">Home</a></li> <li><a href="/p/about.html">About</a></li> <li><a href="/p/copyright.html">Copyright</a></li> <li><a href="/p/privacy.html">Privacy</a></li> </ul> </footer> </body> </html>
/* CSS code */
// javascript code