Media Informatika Vol. 8 No. 2 (2009) MEMANFAATKAN CASCADING STYLE SHEET UNTUK MEMPERINDAH TAMPILAN WEB Budi Maryanto Sekolah Tinggi Manajemen Informatika dan Komputer LIKMI Jl. Ir. H. Juanda 96 Bandung 40132 E-mail : Abstrak Cascading Style Sheet (CSS) merupakan sarana ampuh yang banyak dimanfaatkan para profesional di bidang web design untuk melengkapi keterbatasan yang dimiliki dokumen HTML. Dengan memanfaatkan CSS, pengformatan halaman web dapat dilakukan secara cepat dan efesien. Output tampilan pada seluruh halaman web juga dapat dibuat konsisten dengan menggunakan external style sheet. Tag-tag standar HTML juga dapat didefiniskan ulang formatnya menggunakan CSS. Selain itu cukup banyak pekerjaan web page formatting yang mustahil dilakukan oleh standar HTML, tetapi dengan mudah dapat dikerjakan menggunakan bantuan CSS. Kata-kata kunci : HTML, CSS, internal style sheet, external style sheet, tag. 1. PENDAHULUAN Sebagian besar halaman web dibuat menggunakan Hypertext Markup Language (HTML). HTML berfungsi memberikan sejumlah tag (penanda) pada teks, gambar, atau obyek lainnya sehingga halaman web bisa ditampilkan dengan format yang diinginkan. Dokumen HTML dapat dikenali pada berbagai platform komputer hanya dengan memakai perangkat lunak web browser. Faktor inilah yang mendorong pesatnya penggunaan web based document sebagai media untuk menampilkan berbagai informasi di dunia maya. Meskipun telah memberikan kontribusi yang sangat besar pada popularitas penggunaan Internet, namun HTML memiliki banyak keterbatasan. Dibutuhkan 82 Show 83 Budi Maryanto / Memanfaatkan CASCADING Style Sheet Untuk Memperindah Tampilan Web sejumlah piranti pendukung lainnya agar sebuah situs web memiliki tampilan yang menarik dan dapat memberikan berbagai layanan yang bermanfaat bagi pengunjungnya. Agar mampu memberdayakan database resource, dibutuhkan server side scripting tools seperti ASP, PHP, dan JSP. Supaya aspek artistik suatu halaman web lebih optimal dan bisa dikelola dengan pola template tertentu, diperlukan Cascading Style Sheet (CSS). Selain itu, client side scripting tools seperti Javascript atau VBScript dapat digunakan untuk mendukung tampilan halaman web yang bersifat dinamis. Tulisan ini akan membahas mengenai peran CSS untuk memperindah tampilan halaman web, khususnya untuk pengaturan format yang tidak dapat dilakukan hanya dengan mengandalkan HTML. Pada dasarnya CSS sendiri berisi kode-kode style yang cukup kompleks. Untuk mempermudah pemanfaatan CSS, dapat digunakan perangkat lunak web authoring tools, seperti Macromedia Dreamweaver. Dengan bantuan perangkat lunak ini maka seorang web designer tidak perlu repot menuliskan kode-kode CSS, sehingga ia lebih fokus pada proses penataan output tampilan web. 2. INTERNAL DAN EKSTERNAL STYLE SHEET Style sheet adalah kumpulan atribut-atribut format yang mengatur tampilan teks dan obyek lainnya dalam suatu halaman web. Sebuah style sheet dapat juga digunakan untuk mengontrol format tampilan banyak halaman web sekaligus. Ada dua jenis style sheet, yaitu : 1. Internal style sheet Kode style sheet untuk jenis ini ditulis dalam dokumen HTML yang bersangkutan (bersatu). Kodenya ditempatkan di bagian atas script HTML, tepatnya di bagian HEAD (diletakkan antara tag <HEAD> </HEAD>). 2. External style sheet Kode style sheet untuk jenis ini ditulis terpisah dari dokumen HTML-nya. Umumnya kode-kode external style sheet disimpan dalam sebuah file berextension CSS. Media Informatika Vol. 8 No. 2 (2009) 84 Style sheet jenis pertama dipilih jika style tersebut hanya digunakan pada dokumen HTML yang bersangkutan. Tetapi jika suatu style akan digunakan oleh banyak dokumen HTML sekaligus, maka sebaiknya digunakan jenis yang kedua (external). Dengan memanfaatkan jenis external style sheet juga akan menghasilkan desain halaman-halaman web yang konsisten formatnya. Jika menghendaki perubahan format pada suatu style, editing cukup dilakukan pada file master CSS, maka otomatis hasilnya akan berdampak pada semua dokumen HTML yang memanfaatkan style tersebut. 3. MEMBUAT, MENGGUNAKAN, DAN MENG-EDIT STYLE SHEET Langkah-langkah untuk membuat sebuah style sheet baru dengan menggunakan Macromedia Dreamweaver adalah sebagai berikut : 1. Pilih menu TEXT CSS STYLES NEW 2. Tuliskan nama style sheet yang akan dibuat, tipe selector dan letak pendefinisiannya, lalu klik tombol OK Gambar 1 Kotak dialog pembuatan style sheet baru 3. Tentukan detail format CSS yang diinginkan. 85 Budi Maryanto / Memanfaatkan CASCADING Style Sheet Untuk Memperindah Tampilan Web Gambar 2 Kotak dialog pendefinisian style sheet Untuk menggunakan style sheet yang telah dibuat pada suatu bagian teks : 1. Pilih teks yang akan diberi style sheet tersebut 2. Pada bagian properties, pilih nama style sheet yang diinginkan Gambar 3 Menggunakan style sheet yang telah dibuat Sedangkan untuk meng-edit sebuah style sheet yang telah dibuat yaitu : 1. Pilih menu TEXT CSS STYLES MANAGE STYLES 2. Pilih nama style sheet yang akan di-edit, lalu klik tombol EDIT 3. Lakukan perubahan format yang diinginkan Media Informatika Vol. 8 No. 2 (2009) 86 4. MENDEFINISIKAN ULANG TAG HTML Setiap tag HTML telah memiliki format standar tertentu. Sebagai contoh, tag <TH> </TH> yang berfungsi membentuk sel header pada suatu table, memiliki format teks tebal (bold) dan perataan tengah (center alignment). Format standar tersebut dapat diubah / dilengkapi dengan elemen format lainnya menggunakan CSS. Cara untuk men-definiskan ulang (redefine) sebuah tag HTML adalah sebagai berikut : 1. Pilih menu TEXT CSS STYLES NEW 2. Pilih TAG pada bagian tipe selector, lalu pilih nama tag HTML yang akan didefiniskan, lalu klik tombol OK 3. Tentukan detail format baru yang diinginkan. 5. MEMBUAT DAN MEMANFAATKAN EXTERNAL STYLE SHEET Jika kita harus mempersiapkan beberapa halaman web dengan style format yang sama (konsisten), maka kita perlu membuat koleksi style sheet yang disimpan terpisah dari dokumen HTML pembentuk halaman-halaman web tersebut. Koleksi style sheet ini disimpan dalam sebuah file CSS external. Berikut ini adalah cara mempersiapkan file CSS external : 1. Pilih menu FILE NEW 2. Pada bagian CATEGORY pilih BASIC PAGE (sebelah kiri) dan CSS (sebelah kanan) 3. Buatlah semua style sheet yang diperlukan seperti pada petunjuk di atas. Script CSS untuk semua style sheet yang telah dibuat akan di-generate secara otomatis oleh Dreamweaver. 87 Budi Maryanto / Memanfaatkan CASCADING Style Sheet Untuk Memperindah Tampilan Web Gambar 4 Script CSS untuk external style sheet 4. Simpanlah file ini dengan extension file.css Langkah-langkah untuk memanfaatkan koleksi external style sheet pada sutu halaman web adalah sebagai berikut : 1. Pilih menu TEXT CSS STYLES MANAGE STYLES 2. Pilih tombol ATTACH 3. Klik tombol BROWSE, lalu pilih nama file EXTERNAL CSS yang diperlukan Media Informatika Vol. 8 No. 2 (2009) 88 Gambar 5 Kotak dialog penggunaan external style sheet 4. Klik tombol DONE 5. Seluruh style sheet dalam file external CSS telah siap untuk digunakan. 6 KESIMPULAN Halaman web yang berbasis dokumen HTML memiliki banyak kelemahan. Salah satu kelemahannya adalah pada keterbatasan kemampuannya untuk menghasilkan tampilan yang menarik dan konsisten. Cascading Style Sheet merupakan sarana yang dapat kita manfaatkan untuk mendukung / melengkapi kekurangan pada dokumen HTML. Beberapa manfaat yang dapat kita peroleh dengan penggunaan Cascading Style Sheet yaitu : 1. Mempermudah pengformatan halaman web, karena dengan membuat style sheet satu kali saja, maka style sheet tersebut dapat dipakai berulang-ulang secara cepat dan mudah untuk semua bagian teks yang memerlukannya. Begitu pula jika ada perubahan / penambahan format pada suatu style 89 Budi Maryanto / Memanfaatkan CASCADING Style Sheet Untuk Memperindah Tampilan Web sheet, maka kita cukup meng-edit pada style sheet tersebut, maka otomatis semua bagian teks yang memanfaatkannya akan berubah seketika. 2. Menghasilkan format tampilan yang konsisten pada semua halaman web yang kita buat. 3. Mampu melakukan hal-hal tertentu yang tidak mungkin dilakukan oleh dokumen standar HTML, sebagai contoh : mengubah simbol unordered list (bullet) selain bentuk lingkaran dan kotak segi empat, memberi garis bingkai pada teks / obyek lainnya, menambahkan efek highlight pada teks, membuat karakter drop-cap, dan sebagainya. Suatu style sheet dapat disimpan bersatu dengan dokumen HTML-nya (internal style sheet) ataupun disimpan terpisah menjadi pada sebuah file CSS (external style sheet). Jika digunakan hanya untuk kebutuhan suatu halaman web tertentu, maka tipe yang sesuai adalah internal style sheet. Tetapi jika style sheet akan dimanfaatkan oleh banyak halaman web sekaligus, maka kita gunakan tipe external style sheet. 7 DAFTAR PUSTAKA [1]. Abe Poetra, Tutorial Cascading Style Sheet, http://www.ilmukomputer.com, 5 Juni 2009. [2] Cameron Adams, The Art and Science of CSS, Site point, 2007. [3] Isak Rickyanto, Desain Web dengan Dreamweaver MX, Elex Media Komputindo, 2002. [4] Windra Wastika, Resep Cascading Style Sheet, Dian Rakyat, 2006.
CSS adalah singakatan dari Cascading Style Sheet. CSS berfungsi untuk memberikan style atau corak tampilan pada suatu elemen atau struktur page website yang dibuat HTML. Contohnya seperti memberi warna pada huruf, menebal / memeringkan huruf, dan masih banyak lagi. Tampilan website yang hanya menggunakan HTML akan terlihat membosankan, maka dari itu diciptakannya CSS. CSS adalah sebuah teknologi internet yang kembangkan oleh World Wide Web Consortium (W3C) pada tahun 1996. Selain HTML, CSS juga kompatibel Bahasa markup lain seperti XHTML, XML, SVG, dan XUL. Baca Juga Artikel HTML Lengkap! : Mengenal Definisi HyperText Markup Language (HTML)Sebelum mulai menggunakan CSS, saya saran kan agar kamu mempelajari terlebih dahulu HTML! Karena untuk menerapkan CSS, kamu perlu tau terlebih dahulu elemen-elemen dan tags yang ada pada HTML, sehingga dapat menyisipkan style CSS pada setiap elemen dan tag tersebut. Sekarang penggunaan CSS telah semakin meluas dan terus dikembangkan. Hal ini juga akan mempermudah seorang web designer dalam mengembangkan suatu halaman web (situs). Ada 3 cara untuk memasang Script CSS pada dokumen HTML yaitu:
2. Sejarah Perkembangan CSSCSS 1Pada 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 Mensupport :
CSS 2Spesifikasi CSS 2 dipublish dan dikembangkan oleh W3C pada Mei 1998. Merupakan Upgrade dari CSS 1, CSS 2 memiliki fitur baru seperti Positioning suatu Elemen atau Z-Index secara absolut, relatif, dan tepat. CSS 2 menekankan pada fitur Accessibility and Capacibilty kususnya pada media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. CSS 3CSS 3 adalah versi terbaru dari CSS yang memiliki banyak kelebihan untuk mendesain website agar terlihat unik dan menarik. CSS 3 mampu menyisipkan animasi, seperti animasi gambar dan animasi 3D. Desain yang ada pada CSS 3 bersifat responsive, jadi sangat kompatibel dengan desktop maupun smartphone. Selain itu, fitur terbaru yang dimiliki CSS 3 adalah Animation, Multiple-Background, Drop-shadow, CSS Object-model, CSS Math, dan masih banyak lagi. Baca Juga : Ini Dia Golang, Salah Satu Bahasa Pemograman Yang Digunakan Tokopedia3. Cara Menggunakan CSSAda 3 cara menggunakan CSS yaitu :
External CSSDengan External Style Sheet kamu bisa mengganti desain keseluruhan website kamu hanya dengan 1 file Pada File HTML kamu harus disisipkan Link yang menuju ke file CSS yang diinginkan. Contoh :  Internal CSSInternal Style CSS disipkan diantara elemen<style>, didalam section <head> dari page HTML kamu. Inline CSSInline CSS berarti menyisipkan CSS hanya pada elemen tertentu. Untuk menggunakan Inline CSS, tambahkan atribut style pada baris script code elemen yang diinginkan. Dari ketiga cara diatas sebenarnya hampir sama, hanya saja pada external CSS kamu perlu membuat file css terpisah, dan memanggil file tersebut pada bagian <head> HTML kamu. 4. Fungsi CSSCSS berfungsi sebagai media untuk merepresentasikan suatu tampilan (huruf, gambar, dan yang lainnya) pada halaman website. Kode yang ada pada CSS bertujuan untuk memperindah tampilan dan memperbaiki user-interface website. Berikut ini adalah contohnya! Gambar diatas merupakan contoh HTML tanpa Script Code CSS, namun bagaimana jika disisipkan code tersebut. Bagaimana ? Terlihat jelas perbedaannya. Jika kamu membuat HTML tanpa CSS, maka tampilannya akan terlihat membosankan. Namun dengan menyisipkan script code CSS, maka akan memberikan sedikit warna pada website kamu. Cara untuk menyisipkan CSS pada HTML adalah pertama-tama kamu harus membuat file css terlebih dahulu (.css) dan menyisipkan script code “<Link rel=”Stylesheet” type=”text/css” href=”mystyle.css>” pada bagian <head> HTML. Pada contoh diatas, saya menamai file CSS saya mystyle.css Dibawah ini adalah isi dari file mystyle.css
Untuk membuat script CSS kamu bisa menggunakan text editor seperti Notepad++ atau sublime text. Jangan lupa untuk mengsave filenya agar bisa dipanggil pada Script kode HTML kamu. 5. Kelebihan & Kekurangan CSSSama halnya dengan bahasa pemrograman lain, Css juga memiliki kelebihan dan kekurangannya tersendiri. Berikut ini adalah kelebihan dan kekurangan dari CSS Kelebihan
Kekurangan
Baca Juga Artikel Menarik Lainnya :Sumber : w3schools *Artikel ini pernah tayang di website Babastudio.com |
Suatu teknologi yang digunakan untuk memperindah halaman website (situs) adalah
Pos Terkait
Copyright © 2024 kemunculan Inc.
