Like Us On Facebook

24 April 2014

MDP
0 comment

Pemrograman Web : Selector


Pada pertemuan matakuliah pemrograman web kali ini sedang membahas tentang dasar-dasar CSS (Cascading Style Sheet) yaitu berbagai jenis selektor yang sering digunakan di CSS. 

Sebelum membahas lebih jauh tentang selektor CSS, berikut saya berikan beberapa poin penting tentang CSS yang perlu diketahui :
-     
  •        Menurut Wikipedia, CSS adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
  •       CSS bukan merupakan bahasa pemrograman.
  •       CSS dikembangkan oleh World Wide Web Consortium (W3C).

-          
    Jenis-jenis Selektor CSS :

Selektor tag atau selektor elemen
Selektor Pseudo-kelas
Selektor Kelas
Selektor ID
Selektor Keturunan
Selektor ortu-anak
Selektor bersebelahan
Selektor Atribut
Selektor Pseudo-elemen
Selektor universal
Penggabungan Selektor

Pada pertemuan kali ini kita hanya akan membahas 3 selektor, yakni selektor ID, tag dan kelas.

    1. Selektor ID
Ciri-cirinya :
  •       Selektor ID diawali dengan tanda #

#atas {
background:#FF0000;color:#FFFFFF;font-size:50px;text-align:center;
}

    2. Selektor Tag
Ciri-cirinya :
  •       Nama selektor berupa nama Tag

h1 {
color:#000000;
}
    
    3. Selektor Kelas
  •          Diawali dengan tanda titik
  •           Bisa diterapkan hanya pada elemen tertentu
  •           Sebuah elemen bisa mempunyai lebih dari satu kelas
  •           Di dalam atribut class, nama-nama kelas dipisahkan oleh spasi

.isi {
font-family:'Verdana';font-size:30px;color:#0000FF
}
ul {
color:#000000;font-size:20px;
}

Setelah memahami pengertian masing-masing selektor diatas, selanjutnya kita akan menggabungkan ketiga selektor diatas menjadi satu file CSS.

#atas {
background:#FF0000;color:#FFFFFF;font-size:50px;text-align:center;
}
h1{
color:#000000;
}
.isi {
font-family:'Verdana';font-size:30px;color:#0000FF
}
ul {
color:#000000;font-size:20px;
}

Lalu simpan dengan nama css1.css

Langkah selanjutnya, kita akan memasukkan file CSS diatas ke dalam file HTML baru.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Latihan-CSS-2</title>
<link rel="stylesheet" href="css1.css" type="text/css" />
</head> 
<body background="Tulips.jpg">
<div id="atas">
Toko Online Pascal
</div>
<h1> Deskripsi :</h1>
<div class="isi"> 
Toko Online menyediakan berbagai macam barang-barang baru maupun bekas dengan harga yang terjangkau.</div> 
<h1> Menyediakan :</h1>
<ul type="disc">           
<li>Laptop           
<li>TV           
<li>Kulkas           
<li>dll.
</ul>
</body>
</html>
Tulisan yang diblok merah adalah script untuk memasukkan file CSS ke dalam file HTML

Read More

3 April 2014

MDP
0 comment

Css Dasar.html


CSS CSS merupakan singkatan dari Cascading Style Sheet. Menurut wikipedia, CSS adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Css saat ini di kembangkan oleh World Wide Web Consortium atau yang biasa lebih dikenal dengan istilah W3C. Css bukan menggantikan kode html, tetapi hanya di fungsikan sebagai penopang atau pendukung dari file html yang berperan dalam penataan kerangka dan layout web.

1. Aturan Penulisan CSS
Prinsip dasar penggunaan CSS di dalam dokumen HTML adalah untuk menyediakan style yang digunakan untuk mengatur bagian-bagian HTML. Contoh, suatu style dapat di pakai untuk mengatur jenis, ukuran, dan bahkan warna suatu teks. Style mengandung dua bagian yaitu selektor dan deklarasi properti. Selektor untuk menyatakan bagian dalam HTML yang akan diatur melalui style. Sedangkan properti untuk menyatakan sifat dalam tag HTML yang diatur melalui style.








2. Css Bersifat Case Sensitive

Maksud case sensitive disini membedakan huruf kapital dan huruf kecil. Hal ini penting diketahui karena kalau kita ingin menulis nama kelas atau nama ID dalam style. Contoh : Maka nim akan
dibedakan dengan Nim ataupun NIM.




Untuk memberikan nama dalam CSS misalnya untuk nama kelas atau nama ID agar mudah dipahami gunakan penamaan yang mengandung makna dan mudah dipahami oleh orang.Contoh :
o   nama seperti warnaMerah lebih baik dari pada wmr.
o   warnaMerah bisa juga ditulis menjadi warna-merah atau warna_merah.
o   Tanda minus (-) ataupun garis bawah ( _ ) boleh dipakai untuk nama.
o   Namun yang perlu di ingat, warnaMerah, warna-merah, warna_merah adalah tiga nama yang berbeda.
o   Penulisan nama boleh menggunakan angka, tetapi spasi atau tanda-tanda lain tidak boleh digunakan untuk nama.

3. Komentar
Komentar adalah suatu bagian dalam kode yang diperlakukan bukan sebagai kode, melainkan berfungsi sebagai keterangan bagi pembaca kode. Pada dokumen HTML, komentar diawali dengan <!-- dan diakhiri dengan -->. Adapun pada CSS, komentar ditulis dengan awalan /* dan diakhiri */.





4. Cara Menggunakan CSS
Untuk menggunakan CSS, ada 3 cara yang bisa kita gunakan yaitu Embedded Style Sheet, Inline Style Sheet, dan Linked Style Sheet.

4.1 Embedded Style Sheet
Embedded Style Sheet adalah cara penulisan kode dimana penulisan CSS dilakukan pada tag HTML, yaitu pada tag <style> ... </style> dan sebelum tag <body>. Pada tag tersebut akan disisipkan kode CSS yang akan digunakan oleh tag HTML. Sintaks penulisannya :














Contoh programnya seperti ini

Read More