Langkah-Langkah Membuat CV pada web
1. Bukalah notepad atau notepad++
 |
| notepad+ |
index.html
<head>
<style>
body{
background-color:#2D2F2B;
font-family:verdana,Lucida, Tahoma,Century gothic, sans-serif;
font-size: 13px;
}
.block {
background-color: #C3C4C4;
width: 370px;
padding: 9px 35px 35px 35px;
border-radius: 11px;
margin: auto;
margin-top:180px;
border: 1px solid #EEE;
-moz-box-shadow: 0px 0px 25px black;
-webkit-box-shadow: 0px 0px 25px;
}
.ribbon {
margin-top: -17px;
width: 38px;
float: left;
text-align: center;
padding: 10px 0;
}
table{
font-size: 12px;
}
tr {
vertical-align: top;
}
</style>
</head>
<body>
<div class='block'>
<h3 style="border-bottom: 1px solid rgb(130, 130, 130);">BIODATA</h3>
<img src="foto.jpg" style="width: 60px;float: right;margin-right: 14px;"/>
<div>
<table>
<tr><td>Nama </td><td>:</td><td style="width: 56%;">Mutiara Arisa</td></tr>
<tr><td>Jenis kelamin </td><td>:</td><td>perempuan</td></tr>
<tr><td>Kewarganegaraan </td><td>:</td><td>Indonesia</td></tr>
<tr><td>Alamat </td><td>:</td><td>Jl. Baturaja A2 No.15<br/>Jakarta Pusat</td></tr>
<tr><td>E-mail </td><td>:</td><td>mutiaraarisa@gmail.com</td></tr>
</tr>
</table>
<a href='page2.html' title='Next'><img src='arrow_next.png' style="width: 31px;float: right;"></a>
</div>
</div>
</body>
- Pada ( head)(style)(head)(style) : kodingnya menjelaskan tentang pembuatan warna background, jenis huruf , warna, dan letaknya
- Pada (body)(body): kodingnya menjelaskan tentang pembuatan judul yaitu biodata, serta nama, jenis kelamin, kewarganergaraan, alamat, dan e-mail.
- Pada koding (a href='page2.html' title='Next' mg src='arrow_next.png' style="width: 31px;float: right;a) berfungsi sebagai link untuk pindah ke page2.html
- Pada (mg src="image.jpg" style="width: 60px;float: right;margin-right: 14px)berfungsi untuk memunculkan gambar pada web
Berikut adalah tampilannya:
 |
| index.html |
page2.html
<head>
<style>
body{
background-color:#3D2F2B;
font-family:verdana,Arial, Tahoma,Century gothic, sans-serif;
font-size: 12px;
}
.block {
background-color: #D4D4D4;
width: 370px;
padding: 9px 35px 35px 35px;
border-radius: 11px;
margin: auto;
margin-top:180px;
border: 1px solid #EEE;
-moz-box-shadow: 0px 0px 25px black;
-webkit-box-shadow: 0px 0px 25px;
}
.ribbon {
margin-top: -17px;
width: 38px;
float: right;
text-align: center;
padding: 10px 0;
}
table{
font-size: 12px;
}
</style>
</head>
<body>
<div class='block'>
<h3 style="border-bottom: 1px solid rgb(146, 146, 146);">Riwayat Pengalaman kerja</h3>
<div style='text-align:justify;'>
<p>
Kesimpulan / Executive Summary
(Penjelasan singkat mengenai kualifikasi, kemampuan dalam pekerjaan, dan data personal lainnya)
Saya memiliki kemampuan dalam melakukan suatu penelitian, dan menganalisa, pernah membuat aplikasi
pembelajaran berbasis android menggunakan eclipse, dan dapat bekerja dengan baik secara tim maupun individu.
</p>
<a href='page3.html' title='Next'><img src='arrow_next.png' style="width: 31px;float: right;"></a>
<a href='index.html' title='Previous'><img src='arrow_prev.png' style="width: 31px;float: right;"></a>
</div>
</div>
</body> - Pada (head)(style)(head)(style): kodingnya menjelaskan tentang pembuatan warna background, jenis huruf , warna, dan letaknya
- Pada (body)(body) : kodingnya menjelaskan tentang pembuatan judul. dan terdapat koding untuk memunculkan gambar
- Pada (p)(p) berfungsi untuk menulis keterangan yang akan kita tuliskan
- Pada koding (a href='page3.html' title='Next' mg src='arrow_next.png' style="width: 31px;float: right;a) berfungsi sebagai link untuk pindah ke page2.html
- (href='index.html' title='Previous img src='arrow_prev.png' style="width: 31px;float: right) berfungsi sebagai link untuk pindah ke index.html
Berikut adalah tampilannya:
 |
| page2.html |
page3.html
<head>
<style>
body{
background-color:#3D2F2B;
font-family:verdana,Arial, Tahoma,Century gothic, sans-serif;
font-size: 12px;
}
.block {
background-color: #D4D4D4;
width: 370px;
padding: 9px 35px 35px 35px;
border-radius: 11px;
margin: auto;
margin-top:180px;
border: 1px solid #EEE;
-moz-box-shadow: 0px 0px 25px black;
-webkit-box-shadow: 0px 0px 25px;
}
.ribbon {
margin-top: -17px;
width: 38px;
float: right;
text-align: center;
padding: 10px 0;
}
table{
font-size: 12px;
}
</style>
</head>
<body>
<div class='block'>
<h3 style="border-bottom: 1px solid rgb(146, 146, 146);">Kesimpulan</h3>
<div style='text-align:justify;'>
<p>
Summary of Working Experience
1
Tahun : 2011 - sekarang
Instansi / Perusahaan : PT. Indonesia News Center (INILAH.COM)
Posisi : Penelitian & Pengembangan (Litbang)
Job Deskripsi : melakukan pengamatan dan analisa data.
</p>
<a href='page2.html' title='Previous'><img src='arrow_prev.png' style="width: 31px;float: right;"></a>
</div>
</div>
</body> - Pada (head)(style)(head)(style): kodingnya menjelaskan tentang pembuatan warna background, jenis huruf , warna, dan letaknya
- Pada (body)(body) : kodingnya menjelaskan tentang pembuatan judul. dan terdapat koding untuk memunculkan gambar
- Pada (p)(p) berfungsi untuk menulis keterangan yang akan kita tuliskan
- (href='page2.html' title='Previous img src='arrow_prev.png' style="width: 31px;float: right) berfungsi sebagai link untuk pindah ke page2.html
Berikut adalah tampilannya:
 |
| page3.html |
