Tugas membuat biodata menggunakan HTML dan CSS
Tutorial membuat biodata menggunakan HTML dan CSS
Sebelum membuat sebuah biodata alangkah baiknya teman-teman mempersiapkan text editor yang akan memudahkan dalam pengerjaan seperti notepad++, adobe dreamweaver,dll. 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 berikut :
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Biodata"/>
<meta name="Keywords" content="Biodata"/>
<meta name="authors" content="Reza"/>
<meta charset="UTF-8"/>
<title>Biodata</title>
<link rel="stylesheet" href="styleku.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="a.jpg" width="250px" height="420px"/>
</td>
</tr>
<tr>
<td><b>Nama Lengkap</b></td>
<td>:</td>
<td>Reza Juanda Hariono</td>
</tr>
<tr>
<td><b>Nama Panggilan</b></td>
<td>:</td>
<td>Reza</td>
</tr>
<tr>
<td><b>Tempat, Tanggal Lahir</b></td>
<td>:</td>
<td>Cengkareng, Jakarta Barat, 07 Oktober 1994</td>
</tr>
<tr>
<td><b>Umur</b></td>
<td>:</td>
<td>20 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>AB</td>
</tr>
<tr>
<td><b>Agama</b></td>
<td>:</td>
<td>Islam</td>
</tr>
<tr>
<td><b>Alamat</b></td>
<td>:</td>
<td>Jln. Meteorologi No. 48 Tangerang, Banten</td>
</tr>
<tr>
<td><b>Status</b></td>
<td>:</td>
<td>Belum Menikah</td>
</tr>
<tr>
<td><b>Pekerjaan</b></td>
<td>:</td>
<td>Mahasiswa dan Driver Gojek</td>
</tr>
<tr>
<td><b>Kewarganegaraan</b></td>
<td>:</td>
<td>Indonesia</td>
</tr>
<tr>
<td><b>Pengalaman Menjadi Driver Gojek</b></td>
<td>:</td>
<td colspan="1" align="left">
Ingin Tahu Pengalaman Gojek ku ? <a href="Detail tugas.html"style="text-decoration: none;" target="_parent"><input
type="button"value="Cari tahu ? "/></a>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
2. Setelah anda copy source HTMLnya kemudian copy CSSnya simpan dengan nama “styleku.css”
table,tr,td{
background-color: #CC99FF;
font-family: century gothic;
color: #9900CC;
border: 1px solid aqua;
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('the_walking_dead_wallpaper_by_skywalkerdesign-d4n9qcw.jpg');
background-repeat: no-repeat;
background-size: 1400px auto;
}
table,tr,td{
background-color: #CC99FF;
font-family: century gothic;
color: #9900CC;
border: 1px solid aqua;
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('the_walking_dead_wallpaper_by_skywalkerdesign-d4n9qcw.jpg');
background-repeat: no-repeat;
background-size: 1400px auto;
}
Kemudian jalankan source code tersebut maka tampilannya akan seperti berikut:
3. langkah selanjutnya untuk pembuatan detailnya. Salin source code dibawah ini kemudian simpan dengan nama “Detail.html”
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Biodata"/>
<meta name="Keywords" content="Biodata"/>
<meta name="authors" content="Reza"/>
<meta charset="UTF-8"/>
<title>Biodata</title>
<link rel="stylesheet" href="orapopo.css"/>
</head>
<body>
<form action="#" style="width: 1000px"class="posisi";>
<table style="width: 950px;">
<tr>
<td colspan="4" style="text-align: center; background-color: Black;color: green"><b>Pengalaman Menjadi Driver Go-j*k</b></td>
</tr>
<tr>
<td style="text-align: left"></td>
</tr>
<tr>
<td>Sedikit yang akan saya ceritakan menjadi driver go-j*k dan saya sudah menjalaninya selama 7 bulan hingga sekarang. Banyak cerita seru yang saya dapat kan selama menjadi driver gojek dari penumpang, tapi saya akan menceritakan satu penumpang saja yang membuat saya takut sekaligus tertawa hehe. Waktu itu saya berhenti di mall tangcity sekitar pukul 21.00 WIB untuk beristirahat sejenak sekaligus menunggu order yang datang. Kira-kira saat menunggu selama 30 menit saya mendapat order seorang bapak-bapak tapi tidak terlalu tua sekitar 30 tahun umur nya, setelah sampai ditempat lokasi penjemputan tidak ada yang aneh dan terlihat biasa saja seperti layak nya bekerja dikantoran. Saat itu saya harus mengantarnya ke pamulang, selama awal perjalanan kami mengobrol seperti biasa sama pada penumpang lainnya bercanda dan tertawa agar tidak bosan dan membuat penumpang nyaman. Tapi sesampai setengah perjalanan tepat nya di daerah BSD, entah kenapa beliau mulai meraba dan mengelus-elus kecil sekitaran paha dan punggung saya, spontan saya pun menjadi kegelian dan mengurangi kecepatan motor saya. Saya tak bisa marah karena saya tak ingin membuat kecewa penumpang saya dan tak mau mendapat rate buruk dari bapak tersebut sekaligus sudah menjadi tugas dan tanggung jawab saya menjaga kenyamanan penumpang. Saya hanya berkata "pak maaf, saya kegelian mohon hentikan agar saya fokus mngendarai motor" tapi bapak itu hanya tertawa dan mencoba terus menenangkan saya, dijalan pun saya merasa takut sekaligus tertawa entah apa yang saya harus lakukan tak mungkin saya menurunkan penumpang saya dijalan. Beliau selalu membicarakan obrolan yang panas dan itulah saya hanya bisa tertawa saja. Dan lambat sudah saya sudah sampai mengantarnya sesuai tempat tujuan beliau didepan rumahnya, dan tiba-tiba beliau mengajak saya untuk masuk kerumahnya sejenak, tapi saat itu saya langsung tertawa dan menolak nya dengan nada yang halus. Respon bapak itu pun kecewa setelah saya menolak ajakan nya. Tapi beliau berkata ingin menyimpan nomor saya dan ingin mengajak saya dilain waktu, dan tak ingin berlama-lama saya hanya mengiyakan perkataan nya agar saya bisa cepat pulang. </td>
</tr>
<tr>
<td>Jadi seperti itulah salah satu pengalaman saya dengan penumpang, mungkin akan menjadi pengalaman lucu tapi menakutkan -_- haha . Sekian dan terima kasih :)
<td colspan="3" align="right">
</a><input type="button" onClick="history.back()" value="Kembali"/>
</td>
</table>
</form>
</body>
</html>
4. langkah terakhir adalah membuat CSS. Silahkan aganagan salin source codenya dibawah ini kemudian simpan dengan nama “orapopo.css”.
table,tr,td{
font-family: century gothic;
color: #00FF00;
border: 1px solid aqua;
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('the_walking_dead_wallpaper_by_skywalkerdesign-d4n9qcw.jpg');
background-repeat: no-repeat;
background-size: 1480px auto;
background-attachment: fixed;
}
Tidak ada komentar:
Posting Komentar