Menghias HTML dengan CSS

Postingan kali ini adalah tugas dari matakuliah Pemrograman Berbasis Web yang diajarkan oleh Dosen Aviarini Indrati dan lanjutan dari postingan Membuat Curriculum Vitae dengan HTML

CSS singkatan dari Cascading Style Sheets yang berguna untuk mempercantik tampilan halaman suatu website. Disini saya akan memberikan contoh penggunaan CSS untuk mempercantik tampilan CV yang sudah diposting sebelumnya. Jika anda ingin mempelajari lebih dalam tentang CSS anda dapat mempelajarinya disini.

Ubah index.html menjadi seperti berikut :

<html>
  <head>
    <title>Curriculum Vitae</title>
 <style>
 /* memberikan warna teks dengan warna #555555 pada semua tag h2*/
 h2{ 
 color:#555555;
 }

/* .wrapper maksudnya class="wrapper" pada tag html, semua yang memiliki class wrapper akan memiliki format berikut */
 .wrapper{
 width:auto; /* lebar halaman mengikuti lebar sebelumnya */
 border-radius:20px; /* Membuat layout menjadi lebih melengkung (disetiap ujung menjadi membulat) */
 border:2px solid green; /* Memberikan garis dengan ketebalan 2px dengan tipe solid dan berwarna hijau */
 padding:10px; /* memberikan padding sebesar 10px */
 text-align:center; /* Membuat teks rata tengah */

/* format background dibawah ini didapat dari http://www.colorzilla.com/gradient-editor/ */
 background: #b6e026; /* Old browsers */
 background: -moz-radial-gradient(center, ellipse cover, #b6e026 0%, #abdc28 100%); /* FF3.6+ */
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b6e026), color-stop(100%,#abdc28)); /* Chrome,Safari4+ */
 background: -webkit-radial-gradient(center, ellipse cover, #b6e026 0%,#abdc28 100%); /* Chrome10+,Safari5.1+ */
 background: -o-radial-gradient(center, ellipse cover, #b6e026 0%,#abdc28 100%); /* Opera 12+ */
 background: -ms-radial-gradient(center, ellipse cover, #b6e026 0%,#abdc28 100%); /* IE10+ */
 background: radial-gradient(ellipse at center, #b6e026 0%,#abdc28 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#abdc28',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

margin-top:50px; /* Memberikan jarak atas sebesar 50px */
 }
 
/* body maksudnya tag body / <body> */
 body{
 width:800px; /*  Memiliki lebar sebesar 800px */
 margin:0 auto; /* Layout menjadi ditengah */
 padding:0; /* Membuat padding menjadi 0 */
 background:#DDDDDD; /* Memberikan background warna #DDDDDD */ 
 }
 
/* a maksudnya tag a/ <a> */
 a{
 text-decoration:none; /* menghilangkan text-decoration, defaultnya underline (memiliki garis bawah) */
 }
 
 a:hover{ /* jika kursor berada di tag a*/
 text-decoration:underline; /* Teks akan memiliki garis bawah */
 }
 </style>
  </head>
  <body>
  <div class="wrapper">
    <h1>
Curiculum Vitae</h1>
<hr />
    <h2>
Personal Details</h2>
<table width="800px">
      <tbody>
<tr>
          <td width="25%">Full Name</td>
          <td width="1%">:</td>
          <td><b>Rico Ardiansyah</b></td>
          <td rowspan="5"><img src="foto_rico.jpg" alt="Foto Rico" title="Foto Rico" height="100px" width="75px"></td>
        </tr>
<tr>
          <td>Place, Date of Birth </td>
          <td>:</td>
          <td>Bogor, June 27, 1992</td>
        </tr>
<tr>
          <td>Address</td>
          <td>:</td>
          <td>Jl. Muara no 23 RT02/08, Pasir Jaya Bogor Barat, 16119</td>
        </tr>
<tr>
    <td>E-mail</td>
          <td>:</td>
          <td>rcardiansyah@gmail.com</td>
        </tr>
</tbody>
    </table>
<h2>
Educational Background</h2>
<table width="800px">
      <tbody>
<tr>
          <td width="25%">2009-Present</td>
          <td width="1%">:</td>
          <td>Majors of Information Systems at Gunadarma University, Depok</td>
        </tr>
<tr>
          <td>2006-2009</td>
          <td>:</td>
          <td>Senior High School No. 4, Bogor</td>
        </tr>
<tr>
          <td>2003-2006</td>
          <td>:</td>
          <td>Insan Kamil Junior High School, Bogor</td>
<tr>
          <td>1997-2003</td>
          <td>:</td>
          <td>Kota Batu 1 Elementary School, Bogor</td>
        </tr>
</tr>
</tbody>
    </table>
<br /><br />
  <a href="achievements.html" title="achievements"><h2>
Achievements >> </h2>
</a>
  </div>
</body>
</html>

Penjelasan program dapat dilihat melalui komentar dari program

Sebelumnya tampilannya seperti berikut :

Setelah menggunakan CSS tampilannya menjadi seperti berikut :

Sebenarnya tidak terlalu banyak yang berubah karna sebelumnya saya mempercantik halaman web memakai atribut HTML. Tetapi dengan menggunakan CSS kita mendapatkan beberapa keuntungan seperti berikut :

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet. Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet. Jadi, keuntungan menggunakan CSS, lebih praktis!

Dalam tutorial ini ada beberapa referensi yang menurut saya penting untuk dipelajari :

http://www.w3schools.com/ : Web ini sangat baik dalam menjelaskan materi karena dilengkapi dengan preview yang baik dalam memahami materi. Disini banyak sekali materi yang berhubungan dengan web.
http://www.colorzilla.com/gradient-editor/ : Web ini berguna untuk membuat warna dengan gradient tanpa anda mengerti CSS itu sendiri. Pada tutorial ini saya menggunakan web ini untuk membuat background pada CV.

Page

Minggu, 21 April 2013

Menghias HTML dengan CSS

1 comments

About Me

Blog Archive

Followers

Labels

Popular Posts

Total Pageviews