NPM : 14111300

Friday, March 27, 2015

Penulisan CV menggunakan bahasa 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></title>
</head> 
<body style= "background-color :#DEB887">
<div style= "background-color :BROWN" align="center"><h1>CURRICULUM VITAE</h1>
</div>
<div style="margin-left:150;">
<h2>Personal Identity</h2>
<table width="500">
<tr>
<td>Name </td>
<td> : Marilo Armanda Modjo </td>
<td rowspan="6" height="100"><p></p>
</td></tr>
<tr>
<td>Birthdate </td>
<td> : Bandar Lampung, 23rd August 1993 </td>
</tr>
<tr>
<td>Sex   </td>
<td> : Male </td>
</tr>
<tr>
<td>Religion </td>
<td> : Moslem </td>
</tr>
<tr>
<td>Addres </td>
<td> : Jln. A no 19 Cipinang Muara, Jakarta Timur</td>
</tr>
<tr>
<td>Email </td>
<td> : marilo.armanda@gmail.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 06 Cipinang Muara Jakarta</td>
<td>2005</td>
</tr>
<tr>
<td>SMP Negeri 52 Jakarta</td>
<td>2008</td>
</tr>
<tr>
<td>SMA Negeri 71 Jakarta</td>
<td>2011</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 E Commerce</li></ol></td>
<td align="center">2012</td>
</tr>
<tr>
<td align="justify"><ol>
<li>Seminar Prasidang</li>
<li>Seminar Current Trends of Opening System di Universitas Gunadarma</li>
<li>Seminar CISCO di Universitas Gunadarma</li>
<ol>
</td>
<td align="center">2012</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">2013</td>
</tr>
</table>
</ul>
</div>
<div align="center"><a href="sertifikat.html">Sertifikat</a><br/>
</div>
</body>
</html>





Keterangan :
Pada <html>kode HTML</html> semua yang berada di dalam <html> akan dianggap dokumen HTML.
Pada <head>kode HTML</head> kode HTML akan dianggap sebagai informasi mengenai halaman web.
Pada <title>kode HTML<./title> merupakan kode untuk mendefinisikan judul halaman web yang akan kita buat.
Pada <body>kode HTML</body> digunakan untuk memasukkan konten pada halaman web yang akan kita buat.
Pada <body> terdapat style = "background-color: yellow" kode tersebut digunakan untuk menampilkan background warna pada bagian body halaman web yang kita buat.
Pada <h1>kode HTML</h1> digunakan untuk menampilkan heading pada konten halaman web.
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.
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 :
Pada kode HTMl <ul><li>Kode HTML</li></ul> digunakan untuk membuat list berjenis unorder list yaitu list bullet, sedangkan <ol><li>Kode HTML</li></ol> digunakan untuk membuat list berjenis order list yaitu angka.
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.