CHIPAU BLOG : Membuat html+css sederhana "curiculum vitae (cv)"

Membuat html+css sederhana "curiculum vitae (cv)"

haloo..
Pada kesempatan ini saya akan menjelaskan contoh sederhana membuat html dengan css. Sama seperti postingan sebelumnya yaitu membuat Curiculum vitae(cv) dengan html namun, pada postingan kali ini tampilan html dipercantik dengan css. Cv yang ditampilakan dengan adanya header, tabel, gradasi warna pada background dan text penghubung ke halaman yang dituju.

Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS).

pada hasil tampilan html diatas bisa dilihat ada 3 gradasi warna yaitu ungu, kuning dan biru.. warna-warna bisa disesuaikan sesuai keinginan. terdapat tavel dengan 2 kolom dan 8 baris, serta header dan warna background headernya yang juga menggunakan warna gradasi.

kodingan html+css nya bisa dilihat seperti berikut, disimpan dengan file .html.

<html>
<head>
<style>
body{

background-image: linear-gradient(top, #a7ccfa 25%, #9900ff 50%, #ffff00 75%, #5494CC 90%); 
background-image: -o-linear-gradient(top, #a7ccfa 25%, #9900ff 50%, #ffff00 75%, #5494CC 90%); 
background-image: -moz-linear-gradient(top, #a7ccfa 25%, #9900ff 50%, #ffff00 75%, #5494CC 90%); 
background-image: -webkit-linear-gradient(top, #a7ccfa 25%, #9900ff 50%, #ffff00 75%, #5494CC 90%); 
background-image: -ms-linear-gradient(top, #a7ccfa 25%, #9900ff 50%, #ffff00 75%, #5494CC 90%); 
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #9900ff), color-stop(0.5, #9900ff), color-stop(0.75, #ffff00), color-stop(0.9, #5494CC) ); 
background-image: -webkit-gradient( 
linear, 
left top, 
left bottom, 
color-stop(0.2, #9900ff), 
color-stop(0.5, #9900ff), 
color-stop(0.75, #ffff00), 
color-stop(0.9, #5494CC) ); 
padding: 10px;
color: #000000;
width: 750px;
padding: 15px 50px 50px 50px;

border-radius: 30px;
margin: auto;
margin-top: 100px;

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>

<div class='septiani'>
<div class='cobacss'>
</div>
<h1 style="background-image: linear-gradient(top, #9900ff 20%, #9900ff 50%, #ffff00 75%, #5494CC 90%); 
background-image: -o-linear-gradient(top, #9900ff 20%, #9900ff 50%, #ffff00 75%, #5494CC 90%); 
background-image: -moz-linear-gradient(top, #9900ff 20%, #9900ff 50%, #ffff00 75%, #5494CC 90%); 
background-image: -webkit-linear-gradient(top, #9900ff 20%, #9900ff 50%, #ffff00 75%, #5494CC 90%); 
background-image: -ms-linear-gradient(top, #9900ff 20%, #9900ff 50%, #ffff00 75%, #5494CC 90%); 
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #9900ff), 
color-stop(0.5, #9900ff), color-stop(0.75, #ffff00), color-stop(0.9, #5494CC) );
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #9900ff),
 color-stop(0.5, #9900ff), color-stop(0.75, #ffff00), color-stop(0.9, #5494CC) );
padding: 10px; color: #000000;border-bottom: 6px solid #1c058e;">
CURRICULUM VITAE</h1>
<div>

<title>Curriculum Vitae</title>
<body>
<font color= face=times new roman size=5>
<pre>
<br><p>
<img src="septi-.jpg" align="left" height="190" width="120"/></p>
</br>

<table width="600" border="6"  cellpadding="7" cellspacing="2" align="center" bgcolor="black">
<tr bgcolor=#ffffff><td align="left"><b>Nama</b></td>
<td align="left"><b>Septiani Ambarwati</b></td></tr>
<tr bgcolor=#ffffff><td align="left"><b>Jenis Kelamin<b/></td>
<td align="left"><b>Perempuan</b></td></tr>
<tr bgcolor=#ffffff><td align="left"><b>Alamat</b></td>
<td align="left"><b>Jalan Puskesmas RT.005/RW.011 NO.52 Jakarta Timur</b></td></tr>
<tr bgcolor=#ffffff><td align="left"><b>Telepon</b></td>
<td align="left"><b>085716609147</b></td></tr>
<tr bgcolor=#ffffff><td align="left"><b>Agama</b></td>
<td align="left"><b>Islam</b></td></tr>
<tr bgcolor=#ffffff><td align="left"><b>Tempat Tanggal Lahir</b></td>
<td align="left"><b>Jakarta, 9 September 1991</b></td></tr>
<tr bgcolor=#ffffff><td align="left"><b>Pendidikan Formal</b></td>
<td align="left"><b>SDN Kalisari 02 Pagi   1997-2003
         SMPN 102 Jakarta   2003-2006
         SMUN 98 Jakarta    2006-2009
         Universitas Gunadarma Depok  2009</b></td></tr>
<tr bgcolor=#ffffff><td align="left"><b>Pendidikan Non Formal</b></td>
<td align="left"><b>- Workshop Video Editing Ulead
             Universitas Gunadarma Depok           2010
        - Workshop Oracle,
      Universitas Gunadarma Depok            2011
        - Seminar Industri Music Indonesia, Universitas Gunadarma Depok     2010
        - Seminar Uni-Industry Collaboration
      Universitas Gunadarma Depok           2010</b></td></tr>
</b></table>
<center>
<h1>
<a href="http://punyachipau.blogspot.com">Kunjungi Blog Saya :)</a></h1>
</center>
</font>
</pre>
</body>
</html>

terimkasih, silahkan mencoba :)

This entry was posted on Senin, 22 April 2013 . You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response.

CHIPAU BLOG

Pages

Membuat html+css sederhana "curiculum vitae (cv)"

Your Reply

Followers

Blog Archive

About Me

deretan blog

nice click

kampusku

Labels

Facebook Badge

Blog Archive

Cari Blog Ini