Pada kesempatan kali ini kita akan membuat biodata lagi , minggu kemarin kita sudah buat biodata tapi tidak ada style cssnya . Jadi kali ini kita akan memasukkan style css ke dalamnya.
B. PENGERTIAN
Biodata yaitu Riwayat hidup singkat , yang berisi informasi singkat dari seseorang.
C. MAKSUD DAN TUJUAN
Dapat menerapkan penggunaan CSS di html
D. PEMBAHASAN
Langsung saja kita menuju ke pembuatannya :
pertama ketikkan script berikut ini
table,tr,td{
background-color: LightGoldenRodYellow ;
font-family: century gothic;
color: green;
border: 1px solid aqua;
padding: 5px;
border-collapse: collapse;
}
.h{
border: 8px groove green;
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('madrid.png');
background-repeat: no-repeat;
background-size: 1400px auto;
}
simpan script tersebut dan kasih nama style.css
lalu ketikkan juga script berikut
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Biodata"/>
<meta name="Keywords" content="Biodata"/>
<meta name="authors" content="Faisal"/>
<meta charset="UTF-8"/>
<title>Biodata</title>
<link rel="stylesheet" href="style.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="foto.jpg" width="250px" height="420px"/>
</td>
</tr>
<tr>
<td><b>Nama Lengkap</b></td>
<td>:</td>
<td>Ahmad Faisal</td>
</tr>
<tr>
<td><b>Nama Panggilan</b></td>
<td>:</td>
<td>Faisal</td>
</tr>
<tr>
<td><b>Tempat, Tanggal Lahir</b></td>
<td>:</td>
<td>Kudus, 10/06/2001</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>Agama</b></td>
<td>:</td>
<td>Islam</td>
</tr>
<tr>
<td><b>Status</b></td>
<td>:</td>
<td>Pelajar</td>
</tr>
<tr>
<td><b>Kewarganegaraan</b></td>
<td>:</td>
<td>Indonesia</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
simpan script di atas dan kasih nama biodatacss.html (nama bisa terserah kalian yang penting formatnya .html )
lalu jalankan file biodatacss.html tersebut maka hasilnya seperti ini
untuk format gambar profil dan background bisa kalian ganti dengan format gambar kalian yang sudah di siapkan. Jangan lupa gambar backround dan profil harus satu folder dengan file html nya.
E. MASALAH YANG DITEMUKAN
Pemasukan format gambar yang salah dan kurangnya ketelitian
F. KESIMPULAN
Style CSS digunakan untuk memperbagus tampilan
G. REFERENSI
-
Sekian dan Terima Kasih karena sudah membaca Blog saya yang Sederhana
Ini 😁 Jika ada salah arti atau kata bisa beri komentar kalian di kolom
komentar.....
A EN JE AYE
BalasHapus