Cara Membuat Biodata Diri Menggunakan HTML dan CSS
Desember 05, 2019
Edit
Cara Membuat Biodata Diri Menggunakan HTML dan CSS
Hallo semua, Selamat datang di blog saya , Pada kali ini saya akan memberikan sebuah tutorial untuk membuat biodata diri anda dengan menggunakan code html dan juga css. oke langsung saja saya akan memberikan tutorial untuk membuat biodata diri anda dengan menggunakan code html dan css.
tutorial html dan css ini saya buat untuk kalian yang merasa kesulitan dalam penggunaan syntaq html dan css dalam pembuatan biodata diri anda.
tutorial html dan juga css ini diperlukan karena dua kode pemograman ini saling berkaitan, html fungsi utamanya adalah untuk membangun, sedangkan css fungsi utamanya adalah untuk memberikan style pada web yang kita bangun.
tutorial html dan css ini saya buat untuk kalian yang merasa kesulitan dalam penggunaan syntaq html dan css dalam pembuatan biodata diri anda.
tutorial html dan juga css ini diperlukan karena dua kode pemograman ini saling berkaitan, html fungsi utamanya adalah untuk membangun, sedangkan css fungsi utamanya adalah untuk memberikan style pada web yang kita bangun.
Tutorial Pembuatan :
1. Langkah pertama, Setelah itu silahkan anda buat sebuah folder, terserah anda apa namanya, Silahkan anda letakkan 3 buah gambar, gambar pertama untuk foto profil, gambar kedua untuk background foto profil, dan gambar ketiga untuk background detail dari riwayat pendidikan kemudian buatlah sebuah index dengan format html, setelah anda membuat file index, silahkan anda copy paste source code berikut ini ke dalam file index.html :
NB : Silahkan anda ubah nama gambar tergantung nama gambar yang ada di dalam folder anda.
<!DOCTYPE html>
<html>
<head>
<title>Biodata Diri Tugas Pratikum RPL</title>
</head>
<body>
<form action="#" style="width: 800px"class="posisi";>
<fieldset class="h"/>
<table style="width: 700px;">
<body style="background-image:url(cobs.jpg);"> </body>
<tr>
<td rowspan="20" width="200px">
<img src="Arianda.jpg" width="150px" height="200px" border="5">
</td>
</tr>
<center>
<font size="25px">
<b>BIODATA DIRI</b>
</font>
</center>
<body>
<p>Assalamualaikum....</p>
<p>Selamat datang di Biodata Saya, Disini Saya Akan Menampilkan Sedikit Perkenalan Saya, Berikut Saya Tampilkan Sedikit Informasi Pribadi Saya : <p/>
</body>
<tr>
<td><b>Nama Lengkap</b></td>
<td>:</td>
<td>Gusti Arianda</td>
</tr>
<tr>
<td><b>Tempat, Tanggal Lahir</b></td>
<td>:</td>
<td>Batu Belah, 30 Agustus 1999</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>Islam</td>
</tr>
<tr>
<td><b>Alamat</b></td>
<td>:</td>
<td>Batu Belah, Jl. Pelajar , Riau</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 Pendidikan</b></td>
<td>:</td>
<td colspan="1" align="left">
Ingin Melihat? <a href="detail.html"style="text-decoration: none;" target="_parent"><input
type="button"value=" Cek Detail Pendidikan "/></a>
</td>
</tr>
</table>
</fieldset>
</form>
<p><strong>Keterangan</strong> : Tugas Membuat Biodata , Gusti Arianda , Kamis 02 Mei 2019 <em>dikumpulkan!</em></p>
</body>
</html>
2. Langkah kedua, Silahkan anda buat file baru, yaitu detail.html yang berguna untuk membuat riwayat pendidikan anda. Setelah itu sila anda copas source code dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Riwayat Pendidikan</title>
<link rel="stylesheet" href="detail.css"/>
</head>
<body>
<h3>Disini Saya Menampilkan Riwayat Pendidikan Saya, <em>berikut tingkat pendidikan saya !</em></h3>
<ol>
<li>Sekolah Dasar</li>
<li>Sekolah Menengah Pertama</li>
<li>Sekolah Menengah Atas</li>
<li>Universitas</li>
</ol>
<table style="width: 950px;">
<tr>
<td colspan="4" style="text-align: center; background-color: lightgreen;color: blue"><b>Riwayat Pendidikan </b></td>
</tr>
<tr>
<td style="text-align: center">Tingkat Pendidikan</td>
<td style="text-align: center">Nama Tempat Pendidikan</td>
<td style="text-align: center">Jurusan</td>
<td style="text-align: center">Tahun</td>
</tr>
<tr>
<td>SEKOLAH DASAR</td>
<td>SDN 27 Batu Belah</td>
<td> - </td>
<td>2008 s.d 2014</td>
</tr>
<tr>
<td>SEKOLAH MENENGAH PERTAMA</td>
<td>MTS TI Batu Belah</td>
<td> - </td>
<td>2011 s.d 2014</td>
</tr>
<tr>
<td>SEKOLAH MENENGAH ATAS</td>
<td>SMA N 1 KAMPAR</td>
<td>JURUSAN IPS</td>
<td>2014 s.d 2017 </td>
</tr>
<tr>
<td>UNIVERSITAS</td>
<td>UIN SUSKA RIAU </td>
<td>S1 Sistem Informasi</td>
<td>2017 s.d Sekarang</td>
</tr>
</table>
<br>
<table style="width: 750px;">
<tr>
<td colspan="4" style="text-align: center; background-color: lightgreen;color: blue"><b>Informasi Pribadi</b></td>
</tr>
<tr>
<td>Nomor WA</td>
<td>:</td>
<td>085363390606</td>
</tr>
<tr>
<td>E-mail</td>
<td>:</td>
<td><a href="gustiarianda300899@gmail.com" style="text-decoration: none;color: black";>gustiarianda300899@gmail.com</a></td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>Olahraga, Menulis, Refeshing Game</td>
</tr>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="4" style="text-align: center; background-color: lightgreen;color: blue"><b>IPK UNIVERSITAS</b></td>
</tr>
<tr>
<td>Semester 1</td>
<td>3.77</td>
</tr>
<tr>
<td>Semester 2</td>
<td>3.55</td>
</tr>
<tr>
<td>Semester 3</td>
<td>3.53</td>
</tr>
</table>
<tr>
<td colspan="3" align="right">
<a href="index.html" style="text-decoration: none;"</a><input type="button" onclick="history.back()" value="Kembali"/>
</td>
</tr>
</table>
</form>
</body>
</html>
3. Langkah ketiga, Silhakan anda buat file dengan nama detail.css untuk membuat style nya. Setelah itu sila anda salin source code dibawah ini :
table,tr,td{
font-family: times new roman;
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('hg.jpg');
background-repeat: no-repeat;
background-size: 1480px auto;
background-attachment: fixed;
}
Setelah itu silahkan anda buka file index.html pada browser anda, Maka tampilan awalnya seperti berikut :
Jika anda ingin melihat riwayat pendidikan, silahkan anda klik button cek riwayat pendidikan. Maka tampilan berikutnya yaitu sebagai berikut :
Itulah cara membuat biodata diri dengan menggunakan html dan css, Jika ada yang rancu silahkan tanyakan dikolom komentar.