Pada tugas softskill kali ini adalah membuat biodata berupa web dengan HTML dan CSS.
Saya menggunakan 2 file HTML di dalamnya dengan desain menggunakan CSS yaitu 1 file untuk Biodata dan 1 file lagi untuk Riwayat dan informasi Umum. Simpan semua file kodingan dengan foto yang akan ditampilkan dalam satu file.
Agar lebih mudah dalam membuat program, saya membuat flowchart terlebih dahulu untuk program web biodata ini, berikut flowchart-nya :
Setelah itu saya membuat kodingannya. Pertama saya membuat file untuk Biodata, berikut kode HTML dan CSS-nya :
<!doctype html>
<html>
<head>
<title>Biodata</title>
<style type="text/css">
table,tr,td{
background-image: url('marthh.jpg') ;
font-family: georgia;
color: lightblue;
padding: 5px;
border : 1px solid blue;
}
wrapper {
width: 940px;
margin: 20px auto 20px auto;
}
header {
height: 500px;
padding : 5px;
}
h1 {
padding : 5px;
text-indent: 650px;
width: 1500px;
height: 700px;
margin: 10px 10px 10px 10px;
color : powderblue;
}
.h{
border: 8px groove blue;
padding: 20px;
}
.posisi{
position: absolute;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
left: 0;
right: 0;
top: 100px;
bottom: 0;
}
body{
background-image: url('marthh.jpg');
background-repeat: no-repeat;
background-size: 1400px auto;
background-attachment: fixed;
}
img{
margin: 20px
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>Biodata</h1>
</header>
<form action="#" style="width: 1000px"class="posisi";>
<fieldset class="h"/>
<table style="width: 980px;">
<tr>
<td rowspan="15" width="250px" height="420px">
<img src="marthinhk.jpg" width="250px" height="300px"/>
</td>
</tr>
<tr>
<td><b>Nama Lengkap</b></td>
<td>:</td>
<td>Marthin Hasudungan Kristian</td>
</tr>
<tr>
<td><b>Nama Panggilan</b></td>
<td>:</td>
<td>Marthin</td>
</tr>
<tr>
<td><b>Tempat, Tanggal Lahir</b></td>
<td>:</td>
<td>Jakarta, 27 Maret 1998</td>
</tr>
<tr>
<td><b>Umur</b></td>
<td>:</td>
<td>19 Tahun</td>
</tr>
<tr>
<td><b>Jenis Kelamin</b></td>
<td>:</td>
<td>Laki - Laki</td>
</tr>
<tr>
<td><b>Gol. Darah</b></td>
<td>:</td>
<td>O</td>
</tr>
<tr>
<td><b>Agama</b></td>
<td>:</td>
<td>Kristen</td>
</tr>
<tr>
<td><b>Alamat</b></td>
<td>:</td>
<td>Komplek Dosen IKIP, Jatibening</td>
</tr>
<tr>
<td><b>Pekerjaan</b></td>
<td>:</td>
<td>Mahasiswa</td>
</tr>
<tr>
<td><b>Kewarganegaraan</b></td>
<td>:</td>
<td>Indonesia</td>
</tr>
<tr>
<td><b>Riwayat</b></td>
<td>:</td>
<td colspan="1" align="left">
Mau tahu? <a href="lama.html"style="text-decoration: none;" target="_parent"><input
type="button"value="Telusuri "/></a>
</td>
</tr>
</table>
</fieldset>
</form>
<div><!-- .wrapper -->
</body>
</html>
Kedua saya membuat file untuk Riwayat dan Informasi Umum, berikut kode HTML dan CSS-nya :
<!DOCTYPE html>
<html>
<head>
<title>Tugas Softskill</title>
<style type="text/css">
table,tr,td{
font-family: century gothic;
color: lightblue ;
border: 1px solid blue;
padding: 5px;
background-image: url('marthh.jpg');
}
.posisi{
position: absolute;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
left: 160px;
right: 0;
top: 60px;
bottom: 0;
}
body{
background-image: url('marthh.jpg');
background-repeat: no-repeat;
background-size: 1480px auto;
background-attachment: fixed;
}
</style>
</head>
<body>
<form action="#" style="width: 1000px"class="posisi";>
<table style="width: 950px;">
<tr>
<td colspan="4" style="text-align: center; background-color: darkblue;color: lightblue"><b>Riwayat Pendidikan </b></td>
</tr>
<tr>
<td style="text-align: center">Jenjang Pendidikan</td>
<td style="text-align: center">Keterangan</td>
<td style="text-align: center">Bidang Jurusan</td>
<td style="text-align: center">Tahun</td>
</tr>
<tr>
<td>SEKOLAH DASAR</td>
<td>SD CAHAYA HARAPAN</td>
<td>Tidak ada</td>
<td>2004 s.d 2010</td>
</tr>
<tr>
<td>SEKOLAH MENENGAH PERTAMA</td>
<td>SMP CAHAYA HARAPAN</td>
<td>Tidak ada</td>
<td>2010 s.d 2013</td>
</tr>
<tr>
<td>SEKOLAH MENENGAH ATAS</td>
<td>SMA ADVENT 1</td>
<td>JURUSAN MIPA</td>
<td>2013 s.d 2016 </td>
</tr>
<tr>
<td>PERGURUAN TINGGI</td>
<td>UNIVERSITAS GUNADARMA </td>
<td>S1 TEKNIK INFORMATIKA </td>
<td>2016 s.d Sekarang</td>
</tr>
</table>
<br>
<table style="width: 750px;">
<tr>
<td colspan="4" style="text-align: center; background-color: darkblue;color: lightblue"><b>Informasi Umum</b></td>
</tr>
<tr>
<td>Nomor Telephon</td>
<td>:</td>
<td>081280205234</td>
</tr>
<tr>
<td>E-mail</td>
<td>:</td>
<td><a href="mailto:marthinkristian@gmail.com" style="text-decoration: none;color: lightblue";>marthinkristian@gmail.com</a></td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>Membaca, Bermain Musik, Futsal </td>
</tr>
<td colspan="3" align="right">
<a href="index.html" style="text-decoration: none;"</a><input type="button" onclick="history.back()" value="Kembali"/>
</td>
</table>
</form>
</body>
</html>
Berikut tampilan dari kode di atas jika dijalankan :
Jika kita mengklik button Telusuri, maka akan tampil seperti ini :
Kita bisa mengatur desain, font tulisan, warna, dan lainnya dengan css.
Jika ingin melihat hasil programnya, silahkan kunjungi postingan saya di bawah ini :
http://marthinkristian.blogspot.co.id/2018/03/tugas-softskill_20.html
