Senin, 22 April 2013

Membuat Curiculum Vitae (CV) menggunakan HTML+CSS

Curriculum Vitae merupakan gambaran mengenai si pembuat CV.. berikut codingan membuat cv menggunakan html
index.html
 <head>  
 <style>  
 body{  
 background-color:#BFBFBF;  
 font-family:verdana,Lucida, Tahoma,Century gothic, sans-serif;  
 font-size: 13px;  
 }  
 .rai {  
 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: right;  
 text-align: center;  
 padding: 10px 0;  
 }  
 table{  
 font-size: 12px;  
 }  
 tr {  
 vertical-align: top;  
 }  
 </style>  
 </head>  
 <body>  
 <div class='rai'>  
 <div class='ribbon'><img src='gunadarma.png' style='width:36px'></div>  
 <h3 style="border-bottom: 3px solid rgb(130, 130, 130);">IDENTITAS DIRI</h3>  
 <img src="image.jpg" style="width: 60px;float: right;margin-right: 14px;"/>  
 <div>  
 <table>  
 <tr><td>Nama         </td><td>:</td><td style="width: 56%;">Raipeza</td></tr>  
 <tr><td>Jenis kelamin     </td><td>:</td><td>Laki-laki</td></tr>  
 <tr><td>Kewarganegaraan        </td><td>:</td><td>Indonesia</td></tr>  
 <tr><td>Alamat        </td><td>:</td><td>Jl.Margonda Raya<br/> Depok</td></tr>  
 <tr><td>E-mail        </td><td>:</td><td>raipeza24@gmail.com</td></tr>  
 </tr>  
 </table>  
 <a href='tentang.html' title='Halaman Berikutnya'><img src='panah_next.png' style="width: 31px;float: right;"></a>  
 </div>  
 </div>  
 </div>  
 </body>  
 <!--RAIPEZA 4KA01 2013-->  


tentang.html

 <head>  
 <style>  
 body{  
 background-color:#BFBFBF;  
 font-family:verdana,Arial, Tahoma,Century gothic, sans-serif;  
 font-size: 12px;  
 }  
 .rai {  
 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: right;  
 text-align: center;  
 padding: 10px 0;  
 }  
 table{  
 font-size: 12px;  
 }  
 </style>  
 </head>  
 <body>  
 <div class='rai'>  
 <div class='ribbon'><img src='gunadarma.png' style='width:36px'></div>  
 <h3 style="border-bottom: 3px solid rgb(146, 146, 146);">TENTANG SAYA</h3>  
 <div style='text-align:justify;'>  
 <p>  
 Nama lengkap saya adalah Raipeza. Hobi saya adalah membaca manga, dan futsal  
 <p/><p>  
 Saya berasal dari anak pertama dari 5 bersaudara, saya berasal dari Lampung  
 <p/><p>  
 Alasan saya memilih Universitas Gundarma didasarkan kepada minat saya terhadap bidang komputer. Oleh karena itu, Universitas Gundarma adalah satu-satunya pilihan universitas yang saya tuju.  
 </p>  
 <a href='index.html' title='Halaman Sebelumnya'><img src='panah_balik.png' style="width: 31px;float: right;"></a>  
 </div>  
 </div>  
 </body>  
 <!--RAIPEZA 4KA01 2013-->  

Penjelasan dari codingan di atas adalah
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, alamr, 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 tampilan printscreen hasilnya

Catatan:-semua gambar (image) berada pada folder yang sama dengan codingannya

0 komentar:

Posting Komentar