Rabu, 10 Juni 2015
CV berbentuk kodingan 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 :white">
<div style= "background-color :blue" align="center"><h1>CURICULUM VITAE</h1>
</div>
<div style="margin-left:150;">
<h2>Identitas Pribadi</h2>
<table width="500">
<tr>
<td>Nama </td>
<td> : Rizky Prastiyanto </td>
<td rowspan="6" height="100"><p><img src="DSC_6302.png"/></p>
</td></tr>
<tr>
<td>Tempat, tanggal lahir </td>
<td> : Jakarta, 16 November 1993 </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> : Raya Ceger, Jakarta Timur</td>
</tr>
<tr>
<td>Email </td>
<td> : rizkypraz_16@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 01 Ceger Jakarta</td>
<td>2003</td>
</tr>
<tr>
<td>SLTP Negeri 222 Jakarta</td>
<td>2006</td>
</tr>
<tr>
<td>SMA Negeri 64 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 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.
http://asridani.blogspot.com/2014/03/cara-membuat-html-dengan-notepad_26.html
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar