TUGAS PWEB-A MINGGU KE-2 (MEMBUAT CV HTML)
Link Repository: https://github.com/tengkureinaldo/tengkureinaldo.github.io
Link Website: https://tengkureinaldo.github.io/
Link Website: https://tengkureinaldo.github.io/
Berikut ini penjelasan dari source code yang telah saya buat:
1. index.html
Di bawah ini adalah source code dari halaman "Biodata"
Di bawah ini adalah source code dari halaman "Biodata"
<!DOCTYPE html>
<html>
<head>
<title>
Page 1 | Biodata
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="200x300 px.jpg" alt="HEHE!!">
<table class="pusat">
<caption id="kepsyen">BIODATA DIRI</caption>
<tr class="pusat">
<td align="center" class="kiri">Nama</td>
<td align="center" class="kanan">Tengku Fredly Reinaldo</td>
</tr>
<tr class="pusat">
<td align="center" class="kiri">Tempat/Tanggal Lahir</td>
<td align="center" class="kanan">Semarang, 1 September 2001</td>
</tr>
<tr class="pusat">
<td align="center" class="kiri">Jenis Kelamin</td>
<td align="center" class="kanan">Laki-Laki</td>
</tr>
<tr class="pusat">
<td align="center" class="kiri">Agama</td>
<td align="center" class="kanan">Islam</td>
</tr>
<tr class="pusat">
<td align="center" class="kiri">Status</td>
<td align="center" class="kanan">Belum Menikah</td>
</tr>
<tr class="pusat">
<td align="center" class="kiri">Pekerjaan</td>
<td align="center" class="kanan">Mahasiswa</td>
</tr>
<tr class="pusat">
<td align="center" class="kiri">Kewarganegaraan</td>
<td align="center" class="kanan"> Indonesia</td>
</tr>
<tr class="pusat">
<td align="center" class="kiri">Riwayat Pendidikan & Hobi</td>
<td align="center" class="kanan">
<button onclick="document.location='riwayat.html'">Find Out More!!</button>
</td>
</tr>
</table>
</body>
</html>
2. riwayat.html
Di bawah ini adalah source code dari halaman "Riwayat dan Hobi"
Di bawah ini adalah source code dari halaman "Riwayat dan Hobi"
<!DOCTYPE html>
<html>
<head>
<title>
Page 2 | Pendidikan dan Hobi
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table align="center" class="tabel23">
<tr id="atas2">
<th>JENJANG PENDIDIKAN</th>
<th>KETERANGAN</th>
<th>TAHUN</th>
</tr>
<tr align="center">
<td>SEKOLAH DASAR </td>
<td>SD Negeri Lamper Kidul 02 Semarang</td>
<td>2007-2013</td>
</tr>
<tr align="center">
<td>SEKOLAH MENENGAH PERTAMA </td>
<td>SMP Negeri 3 Semarang</td>
<td>2013-2016</td>
</tr>
<tr align="center">
<td>SEKOLAH MENENGAH ATAS </td>
<td>SMA Negeri 3 Semarang</td>
<td>2016-2019</td>
</tr>
<tr align="center">
<td>PERGURUAN TINGGI </td>
<td>Institut Teknologi Sepuluh Nopember</td>
<td>2020-2024</td>
</tr>
</table>
<table border="1" align="center" class="tabel34">
<tr>
<td colspan="2" align="center" id="atas3">HOBI</td>
</tr>
<tr align="center">
<td>Hobi</td>
<td>Membaca novel</td>
</tr>
<tr align="center">
<td>Cerita Mengenai Hobi</td>
<td>Saya gemar membaca novel di waktu luang saya.
Genre favorit saya adalah crime mystery</td>
</tr>
</table>
<div class="tombol">
<button onclick="document.location='index.html'">Get Back</button>
</div>
</body>
</html>
3. style.css
Di bawah ini adalah source code CSS untuk file HTML di atas
Di bawah ini adalah source code CSS untuk file HTML di atas
body {
background-image: url("873454.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
img {
size: 5cm;
border-radius: 50%;
width: 25%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 3cm;
}
#kepsyen {
background-color: darkblue;
color: white;
line-height: 1cm;
font-weight: bold;
border-radius: 10px;
font-size: 25px;
}
.pusat {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 50%;
border-radius: 10px;
margin: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 4cm;
}
.pusat td {
border: 0px solid white;
padding: 8px;
width: 300px;
}
tr.pusat:nth-child(even){background-color: #0af5f1;}
tr.pusat:nth-child(odd){background-color: white;}
.kanan {
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
width: 8cm;
font-size: 18px;
}
.kiri {
font-weight: bold;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
width: 8cm;
font-size: 18px;
}
.tabel23 {
font-family: Arial, Helvetica, sans-serif;
border-collapse:collapse;
width: 80%;
border-radius: 10px;
border-collapse: collapse;
border: 1px solid black;
margin: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 8cm;
}
.tabel23 td {
border: 1px solid black;
padding: 8px;
width: 100px;
}
.tabel23 tr:nth-child(even){background-color: white;}
.tabel23 tr:nth-child(odd){background-color: #CCCCCC;}
.tabel34 {
font-family: Arial, Helvetica, sans-serif;
border-collapse:collapse;
width: 80%;
border-radius: 10px;
border-collapse: collapse;
border: 1px solid black;
margin: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 3cm;
margin-bottom: 10cm;
}
.tabel34 td {
border: 1px solid black;
padding: 8px;
width: 100px;
}
.tabel34 tr:nth-child(even){background-color: white;}
.tabel34 tr:nth-child(odd){background-color: #CCCCCC;}
#atas2 {
line-height:1cm;
color: white;
background-color: black;
}
#atas3 {
font-weight: bold;
height: 0.65cm;
color: white;
background-color: black;
}
.tombol {
position: absolute;
top: 21cm;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Komentar
Posting Komentar