Senin, 27 Mei 2013

Penggunaan CSS pada desain HTML

Kita harus mendesain halaman web kita seindah mungkin agar dikunjungi banyak orang, orang menjdi tidak bosan ketika mengunjungi web anda. Misalnya di halaman anda diberi gambar atau mungkin diberi animasi cursor atau mungkin font(huruf) diberi warna atau mungkin anda ingin mengganti model font(huruf)....
Pakai apa ya kira-kira supaya tampilan halaman web kita tampil semenarik mungkin? hmmmm....mikir dulu....ah...Jawabannya adalah menggunakan FILE CSS.

Apa itu CSS? Makanan apa sih CSS itu? Kepanjangan dari CSS adalah CASCADING STYLE SHEET. CSS merupakan file yang berfungsi untuk mendesain dan membuat tampilan halaman web semenarik mungkin. file CSS berekstensi *.css, CSS dapat diimplementasikan di berbagai tools pemrograman web seperti ASP.Net, ASP, PHP, Crypton,dll.


File CSS dibuat di Adobe Dreamweaver / EditPlus / Notepad / Notepad++


Langkah-langkah pembuatan File CSS dengan program Notepad :

1. Buka Program Notepad 
2. Ketik kode Program ini di Notepad  :
      body
     {

           background-image : URL (NamaGambar.jpg);
       }
      h1
    {
          color:orange;
          text-align:center;
     }
    .kelasku
   {
         font-family:Times New Roman;
         font-size:20px;
    }


      Penjelasan dari contoh kecil di atas: 

      body{} merupakan coding yang berfungsi untuk mendesain tampilan halaman web anda secara global. Secara default, background dari halaman web itu berwarna putih. Ketika kita memakai file CSS dengan kode program body{ ... } maka background berubah dari warna putih menjadi gambar seukuran Firefox / Internet Explorer / Google Chrome.
Sedangkan code program .kelasku merupakan nama class. Class bersifat dinamis dan bisa digunakan di semua halaman website HTML.
3.  Setelah diketik code program yang ada di nomer 2, simpan dengan nama file tambahan.css dengan cara tekan CTRL+S kemudian ganti pilihan SAVE AS TYPE menjadi All Files lalu beri nama file tambahan.CSS pada kotak File Name terus tekan OK.

4. Masukkan File CSS itu di halaman HTML. Caranya adalah mengetik kode program . Kode itu ditulis setelah tag atau </font></p> <p> <font class="fullpost"><br></font></p> <p> <font class="fullpost">5. Setelah itu tampilan HTML anda akan berubah jadi warna yang menarik. Khusus untuk class penulisannya dilakukan dengan cara memanggil nama class di dalam tag HTML, contohnya sebagai berikut :</font></p> <p> <font class="fullpost">< td class=kelasku></font></p> <p> <font class="fullpost"><br></font></p> <p> <font class="fullpost"><br></font></p> <p> <font class="fullpost">SELAMAT MENCOBA teman-teman<br><br></font></p> <p> <font class="fullpost"> </font></p>

0 komentar: