Tugas 1 Pemrograman Web Kelas C
Nama : Ahmad Syauqi
NRP : 05111740000093
Kelas : Pemrograman Web C
Berikut saya sertakan source code dari file HTML-nya.
Berikut source code untuk file CSS-nya.
Berikut adalah hasil Screenshot-nya.
Berikut adalah videonya.
Sekian dan Terima Kasih.
Nama : Ahmad Syauqi
NRP : 05111740000093
Kelas : Pemrograman Web C
Berikut saya sertakan source code dari file HTML-nya.
<!DOCTYPE html>
<html>
<head>
<title>Biodata Ahmad Syauqi</title>
<link rel="stylesheet" type="text/css" href="Final.css">
</head>
<body class="center">
<table class="tbl1">
<tbody>
<tr>
<th id="curr1" style="text-align: left; vertical-align: bottom;">AHMAD SYAUQI</th>
<th id="curr1" rowspan="2" style="vertical-align: bottom;"><img src="komputer1.png" height="180px"></th>
</tr>
<tr>
<td id="curr2">SEORANG MAHASISWA INFORMATIKA BIASA</td>
</tr>
</tbody>
</table>
<br><br>
<table class="tbl2" cellspacing="30px">
<tbody>
<tr>
<td id="tab1">Bio</td>
<td colspan="2" id="tab1">Info</td>
</tr>
<tr>
<td id="tab2">
</td>
<td id="tab2" rowspan="2">
<div>
<big><b>Data Diri</b></big>
<br>
<table id="tab3">
<tbody>
<tr>
<td>Nama</td>
<td id="kanan">Ahmad Syauqi</td>
</tr>
<tr>
<td>NRP</td>
<td id="kanan">05111740000093</td>
</tr>
<tr>
<td>Tempat/Tanggal Lahir</td>
<td id="kanan">Kupang, 15 November 1998</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td id="kanan">Laki-laki</td>
</tr>
<tr>
<td>Agama</td>
<td id="kanan">Islam</td>
</tr>
<tr>
<td>Alamat</td>
<td id="kanan">Asrama Mahasiswa ITS</td>
</tr>
<tr>
<td>Status</td>
<td id="kanan">Belum Menikah</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td id="kanan">Mahasiswa</td>
</tr>
<tr>
<td>Kewarganegaraan</td>
<td id="kanan">Indonesia</td>
</tr>
</tbody>
</table>
<br><br>
</div>
<div>
<big><b>Kontak</b></big>
<br>
<table id="tab3">
<tbody>
<tr>
<td>Email</td>
<td id="kanan">ahmadsyauqi1511@gmail.com</td>
</tr>
<tr>
<td>Blog</td>
<td id="kanan">syauqipunyacerita.blogspot.com</td>
</tr>
<tr>
<td>Telepon/WhatsApp</td>
<td id="kanan">082340788686</td>
</tr>
<tr>
<td>Instagram</td>
<td id="kanan">asyauqi1</td>
</tr>
<tr>
<td>Twitter</td>
<td id="kanan">@Syauqi00</td>
</tr>
<tr>
<td>Line</td>
<td id="kanan">asyauqi15</td>
</tr>
</tbody>
</table>
<br><br>
</div>
<div>
<big><b>Skill</b></big>
<br>
<table id="tab3">
<tbody>
<tr>
<td>C++</td>
<td id="kanan">
<div class="container">
<div class="skills cpp"></div>
</div
</td>
</tr>
<tr>
<td>HTML</td>
<td id="kanan">
<div class="container">
<div class="skills html"></div>
</div
</td>
</tr>
<tr>
<td>CSS</td>
<td id="kanan">
<div class="container">
<div class="skills css"></div>
</div
</td>
</tr>
<tr>
<td>Java</td>
<td id="kanan">
<div class="container">
<div class="skills java"></div>
</div
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td id="tab2" rowspan="2">
<div>
<big><b>Riwayat Pendidikan</b></big>
<br>
<table id="tab3">
<tbody>
<tr>
<td>Sekolah Dasar<br>SDN 21 Kota Bima</td>
<td id="kanan">2005-2011</td>
</tr>
<tr>
<td>Sekolah Menengah Pertama<br>MTsN 1 Kota Bima</td>
<td id="kanan">2011-2014</td>
</tr>
<tr>
<td>Sekolah Menengah Atas<br>SMAN 1 Kota Bima</td>
<td id="kanan">2014-2017</td>
</tr>
<tr>
<td>Perguruan Tinggi<br>Institut Teknologi Sepuluh Nopember</td>
<td id="kanan">2017-Sekarang</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<div>
<big><b>Pengalaman Organisasi</b></big>
<br>
<table id="tab3">
<tbody>
<tr>
<td>Sekretaris OSIS MTsN 1 Kota Bima</td>
<td id="kanan">2013-2014</td>
</tr>
<tr>
<td>Staff UKM TDC ITS</td>
<td id="kanan">2018</td>
</tr>
</tbody>
</table>
<br><br>
</div>
<div>
<big><b>Pengalaman Kepanitiaan</b></big>
<br>
<table id="tab3">
<tbody>
<tr>
<td>LDK MTsN 1 Kota Bima</td>
<td id="kanan">2013</td>
</tr>
<tr>
<td>TC CUP</td>
<td id="kanan">2018</td>
</tr>
<tr>
<td>Welcome Party Asrama ITS</td>
<td id="kanan">2018</td>
</tr>
<tr>
<td>Idul Adha Asrama ITS</td>
<td id="kanan">2018</td>
</tr>
<tr>
<td>Schematics</td>
<td id="kanan">2018</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<div>
<big><b>Hobi</b></big><br>
Bermain Game<br>
Menonton Film<br>
Membaca Buku<br>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: bottom;"><img id="fit" src="foto.png"></td>
</tr>
</tbody>
</table>
<table class="tbl2">
<tbody>
<td id="curr3">© Tidak Punya Copyright</td>
</tbody>
</table>
</body>
</html>
Berikut source code untuk file CSS-nya.
body{
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
#curr1{
background: rgb(241, 138, 37);
font-size: 45px;
width: 50%;
height: 150px;
padding-left: 50px;
padding-bottom: 0px;
color: #ffffff;
}
#curr2{
background: rgb(241, 138, 37);
text-align: left;
vertical-align: top;
height: 100px;
padding-left: 50px;
color: #ffffff;
}
#curr3{
background: rgb(241, 138, 37);
text-align: center;
color: #ffffff;
height: 50px;
padding-right: 20px;
font-size: 15px;
}
#tab1{
width: 33%;
background: rgb(241, 138, 37);
text-align: left;
height: 50px;
font-size: 25px;
color: #ffffff;
padding-left: 10px;
font-weight: bold;
}
#tab2{
width: 33%;
vertical-align: top;
}
#tab3{
width: 100%;
}
#kanan{
text-align: right;
}
#fit{
width: 100%;
}
.center{
margin: auto;
width: 85%;
padding: 10px;
}
.tbl1{
border-collapse: collapse;
width: 100%;
}
.tbl2{
width: 100%;
}
.container {
width: 100%;
background-color: #ddd;
}
.skills {
text-align: right;
padding: 10px;
}
.html {width: 40%; background-color: rgb(241, 138, 37);}
.cpp {width: 60%; background-color: rgb(241, 138, 37);}
.java {width: 10%; background-color: rgb(241, 138, 37);}
.css {width: 30%; background-color: rgb(241, 138, 37);}
Berikut adalah hasil Screenshot-nya.
Berikut adalah videonya.
Komentar
Posting Komentar