Home Unlabelled Tugas 3: Website Warung Tegal

Tugas 3: Website Warung Tegal

By
September 21, 2021
1 minuteRead
Add Comment

 Nama: Dyandra Paramitha Widyadhana

NRP: 05111940000119
Kelas: PWEB-B

Introduction

Pada penugasan ke-3, kami diminta untuk menambahkan fitur dari website Warung Tegal yang sebelumnya telah dikerjakan saat kelas. 


Isi dari Website Warung Tegal 

Website yang sebelumnya hanya menampilkan halaman utama, sekarang dapat melihat list makanan yang disediakan, lokasi (menggunakan Google Map) dan juga halaman form kontak. Adapun di halaman utama ditambahkan slideshow/carousell yang menampilkan makanan-makanan Warung Tegal dan video yang di-embed dari Youtube. Pada halaman Lokasi, dapat melakukan zoom-in dan zoom-out pada Google Map, dan untuk halaman form kontak sendiri terdapat form dari HTML yang dapat diisi. 

Tools Yang Digunakan: 

Untuk membuat profile sendiri, saya menggunakan HTML, dan CSS. 

HTML sebagai markup language digunakan untuk membuat struktur dan konten dari website CV tersebut. HTML yang saya gunakan yaitu HTML:5.

CSS digunakan untuk menentukan layout, style, serta keselarasan halaman website. Pada tugas kali ini saya menggunakan CSS berupa external CSS dikarenakan penggunaannya yang lumayan banyak untuk jenis tag/selector yang berbeda-beda, sehingga lebih efektif dan efisien menggunakan external CSS. Selain itu dengan external CSS, kode juga terlihat lebih mudah untuk dibaca dikarenakan terlihat rapi dan terstruktur.  

JS untuk menambahkan animasi slider pada carousell sehingga bisa berubah gambar. 

Untuk men-deploy, saya menggunakan Github Pages. 

Penampilan Website







Source Code

Terdapat beberapa file Source Code yang akan dilink yaitu: 

Contoh Source Code Halaman Utama: 


Copy
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Warung Tegal</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="wrapper">
 <header>
 <h1>Warung Tegal</h1>
 <nav>
 <ul>
 <li><a href="index.html" class="current">beranda</a></li>
 <li><a href="daftar.html">daftar masakan</a></li>
 <li><a href="tentang.html">lokasi</a></li>
 <li><a href="kontak.html">kontak</a></li>
 </ul>
 </nav>
 </header>
 <section class="courses-daftar">
 <article>
 <figure>
 <img src="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 yang berupa sejenis sup ayam dengan kuah yang berwarna kekuningan.</p>
 </article>
<article>
 <figure>
 <img src="images/pecel.jpg" alt="pecel" />
 <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="images/Sumatera-Selatan-Pempek.jpg" alt="pempek" width="290" height="190" />
 <figcaption>Pempek</figcaption>
 </figure>
 <hgroup>
 <h2>Pempek</h2>
 <h3>Makanan Nasi Goreng Menggunakan Rendang</h3>
 </hgroup>
 <p>Masakan yang terbuat dari sagu dan ikan ini memiliki rasa yang lezat dan gurih.</p>
 </article>
<article>
 <figure>
 <img src="images/Nusa-Tenggara-Barat-Ayam-Taliwang.jpg" alt="taliwang" width="290" height="190" />
 <figcaption>Ayam Taliwang</figcaption>
 </figure>
 <hgroup>
 <h2>Ayam Taliwang</h2>
 <h3>Makanan Khas Lombok</h3>
 </hgroup>
 <p>Banyak yang makan ayam taliwang pasti ingin menikmatinya lagi, karena rasa yang khas dan juga bumbu2 yang dibuat asli khas lombok.</p>
 </article>
