Contoh CV Menggunakan HTML Untuk Membuat Daftar Riwayat Hidup
Contoh CV menggunakan HTML untuk membuat daftar riwayat hidup dengan HTML - Setelah kemarin membahas tentang cara membuat biodata diri dengan HTML, pada kesempatan ini Anaktekno.com akan berbagi script biodata HTML dan CSS lagi yang sedikit lebih keren. Hhe.. hhe..
Jika diperhatikan secara detail, tutorial sebelumnya kelebihannya hanya ada code membuat CV HTML dengan animasi tag marquee tanpa CSS. Jadi benar-benar murni HTML. Di sini, kita akan membuat daftar riwayat hidup dengan HTML dan CSS.
Sedikit informasi, jika HTML adalah struktur dasar dalam pembuatan website maka CSS adalah kode untuk mendesain tampilan website menjadi lebih menarik.
Oh ya, saya lebih banyak membahas HTML dan CSS karena umumnya yang mencari tutorial ini untuk yang sedang belajar kedua bahasa tersebut. Adapun untuk membuat Curriculum Vitae atau CV untuk melamar kerja, bisa secara online lewat Canva dan pakai CorelDraw atau Photoshop untuk offline.
Cara Membuat Website CV Menggunakan HTML Dan CSS
Untuk membuat CV terlebih dahulu kita harus mengetahui apa saja yang harus disertakan di dalamnya. Jika melihat contoh CV Resume profesional online di internet, pada dasarnya daftar riwayat hidup memuat informasi profil data diri, pendidikan, keahlian, pengalaman kerja dan kontak.
Agar prosesnya lebih mudah dan cepat, silahkan tulis terlebih dahulu daftar informasi tersebut di Notepad atau Microsoft Word.
Selanjutnya kita harus membuat dokumen HTML dan CSS. Namun pada script biodata HTML dan CSS ini, saya menambahkan kode CSS langsung di tag head agar hanya ada 1 file, yaitu .html.
Langsung saja, berikut ini cara membuat website CV menggunakan HTML dan CSS sederhana:
- Tekan tombol Start/Windows + E.
- Di dalam File Explorer, buka salah satu drive. Contoh D.
- Pilih salah satu folder atau buat folder baru.
- Kemudian di dalam folder tersebut, klik kanan dan pilih New > Text Document.
- Buka dokumen format txt (Notepad) dan copy paste script CV HTML dan CSS di bawah.
- Klik File pilih Save As.
- Pada File name ubah nama jadi biodata.html (akhiran .html).
- Pada Save as type pilih All Files.
- Klik tombol Save untuk simpan dokumen HTML.
- Buka dokumen HTML dan secara otomatis CV atau daftar riwayat hidup akan tampil di web browser.
- Kamu bisa mengupload script web profil pribadi tersebut ke Github agar bisa diakses secara online.
- Selesai.
Contoh CV Dengan HTML Dan CSS
Berikut ini contoh script CV dengan HTML dan CSS sederhana dan keren:
<html>
<head >
<title>DAFTAR RIWAYAT HIDUP</title>
<style type="text/css">
h1{
background-color: red;
padding: 4px;
}
h2{
color: white;
background-color: black;
padding: 3px;
}
.menu {
text-align: center;
background-color: black;
font-size:18px;
padding-top: 16pt;
}
.button {
background-color: white;
padding: 5px;
border-color: black;
text-decoration: none;
}
.button:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="menu">
<a href="#1" class="button">Profil</a>
<a href="#2" class="button">Pendidikan</a>
<a href="#3" class="button">Keahlian</a>
<a href="#4" class="button">Pengalaman</a>
<a href="#5" class="button">Kontak</a>
<br><br>
</div>
<h1 align="center">DAFTAR RIWAYAT HIDUP</h1>
<table align="center" border="1">
<tr><td colspan="2" bgcolor="#fff000"><img src="images.jpg" width="325px" height="200px" border="2"></td></tr>
<tr align="center">
<td> 085396717324 </td>
<td> Lara4store@gmail.com </td></tr>
</table>
<h2 id="1">PROFIL</h2>
<table align="center">
<tr>
<td width="1%">Nama</td>
<td width="10%">: Cristiano</td>
</tr>
<tr>
<td width="1%">Tempat Lahir</td>
<td width="10%">: Malaysia</td>
</tr>
<tr>
<td width="1%">Umur</td>
<td width="10%">: 23 Tahun</td>
</tr>
<tr>
<td width="1%">Alamat</td>
<td width="10%">: Luwu Utara</td>
</tr>
</table>
<h2 id="2">PENDIDIKAN</h2>
<table align="center">
<tr>
<td width="1%">Universitas</td>
<td width="10%">: Anaktekno</td>
</tr>
<tr>
<td width="1%">Jurusan</td>
<td width="10%">: Teknik Informatika</td>
</tr>
<tr>
<td width="1%">IPK</td>
<td width="10%">: 2,75</td>
</tr>
</table>
<h2 id="3">KEAHLIAN</h2>
<table align="center">
<tr>
<td width="1%">Digital Marketing</td>
<td width="10%">: SEO, SEO, Content Writer, Copywriting</td>
</tr>
<tr>
<td width="1%">Web Development</td>
<td width="10%">: HTML, CSS, JavaScript, Bootstrap, Codeigniter, Laravel, Etc.</td>
</tr>
<tr>
<td width="1%">Others</td>
<td width="10%">: C#, Java, .NET, Etc.</td>
</tr>
</table>
<h2 id="4">PENGALAMAN</h2>
<table align="center">
<tr>
<td width="1%">Content Writer</td>
<td width="10%">: Anaktekno.com, Matatm.com, dll.</td>
</tr>
</table>
<h2 id="5">KONTAK</h2>
<table align="center">
<tr>
<td width="1%">Linkedin</td>
<td width="10%">: Anaktekno.com</td>
</tr>
<tr>
<td width="1%">Facebook</td>
<td width="10%">: Anaktekno.com</td>
</tr>
<tr>
<td width="1%">Github</td>
<td width="10%">: Anaktekno.com</td>
</tr>
</table>
<footer>
<p align="center">
<font align="center" font color="blue">
<b>Copyright© 2022</b> Created with HTML <a href="https://www.anaktekno.com">Anaktekno.com</a>
</font>
</footer>
</body> </html>
<head >
<title>DAFTAR RIWAYAT HIDUP</title>
<style type="text/css">
h1{
background-color: red;
padding: 4px;
}
h2{
color: white;
background-color: black;
padding: 3px;
}
.menu {
text-align: center;
background-color: black;
font-size:18px;
padding-top: 16pt;
}
.button {
background-color: white;
padding: 5px;
border-color: black;
text-decoration: none;
}
.button:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="menu">
<a href="#1" class="button">Profil</a>
<a href="#2" class="button">Pendidikan</a>
<a href="#3" class="button">Keahlian</a>
<a href="#4" class="button">Pengalaman</a>
<a href="#5" class="button">Kontak</a>
<br><br>
</div>
<h1 align="center">DAFTAR RIWAYAT HIDUP</h1>
<table align="center" border="1">
<tr><td colspan="2" bgcolor="#fff000"><img src="images.jpg" width="325px" height="200px" border="2"></td></tr>
<tr align="center">
<td> 085396717324 </td>
<td> Lara4store@gmail.com </td></tr>
</table>
<h2 id="1">PROFIL</h2>
<table align="center">
<tr>
<td width="1%">Nama</td>
<td width="10%">: Cristiano</td>
</tr>
<tr>
<td width="1%">Tempat Lahir</td>
<td width="10%">: Malaysia</td>
</tr>
<tr>
<td width="1%">Umur</td>
<td width="10%">: 23 Tahun</td>
</tr>
<tr>
<td width="1%">Alamat</td>
<td width="10%">: Luwu Utara</td>
</tr>
</table>
<h2 id="2">PENDIDIKAN</h2>
<table align="center">
<tr>
<td width="1%">Universitas</td>
<td width="10%">: Anaktekno</td>
</tr>
<tr>
<td width="1%">Jurusan</td>
<td width="10%">: Teknik Informatika</td>
</tr>
<tr>
<td width="1%">IPK</td>
<td width="10%">: 2,75</td>
</tr>
</table>
<h2 id="3">KEAHLIAN</h2>
<table align="center">
<tr>
<td width="1%">Digital Marketing</td>
<td width="10%">: SEO, SEO, Content Writer, Copywriting</td>
</tr>
<tr>
<td width="1%">Web Development</td>
<td width="10%">: HTML, CSS, JavaScript, Bootstrap, Codeigniter, Laravel, Etc.</td>
</tr>
<tr>
<td width="1%">Others</td>
<td width="10%">: C#, Java, .NET, Etc.</td>
</tr>
</table>
<h2 id="4">PENGALAMAN</h2>
<table align="center">
<tr>
<td width="1%">Content Writer</td>
<td width="10%">: Anaktekno.com, Matatm.com, dll.</td>
</tr>
</table>
<h2 id="5">KONTAK</h2>
<table align="center">
<tr>
<td width="1%">Linkedin</td>
<td width="10%">: Anaktekno.com</td>
</tr>
<tr>
<td width="1%">Facebook</td>
<td width="10%">: Anaktekno.com</td>
</tr>
<tr>
<td width="1%">Github</td>
<td width="10%">: Anaktekno.com</td>
</tr>
</table>
<footer>
<p align="center">
<font align="center" font color="blue">
<b>Copyright© 2022</b> Created with HTML <a href="https://www.anaktekno.com">Anaktekno.com</a>
</font>
</footer>
</body> </html>
Adapun tampilan dari script di atas adalah sebagai berikut:
Penjelasan Coding CV Dengan HTML
Berikut ini penjelasan coding CV dengan HTML di atas:
1. Kode CSS
Script HTML biodata diri ini dilengkapi dengan CSS untuk memudahkan desain tampilan. Pada dasarnya ada 3 cara memasukkan CSS ke dalam HTML, yaitu inline di dalam emelen HTML, internal di dalam tag style di head, dan eksternal menggunakan link di head.
Di sini saya menggunakan style di head karena hanya merupakan template CV sederhana dengan satu halaman.
2. Penggunaan Class
Class digunakan untuk memanggil CSS yang ada di head. Bisa dilihat pada contoh di atas kita memanggil class menu dan button yang telah didefinisikan di head.
3. Membuat tabel
Cara membuat tabel di HTML cukup menggunakan tag table kemudian tr untuk baris baru dan td untuk kolom. Jika dilihat secara detail, terdapat kode untuk menggabungkan baris dan kolom di tabel script CV di atas.
Tutorial di atas hanya merupakan salah satu contoh coding CV sederhana. Kamu bisa mengembangkannya menjadi template resume HTML yang lebih keren dan menarik. Jadi, jangan ragu untuk edit dan sesuaikan template CV HTML gratis tersebut dengan data diri kamu.
Kamu juga bisa membuat CV menggunakan Bootstrap, Javascript atau PHP untuk menghasilkan website portofolio online maupun company profile.
Bukan tidak mungkin kamu bisa menjadi web developer yang membuat landing page template cv berbasis web yang bisa didownload dengan desain yang lebih keren dan profesional di masa yang akan datang. Tapi sebelum itu, belajar HTML dan CSS wajib hukumnya.
Lihat juga cara membuat Replit HTML
Demikianlah contoh CV menggunakan HTML untuk membuat daftar riwayat hidup. Semoga bermanfaat!
Anak Tekno Tertarik dengan dunia Blog dan SEO sejak 2017 dan terus belajar sampai detik ini..
