Pada postingan yang terdahulu, kita telah belajar bagaimana cara membuat CV sederhana dengan menggunakan html. Nah, saya akan sedikit mempercantik tampilan CV dengan menambahkan style. Sebelum masuk ke tutorial cara penambahan style, alangkah baiknya kita mengenal apa itu CSS.
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML danXHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada 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 dokumen.Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Setelah kita memahami apa itu CSS, maka saatnya kita menerapkan pada CV yang kita buat sebelumnya.
- Untuk membuat file CSS, siapkan text editor, misalkan notepad, lalu ketikkan script dibawah ini, setelah itu simpan dengan nama style.css
body{
background-image: url(‘pemandangan.jpg’);
}
#wrapper{
width: 875px;
margin-right: auto;
margin-left: auto;
}
.tabel {
margin-left:20px;
width: 700x;
padding: 10px;
border-radius: 12px;
border: 3px solid rgb(0,0,51);
}
#judul{
background-color: rgb(111,178,208);
padding: 1em;
text-align: center;
}
#title {
color: rgb(0,0,0);
width: 550px;
margin: 0px 10px;
padding-top: 1px;
font-size: 18px;
}
table{
background-color: rgb(200,200,200);
}
td{
border: rgb(192,192,192);
font-weight: bold;
}
- Lalu modifikasi file html ada CV dengan menambahkan / mengubah bagian tag <head> menjadi seperti dibawah ini.
<head>
<title>Curiculum Vitae Anthonius Adnan</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
- Perlu diperhatikan, bila pada pembuatan file css, anda menyimpannya dengan nama lain (namafile.css), maka pada href=”****.css”, ubahlah dengan nama yang anda masukkan tadi, hal ini bertujuan agar file css dapat ter-load oleh file html kita.
- Setelah itu, kembali lakukan modifikasi terhadap tag <h2> tempat Tulisan “Data Pribadi”, “Pendidikan formal”, dan “Pengalaman Kerja”, dari yang sebelumnya seperti script dibawah ini:
<h2>Data Pribadi</h2>
<h2>Pendidikan Formal</h2>
<h2>Pengalaman Kerja</h2>
menjadi seperti script dibawah ini :
<span id =”title”><h2><fontsize = 24>Data Pribadi</fontsize></h2> </span>
<div class=”tabel”><span id =”title”><h2> Pendidikan Formal</h2> </span>
<span id =”title”> <h2> Pengalaman Kerja </h2> </span>
- Untuk mempermudah anda dalam mengedit file html, maka saya akan berikan script yang sudah saya modifikasi.
<html>
<head>
<title>Curiculum Vitae Anthonius Adnan</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<body>
<div id=”wrapper”>
<div id=”judul”>
<h1>Curiculum Vitae</h1>
<span id =”title”><h2><fontsize = 24>Data Pribadi</fontsize></h2> </span>
<div class=”tabel”>
<table border=”10px” width=”800px”>
<tr>
<td width=”25%”>Nama Lengkap</td>
<td width=”1%”>:</td>
<td><b>Anthonius Adnan</b></td>
<td rowspan=”4″ width=”150px”><img src=”ANTHONIUS ADNAN.jpg” alt=”CV Anthonius Adnan.png” title=”CV Anthonius Adnan.png” height=”200px” width=”150px”></td>
</tr>
<tr>
<td>Tempat, Tanggal Lahir</td>
<td>:</td>
<td>Pekanbaru, 20 Januari 1990</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>Taman Pondok Cabe B 13 / 6. Jln Raya Parung Ciputat</td>
</tr>
<tr>
<td>Kewarganegaraan</td>
<td>:</td><td>Indonesia</td></tr>
<tr>
<td>No. Telepon / HP</td>
<td>:</td>
<td>021-7410955 / 089652849056</td>
</tr>
<td>Email</td>
<td>:</td>
<td>anthonius_adnan@yahoo.com</td>
</tr>
</tbody>
</table>
</div><span id =”title”><h2> Pendidikan Formal</h2> </span>
<div class=”tabel”>
<table border=”10px” width=”800px”>
<tbody>
<tr>
<td width=”25%”>2009-Sekarang</td>
<td width=”1%”>:</td>
<td>Universitas Gunadarma</td>
</tr>
<tr>
<td>2005-2009</td>
<td>:</td>
<td>SMA Mater Dei, Pamulang</td>
</tr>
<tr>
<td>2003-2005</td>
<td>:</td>
<td>SMP Mater Dei, Pamulang</td>
</tr>
<tr>
<td>1996-2002</td>
<td>:</td>
<td>SD Mater Dei, Pamulang</td>
</tr>
</tbody>
</table>
</div><span id =”title”> <h2> Pengalaman Kerja </h2> </span>
<div class=”tabel”>
<table border=”10″ width=”800px”>
<tbody>
<tr>
<td>Oktober 2010 – Oktober 2012</td>
<td width=”1%”>:</td>
<td>Internet Aktivis PT Redbuzz</td>
</tr>
</tbody>
</table>
</div>
</div></body>
</html>
Note : dalam pembuatan file css, semuanya harus diletakkan di dalam 1 folder yang sama. Ini bertujuan agar file css dapat ter-load oleh file CV.html
lokasi penyimpanan file css dan html
Apabila semuanya selesai dilakukan, saatnya kita mencoba menjalankan file html yang telah dimodifikasi. Jika script dimasukkan secara benar, maka akan keluar tampilan dibawah ini :
hasil akhir file html yang telah dimodifikasi
Demikianlah tutorial mengenai penambahan file css dalam menghias tampilan file html. Terimakasih.
Hanya untuk cuap2 saja... :D 