Blog Is My Inspiration :): Tutorial Membuat Curriculum Vitae pada HTML menggunakan CSS

Kali ini saya akan membuat CV dengan menggunakan HTML dan CSS sebagai desainnya. seperti yang kita ketahui bahwa pengertian dari Cascading Style Sheet (CSS)merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. pada tutorial ini saya ingin menampilkan background yang gradasi warna biru. langkah-langkahnya adalah: 1. Buat CV terlebih dahulu. 2. Buka Notepad ++ sebagai text editornya lalu ketikkan kode HTML sebagai berikut:

<html>
<head>
<style>
body{

*menentukan warna gradasi, arah gradasi, dan menentukan titik stop setiap warna.
disini saya menggunakan 4 warna dengan arah gradasi top, left bottom, dan left top, serta titik stop dengan presentasi 25%-90%.
background-image: linear-gradient(top, #a7ccfa 25%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -o-linear-gradient(top, #a7ccfa 25%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -moz-linear-gradient(top, #a7ccfa 25%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -webkit-linear-gradient(top, #a7ccfa 25%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -ms-linear-gradient(top, #a7ccfa 25%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #DBEBFF), color-stop(0.5, #6695BD), color-stop(0.75, #8FC2E3), color-stop(0.9, #5494CC) ); 
background-image: -webkit-gradient( 
linear, 
left top, 
left bottom, 
color-stop(0.2, #DBEBFF), 
color-stop(0.5, #6695BD), 
color-stop(0.75, #8FC2E3), 
color-stop(0.9, #5494CC) ); 
padding: 10px;
color: #000000;
width: 750px;
padding: 15px 50px 50px 50px;

*untuk garis tepi
border-radius: 30px;
margin: auto;
margin-top: 100px;

*ketebalan garis tepi dengan warna hitam
border: 5px solid #080225;
-moz-box-shadow: 0px 0px 25px black;
-webkit-box-shadow: 0px 0px 25px;
}

.cobacss{
margin-top: -17px;
width: 50px;
float: right;

text-align: center;
padding: 10px 0;
}
table{
font-size: 20px;
}
tr {
vertical-align: top;
}
</style>
</head>
<body>

*kodingan html yang memanggil nama class rizkia dan class cobacss.
<div class='rizkia'>
<div class='cobacss'></div>

*membuat judul dengan heading 1 serta menggunakan gradasi warna sama seperti diatas. tetapi, disini saya menggunakan warna yang sedikit berbeda.
<h1 style="background-image: linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -o-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -moz-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -webkit-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -ms-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #DBEBFF), 
color-stop(0.5, #6695BD), color-stop(0.75, #8FC2E3), color-stop(0.9, #5494CC) );
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #DBEBFF),
 color-stop(0.5, #6695BD), color-stop(0.75, #8FC2E3), color-stop(0.9, #5494CC) );
padding: 10px; color: #000000;border-bottom: 6px solid #1c058e;">CURRICULUM VITAE</h1>
<div>

*isi halaman
<title>Curriculum Vitae</title>
<body>
<font color=black face=times new roman size=5>
<pre>
<br><p><img src="foto.jpg" align="left" height="170" width="130"/></p></br>

<table width="600" border="6"  cellpadding="7" cellspacing="2" align="center" bgcolor="black">
<tr bgcolor=#40c7ee><td align="left"><b>Nama</b></td>
<td align="left"><b>Rizkia Tri Andani</b></td></tr>

<tr bgcolor=#40c7ee><td align="left"><b>Jenis Kelamin<b/></td>
<td align="left"><b>Perempuan</b></td></tr>

<tr bgcolor=#40c7ee><td align="left"><b>Alamat</b></td>
<td align="left"><b>Komp.Patria Jaya B2 no.14 Pndok Gede Bekasi</b></td></tr>

<tr bgcolor=#40c7ee><td align="left"><b>Telepon</b></td>
<td align="left"><b>085692906066</b></td></tr>

<tr bgcolor=#40c7ee><td align="left"><b>Agama</b></td>
<td align="left"><b>Islam</b></td></tr>

<tr bgcolor=#40c7ee><td align="left"><b>Tempat Tanggal Lahir</b></td>
<td align="left"><b>Jakarta, 16 Mei 1991</b></td></tr>

<tr bgcolor=#40c7ee><td align="left"><b>Pendidikan Formal</b></td>
<td align="left"><b>SDN Jatirahayu V Bekasi   1997-2003
         SMP Angkasa Jakarta   2003-2006
         SMUN 113 Jakarta    2006-2009
         Universitas Gunadarma Depok  2009</b></td></tr>

<tr bgcolor=#40c7ee><td align="left"><b>Pendidikan Non Formal</b></td>
<td align="left"><b>-     Lembaga Bahasa LIA, Jakarta          2007-2008
        - Workshop Microsoft Visual Basic.NET, 
             Universitas Gunadarma Depok           2010
        - Workshop Introduction to XML,
      Universitas Gunadarma Depok            2010
        - Seminar Multimedia Contact Center Technology, Universitas Bina Nusantara Jakarta     2010
        - Seminar Uni-Industry Collaboration
      Universitas Gunadarma Depok           2010</b></td></tr>

</b></table>
<center><h1><a href="http://qie16.blogspot.com">Alamat Blog Saya</a></h1></center>
</font>
</pre>
</body>
</html>

3. Setelah selesai membuat koding, lalu simpan dengan nama "csscoba.html" di folder images yang sudah dijelaskan pada tutorial sebelumnya. 4. Buka Mozilla Firefox lalu pilih menu file > open file > cari folder images > buka csscoba.html, Maka tampilan akhirnya seperti dibawah ini

Blog Is My Inspiration :)

Sabtu, 20 April 2013

Tutorial Membuat Curriculum Vitae pada HTML menggunakan CSS

Tidak ada komentar:

Posting Komentar

Laman