Langkah-Langkah Membuat CV pada web dengan CSS

Posted by CIA at 06.09

Langkah-Langkah Membuat CV pada web dengan CSS

1. Bukalah notepad atau notepad++

notepad++



2. pertama-tama, ketiklah coding sebagai berikut :

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="image.jpg" style="width: 60px;float: right;margin-right: 14px;"/>  
 <div>  
 <table>  
 <tr><td>Nama         </td><td>:</td><td style="width: 56%;">Aditya</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>aditya_hayat@yahoo.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>

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'>  
 <div class='ribbon'><img src='gunadarma.png' style='width:36px'></div>  
 <h3 style="border-bottom: 1px solid rgb(146, 146, 146);">Tentang Saya</h3>  
 <div style='text-align:justify;'>  
 <p>  
 Nama lengkap saya adalah aditya hayat. Saya biasa dipanggil adit. hobi saya adalah bermain basket  
 <p/><p>  
 Saya berasal dari Ambon. Dan, saya pun dilahirkan di Ambon  
 <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='Previous'><img src='arrow_prev.png' style="width: 31px;float: right;"></a>  
 </div>  
 </div>  
 </body>


3.  berikut ini adalah tampilan CV pada web

index.html

page2.html


















penjelasan : index.html

  1. Pada ( head)(style)(head)(style) : kodingnya menjelaskan tentang pembuatan warna background,  jenis huruf , warna, dan letaknya
  2. Pada (body)(body): kodingnya menjelaskan tentang pembuatan judul yaitu biodata, serta nama, jenis kelamin, kewarganergaraan, alamr, dan e-mail.
  3. 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
  4. Pada (mg src="image.jpg" style="width: 60px;float: right;margin-right: 14px)berfungsi untuk memunculkan gambar pada web

penjelasan : page2.html

  1. Pada (head)(style)(head)(style): kodingnya menjelaskan tentang pembuatan warna background,  jenis huruf , warna, dan letaknya
  2. Pada (body)(body) : kodingnya menjelaskan tentang pembuatan judul. dan terdapat koding untuk memunculkan gambar 
  3. Pada (p)(p) berfungsi untuk menulis keterangan yang akan kita tuliskan
  4. (href='index.html' title='Previous img src='arrow_prev.png' style="width: 31px;float: right) berfungsi sebagai link untuk pindah ke index.html

0 comments:

Posting Komentar