pengguna membuka halaman web, klik suatu elemen di halaman web
dengan mouse, melakukan pengetikan
keyboard, atau meninggalkan halaman.
merupakan bahasa pemrograman berorientasi
obyek seperti C, C++ dan java dimana dimungkinkan terdapat fungsi-
fungsi yang terdapat pada class
seperti inheritance (penurunan sifat)
dan polymorphism. Sintaks-sintaks yang terdapat pada JavaScript
banyak yang mirip dengan bahasa pemrograman C. Namun, untuk
penamaannya lebih mirip dengan bahasa Java.
Cascading Style Sheet (CSS)
Cascading Style Sheet atau yang biasa disebut dengan CSS
merupakan sebuah sekumpulan kode pemrograman web yang
berfungsi untuk mengendalikan beberapa komponen didalam web
sehingga menjadi tampak seragam,
berstruktur dan teratur. Menurut
tim dari Wahana Komputer (2013:2) CSS adalah singkatan dari
atau dalam bahasa yang lebih mudah, yaitu
salah satu dokumen website yang bertujuan untuk mengatur gaya
(style) tampilan website.
Dengan menggunakan CSS, sebuah tampilan website
lebih mudah untuk diatur tampilannya karena CSS memisahkan antara
bagian presentasi dan isi dari web yang dibuat.
Berikut adalah kegunaan CSS dalam pembuatan web menurut
tim dari Wahana Komputer (2013:2) :
Kode HTML menjadi lebih sederhana dan lebih mudah diatur
Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
Mudah untuk mengubah tampilan, hanya dengan mengubah file
Dapat berkolaborasi dengan JavaScript dan merupakan pasangan
Digunakan dalam hampir semua web browser.
Birt adalah sebuah aplikasi open-source yang digunakan untuk
atau laporan dari sebuah aplikasi berbasis web,
terutama yang menggunakan bahasa pemrograman Java atau Java EE.
Dahulu kala, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan “
“. jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table “” dan “” diberi tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak friendly.Pada perkembangannya CSS sudah masuk lelvel 3 untuk sekarang, dimana dimulai CSS level 1 atau yang sering di sebut CSS aja, kemudian level 2 yang merupakan penyempurnaan dari CSS level sebelumnya, yaitu CSS level 1.
CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya :
– Ukuran file lebih kecil
– Load file lebih cepat
– Dapat berkolaborasi dengan JavaScript
– Pasangan setia XHTML
– Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
– Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.
– Dan banyak lagi yang lainnya.
Kelebihan penggunaan CSS :
1. halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly
2. anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.
Kekurangannya penggunaan CSS :
sayangnya susah untuk dimengerti dibandingkan dengan bahasa pemrograman lainnya contohnya: HTML, PHP, Java Script, dan lain-lain dan CSS ini memerlukan waktu yang sangatlah lama untuk bisa mahir untuk mempelajari CSS ini..
Versi
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML,
CSS 1
Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.
CSS 1 mendukung pengaturan tampilan dalam hal :
1. Font (Jenis ketebalan).
2. Warna, teks, background dan elemen lainnya.
3. Text attributes, misalnya spasi antar baris, kata dan huruf.
4. Posisi teks, gambar, table dan elemen lainnya.
5. Margin, border dan pading.
CSS 2
Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.
CSS 3
CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.
Penulisan
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
h1 {
color: #0789de;
}
Bagian pertama sebelum tanda ‘{}’ dinamakan selector, sedangkan yang diapit oleh ‘{}’ disebut declaration yang terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.
Selain itu ada tiga metode penulisan CSS atribut, yaitu :
Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet:
Contoh Bentuk Inline
Ini adalah contoh tag P tanpadiformat menggunakan CSS
Tag P ini diformat dengan besar font 20 point
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah
Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag … di atas tag . Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
Contoh Bentuk Embedded
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch
Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru
Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka itu dimasukkan secara langsung ke halaman yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti yang ada di skrip tersebut.
Fakta Menggunakan CSS
Fakta Menggunakan CSS diantaranya :
•Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
•Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
•Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
•Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
•Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
•CSS adalah layouting “Masa Depan” dengan penggabungan bersama XHTML.
Contoh Berkas CSS
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:”Times New Roman”;
font-size:20px;
}
This is a paragraph.
Pekembangan CSS3 Seperti Apa?
Dari salah satu situs blog mengatakan hasil pengamatan nya pada beberapa situs yang sudah menerapkan CSS3 + HTML5, ia beranggapan bahwa fungsi jQuery sepenuhnya akan tergantikan oleh CSS3. Perkiraan ke depan, tidak ada lagi web yang menggunakan jQuery karena sizenya lebih besar dibanding CSS3. Bukan cuma jQuery, saat ini penggunaan flash juga mulai terakusisi dengan semakin berkembangnya CSS3. CSS3 merupakan bahasa pemrograman olah digital gambar/citra tingkat tinggi karena dengan CSS3, anda bisa menggambar Tokoh Kartun Doraemon seperti contoh berikut :
Dari contoh di atas, memang terlihat belum semua browser sudah mendukung secara keseluruhan penggunaan CSS3, namun, masing-masing browser sudah melakukan proses perkembangan produk agar bisa mendukung penggunaan CSS3.