April 14, 2013

CONTOH MEMBUAT CV (CURRICULUM VITAE) SEDERHANA DENGAN HTML

Kali ini kita akan belajar seputar dasar-dasar HTML (Hypertext Transfer Protocol) yang merupakan bahasa yang digunakan untuk membuat website. Langkah pertama pada pembelajaran dasar HTML kali ini kita perlu menyiapkan dan menginstall editor teks yang digunakan untuk mengetikkan kode HTML, yaitu Notepad++. Selanjutnya kita akan membuat contoh halaman HTML, pada contoh kali ini kita akan membuat CV sederhana dengan 2 halaman web dimana halaman pertama adalah identitas pribadi dan kedua gambar sertifikat, perhatikan contoh kode halaman pertama berikut :

<html>
<head>
<title>Tugas Pemrograman Berbasis Web</title>
</head>
<body style= "background-color :yellow">
<div style= "background-color :red" align="center"><h1>CURICULUM VITAE</h1>
</div>
<div style="margin-left:150;">
<h2>Identitas Pribadi</h2>
<table width="500">
<tr>
<td>Nama </td>
<td> : Rakhmat Malik Ibrahim </td>
<td rowspan="6" height="100"><p><img src="DSC_6302.png"/></p>
</td></tr>
<tr>
<td>Tempat, tanggal lahir </td>
<td> : Jakarta, 23 Agustus 1991 </td>
</tr>
<tr>
<td>Jenis Kelamin </td>
<td> : Laki-laki </td>
</tr>
<tr>
<td>Agama </td>
<td> : Islam </td>
</tr>
<tr>
<td>Alamat </td>
<td> : Pondok Tirta Mandala, Depok II Tengah</td>
</tr>
<tr>
<td>Email </td>
<td> : rakhmat4b@yahoo.com</td>
</tr>
</table>
<h2>Riwayat Pendidikan</h2>
<ul>
<li>Pendidikan Formal</li>
<br/>
<table border="1" cellpadding="1" cellspacing="1.5" width="450">
<tr>
<td><b>Tingkatan Pendidikan<b/></td>
<td><b>LULUS</b></td>
</tr>
<tr>
<td>SDN RRI Cisalak</td>
<td>2003</td>
</tr>
<tr>
<td>SLTP Negeri 8 Depok</td>
<td>2006</td>
</tr>
<tr>
<td>SMA Negeri 79 Jakarta</td>
<td>2009</td>
</tr>
<tr>
<td>Universitas Gunadarma</td>
<td>Masih dalam perkuliahan semester 8</td>
</tr>
</table>
<br/>
<li>Pendidikan Non Formal</li>
<table border="1" cellpadding="1" cellspacing="1.5" width="850">
<tr>
<td align="center"><b>Jenis Pendidikan<b/></td>
<td align="center"><b>TAHUN</b></td>
</tr>
<tr>
<td align="justify"><ol>
<li>Kursus Teknisi Basic I Komputer Einvest Institute</li></ol></td>
<td align="center">2009</td>
</tr>
<tr>
<td align="justify"><ol>
<li>Seminar Teknologi 2010 di LDK Al-Hikmah STMIK Jakarta STI&K</li>
<li>Seminar Current Trends of Opening System di Universitas Gunadarma</li>
<li>Seminar Sosialisasi Hasil-hasil PHKI Batch III di Universitas Gunadarma</li>
<ol>
</td>
<td align="center">2010</td>
</tr>
<tr>
<td align="justify"><ol>
<li>Seminar Android Menggali Kreativitas & Peluang Bisnis Melalui Flexi Market & Telkomsel Market di Universitas Gunadarma</li>
<li>Seminar Multimedia System di Universitas Gunadarma</li>
</ol>
</td>
<td align="center">2011</td>
</tr>
</table>
</ul>
</div>
<div align="center"><a href="sertifikat.html">Sertifikat</a><br/>
</div>
</body>
</html>

