Tugas Web Programming 1 Pertemuan 1
Membuat Daftar Absensi
Berikut Kode HTML-nya
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>tugas wp1</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="logo.png" type="image/x-icon">
</head>
<body>
<div class="style">
<h1>Daftar Absensi Anggota</h1>
<div class="gambar">
<img src="logo.png" alt="">
</div>
<table border=1>
<tr>
<td rowspan="2"><b>No</b></td>
<td rowspan="2"><b>Nim</b></td>
<td rowspan="2"><b>Nama</b></td>
<td colspan="31" class="text-center"><b>Daftar Kehadiran</b></td>
</tr>
<tr class="table-row-head">
<td><b>Hadir</b></td>
<td><b>Tidak Hadir</b></td>
</tr>
<tr>
<td>1</td>
<td>120501</td>
<td>Herman</td>
<td style bgcolor="green">1</td>
<td style bgcolor="red">-</td>
</tr>
<tr>
<td>2</td>
<td>120502</td>
<td>Novi</td>
<td style bgcolor="green">1</td>
<td style bgcolor="red">-</td>
</tr>
<tr>
<td>3</td>
<td>120503</td>
<td>Raihan</td>
<td style bgcolor="red">-</td>
<td style bgcolor="green">1</td>
</tr>
<tr>
<td>4</td>
<td>120504</td>
<td>Syahwal</td>
<td style bgcolor="red">-</td>
<td style bgcolor="green">1</td>
</tr>
<tr>
<td>5</td>
<td>120505</td>
<td>Fahmi</td>
<td style bgcolor="red">-</td>
<td style bgcolor="green">1</td>
</tr>
<tr>
<td>6</td>
<td>120506</td>
<td>Dika</td>
<td style bgcolor="green">1</td>
<td style bgcolor="red">-</td>
</tr>
<tr>
<td>7</td>
<td>120507</td>
<td>Rizal</td>
<td style bgcolor="green">1</td>
<td style bgcolor="red">-</td>
</tr>
<tr>
<td>8</td>
<td>120508</td>
<td>Rini</td>
<td style bgcolor="red">-</td>
<td style bgcolor="green">1</td>
</tr>
<tr>
<td>9</td>
<td>120509</td>
<td>Stella</td>
<td style bgcolor="green">1</td>
<td style bgcolor="red">-</td>
</tr>
<tr>
<td>10</td>
<td>120510</td>
<td>Harris</td>
<td style bgcolor="green">1</td>
<td style bgcolor="red">-</td>
</tr>
<tr>
<td colspan="4" bgcolor="yellow"><b>Jumlah Anggota Hadir</b></td>
<td style bgcolor="green">6</td>
</tr>
<tr>
<td colspan="4" style bgcolor="yellow"><b>Jumlah Anggota Tidak Hadir</b></td>
<td style bgcolor="red">4</td>
</tr>
</table>
</div>
<footer>
<div class="credit">
<p>Created by <a href="">Herman Firmansyah</a>| © 2023.</p>
</div>
</footer>
<marquee style bgcolor="grey" scrollamount="10">
<h2>Tugas Ini Disponsori Oleh : Niat | Pemahaman | Nilai
| Kewajiban | UBSI-Pontianak | 15.3C.30 | Kafe Pekarangan</h2>
</marquee>
</body>
</html>
Dan Berikut Style CSS-nya
File css berfungsi untuk mengatur tampilan
*{
padding: 1rem 2.2rem;
align-items: center;
}
.style{
text-align: center;
background-color: white;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
align-items: center;
}
footer{
background-color: white;
text-align: center;
}
footer .credit{
font-size: 1rem;
}
footer .credit a{
color: black;
font-weight: 700;
}
0 komentar:
Posting Komentar