Elish Blog's: Belajar Menghias HTML dengan CSS

Sebelumnya kita sudah belajar tentang cara membuat CV dengan HTML..Nah,sekarang kita masuk ke materi selanjutnya yang juga menjadi tugas kedua dalam mata kuliah Pemrograman Berbasis Web yaitu Menghias HTML dengan CSS..

Apa itu CSS ?

Sepertinya kita sering banget mendengar istilah CSS, tapi bagi orang awam tentang dunia web dan Internet pastinya bingung atau bahkan banyak yang tidak peduli apa itu CSS. Sebenarnya kalo kita punya profile di Facebook dan kita sering mengutak-ngatik tampilan profile kita, berarti secara langsung kita sudah berhubungan dengan yang namanya CSS, Nah lo…baru nyadar kan?

CSS bekerja sebagai pelengkap pada HTML, jadi untuk mengerti CSS paling tidak kita harus sedikit tahu tentang HTML. Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan menggunakan Methode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat). CSS juga memungkinkan si pembuat web untuk memodifikasi HTML untuk membentuk tampilan sebuah website. Jadi kalo kita ini adalah arsitek, maka HTML adalah bangunannya dan CSS adalah desain interior dan eksteriornya. Web tanpa CSS bagai sayur tanpa garam.hehe

Nah,itu tadi merupakan sedikit penjelasan tentang CSS biar kalian juga mengetahui apa itu sebenarnya CSS..Sekarang kita akan memulai prakteknya yaa..Karena lebih bagus dipraktekan kalau kita sudah mengetahui teorinya.hehe

Langsung aja teman-teman ikuti langkah-langkah berikut ini :

Kalian buat terlebih dahulu file CSSnya dengan syntax berikut ini :

Jangan lupa sebelum kalian mengetik atau mengcopas syntax tersebut, kalian harus menyimpan terlebih dahulu gambar sebagai background di webnya di folder yang sama dengan file index.html,seperti contoh nama file :wallpaper.jpg..

2. Setelah kalian selesai mengetik ataupun mengcopas syntax diatas,jangan lupa save nama filenya dengan ekstension css seperti contoh nama file diatas saya save dengan nama : bgrd.css.

3. Selesai kalian save,selanjutnya kalian harus menghubungkan file HTML (index.html) dengan file CSSnya (bgrd.css). Dimana syntax tersbut diletakan dibawah tag

dengan syntax berikut ini :

Syntax tersebut digabungkan dengan syntax yang sudah dibuat dalam file index.html..Seperti yang terlihat pada tampilan dibawah ini :

<br />
<html><br />
  <head><br />
    <title>Curiculum Vitae Matilda Haumahu</title><br />
	<link rel="stylesheet" href="bgrd.css" type="text/css"><br />
  </head><br />
  <body><br />
    <h1>
Curiculum Vitae</h1>
<h2>
Data Pribadi</h2>
<table border="1px" width="800px">      <tbody>
<tr>
          <td width="25%">Nama Lengkap</td>
          <td width="1%">:</td>
          <td><b>Matilda Khaterine Elishabeth Haumahu</b></td>
          <td rowspan="4" width="150px"><img src="matilda.jpg" alt="CV Matilda Haumahu.jpg" title="CV Matilda Haumahu.jpg" height="200px"   width="150px"></td>
        </tr>
<tr>
	  <td>Tempat, Tanggal Lahir</td>
          <td>:</td>
          <td>Ternate, 18 Mei 1991</td>
        </tr>
<tr>
          <td>Alamat</td>
          <td>:</td>
          <td>Jalan Flamboyan Gang BNKP Gereja Nias No.8 Depok Lama</td>
        </tr>
<td>Email</td>
          <td>:</td>
          <td>ambonessgirl.elica@gmail.com</td>
        </tr>
</tbody>
    </table>
<h2>
Pendidikan Formal</h2>
<table border="1px" width="800px">      <tbody>
<tr>
          <td width="25%">2009-Sekarang</td>
          <td width="1%">:</td>
          <td>Universitas Gunadarma, Fakultas Ilmu Komputer Jurusan Sistem Informasi, Depok Jawa Barat</td>
        </tr>
<tr>
          <td>2005-2008</td>
          <td>:</td>
          <td>SMA PSKD 7 Depok, Jawa Barat</td>
        </tr>
<tr>
          <td>2002-2005</td>
          <td>:</td>
          <td>SMP Negeri 6 Ambon</td>
<tr>
          <td>1996-2002</td>
          <td>:</td>
          <td>SD PDK Negeri 16 Ambon</td>
        </tr>
</tr>
<tr>
          <td>1995-1996</td>
          <td>:</td>
          <td>TK Pembina, Rumah Tiga Ambon</td>
        </tr>
<tr>
        </tbody>
    </table>
<h2>
Pendidikan Non Formal</h2>
<table border="1" width="800px">     <tbody>
<tr>
          <td width="25%">Juni 2008 - Agustus 2008</td>
          <td width="1%">:</td>
          <td>Kursus Bahasa Jerman, Jl.Sudirman Jakarta</td>
        </tr>
</tbody>
    </table>
</table>
<h2>
Pengalaman Kerja</h2>
<table border="1" width="800px">     <tbody>
<tr>
          <td width="25%">2012-sekarang</td>
          <td width="1%">:</td>
          <td>Asisten Laboratorium Sistem Informasi, Universitas Gunadarma</td>
        </tr>
<tr>
          <td width="25%">2011 - 2012</td>
          <td width="1%">:</td>
          <td>Petugas Monitoring Mahasiswa di Universitas Gunadarma</td>
        </tr>
<tr>
          <td width="25%">2008-sekarang</td>
          <td width="1%">:</td>
          <td>Guru Private untuk Pelajaran Bahasa Inggris, Matematika dan IPA</td>
        </tr>
</tbody>
    </table>
<br><br />
<br><br />
  <a href="hal2.html" target="_blank" title="SIAPAKAH SAYA ?">Siapakah Saya ?</a><br />
<br><br />
<br><br />
<br><br />
<br><br />
</body><br />
</html><br />

4. Kalian harus pastikan bahwa semua file harus berada dalam satu folder yang sama..
Seperti dapat kalian lihat dibawah ini :

5. Jika semua sudah berada dalam satu folder yang sama maka kalian tinggal menjalankan file : index.html dengan cara : double klik pada file index.html.
Hasilnya dapat kalian lihat seperti dibawah ini :

Sekian dari tutorial pembelajaran menghias HTML dengan CSS..Semoga dapat bermanfaat buat kalian semua..Mohon maaf jika ada kesalahan kata..

Senin, 22 April 2013

Belajar Menghias HTML dengan CSS

0 komentar:

LINK GUNADARMA

Menu Utama

MY NAME'S ELISH

SEARCH AJA ISTILAHNYA..^_^

CERITA ELISH

TIME'S MONEY

NGOBROL BARENG YUK

KAMU PENGUNJUNG BLOG ELISH KE

ELISH BLOG GUEST