Keterangan :
  1. Pada <html>kode HTML</html> semua yang berada di dalam <html> akan dianggap dokumen HTML.
  2. Pada <head>kode HTML</head> kode HTML akan dianggap sebagai informasi mengenai halaman web.
  3. Pada <title>kode HTML<./title> merupakan kode untuk mendefinisikan judul halaman web yang akan kita buat.
  4. Pada <body>kode HTML</body> digunakan untuk memasukkan konten pada halaman web yang akan kita buat.
  5. Pada <body> terdapat style = "background-color: yellow" kode tersebut digunakan untuk menampilkan background warna pada bagian body halaman web yang kita buat.
  6. Pada <h1>kode HTML</h1> digunakan untuk menampilkan heading pada konten halaman web.
  7. Pada <div>kode HTML</div> digunakan untuk memisahkan bagian satu dengan bagian lainnya, seperti pada <div style= "background-color :red" align="center"><h1>CURICULUM VITAE</h1></div> hanya kata "CURICULUM VITAE" yang rata tengah dan memiliki bakground merah.
  8. Sebelum membuat kode untuk memasukan gambar pada halaman web pastikan gambar yang akan di masukkan berada dalam satu folder yang sama dengan halaman web yang kita buat. Perhatikan gambar berikut :
  9. Pada kode HTMl <ul><li>Kode HTML</li></ul> digunakan untuk membuat list berjenis unorder list yaitu list bulletsedangkan <ol><li>Kode HTML</li></ol> digunakan untuk membuat list berjenis order list yaitu angka.
  10. Pada kode HTML <a href="sertifikat.html">Sertifikat</a> digunakan untuk membuat link lanjutan pada halaman web berikutnya sesuai dengan link yang disebutkan, dalam contoh kali ini link berikutnya yaitu sertifikat.html.
  11. Pada bagian kode HTML yang digunakan untuk membuat tabel adalah pada bagian :
  12. <table width="500">
    <tr>
    <td>Nama </td>
    <td> : Rakhmat Malik Ibrahim </td>
    <td rowspan="6" height="100"><p><img src="DSC_6302.png"/></p>
    </td></tr>
    .....
    .....
    .....
    <tr>
    <td>Universitas Gunadarma</td>
    <td>Masih dalam perkuliahan semester 8</td>
    </tr>
    </table>
    Pada bagian tag <table> adalah tag pembungkus pada pembuatan tabel. Di tabel ada 2 istilah yaitu row (baris) yang dibuat dengan tag <tr> dan sel-sel data (kolom) yang di buat dengan tag <td>
Berikut hasil dari kode di atas :



Selanjutnya kita akan membuat halaman kedua yaitu halaman web yang berisi konten gambar sertifikat, perhatikan contoh kode halaman kedua berikut :

<html>
<head>
<title>Tampilan Gambar Sertifikat</title>
</head>
<body>
<div style= "background-color :orange" align="center"><h1>Someday the dream will end</h1>
</div>
<div style="margin-left:150;">
<h2>Sertifikat</h2>
<table>
<tr>
<td>Tahun 2009 :</td>
</tr>
<tr>
<td><p><img src="scan0011.jpg"/></p></td>
</tr>
</table>
<br/>
<table>
<tr>
<td>Tahun 2010 :</td>
</tr>
<tr>
<td><p><img src="scan0010.jpg"/></p></td>
<td><p><img src="scan0003.jpg"/></p></td>
<td><p><img src="scan0005.jpg"/></p></td>
</tr>
</table>
<br/>
<table>
<tr>
<td>Tahun 2011</td>
</tr>
<tr>
<td><p><img src="scan0009.jpg"/></p></td>
<td><p><img src="scan0006.jpg"/></p></td>
</tr>
</table>
</div>
<br/>
<div align="center"><a href="Tugas.html">Identitas Pribadi</a><br/>
</div>
</body>
</html>

Berikut merupakan tampilan dari halaman web kedua :


Keterangan :
Untuk keterangan kode halaman web kedua bisa dilihat dan dipahami pada bagian keterangan halaman web pertama.

No comments:

Post a Comment