Tugas 3-HTML 5
Pada tugas ke-3 diminta untuk membuat website warung tegal dengan menggunakan html 5, berikut ini adalah hasilnya
Dan berikut ini adalah codenya
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Web Warung Tegal</title> | |
| <style type="text/css"> | |
| header, section, footer, aside, nav, article, figure, figcaption { | |
| display: block;} | |
| body { | |
| color: #666666; | |
| background-color: #f9f8f6; | |
| background-image: url("foto/dark-wood.jpg"); | |
| background-position: center; | |
| font-family: Georgia, Times, serif; | |
| line-height: 1.4em; | |
| margin: 0px;} | |
| .wrapper { | |
| width: 940px; | |
| margin: 20px auto 20px auto; | |
| border: 2px solid #000000; | |
| background-color: #ffffff;} | |
| header { | |
| height: 160px; | |
| background-image: url(foto/header.png);} | |
| h1 { | |
| text-indent: -9999px; | |
| width: 940px; | |
| height: 130px; | |
| margin: 0px;} | |
| nav, footer { | |
| clear: both; | |
| color: #ffffff; | |
| background-color: #aeaca8; | |
| height: 30px;} | |
| nav ul { | |
| margin: 0px; | |
| padding: 5px 0px 5px 30px;} | |
| nav li { | |
| display: inline; | |
| margin-right: 40px;} | |
| nav li a { | |
| color: #ffffff;} | |
| nav li a:hover, nav li a.current { | |
| color: #000000;} | |
| section.courses { | |
| float: left; | |
| width: 659px; | |
| border-right: 1px solid #eeeeee;} | |
| article { | |
| clear: both; | |
| overflow: auto; | |
| width: 100%;} | |
| hgroup { | |
| margin-top: 40px;} | |
| figure { | |
| float: left; | |
| width: 290px; | |
| height: 220px; | |
| padding: 5px; | |
| margin: 20px; | |
| border: 1px solid #eeeeee;} | |
| figcaption { | |
| font-size: 90%; | |
| text-align: left;} | |
| aside { | |
| width: 230px; | |
| float: left; | |
| padding: 0px 0px 0px 20px;} | |
| aside section a { | |
| display: block; | |
| padding: 10px; | |
| border-bottom: 1px solid #eeeeee;} | |
| aside section a:hover { | |
| color: #985d6a; | |
| background-color: #efefef;} | |
| a { | |
| color: #de6581; | |
| text-decoration: none;} | |
| h1, h2, h3 { | |
| font-weight: normal;} | |
| h2 { | |
| margin: 10px 0px 5px 0px; | |
| padding: 0px;} | |
| h3 { | |
| margin: 0px 0px 10px 0px; | |
| color: #de6581;} | |
| aside h2 { | |
| padding: 30px 0px 10px 0px; | |
| color: #de6581;} | |
| footer { | |
| font-size: 80%; | |
| padding: 7px 0px 0px 20px;} | |
| </style> | |
| <!--[if lt IE 9]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <header> | |
| <h1>Warung Tegal</h1> | |
| <nav> | |
| <ul> | |
| <li><a href="" class="current">beranda</a></li> | |
| <li><a href="">Daftar Masakan</a></li> | |
| <li><a href="">Katering</a></li> | |
| <li><a href="">Tentang</a></li> | |
| <li><a href="">Kontak</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <section class="courses"> | |
| <article> | |
| <figure> | |
| <img src="foto/soto.jpg" alt="soto" width="280" height="200" /> | |
| <figcaption>Soto Indonesia</figcaption> | |
| </figure> | |
| <hgroup> | |
| <h2>Soto Ayam</h2> | |
| <h3>Makanan Berkuah</h3> | |
| </hgroup> | |
| <p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis sup ayam dengan kuah yang berwarna kekuningan.</p> | |
| </article> | |
| <article> | |
| <figure> | |
| <img src="foto/pecel.jpg" alt="pecel" width="280" height="200"/> | |
| <figcaption>Pecel Indonesia</figcaption> | |
| </figure> | |
| <hgroup> | |
| <h2>Masakan Pecel</h2> | |
| <h3>Makanan dengan Bumbu Kacang</h3> | |
| </hgroup> | |
| <p>Pecel adalah makanan yang menggunakan bumbu sambal kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</p> | |
| </article> | |
| <article> | |
| <figure> | |
| <img src="foto/nasi-kuning.jpg" alt="nasi-kuning" width="280" height="200"/> | |
| <figcaption>Nasi Kuning</figcaption> | |
| </figure> | |
| <hgroup> | |
| <h2>Nasi Kuning</h2> | |
| <h3>Nasi dimasak dengan kunyit</h3> | |
| </hgroup> | |
| <p>Nasi kuning adalah makanan khas Indonesia. Makanan ini terbuat dari beras yang dimasak bersama dengan kunyit serta santan dan rempah-rempah.</p> | |
| </article> | |
| <article> | |
| <figure> | |
| <img src="foto/rawon.jpg" alt="rawon" width="280" height="200"/> | |
| <figcaption>Rawon</figcaption> | |
| </figure> | |
| <hgroup> | |
| <h2>Rawon</h2> | |
| <h3>Makanan berkuah</h3> | |
| </hgroup> | |
| <p>Rawon adalah masakan Indonesia berupa sup daging berkuah hitam dengan campuran bumbu khas yang menggunakan kluwek.</p> | |
| </article> | |
| </section> | |
| <aside> | |
| <section class="popular-recipes"> | |
| <h2>Masakan Populer</h2> | |
| <a href="">Sayur Sop</a> | |
| <a href="">Sayur Asem</a> | |
| <a href="">Sayur Lodeh</a> | |
| <a href="">Sayur Bayam</a> | |
| </section> | |
| <section class="contact-details"> | |
| <h2>Kontak</h2> | |
| <p>Warung Tegal<br /> | |
| di seluruh indonesia | |
| </section> | |
| <section class="Food review"> | |
| <h2>Review Makanan</h2> | |
| <iframe src="https://www.youtube.com/embed/CgY_JvgnOvM" width="250" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </section> | |
| </aside> | |
| <footer> | |
| © 2015 Warung Tegal | |
| </footer> | |
| </div><!-- .wrapper --> | |
| </body> | |
| </html> |
Comments
Post a Comment