Tugas 3 Pemrograman Web - Membuat Website dengan HTML5
Tugas 3 kali ini diperintahkan untuk membuat website dengan mengimplementasikan HTML5.
Berikut merupakan Source Code,
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> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="assets/css/bootstrap.css"> | |
| <title>Web Warung Tegal</title> | |
| <style> | |
| header, section, footer, aside, nav, article, figure, figcaption { | |
| display: block; | |
| } | |
| body { | |
| background-color: whitesmoke; | |
| background-image: url("http://www.nyekrip.com/wp-content/uploads/2015/custom/images/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 #ddd; | |
| background-color: #ffffff; | |
| } | |
| header { | |
| height: 160px; | |
| background-image: url(http://www.nyekrip.com/wp-content/uploads/2015/custom/images/header.png); | |
| background-color: #ffdb4d; | |
| } | |
| h1 { | |
| text-indent: -9999px; | |
| width: 940px; | |
| height: 130px; | |
| margin: 0px; | |
| } | |
| nav, footer { | |
| clear: both; | |
| color: black; | |
| background-color: #ffdb4d; | |
| height: 30px; | |
| } | |
| nav ul { | |
| margin: 0px; | |
| padding: 5px 0px 5px 30px; | |
| } | |
| nav li { | |
| display: inline; | |
| margin-right: 40px; | |
| } | |
| nav li a { | |
| color: grey; | |
| } | |
| nav li a:hover, nav li a.current { | |
| color: #000000; | |
| } | |
| section.courses { | |
| float: left; | |
| width: 659px; | |
| border-right: 1px solid #ddd; | |
| } | |
| 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 #ddd; | |
| } | |
| 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: goldenrod; | |
| 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> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <header> | |
| <h1>Warung Tegal</h1> | |
| <nav> | |
| <ul> | |
| <li><a href="#" class="current">Home</a></li> | |
| <li><a href="#">Menu</a></li> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <section class="courses"> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/1Hohu_f9-Kk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </iframe> | |
| <article> | |
| <figure> | |
| <img src="http://www.nyekrip.com/wp-content/uploads/2015/custom/images/soto.jpg" alt="soto" /> | |
| <figcaption>Soto Indonesia</figcaption> | |
| </figure> | |
| <hgroup> | |
| <h2>Soto Ayam</h2> | |
| <h3>Makanan Berkuah</h3> | |
| </hgroup> | |
| <p>Soto ayam adalah makanan khas Indonesia berupa sejenis sup ayam dengan kuah yang berwarna kekuningan.</p> | |
| </article> | |
| <article> | |
| <figure> | |
| <img src="http://www.nyekrip.com/wp-content/uploads/2015/custom/images/pecel.jpg" alt="pecel" /> | |
| <figcaption>Pecel Indonesia</figcaption> | |
| </figure> | |
| <hgroup> | |
| <h2>Masakan Pecel</h2> | |
| <h3>Makanan dengan Bumbu Kacang</h3> | |
| </hgroup> | |
| <p> Pecel merupakan makanan yang menggunakan bumbu sambal kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</p> | |
| </article> | |
| </section> | |
| <aside> | |
| <section class="popular-recipes"> | |
| <h3>Popular Cuisine</h3> | |
| <a href="#">Sayur Sop</a> | |
| <a href="#">Sayur Asem</a> | |
| <a href="#">Sayur Bayem</a> | |
| <a href="#">Sayur Lodeh</a> | |
| </section> | |
| <section class="contact-details"> | |
| <h2>Contact</h2> | |
| <p>Warung Tegal <br /> | |
| di seluruh Indonesia | |
| </section> | |
| </aside> | |
| <footer> | |
| © 2021, Warung Tegal | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
Berikut merupakan dokumentasi website,
Link website disini.
Sekian tugas 3, terima kasih.
Comments
Post a Comment