Gambar oleh Tobias Herrmann dari Pixabay




Pada kesempatan kali ini admin akan bahas tentang bagaimana cara membuat curriculum vitae atau CV menggunakan Script/kode HTML. Kode HTML sendiri adalah sebuah kode yang mana dapat kita gunakan untuk mengatur tampilan sebuah laman atau situs web guna pengembangan Website/web developer.

Perintah-perintah yang digunakan untuk membuat curriculum vitae ini juga terbilang masih sangat sederhana dan andapun saya yakin akan cepat memahami penggunaan kode-kode yang akan saya sampaikan. Curriculum vitae sendiri sebenarnya dapat dibuat dengan menggunakan Microsoft Office Word ataupun software pengolah kata lainnya.

Script yang akan saya bagikan dibawah ini dapat anda modifikasi dengan mengganti Background ataupun lainnya. yang saya share hanyalah sebuah rangka untuk anda mulai mencoba dan belajar lebih tentang HTML dan CSS. Walaupun HTML dan CSS bukanlah merupakan bahasa pemrograman, tetapi untuk mempelajari dan menguasainya akan sangat penting bagi anda khususnya yang bercita-cita sebagai web developer.



Penjelasan Kode
  Saya akan menjelaskan secara singkat tentang kode-kode yang saya gunakan untuk membuat curriculum vitae ini, kode ini adalah perpaduan antara HTML dan CSS inline. artinya kode CSS yang terdapat dalam kode HTML dalam tag style. Adapun penjelasan kodenya adalah :


- Title <title></title>
 Perintah atau kode title digunakan untuk penamaan scrip atau kode HTML yang kita gunakan, perintah ini akan terlihat di atas Link dari tampian Browser.

- Header <header></header>
Header digunakan sebagai tempat bagi judul  untuk curriculum vitae kita, Header muncul sebagai judul dari script ataupun postingan yang kita buat. Anda dapat membuat judul dengan menambahkan tag "p" atau paragraf sebelum dan sesudah dari penamaan judul.

- <img src=" " width=" " height" ">
Kode ini merupakan pemanggil gambar yang akan kita gunakan sebagai foto diri atau anda juga bisa menggunakan untuk kepentingan lain, gambar ini dapat anda ambil dari link ataupun media penyimpanan anda. Width berarti lebar dan height adalah tinggi, anda dapat menambahkan salah satu dari width ataupun height saja sudah cukup untuk mengatur posisinya karena yang tidak disebutkan akan otomatis menyesuaikan bentuk aslinya.

- Table <table></table>
Sangat jelas bahkan dari namanya sendiri bahwa kode ini digunakan untuk membuat sebuah table. Anda dapat mengatur tablenya sesuai dengan yang anda inginkan dengan CSS. Table akan selalu diikuti dengan tr dan td.

- tr dan td
Kode ini berguna sebagai pembuat baris dan kolom dalam tabel. Tanpa kode ini, table yang anda buat tidak akan bekerja karena tidak terdapat baris dan kolom.

- Cellpadding
Cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan teks tabel, nilai dalam kode cellpadding ini adalah angka, contohnya cellpadding="3" dan seterusnya.

- Cellspacing
Hampir mirip dengan cellpadding, bedanya cellspacing adalah pengatur jarak antar spasi dalam tabel, nilainya juga sama dengan cellpadding yaitu angka saja tanpa perlu satuan px, ataupun lainnya.

- Center <center></center>
Center adalah kode yang digunakan untuk mengatur posisi yang berada dalam tag center, posisinya akan secara otomatis berada ditengah.

- Hover
Hover adalah sebuah tag CSS yang mana akan membuat tampilan berubah sesuai yang anda perintahkan, biasanya adalah warnanya berubah ketika kursor atau petunjuk berada diatas link yang diberi hover.


Kode HTML
  kode atau script HTMLnya :


<!DOCTYPE html>
<html>
<head>
<title>CV Tugas Design Web</title>

<style type="text/css">


h3{
font-family:verdana;
color: white;
}

body{
background-image:url(https://motionarray.imgix.net/preview-48500CXyqzjtUPH-low_0000.jpg?w=660&q=60&fit=max&auto=format);
}

table{
color: white;
background-color: rgba(0, 0, 0, 0.8);

}

p.upgan{
text-decoration: underline;
font-size: 16px;
color: white;
text-align: center;

}

a:hover {color: green;}

    </style>

</head>
<body>

  <header>
<center>
<h3> Curriculum Vitae</h3>
    </center>
  </header>

  <hr>
<br><br>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtKaeg5GSFLPAvWcy1dLEWoxmn_gmTV7hVJ4zEMv4Xc8Sqz7pdzBYLmCcUZqKuC5_zFLvm-Qkr24A-QXWSGr0g1QC1o7RQTI_GT5ppAvQStSo2117WDzC0q1z07P52e3AVsAAko2m4jdLA/s1600/DSC_0133.JPG" alt="Foto Saya" width="100" height="140"></center>
<br><br>


<p class="upgan">Data Pribadi</p>
<br>
<center><table cellpadding="7" cellspacing="0">
<tr>
<td>Nama</td>
<td>:</td>
<td>Riski Abiyantoro</td>
</tr>
<tr>
<td>Nim</td>
<td>:</td>
<td>51904*****</td>
</tr>
<tr>
<td>Prodi</td>
<td>:</td>
<td>S1-Teknik Informatika</td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><a href="#">Xsample.gmail.com</a></td>
</tr>
<tr>
<td>Nomer HP/WA</td>
<td>:</td>
<td>0821831*****</td>
</tr>
<tr>
<td>Instagram account</td>
<td>:</td>
<td><a href="http://instagram.com/riskiabiyan/">@riskiabiyan</a></td>
</tr>
</table>
<br>
<p class="upgan">Riwayat Pendidikan</p>
<table cellpadding="7">
<tr>
<td>SMPN 3 Tuba Tengah</td><td>|</td>
<td>SMAN 1 Tumijajar</td><td>|</td>
<td>Universitas Teknologi Yogyakarta</td>
</tr>
</table>

</center>

</body>
</html>




Screenshotnya :