Pertemuan 3 - Pemrograman Web
Sasmita Wiropati - 5053231016 - RPL - PWEB (M) - GitHub Hosting
Penugasan Tabel
Pertemuan ketiga ini, kami para mahasiswa diminta untuk membuat ulang dua tabel. Pertama tabel yang berisi skor dan yang mengandung deksripsi produk. Segala source code dalam pengerjaan tugas maupun latihan Pemrograman Web bisa diakses melalui Repo GitHub saya.
Berikut hasil tampak web dari pemrograman yang telah saya lakukan:
Source Code Tabel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tugas-Pertemuan-3</title>
<style>
.table1{
border-collapse: collapse;
}
.table1 th{
background-color: dodgerblue;
}
.table1, .table1 th, .table1 td{
border: 1px solid black;
}
.table1 th{
color: white;
}
.table2 th{
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Tugas Pertemuan 3</h1>
<table class="table1" border="1" cellpadding="5">
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr>
<td>Robby</td>
<td>76</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>Rendi</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Alfian</td>
<td>96</td>
<td>70</td>
<td>71</td>
</tr>
</table>
<table class="table2" border="1">
<tr>
<th colspan="3">Produk Unggulan</th>
</tr>
<tr>
<td rowspan="3"><img src="./img/images.png"></td>
<td>Nama</td>
<td>Benih Kode</td>
</tr>
<tr>
<td>Harga</td>
<td>Rp 192.000</td>
</tr>
<tr>
<td>Fitur</td>
<td>
<ul>
<li>Dilengkapi Dokumentasi</li>
<li>Ukuran: 31MB</li>
<li>Masa Tanam: 6 Bulan</li>
<li>Lisensi: MIT</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Source Code Event Page:
<!--Reference: https://www.geeksforgeeks.org/design-an-event-webpage-using-html-css/-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Page</title>
<style>
body{
background-image: url(./img/cool-colorful.jpg);
margin: 0;
padding: 0;
}
.separator{
height: 100vh;
}
table{
margin-left: auto;
margin-right: auto;
padding: 2%;
}
table col{
width: 50%;
}
.left-box{
background: rgba(0, 0, 0, .9);
}
.right-box{
background: rgba(200, 200, 200, .9)
}
.box-container{
color: white;
padding: 20px;
}
.event-content{
background-color: white;
border: 1px solid black;
margin: 10px;
padding: 0;
}
.event-date{
text-align: center;
background-color: black;
color: white;
width: 150px;
}
.event-date p{
margin: 0;
}
.day-date{
font-size: 36px;
font-weight: bold;
}
.event-title{
font-weight: bold;
}
.event-button{
background-color: white;
border-radius: 10px;
padding: 10px;
}
.event-button:hover{
background-color: hsl(0, 0%, 95%);
}
</style>
</head>
<body>
<table class="separator" border="1">
<col span="2">
<td class="left-box">
<div class="box-container">
<h1>EVENTS AND SHOWS</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique eum ut vel fuga soluta, quas,
ipsum doloremque recusandae nisi laborum nesciunt delectus aut explicabo culpa qui ducimus.
Molestias eaque ipsum rerum nisi facilis? Fugit eos provident impedit inventore dolorem laborum
iure deleniti magnam eius recusandae libero doloremque, ipsum ratione sapiente delectus dignissimos
aut quidem unde blanditiis earum? Veniam, sit quae magni, nesciunt vel libero ducimus, delectus quia
omnis ratione velit consectetur esse mollitia! Deserunt laborum impedit cupiditate veniam consectetur
vitae, sequi aspernatur omnis repudiandae rerum facilis officia enim nam repellat totam ea maiores nisi ratione.
Totam nesciunt voluptatibus perferendis tempora.
</p>
</div>
</td>
<td class="right-box">
<div class="event-container">
<table class="event-content">
<tr>
<td rowspan="3" class="event-date">
<p class="day-date">15</p>
<p class="month-date">March</p>
</td>
<td class="event-title">Where is the event happening?</td>
</tr>
<tr>
<td class="event-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi error eos nemo hic dolores assumenda libero fugiat autem nulla sapiente, voluptatum a consequuntur fugit numquam voluptate tempore eum voluptatem cumque rerum, architecto quae. Adipisci explicabo molestias dolores illum libero eveniet id nemo iusto numquam, iure eum ducimus quidem provident nihil.</td>
</tr>
<tr>
<td><button class="event-button">View Details</button></td>
</tr>
</table>
<table class="event-content">
<tr>
<td rowspan="3" class="event-date">
<p class="day-date">27</p>
<p class="month-date">May</p>
</td>
<td class="event-title">Where is the event happening?</td>
</tr>
<tr>
<td class="event-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi error eos nemo hic dolores assumenda libero fugiat autem nulla sapiente, voluptatum a consequuntur fugit numquam voluptate tempore eum voluptatem cumque rerum, architecto quae. Adipisci explicabo molestias dolores illum libero eveniet id nemo iusto numquam, iure eum ducimus quidem provident nihil.</td>
</tr>
<tr>
<td><button class="event-button">View Details</button></td>
</tr>
</table>
<table class="event-content">
<tr>
<td rowspan="3" class="event-date">
<p class="day-date">12</p>
<p class="month-date">August</p>
</td>
<td class="event-title">Where is the event happening?</td>
</tr>
<tr>
<td class="event-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi error eos nemo hic dolores assumenda libero fugiat autem nulla sapiente, voluptatum a consequuntur fugit numquam voluptate tempore eum voluptatem cumque rerum, architecto quae. Adipisci explicabo molestias dolores illum libero eveniet id nemo iusto numquam, iure eum ducimus quidem provident nihil.</td>
</tr>
<tr>
<td><button class="event-button">View Details</button></td>
</tr>
</table>
</div>
</td>
</table>
</body>
</html>
Comments
Post a Comment