Yakkk....pada malam hari ini saya akan ngepost cara membuat biodata diri menggunakan HTML dan CSS....hahaha..
Sebelum teman-teman ingin membuat biodata menggunakan HTML, silahkan siapkan text editornya terlebih dahulu seperti Notepad++, Adobe Dreamwaver, Sublime Text, dan lain-lain. Langsung saja~
Disini kita akan membuat 2 file HTML dan 2 file CSS
1 file untuk biodata, 1 file untuk detailnya, kemudian duanya dengan CSS.
1. Kita akan membuat HTML nya terlebih dahulu (silahkan salin kode dibawah ini) :
<!doctype html>
<html>
<head>
<title>Data Diriku</title>
<link rel="stylesheet" href="css biodata.css"/>
</head>
<body>
<form action="#" style="width: 1000px"class="posisi";>
<fieldset class="h"/>
<table style="width: 980px;">
<tr>
<td rowspan="15" width="250px">
<img src="indra.jpg" width="250px" height="420px"/>
</td>
</tr>
<tr>
<td><b>Nama Lengkap</b></td>
<td>:</td>
<td>Indra Wirawan Adhi Kusuma</td>
</tr>
<tr>
<td><b>Nama Panggilan</b></td>
<td>:</td>
<td>Indra</td>
</tr>
<tr>
<td><b>Tempat, Tanggal Lahir</b></td>
<td>:</td>
<td>Klaten, 19 Juni 1999</td>
</tr>
<tr>
<td><b>Umur</b></td>
<td>:</td>
<td>17 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>B</td>
</tr>
<tr>
<td><b>Agama</b></td>
<td>:</td>
<td>Islam</td>
</tr>
<tr>
<td><b>Alamat</b></td>
<td>:</td>
<td>Pandansimping, Geneng, Prambanan, Klaten</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">
Pengen tahu? <a href="Detail.html"style="text-decoration: none;" target="_parent"><input
type="button"value="Cari tahu ? "/></a>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
2. Setelah teman-teman mengcopy kode HTML tadi silahkan copy file css dibawah ini dan simpan dengan nama "css biodata.css" :
table,tr,td{
background-color: LightGoldenRodYellow ;
font-family: Verdana;
color: black;
border: 1px solid black;
padding: 5px;
border-collapse: collapse;
}
.h{
border: 8px groove yellow;
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('images.jpg');
background-repeat: no-repeat;
background-size: 1400px auto;
}
Kemudian silahkan teman-teman jalankan source kode tersebut maka akan muncul tampilan sbb:
Namun perlu diperhatikan tentang penyimpanan gambar pada kode <img src="indra.jpg" width="250px" height="420px"/> silahkan teman-teman ganti namanya sesuai foto teman-teman misalnya "aku.jpg"dan cari background disimpan dengan nama "images.jpg"
3. Langkah selanjutnya pembuatan detailnya silahkan salin source kode dibawah ini dan simpan dengan nama "Detail.html":
<!DOCTYPE html>
<html><head>
<title>Tugas SIS</title>
<link rel="stylesheet" href="detail.css"/>
</head>
<body>
<form action="#" style="width: 1000px"class="posisi";>
<table style="width: 950px;">
<tr>
<td colspan="4" style="text-align: center; background-color: powderblue;color: orange"><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>SDN 2 PANDANSIMPING</td>
<td>Tidak ada</td>
<td>2004 s.d 2010</td>
</tr>
<tr>
<td>SEKOLAH MENENGAH PERTAMA</td>
<td>SMP N 2 KLATEN</td>
<td>Tidak ada</td>
<td>2010 s.d 2013</td>
</tr>
<tr>
<td>SEKOLAH MENENGAH ATAS</td>
<td>SMA N 2 KLATEN</td>
<td>JURUSAN MIPA</td>
<td>2013 s.d 2016 </td>
</tr>
<tr>
<td>PERGURUAN TINGGI</td>
<td>UNIVERSITAS GADJAH MADA </td>
<td>D3 ILMU KOMPUTER DAN SISTEM INFORMASI SV</td>
<td>2016 s.d Sekarang</td>
</tr>
</table>
<br>
<table style="width: 750px;">
<tr>
<td colspan="4" style="text-align: center; background-color: powderblue;color: orange"><b>Informasi Umum</b></td>
</tr>
<tr>
<td>Nomor Telephon</td>
<td>:</td>
<td>12345678xxxx</td>
</tr>
<tr>
<td>E-mail</td>
<td>:</td>
<td><a href="mailto:kusumaadhi21@gmail.com" style="text-decoration: none;color: black";>kusumaadhi21@gmail.com</a></td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>Main Game,Pingpong, Tidur :v</td>
</tr>
<td colspan="3" align="right">
<a href="Tugas.html" style="text-decoration: none;"</a><input type="button" onclick="history.back()" value="Kembali"/>
</td>
</table>
</form>
</body>
</html>
4. Langkah yang terakhir yaitu menghias detail dengan CSS lagi, silahkan copy source code dibawah ini dan simpan dengan nama "detail.css"
table,tr,td{
font-family: century gothic;color: black ;
border: 1px solid black;
padding: 5px;
background-color: white;
}
.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('Desert.jpg');
background-repeat: no-repeat;
background-size: 1480px auto;
background-attachment: fixed;
}
Jalankan file tersebut dan tampilannya akan terlihat seperti ini...hahaha :v
Terimakasih teman-teman semua, mohon maaf bila ada kesalahan.... :) Wassalamualaikum Wr.Wb
source : belajar dan dari sumber-sumber lainnya...
7 komentar
Write komentarterimakasih pak wirawan atas artikelnya ini sangat bermanfaat..
Replyhttp://blog.binadarma.ac.id/ay_ranius
wah terima kasih banget pak :v
Replysaya bangga padamu nak
Replysama sama nak
Replymakasih pak
ReplyTest 123
ReplyEmoticonEmoticon