Senin, 16 Januari 2012

Cara Desain Web Dengan CSS


Sekilas HTML

        Hypertext Markup Language (HTML) adalah bahasa standar dalam menulis halaman web, HTML merupakan pengembangan dari standar pemformatan dokumen teks. HTML sebenarnya adalah dokumen dalam bentuk ASCII atau teks biasa yang dapat diterjemahkan oleh browser web menjadi suatu halaman yang menarik.
Kode-kode HTML yang kebanyakan digunaka pengembang web (web developer) adalah kode-kode HTML untuk pengaturan teks, memunculkan gambar atau latar belakang gambar, penomoran (numbering), table, dan form.  Khususnya table biasa digunakan untuk membuat tata letak (layout) suatu halaman web. Dalam pembahasan berikutnya akan ditunjukkan bahwa pembuatan tata letak halaman web bisa tidak menggunakan table tapi dengan bantuan kode HTML yang dikenal dengan DIV dan dengan bantuan CSS (Cascading Style Sheet) salah satu alat yang tidak kalah pentingnya dalam membangun web.

CSS

Pengenalan CSS

Kalo kita browsing situs-situs komersial kita lihat begitu cantik dan menariknya halaman demi halaman webnya. Bagaimana para pembuat situs tersebut merancangnya? Tidak mungkin jika hanya menggunakan HTML saja. Mereka mengimprovisasi tampilan HTML itu dengan apa yang disebut style sheet, yang kemudian dikenal dengan (Cascading Style Sheet).
Dengan CSS kita tidak hanya membuat style untuk teks, link, latar belakang. Lebih dari itu CSS  dapat digunakan dalam membuat tampilan web yang cantik dan menarik dan memudahkan desainer web dalam mengganti-ganti tata letak dan nuansa (theme).  Kelebihan lain menggunakan CSS, yaitu mengurangi penulisan berulang-ulang style yang sama di dalam halaman web.
Ada tiga cara menggunankan CSS dalam halaman web:
  1. Dengan eksternal file yang di-link-an ke dalam halaman web. Nama file umumnya ditulis dengan ektensi  .css. Sintaks pemanggilan di halaman webnya adalah :
<link href="style.csstype="text/cssrel="stylesheet">
             dimana style.css adalah nama file CSS.
  1. Dengan menuliskan blok CSS di dalam halaman web itu sendiri. Penulisan ditempatkan di antara tag <HEAD> dan </HEAD>.
<head>
<style>
p { padding-bottom:12px; }
</style>
</head>
  1. Dengan menuliskan kode CSS di sebelah kanan tag itu sendiri:
<p style= "padding-bottom:12px; "> Your Text</p>
Kebanyakan para pengembang web menggunakan cara ke-1 dan cara ke-2 dalam menuliskan kode-kode CSS-nya karena lebih mudah mengontrolnya dan menghindari penulisan style yang berulang-ulang.
Download File Lengkapnya klik Disini

0 komentar:

Posting Komentar