Pada tugas kali ini saya membuat tabel-tabel diatas yang berisikan data diri dengan menggunakan HTML dan melakukan pendeployan dengan menggunakan Vercel. Pada web ini saya menggunakan dua laman yaitu untuk data umum serta data diri.
Untuk membuat web ini saya menerapkan beberapa fungsi-fungsi dasar yang ada di HTML. Saya menggunakan fungsi table beserta dengan fungsi-fungsi/tag yang dimiliki nya (th, td, tr) untuk membuat table nya. Lalu, saya juga menggunakan fungsi button dan tag <a> agar antar laman bisa berinteraksi. Setelah itu, untuk merapihkan tabel-tabel tersebut saya menggunakan fungsi style dengan memanggil tiap tag yang digunakkan dan dirubah menggunakan fungsi seperti padding, border, justify-content, dan lain-lainnya.
Berikut adalah script yang saya gunakan.
Laman Index :
<!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">
<link rel="stylesheet" href="">
<title>Latihan 1</title>
<style>
table{
border: 1px solid black;
padding: 5px;
}
th, td{
padding: 5px;
text-align: left;
border: 1px solid black;
}
button{
padding: 5px;
text-decoration: none;
}
img{
border: 1px solid black;
padding: 10px;
}
.presentation{
justify-content: center;
display: flex;
}
</style>
</head>
<body>
<div class="presentation">
<table>
<tr>
<img src="/img/07DD4F26-427F-4545-AD84-7CF5E1A59CB0.jpg" width="150px" height="auto" alt="Foto Diri">
</tr>
<tr>
<th>Nama</th>
<td>Rahadian Adjie Mahesa</td>
</tr>
<tr>
<th>Tempat, Tanggal Lahir</th>
<td>Jakarta, 20 Juni 2000</td>
</tr>
<tr>
<th>Jenis Kelamin</th>
<td>Pria</td>
</tr>
<tr>
<th>Agama</th>
<td>Islam</td>
</tr>
<tr>
<th>Alamat</th>
<td>Jl. Cempaka 3 No.9, Bintaro, Jakarta</td>
</tr>
<tr>
<th>Status</th>
<td>Belum Menikah</td>
</tr>
<tr>
<th>Pekerjaan</th>
<td>Mahasiswa</td>
</tr>
<tr>
<th>Kewarganegaraan</th>
<td>Indonesia</td>
</tr>
<tr>
<th>Riwayat dan Hobi</th>
<td>
Nonton, Musik, Game
<button>
<a href="/riwayat.html">More</a>
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Laman Data Umum:
<!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">
<link rel="stylesheet" href="">
<title>Riwayat dan Hobi</title>
<style>
body {
justify-content: center;
align-items: center;
display: flex;
}
table{
border: 1px solid black;
padding : 3px;
}
th, td{
padding: 5px;
text-align: left;
border: 1px solid black;
max-width: 60ch;
}
button{
padding: 5px;
text-decoration: none;
}
table{
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<table>
<h4>Riwayat Jenjang Pendidikan Formal</h4>
<tr>
<th>Jenjang Pendidikan</th>
<th>Keterangan</th>
<th>Tahun</th>
</tr>
<tr>
<td>Sekolah Dasar</td>
<td>SD Islam Al-Azhar 1 Jakarta</td>
<td>2006 s.d 2012</td>
</tr>
<tr>
<td>Sekolah Menengah Pertama</td>
<td>SMP Islam Al-Azhar 1 Jakarta</td>
<td>2012 s.d 2015</td>
</tr>
<tr>
<td>Sekolah Menengah Atas</td>
<td>SMA Negeri 70 Jakarta</td>
<td>2015 s.d 2018</td>
</tr>
<tr>
<td>Perguruan Tinggi</td>
<td>Institut Teknologi Sepuluh Nopember</td>
<td>2019 s.d Sekarang</td>
</tr>
</table>
<table>
<h4>Informasi Umum</h4>
<tr>
<th>Nomor Telepon</th>
<td>+6281290674218</td>
</tr>
<tr>
<th>Email</th>
<td>adjiemahesa75@gmail.com</td>
</tr>
<tr>
<th>Hobi</th>
<td>Musik, Film, Bola Basket</td>
</tr>
<tr>
<th>Cerita Dari Hobi Saya</th>
<td>Hobi saya mendengarkan berbagai jenis Musik,
menonton series dan film berbagain genre terutama anime, dan
bermain bola basket. Untuk bermain bola basket saya sudah tertarik
sejak saya kecil karena ibu dan kakak-kakak saya penggemar bola basket.
Oleh karen itu saya ikut ekstrakulikuler basket dan mengikuti lomba hingga juara.
Manfaat dari saya bermain bola basket saya bisa melatih bekerja sebagai tim.
</td>
</tr>
</table>
<button>
<a href="/index.html">Kembali</a>
</button>
</div>
</body>
</html>
Comments
Post a Comment