Minggu, April 21, 2013

Menghias HTML Menggunakan CSS

 CSS (Cascading Style Sheets) merupakan bahasa pemrograman yang digunakan untuk mengontrol tampilan dari sebuah halaman website. Dari postingan sebelumnya Membuat CV Menggunakan Bahasa HTML yang telah dibuat, saya akan mencoba meletakkan CSS kedalam file HTML tersebut. Beberapa style CSS yang akan saya coba antara lain Inline Style Sheets, Embeded Style Sheets, dan Link Style Sheets.


Sebelumnya, buka file HTML yang telah dibuat (CV.html) di Notepad ++. Kemudian coba style yang telah disebutkan, yaitu :

  • Inline Style Sheets
Dalam Inline Style Sheets, CSS diletakkan langsung pada tag HTML yang bersangkutan. Penulisannya dengan menambahkan atribut style="......"ke dalam tag HTML. Style tersebut hanya berlaku pada tag yang bersangkutan sehingga tidak mempengaruhi tag lainnya. Contoh penggunaannya sebagai berikut :



Kata "Pendidikan" dan "Kegiatan" diatur menggunakan CSS dengan ukuran font 14pt, warna tulisan biru dan dengan tipe font Bradley Hand ITC.
  • Embeded Style Sheets
Dalam Embeded Style Sheets, CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan. Contoh penggunaannya sebagai berikut :


Semua script yang ada di dalam tag body diatur dengan warna tulisan hitam dan yang ada di dalam tag h2 diatur menggunakan style warna penulisan warna biru, tipe tulisan Bradley Hand ITC, dan ukuran font 30px. 
  • Link Style Sheets
Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style> … </style> dibuat pada berkas terpisah dari berkas HTML yang membutuhkan CSS.Kemudian berkas lain tersebut disimpan dalam format .css. Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di antara tag <head> … </head>. Contoh (simpan dengan nama link.css) :

Pertama, buat file baru pada Notepad ++ dengan nama link.css :
 


Dalam file link.css akan diatur background yang berlokasi di http://www.zingerbugimages.com/backgrounds/peach_mini_dots_on_light_orange.jpg disetiap tag table. file link.css disimpan di dalam folder yang sama dengan file HTML yang lainnya atau file yang akan disisipkan file link.css tersebut.


Kedua, kembali membuka file CV.hml. Sisipkan file link.css diantara tag <head>...</head>, dengan penulisan sebagai berikut :
Maka dari beberapa style CSS diatas yang telah dibuat menghasilkan output seperti :




Demikian beberapa style CSS yang telah dibuat untuk menghias tampilan CV dengan menggunakan codingan yang telah diposting sebelumnya. Selamat Mencobaa .. ^^
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)