Seperti layaknya kode HTML, pada CSS juga berfungsi untuk membangun web kita jadi lebih menarik. Namun pada kode ini lebih fokus terhadap bagaimana memperindah tampilan tanpa mengubah isi. Ibarat membangun rumah, HTML adalah rumahnya dan CSS adalah cat warna tembok rumahnya.
Untuk lebih jelasnya, kita coba langsung praktek saja, siapkan notepad dan software design web anda (Dreamweaver
) dan ketikkan kode berikut, lalu simpan sebagai file html dengan nama belajar css pertama.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Pengenalan Belajar</title>
</head>
<body>
<h1>Saya adalah HTML</h1>
<div>
<font face="verdana" color="#FF0000">
Saat ini anda melihat saya sebagai HTML
</font>
</div>
</body>
</html>
Pada contoh diatas, kita bisa melihat pasangan tag <font> yang diapit oleh pasangan tag <div>. Tag font ini bertujuan untuk mengatur jenis font melalui atribut face dengan value "verdana" yang artinya menggunakan font verdana. Tag font ini juga mengatur warna font melalui atribut color dengan value #FF0000 yang artinya berwarna merah. Silahkan jalankan di browser anda, hasilnya seperti di samping ini.
Kemudian anda jalankan pada browser anda dan hasilnya adalah sebagai berikut :
Sekarang anda bisa bandingkan, hasilnya sama saja tetapi bentuk kode yang kita masukkan berbeda. Gambar pertama tanpa CSS dan kedua dengan CSS. Koq hasilnya sama saja? Untuk hasilnya memang sama tapi bisa sobat bayangkan jika seandanyai kita menuliskan banyak konten pada html kita maka tag font ini harus kita selipkan di tiap pasangan tag <div> </div> yang terdapat dalam file HTML kita. Namun dengan kode CSS cukup sekali saja pengaturannya pada daerah diatas tag <head> dan dibawah tag <title>.
Apakah cuma sampai segitu saja kemampuannya? Tentu tidak... Ada banyak hal yang bisa kita kembangkan. Contohnya :
- Mengatur warna latar belakang.
- Membuat bingkai.
- Membuat halaman dengan dua kolom.
- Menentukan gambar, baik latar belakang maupun latar depan.
- Dan masih banyak manfaat lainnya.. yang Insya Allah akan kita bahas satu persatu hanya di ketikweb.blogspot.com
Style dapat digunakan untuk mengatur tag tag HTML. Dimana style ini mengandung dua bagian, yaitu selektor dan deklarasi properti. Perhatikan kode berikut :
<style type="text/css">
div {
font-family:verdana;
color:#FF0000;
}
</style>
- Pasangan tag <style> </style> mengawali dan mengakhiri proses input kode CSS ke dalam HTML.
- Pasangan tag <div> </div> adalah tag html yang dijadikan nama selektor.
- Pasangan tanda { dan } setelah tag div adalah tanda awal dan akhir proses deklarasi (pengaturan) untuk selektor div.
- font-family dan color adalah adalah properti untuk pengaturan di dalam setiap selektor. Dalam hal ini sebagai properti selektor div.
Semua tag HTML dapat dijadikan selektor sehingga semua tag HTML dapat diatur melalui CSS. Jadi misalnya kita akan mengatur tag <i></i> maka yang jadi selektornya yang diapit antara kode tag style adalah i { ..... }.
Bagaimana sobat? Semoga bisa paham. Jika ada yang ingin ditanyakan silahkan tinggalkan koment anda. Sampai jumpa pada postingan berikutnya...
as website css source a html about html belajar css belajar website belajar html belajar pembelajaran bahasa inggris belajar bahasa inggris belajar php belajar mendesain web css to html cara web cara membuat web cara belajar web cara belajar cepat cara belajar code code html contoh css cara mendesain web cara mendesain website designer web design web design web free edit html free web how to html. html code for, html code, html for program web pengertian web i web in html kode html membuat web .com membuat web membuat css membuat website gratis make a web mudah belajar metode belajar mendesain web mendesain website situs web syntax html tutorial web the web text to html tutorial css tutorial html tutorial php webmaster web belajar website belajar web site web page website web design web sites web indonesia web gratis web magazine web hosting.
|
Share ke Google
|
"Sobat suka postingan ini? Silahkan copy link dibawah ini dan paste ke web, blog, atau sosial media sobat yang nantinya akan menghubungkan sobat langsung dengan postingan ini. "
|
| Untuk mendapat respon balik dari saya, tuliskan identitas sobat dalam memberi komentar dalam kolom dibawah ini. |
2 comments:
mkasih gan buat infonya
sm2... smoga bermanfaat,,,,
Post a Comment