Assalamualaikum
A.Pendahuluan
Salam sejahtera bagi kita semua , sekarang dan hari ini saya membahas tentang cara membuat data pribadi atau profil dengan lewat Html dan css
Salam sejahtera bagi kita semua , sekarang dan hari ini saya membahas tentang cara membuat data pribadi atau profil dengan lewat Html dan css
B.Latar Belakang
ingin mengembangkan html dan css dasar dahalu
ingin mengembangkan html dan css dasar dahalu
C.Pengertian
HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan makna semantik. CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.
HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan makna semantik. CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.
D.Maksud dan tujuan
memberi ilmu sebisa saya
E.Alat dan bahan
Laptop dan aplikasi sublime teks
memberi ilmu sebisa saya
E.Alat dan bahan
Laptop dan aplikasi sublime teks
F.Pembahasan
nah sebelum membuat biodata pribadi kita memperlakukan langkah pertama ,oh ya teman teman disini saya memakai teks editor sublime teks lho .
nah sebelum membuat biodata pribadi kita memperlakukan langkah pertama ,oh ya teman teman disini saya memakai teks editor sublime teks lho .
- Buka sublime teks
- Save dulu lalu formatnya html misal(terserah.html)
- masukkan kode htmlnya
- yang terakhir berikut kodenya
<!DOCTYPE Html>
<html>
<head>
<style>
table,tr,td{
background :red ;
font-family: sans-serif;
color: black;
border: 1px solid black;
padding: 5px gold blue;
border-collapse: collapse;
margin: 0 auto ;
}
h2, p {
margin:0;
padding: 0;
}
p {
margin:0;
}
.border-color: {
border: 8px gold blue;
padding: 20px;
}
.position {
position: absolute;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
left: 0;
right: 0;
top: 120px;
bottom: 0;
}
body{
background-image: url("ky.jpg");
background-repeat: no-repeat;
background-size: cover;
}
@keyframes example {
0% {color: purple;}
20% {color: blue;}
40% {color: green;}
60% {color: yellow;}
80% {color: orange;}
100% {color: red;}
}
/* The element to apply the animation to */
h1.ss {
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
}
</style>
<title>Deni Octa Saputra</title>
</head>
<body>
<center>
<h1 class="ss">^-^Welcome To My Biodata^-^</h1>
<p> Nomor Telepon 082(******)</p>
<h2>
<p>biodata</p>
</h2>
</center>
<form action="#" style="width: 1000px;padding: 10px;"class="position";>
<fieldset class="h"/>
<table style="width: 800px;" border="1px">
<tr>
<td rowspan="15" width="250px">
<img src="jj.jpg" width="250px" height="450px"/>
</td>
</tr>
<tr>
<td>
<b>Nama Lengkap</b>
</td>
<td>:</td>
<td>Deni octa saputra</td>
</tr>
<tr>
<td><b>Nama Panggilan</b></td>
<td>:</td>
<td>Putra</td>
</tr>
<tr>
<td><b>Tempat, Tanggal Lahir</b></td>
<td>:</td>
<td>Jepara, 27 Juli 2002</td>
</tr>
<tr>
<td><b>Umur</b></td>
<td>:</td>
<td>16 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>-</td>
</tr>
<tr>
<td><b>Agama</b></td>
<td>:</td>
<td>Islam</td>
</tr>
<tr>
<td><b>Alamat</b></td>
<td>:</td>
<td>Bucu, kembang jepara</td>
</tr>
<tr>
<td><b>Pekerjaan</b></td>
<td>:</td>
<td>pelajar</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">
Tamat Mts <a href="Detail.html"style="text-decoration: none;" target="_parent"></a>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
G.Hasil yang diharapkan
Inign mempelancar ngoding saya
Inign mempelancar ngoding saya
H.Motivasi
"Sesakit sakitnya kebodohan berawal dari kemalasan"
"Sesakit sakitnya kebodohan berawal dari kemalasan"
I.Penutup
Sekian dari saya ya guys jika ada permasalahan yang ingin disampaikan ataupun kurang jelas bisa kasih saran, komen disini see you next time guys
Sekian dari saya ya guys jika ada permasalahan yang ingin disampaikan ataupun kurang jelas bisa kasih saran, komen disini see you next time guys
Wassalamulaikum
No comments:
Post a Comment