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> 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"> <!-- <article> element --> <article id="post"> <!-- <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). </p> <p> Web yang dibangun sesuai standard (web standard) juga harus mempertimbangkan beberapa aspek diantaranya adalah harus mengedapankan kode yang bersih (clean), valid dan dapat digunakan kembali, dapat diakses oleh semua orang baik penyandang cacat, buta warna dan semacamnya (accessible), juga bersahabat dengan search engine (search engine friendly). </p> <!-- <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>© 2015 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