Tugas Pemrograman Web 3
Tugas 3 Pemrograman Web D
Membuat Website HTML Sederhana Warung Tegal
Pada Minggu Ke-3 kami mendapatkan Tugas Untuk Membuat Web HTML sederhana, yaitu website warung tegal, Disini saya menambahkan inline embedded styling menggunakan CSS agar tampilan website menjadi lebih menarik.Berikut ini adalah tampilan dari Website yang telah saya buat :
Berikut ini source code dari Program tersebut :
<!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("https://st2.depositphotos.com/3922387/8480/i/950/depositphotos_84806032-stock-photo-light-beige-paper-texture-background.jpg.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(http://www.nyekrip.com/wp-content/uploads/2015/custom/images/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: #655f60;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;}
h3 {
margin: 0px 0px 10px 0px;
color: yellowgreen;}
aside h2 {
padding: 30px 0px 10px 0px;
color: yellowgreen;}
footer {
padding : 20px;
color : white;
background-color : #00a2c6
}
</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>
<b><li><a href="http://localhost" class="current">Beranda</a></li>
<li><a href="http://localhost">Daftar Masakan</a></li>
<li><a href="http://localhost">Catering</a></li>
<li><a href="http://localhost">Tentang</a></li>
<li><a href="http://localhost">Contacts</a></li></b>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="https://cdn.idntimes.com/content-images/post/20210108/87804412-2516083181937666-2549436817478186764-n-2689d2e5d6520e7a751c8a9c1243c454_600x400.jpg" alt="soto" width="290" />
<b>
<figcaption>Soto Lamongan</figcaption>
</b>
</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>
<b>
<img src="https://obs.line-scdn.net/0hggSteFogOEhuDRBKsDBHH1RbOyddYStLCjtpVj5jZnwXOntLUGwnfUIJMy1Hbn8WB2h0LkMEI3kQbX9JAm8n/w644" alt="pecel" width="290" />
<figcaption>Pecel Ponorogo</figcaption>
</b>
</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>
</section>
<aside>
<section class="popular-recipes">
<h2>Masakan Populer</h2>
<a href="http://localhost">Sayur Sop</a>
<a href="http://localhost">Sayur Asem</a>
<a href="http://localhost">Sayur Lodeh</a>
<a href="http://localhost">Sayur Bayam</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>Warung Tegal<br />
di seluruh indonesia
</section>
</aside>
<footer>
© 2021 Warung Tegal "Ponorogo"
</footer>
</div><!-- .wrapper -->
</body>
</html>