<article>
 <figure>
 <img src="images/Tempe-Mendoan.jpg" alt="Tempe-Mendoan" width="290" height="190" />
 <figcaption>Tempe Mendoan</figcaption>
 </figure>
 <hgroup>
 <h2>Tempe Mendoan</h2>
 <h3>Makanan khas Jawa Tengah yang Gurih</h3>
 </hgroup>
 <p>Mendoan menjadi salah satu makanan yang paling diminati sebagian kalangan, karena memiliki rasa yang enak dan bisa diolah dengan berbagai hidangan apapun. Mau disayur bisa mau dibuat lauk juga bisa.</p>
 </article>
</section>
 <footer>
 &copy; 2021 Warung Tegal
 </footer>
 </div><!-- .wrapper -->
 </body>
</html>
Contoh Source Code External CSS: 

Copy
header,
section,
aside,
nav,
article,
figure,
figcaption {
 display: block;
}
body {
 color: #666666;
 background-color: #f9f8f6;
 background-image: url("images/background.png");
 background-position: top;
 font-family: "Goudy Bookletter 1911", sans-serif;
 line-height: 1.4em;
 margin: 0px;
}
header {
 border-radius: 1rem;
}
.wrapper {
 width: 1000px;
 margin: 20px auto 20px auto;
 /* border: 2px solid */
 background-color: #ffffff;
 border-radius: 1rem;
}
header {
 height: 160px;
 background-image: url(images/header.gif.gif);
}
h1 {
 text-indent: -9999px;
 width: 940px;
 height: 130px;
 margin: 0px;
}
nav,
footer {
 clear: both;
 color: #ffffff;
 background-color: #ec9736;
 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;
}
section.courses-daftar{
 float: left;
 width: 659px;
 /* border-right: 1px solid #eeeeee; */
}
article {
 clear: both;
 overflow: auto;
 width: 100%;
}
hgroup {
 margin-top: 40px;
}
figure {
 float: left;
 width: 305px;
 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;
}
* {
 box-sizing: border-box
}
/* Slideshow container */
.slideshow-container {
 max-width: 1000px;
 position: relative;
 margin: auto;
}
/* Hide the images by default */
.mySlides {
 display: none;
}
/* Next & previous buttons */
.prev,
.next {
 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 user-select: none;
}
/* Position the "next button" to the right */
.next {
 right: 0;
 border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
 background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 8px;
 width: 100%;
 text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;
}
/* The dots/bullets/indicators */
.dot {
 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;
}
.active,
.dot:hover {
 background-color: #717171;
}
/* Fading animation */
.fade {
 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;
}
@-webkit-keyframes fade {
 from {
 opacity: .4
 }
to {
 opacity: 1
 }
}
@keyframes fade {
 from {
 opacity: .4
 }
to {
 opacity: 1
 }
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
 width: 100%; /* Full width */
 padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
 border-radius: 4px; /* Rounded borders */
 box-sizing: border-box; /* Make sure that padding and width stays in place */
 margin-top: 6px; /* Add a top margin */
 margin-bottom: 16px; /* Bottom margin */
 resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
 }
/* Style the submit button with a specific background color etc */
 input[type=submit] {
 background-color: #04AA6D;
 color: white;
 padding: 12px 20px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 }
/* When moving the mouse over the submit button, add a darker green color */
 input[type=submit]:hover {
 background-color: #45a049;
 }
/* Add a background color and some padding around the form */
 .container {
 border-radius: 5px;
 background-color: #f2f2f2;
 padding: 20px;
 }


Penutup

Dari tugas yang diberikan ini, saya berlatih cara menggunakan CSS secara lebih rapi, dan juga berbagai elemen baru dari HTML yang sebelumnya belum digunakan. Selain itu, saya juga berlatih menggunakan JS untuk memperkaya website yang telah dibuat. 



Tags :
Subscribe to: Post Comments ( Atom )

Leave a Comment

No comments:

Powered by Blogger.

Created By ThemeXpose · Powered by Blogger
All rights reserved