Semua orang pasti memiliki cv yang mereka gunakan untuk kepentingan masing-masing. Biasanya cv tersebut dibuat semenarik mungkin agar sang pembaca cv tertarik. Banyak cara yang digunakan untuk membuat sebuah cv salah satunya dengan memanfaatnya teknologi. Berikut ini adalah langkah dalam pembuatan CV pada website.
Produk :
Website Curiculum Vitae terdiri dari dua halaman.
Persiapan:
siapkan dulu notepad++ sebagai lembar kerja editor
pastikan telah menginstal browser google chrome atau firefox pada pc/laptop
Setelah semua persiapan dilakukan, saatnya untuk mengkoding.. silahkan dibuka notepad++ nya kemudian ketikan script dibawah ini untuk halaman pertama
Produk :
Website Curiculum Vitae terdiri dari dua halaman.
Persiapan:
siapkan dulu notepad++ sebagai lembar kerja editor
pastikan telah menginstal browser google chrome atau firefox pada pc/laptop
Setelah semua persiapan dilakukan, saatnya untuk mengkoding.. silahkan dibuka notepad++ nya kemudian ketikan script dibawah ini untuk halaman pertama
1: <head>
2: <style>
3: #wrapper{
4: height: 1048px;
5: width: 1200px;
6: background-image: url('spongebob-fresh-hd-wallpaper.jpg');
7: background-repeat: no-repeat;
8: margin: 0 auto;
9: background-size:1200px;
10: font-family:Impact, Charcoal, sans-serif;
11: background-color: rgb(118, 206, 241);background-position-y: 292px;
12:
13: }
14: .box {
15: margin: 31px 31px 31px 31px;
16: width: 580px;
17: background: #fff;
18: padding: 20px;
19: border-radius: 12px;
20: }
21:
22: #title {
23: padding-top: 10px;
24: text-align: center;
25: font-size: 23px;
26: }
27: #title h1 {
28: font-size: 2em;
29: }
30: table {
31: width: 580px;
32: }
33: table td{
34: vertical-align:top;
35: }
36: </style>
37: </head>
38: <body>
39: <div id='wrapper'>
40: <div id='title'><h1>Nur Putri Agustiyani</h1>@mioagustiyani</div>
41: <table style="
42: position: absolute;
43: right: -51px;
44: top: 196px;
45: "><tbody><tr><td><img src="mio cantik.jpg" style="
46: width: 330px;
47: "></td></tr></tbody></table>
48: <div class='box'>
49: <table>
50: <tr><td colspan="3"><h3>Biodata</h3></td></tr>
51: <tr><td>Nama </td><td>:</td><td>Nur Putri Agustiyani</td></tr>
52: <tr><td>Tempat / Tanggal lahir</td><td>:</td><td>Jakarta, 18 Agustus 1991</td></tr>
53: <tr><td>Jenis kelamin </td><td>:</td><td>Perempuan</td></tr>
54: <tr><td>Alamat </td><td>:</td><td>Perum. Depok Mulya II jalan kaimana blok AF-12<br/> Beji-Depok 16421</td></tr>
55: <tr><td>Kewarganegaraan </td><td>:</td><td>Indonesia</td></tr>
56: <tr><td>E-mail </td><td>:</td><td>putri.agustiyanie@gmail.com</td></tr>
57: </table>
58: </table>
59:
60: </div><a href='hal2.php' style="float: right;margin-right: 112px;">Halaman Berikutnya >></a>
61:
62: <div class='box'>
63: <table>
64: <tr><td colspan="3"><h3>Pendidikan Formal</h3></td></tr>
65: <tr><td>1997 - 2003 </td><td>:</td><td>SDIT Nurul Fikri Depok</td></tr>
66: <tr><td>2003 - 2006 </td><td>:</td><td>SMPIT Nurul Fikri Depok</td></tr>
67: <tr><td>2006 - 2009 </td><td>:</td><td>Madrasah Aliyah Negeri 7 Jakarta</td></tr>
68: <tr><td>2009 - sekarang </td><td>:</td><td>Fakultas Ilmu Komputer Jurusan Sistem Informasi<br/> Universitas Gunadarma</td></tr>
69: </table>
70: </div>
71:
72: <div class='box'>
73: <table>
74: <tr><td colspan="3"><h3>Pengalaman Kerja/Organisasi</h3></td></tr>
75: <tr><td>2006 - 2009 </td><td>:</td><td>Sekretaris Jendral Organisasi Intra Sekolah (OSIS)<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>
76: <tr><td>2008 </td><td>:</td><td>Peserta magang bagian informatika unit rekam medis<br/> Rumah Sakit Sofa Marwa Depok</td></tr>
77: <tr><td>2010 </td><td>:</td><td>Pengajar ekstrakurikuler paduan suara<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>
78: <tr><td>2010 </td><td>:</td><td>Pengajar ekstrakurikuler komputer<br/> Madrasah Aliyah Negeri 7 Jakarta</td></tr>
79: <tr><td>2012 - sekarang </td><td>:</td><td>Asisten tetap Laboratorium Pengembangan Pengolahan Citra<br/> Universitas Gunadarma</td></tr>
80: </table>
81: </div>
82: </div>
83:
84: </body>
85:
berikut adalah penjelasan untuk halaman pertama :
· <div id=’title’><h1>Nur Putri Agustiyani</h1>@mioagustiyani</div>
Digunakan untuk mengatur jenis dan ukuran dari teks yang ingin ditampilkan.
· <div class=’box’>
Digunakan untuk memberikan section class yaitu box.
· <table>
Digunakan untuk membuat sebuah table pada website.
· <table style="
position: absolute;
right: -51px;
top: 196px;
"><tbody><tr><td><img src="mio cantik.jpg" style="
width: 330px;
"></td></tr></tbody></table>
Digunakan untuk mengatur tata letak maupun resolusi pada gambar yang akan ditampilkan.
· <tr><td colspan=”3”><h3>Biodata</h3></td></tr>
Digunakan untuk membuat baris di dalam sebuah table yang kemudian di definisikan didalam cell pada table,dengan heading teks (h3).
· <table>
Digunakan untuk membuat sebuah table pada website.
· </div>
Digunakan untuk mengakhiri section.
· <div class=’box’>
Digunakan untuk memberikan section class yaitu box.
· <table>
Digunakan untuk membuat sebuah table pada website.
· <tr><td colspan=”3”><h3>Pendidikan Formal</h3></td></tr>
Digunakan untuk membuat baris di dalam sebuah table yang kemudian di definisikan didalam cell pada table,dengan heading teks (h3).
· </div><a href=’hal2.php’ style=”float: right;margin-right:112px;”>Halaman Berikutnya >></a>
Digunakan memberikan link menuju ke halaman berikutnya dengan tipe style float, margin kanan dan ukuran 112px untuk font.
· <div class=’box’>
Digunakan untuk memberikan section class yaitu box.
· <tr><td colspan=”3”><h3>Pengalaman Kerja/Organisasi</h3></td></tr>
Digunakan untuk membuat baris di dalam sebuah table yang kemudian di definisikan didalam cell pada table,dengan heading teks (h3).
· </div>
Digunakan untuk mengakhiri setiap section.
· </body>
Digunakan untuk mengakhiri statement pada body.
Selain pada halaman pertama, kini kita buat untuk halaman kedua. Pada halaman ini kita hanya akan menampilkan gambar.
silahkan tulis script dibawah ini :
1: <head>
2: <head>
3: <body>
4: <img src='spongebob 2.jpg' style='width:100%'/>
5: </body>
berikut adalah penjelasan untuk halaman kedua :
· <head>
Digunakan untuk menuliskan keterangan dokumen HTML, misalnya berupa judul halaman.
· <body>
Digunakan untuk menuliskan tag-tag atau isi yang akan menjadi konten website.
· <img src='spongebob 2.jpg' style='width:100%'/>
Digunakan untuk memasukkan gambar pada halaman web.
· </body>
Digunakan untuk mengakhiri statement pada body.
Untuk hasil akhirnya adalah sebagai berikut :
 |
| Halaman pertama pada Website |
 |
| Halaman kedua pada Website |
Taraaaaaa.... sudah selesai website CV kita dan siap untuk di upload ke website pribadi kita, bagaimana? mudah kan? demikianlah tutorial sederhana ini, semoga bisa membantu teman-teman dalam mempelajari dasar dari HTML.. Terima Kasih :D
0 komentar:
Posting Komentar