BLOG - Rico -

BLOG - Rico -

Minggu, 21 April 2013

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 :


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 :
  1. 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.
  2. 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.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Posts RSSComments RSSBack to top
© 2011 BLOG - Rico - ∙ Designed by BlogThietKe
Released under Creative Commons 3.0 CC BY-NC 3.0