Week 2
| Nama |
Nilai |
| Kimia |
Fisika |
Biologi |
| Robby |
76 |
80 |
81 |
| Rendi |
84 |
70 |
75 |
| Alfian |
96 |
70 |
71 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
thead{
background-color:#086EB1;
color:white;
}
th{
border:1px black solid;
padding:8px 40px;
font-weight: lighter;
}
</style>
</head>
<body>
<table style="border: black solid 1px;border-collapse: collapse;">
<thead>
<tr>
<th scope="col" rowspan = 2>Nama</th>
<th scope="col" colspan="3">Nilai</th>
</tr>
<tr>
<th scope="col">Kimia</th>
<th scope="col">Fisika</th>
<th scope="col">Biologi</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">Robby</th>
<th scope="col">76</th>
<th scope="col">80</th>
<th scope="col">81</th>
</tr>
<tr>
<th scope="col">Rendi</th>
<th scope="col">84</th>
<th scope="col">70</th>
<th scope="col">75</th>
</tr>
<tr>
<th scope="col">Alfian</th>
<th scope="col">96</th>
<th scope="col">70</th>
<th scope="col">71</th>
</tr>
</tbody>
</table>
</body>
</html>
Salah satu tugas yang diberikan di minggu ke 2 berupa tabel, tabel ini dapat dibuat menggunakan <table> yang memiliki beberapa tag lain seperti, <thead>, <tr>, dan <th>. Untuk bagian atas yang berwarna biru saya menggunakan tag <thead> agar dapat memisahkannya dengan body yang diisikan nilai sehingga memudahkan pewarnaan pada tabel tersebut. Untuk teks yang ada di dalam tabel saya menggunakan atribut rowspan = 2 pada kotak "Nama" dan colspan = 3 pada kotak "Nilai", rowspan = 2 memungkinkan suatu kotak agar dapat mengambil row atau baris atau saf sebanyak 2 sehingga dia akan menjadi satu bagian di kiri row Nilai dan row Mata Kuliah lalu penggunaan colspan = 3 memungkinkan nilai untuk menjadi lebar dan mencakup kotak - kotak mata kuliah yang ada. Untuk bagian bawahnya saya menggunakan tag <tbody>, disini tbody tidak memiliki style apa apa selain border berupa 1px solid black.
| Produk Unggulan |
|
Nama |
Benih Kode |
| Harga |
Rp.192.000 |
| Fitur |
- Dilengkapi dokumentasi
- Ukuran: 31 MB
- Masa Tanam: 6 Bulan
- Lisensi: MIT
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
th{
border:thin double black;
}
tbody th{
font-weight: lighter;
}
</style>
</head>
<body style="display: flex;justify-content: center;">
<table style="border:1px solid black; display: fl;">
<thead style="background: yellow;border:thick double black">
<tr>
<th scope="col" colspan=3>Produk Unggulan</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col"rowspan=3><img src="./benih.jpg" alt="benih" height="150" width="150px"></th>
<th scope="row">Nama</th>
<th scope="col">Benih Kode</th>
</tr>
<tr>
<th>Harga</th>
<th>Rp.192.000</th>
</tr>
<tr>
<th>Fitur</th>
<th><ul style="text-align: left;">
<li>Dilengkapi dokumentasi</li>
<li>Ukuran: 31 MB</li>
<li>Masa Tanam: 6 Bulan</li>
<li>Lisensi: MIT</li>
</ul></th>
</tr>
</tbody>
</table>
</body>
</html>
Tabel ini memiliki implementasi yang sama seperti tabel diatas, perbedaan hanya pada styling pada border menggunakan style thin double di bagian dalam dan border solid black di luar. Lalu untuk penempatan image pada dalam tabel hanya sekedar menggunakan img src tag, ukuran gambar dapat disesuaikan menggunakan height dan width di html. Untuk gambarnya karena mengambil 3 baris maka digunakanlah rowspan = 3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.form-container{
border:1px solid black;
width: 300px;
margin-top: 25px;
padding:20px;
}
form>div{
padding:5px;
}
.logo{
background-color: rgb(255,255,255);
margin-top: -45px;
width: max-content;
height: 15px;
}
</style>
</head>
<body>
<div class="form-container">
<div class="logo">
<p>Login</p>
</div>
<form action="" method="get" class="form">
<div>
<label for="Username">Username: </label>
<input type="text" id="Username" required>
</div>
<div>
<label for="password">Password: </label>
<input type="password" id="password" required>
</div>
<div>
<input type="checkbox">
<label for="remember">Remember Me</label>
</div>
<div>
<div class="form-input">
<input type="submit" value ="Login"/>
</div>
</div>
</form>
</div>
</body>
</html>
Untuk tugas login, saya menggunakan tag <form>, tag ini bekerja sebagai container dari form yang diisikan beberapa tag, salah satu yang paling utama adalah tag <input>. Tag input memungkinkan kita untuk membuat suatu kolom yang dapat diisi menggunakan suatu kalimat, untuk input password kita dapat menggunakan type = password untuk langsung mengubah kata kata yang ada di kolom input menjadi titik titik. Tombol Remember Me dibuat dengan input juga tetapi dengan menggunakan tipe checkbox lalu untuk tombol login dapat langsung menggunakan tag input bertipe submit. Adapun untuk styling yang digunakan berupa sangat minim, hanya berat di tulisan Login bagian atas, tulisan ini dapat dicapai dengan memberikan background color kepada tulisan, lalu mengubah margin-top pada Login sehingga dapat diposisikan sedemikian rupa.
Comments
Post a Comment