April 22, 2013

MENGHIAS HTML DENGAN CSS

Pada tutorial kali ini kita akan mencoba membahas tentang bagaimana menghias HTML dengan CSS. Pada artikel sebelumnya yaitu membuat CV sederhana dengan menggunakan html, sebenarnya kita telah menggunakan CSS, akan tetapi ada baiknya jika kita mempelajari lagi kodingan apa saja yang merupakan bagian dari CSS tersebut agar kita dapat lebih paham.

Berikut koding HTML dengan CSS :


<html>
<head>
<title>Tugas Pemrograman Berbasis Web</title>
</head>
<body style= "background-color :green">
<div style="margin:auto; background-color:cyan; margin-top:50px;border-radius:10px; width:75%;">
<!--header-->
<div style= "background-color :blue" align="center"><br/><h1>CURICULUM VITAE</h1>
</div>
<!--header-->
<div style="margin-left:50px; margin-right:50px;">
<!--Data Pribadi-->
<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>
<br/>
<table border="1" cellpadding="1" cellspacing="1.5" width="500">
<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>
</div>
</body>
</html>

Maka akan tampil seperti gambar berikut :


Bandingkan dengan gambar sebelumnya :


Memang tidak jauh berbeda dari gambar sebelumnya, dikarenakan pada pembuatan CV sudah menggunakan koding CSS hanya saja tidak diperjelas yang mana saja kodingan CSS tersebut. Pada pembelajaran kali ini, saya akan menjelaskan yang mana saja yang termasuk kodingan CSS.

Berikut Keterangannya :
  1. style = background-colour: green, ini merupakan pengaturan warna pada CSS, yaitu warna background.
  2. <h1>....<//h1>, ini merupakan salah satu pengaturan font dan text pada CSS.
Margin, Border, Padding , ini merupakan bagian dari CSS Box Model, untuk lebih jelas perhatikan gambar berikut,

Untuk lebih jelas, ada baiknya jika sebelumnya telah membaca dan mempelajari artikel Contoh  Membuat CV (Curriculum Vitae) Sederhana dengan HTML.
 http://rakhmatmalik.blogspot.com/2013/04/tugas-pemrograman-web-contoh-membuat-cv.html

No comments:

Post a Comment