Tugas 2
Nama : Dentha Jefry Yudhiantara
RP : 5053231012
Prodi : Rekayasa Perangkat Lunak
Kelas : Pemograman Website (M)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewreport" content="width=device-width, initial-scale=1.0"/>
<title>Laman login</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
.login{
border-collapse: collapse;
width: 60%;
}
h1{
text-align: center;
}
body > form{
display: flex;
justify-content: center;
flex-direction: column;
border: 1px solid black;
padding: 2rem;
gap: 1rem;
}
input[type="submit"]{
width: fit-content;
align-self: self-end;
}
</style>
</head>
<body>
<form>
<h1>Login</h1>
<table class="login">
<tr>
<td style="font-weight: bold">Username:</td>
<td><input type="text" name="Username" size="12"/></td>
</tr>
<tr>
<td style="font-weight: bold">Password:</td>
<td><input type="text" name="Password" size="12"/></td>
</tr>
</table>
<div class="check">
<span>Remember me</span>
<input type="checkbox"/>
</div>
<input type="submit" value="Login"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
<style>
table {
border-collapse: collapse;
width: 40%;
margin:0 auto;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
th {
background-color: #1173b2;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
<th>Matematika</th>
</tr>
<tr>
<td>Dentha</td>
<td>76</td>
<td>80</td>
<td>88</td>
</tr>
<tr>
<td>Harni</td>
<td>84</td>
<td>70</td>
<td>91</td>
</tr>
<tr>
<td>Rifki</td>
<td>96</td>
<td>70</td>
<td>86</td>
</tr>
</table>
</body>
</html>
Beli pupuk di atas jika ingin lombok atau cabai kalian subur.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 380px;
border-collapse: collapse;
margin: 15px auto;
border: 1px solid #000;
}
th {
background-color: yellow;
padding: 4px;
font-size: 15px;
}
td {
border: 1px solid #000;
padding: 10px;
}
.fitur ul {
list-style-type: disc;
padding-left: 15px;
}
.gambar {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Produk Unggulan</th>
</tr>
<tr>
<td class="gambar">
<img src="https://filebroker-cdn.lazada.co.id/kf/Se43194f3d8054cfab842dcef342cb9e01.jpg" width="200" />
</td>
<td>
<table>
<tr>
<td>Nama</td>
<td>Pupuk Bosster Cabai</td>
</tr>
<tr>
<td>Harga</td>
<td>Rp 67.000</td>
</tr>
<tr>
<td>Fitur</td>
<td class="fitur">
<ul>
<li>Dilengkapi Dokumentasi</li>
<li>Ukuran: 250gr</li>
<li>Masa Tanam: 3 Bulan</li>
<li>Lisensi: MIT</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Komentar
Posting Komentar