minggu keenam progweb

Pada minggu keenam kuliah progweb, diajarkan mengenai CSS.
CSS (Cascading Style Sheet) merupakan suatu script / kode yang ditambahkan ke dalam suatu dokumen HTML untuk menambah fungsionalitas yang memang tidak bisa ditangani oleh suatu kode HTML biasa. Penambahan script ini dilakukan pada bagian HEAD dari dokumen HTML. Suatu srcipt CSS akan diawali oleh tag STYLE TYPE=”TEXT/CSS” dan diakhiri oleh tag STYLE.
Yang perlu diingat ketika mengimplementasikan CSS adalah pemberian nilai ke dalam suatu atribut CSS tidak menggunakan tanda "=" (sama dengan) seperti pada tag HTML melainkan menggunakan tanda ":" (titik dua). Pemberian nilai pada atribut CSS juga akan diakhiri dengan tanda ";" (titik koma atau semi colon). Selain itu nilai dari atribut yang diberikan tidak diapit oleh tanda petik ganda seperti yang biasa dilakukan pada nilai dari atribut pada tag HTML.
Untuk mengatur warna latar pada suatu dokumen HTML, selain menggunakan atribut BGCOLOR pada tag BODY, ternyata dapat juga diatur dengan menggunakan atribut BACKGROUND-COLOR milik CSS. Selain itu, atribut BACKGROUND-COLOR juga bisa digunakan untuk mengatur warna latar pada suatu header ataupun paragraf.
Selain menggunakan atribut BACKGROUND pada tag BODY, pengaturan gambar sebagai latar belakang / background juga bisa dilakukan dengan memanfaatkan CSS yaitu dengan menggunakan atribut BACKGROUND-IMAGE.
Secara default gambar yang digunakan sebagai background akan ditempatkan secara berulang-ulang sehingga memenuhi keseluruhan halaman web (tiled). Dengan CSS, penempatan gambar bisa diatur agar tidak berulang-ulang melainkan hanya dipasang sekali. Hal ini dimungkinkan dengan mengatur atribut BACKGROUND-REPEAT yang diberi nilai NO-REPEAT.
Posisi gambar pada background juga bisa diatur dengan menggunakan atribut BACKGROUND-POSITION. Adapun nilai yang bisa diberikan pada atribut BACKGROUND-POSISITION
adalah top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.
CSS juga mampu menjadikan suatu gambar yang dijadikan background untuk ditampilkan secara berulang dalam posisi vertikal maupun horisontal. Hal ini dimungkinkan dengan memberi nilai REPEAT-X ataupun REPEAT-Y pada atribut BACKGROUND-REPEAT.
Nilai REPEAT-X akan menjadikan penempatan suatu gambar background berulang secara horisontal, dan nilai REPEAT-Y akan menjadikan penempatan suatu gambar background berulang secara vertikal.
Untuk menjadikan suatu gambar background bersifat menetap dan tidak terpengaruh oleh scroll bar, dapat dilakukan dengan memberi nilai FIXED pada atribut BACKGROUND-ATTACHMENT.
Untuk mengatur warna teks, selain menggunakan atribut COLOR pada tag FONT juga bisa diatur melalui CSS. Pengaturan warna teks pada CSS dapat dilakukan dengan mengatur atribut COLOR.
CSS juga dapat digunakan untuk mengatur jarak antar kata, jarak antar huruf, dan jarak antar baris. Atribut WORD-SPACING dapat digunakan untuk mengatur jarak antar kata, atribut SPACING dapat digunakan untuk mengatur jarak antar huruf, dan atribut LINE-LENGTH dapat digunakan untuk mengatur jarak antar baris. Untuk satuan panjangnya bisa menggunakan pixel (px) ataupun centi meter (cm).
Selain menggunakan atribut ALIGN pada tag HTML, perataan / alignment suatu teks juga dapat diatur dengan menggunakan CSS yaitu dengan mengatur nilai dari atribut TEXT-ALIGN.
Untuk membuat garis pada suatu teks dengan menggunakan CSS dimungkinkan yaitu dengan mengatur nilai dari atribut TEXT-DECORATION. Untuk menghasilkan garis bawah dapat dilakukan dengan memberi nilai UNDERLINE pada atribut TEXT-DECORATION, untuk menghasilkan garis dengan posisi di atas teks dapat dilakukan dengan memberi nilai OVERLINE, dan untuk menghasilkan garis yang mencoret suatu teks dapat dilakukan dengan memberi nilai LINE-THROUGH.
Selain itu atribut TEXT-DECORATION juga bisa digunakan untuk menjadikan suatu teks berkedip-kedip/blinking yaitu dengan memberi nilai BLINK.
CSS dapat digunakan untuk mengatur indentasi suatu teks dalam suatu paragraf yaitu dengan mengatur nilai pada atribut TEXT-INDENT. Satuan yang digunakan untuk mengatur indentasi bisa menggunakan pixel (px) ataupun centimeter (cm).
Penggunaan huruf besar ataupun huruf kecil pada suatu teks / kumpulan teks bisa diatur dengan memanfaatkan atribut TEXT-TRANSFORM pada CSS.
Pemberian nilai UPPERCASE pada atribut TEXT-TRANSFORM akan menjadikan suatu teks / kumpulan teks tercetak dengan huruf besar, sebaliknya pemberian nilai LOWERCASE menjadikan suatu teks / kumpulan teks tercetak dengan huruf kecil, dan pemberian nilai CAPITALIZE akan menjadikan huruf pertama dari tiap kata akan tercetak dengan huruf besar sedangkan huruf lainnya akan tercetak dengan huruf kecil.
Pengaturan jenis dan ukuran font dengan menggunakan CSS dapat dilakukan dengan mengatur atribut FONT-FAMILY dan FONT-SIZE.
Atribut FONT-FAMILY ini fungsinya mirip dengan atribut FACE pada tag FONT dalam HTML dan atribut FONT-SIZE mirip fungsinya dengan atribut SIZE pada tag FONT hanya saja ukuran font yang digunakan pada atribut FONT-SIZE menggunakan satuan point (pt) sama seperti yang umum digunakan pada aplikasi pengolah kata / word processor seperti Open Office Writer ataupun Microsoft Word.
Pada CSS untuk menampilkan suatu teks dengan efek cetak tebal dan cetak miring diatur melalui atribut FONT-WEIGHT dan FONT-STYLE.
Dengan memberikan nilai BOLD pada atribut FONT-WEIGHT akan menjadikan suatu teks tercetak tebal, ini mirip dengan penggunaan tag B dalam HTML.
Dan dengan memberikan nilai ITALIC pada atribut FONT-STYLE akan menjadikan suatu teks tercetak miring, ini mirip dengan penggunaan tag I dalam HTML.
Dengan menggunakan CSS dimungkinkan untuk membuat suatu border / garis tepi pembatas yang bisa diatur tipenya. Hal ini dilakukan dengan mengatur atribut BORDER-STYLE. Adapun nilai yang bisa diberikan pada atribut ini adalah HIDDEN, DOTTED, DASHED, SOLID, DOUBLE, GROOVE, RIDGE, INSET, dan OUTSET di mana masing-masing nilai akan menghasilkan border dengan tipe yang berbeda.
CSS juga dapat digunakan untuk mengatur warna border dengan mengatur atribut BORDER-COLOR. Untuk mengatur ketebalan border pada CSS dapat dilakukan dengan mengatur nilai dari atribut BORDER-WIDTH. Satuan yang digunakan untuk mengatur ketebalan border adalah pixel (px).
Dalam CSS ada empat atribut yang digunakan untuk mengatur margin, yaitu MARGIN-TOP, MARGIN-RIGHT, MARGIN-BOTTOM, dan MARGIN-LEFT. Satuan yang digunakan untuk mengatur margin adalah centimeter (cm).
Dalam CSS ada empat atribut yang digunakan untuk mengatur padding, yaitu PADDING-TOP, PADDING-RIGHT, PADDING-BOTTOM, dan PADDING-LEFT. Satuan yang digunakan untuk mengatur padding adalah centimeter (cm).
Selain diatur menggunakan atribut TYPE pada tag UL, tipe pada un ordered list juga bisa diatur dengan CSS yaitu dengan mengatur nilai dari atribut LIST-STYLE-TYPE. Adapun nilai yang bisa diberikan pada atribut ini untuk mengatur tipe pada un ordered list adalah DISC, CIRCLE, dan SQUARE.
Selain diatur menggunakan atribut TYPE pada tag OL, tipe pada ordered list juga bisa diatur dengan CSS yaitu dengan mengatur nilai dari atribut LIST-STYLE-TYPE. Adapun nilai yang bisa diberikan pada atribut ini untuk mengatur tipe pada ordered list adalah DECIMAL, DECIMAL-LEADING-ZERO, LOWER-ROMAN, UPPER-ROMAN, LOWER-ALPHA, UPPER-ALPHA, LOWER-GREEK, LOWER-LATIN, UPPER-LATIN, HEBREW, ARMENIAN, GEORGIAN, CJK-IDEOGRAPHIC, HIRAGANA-KATAKANA, HIRAGANA-IROHA, dan KATAKANA-IROHA.
Dengan CSS juga dimungkinkan untuk menampilkan suatu daftar di mana penanda list / bullet yang digunakan berupa gambar yaitu dengan mengatur nilai dari atribut LIST-STYLE-IMAGE.
Bentuk penerapan CSS seperti contoh-contoh sebelumnya memiliki kelemahan yaitu style yang ditetapkan akan berlaku untuk keseluruhan penggunaan satu tag tertentu.
Misalnya didefinisikan suatu CSS sebagai berikut:
(STYLE TYPE="TEXT/CSS")
H1 { COLOR:RED;
FONT-STYLE:ITALIC;}
(/STYLE)
Akibatnya adalah setiap kali tag H1 digunakan, maka secara default header yang dihasilkan akan berwarna merah dan terkena efek cetak miring. Padahal ada kalanya dalam suatu halaman yang dibutuhkan penggunaan tag H1 dengan style yang berbeda.
Hal ini dimungkinkan dengan penggunaan ID dalam CSS di mana setiap style tidak secara langsung dipasangkan ke dalam suatu tag HTML melainkan style-style
tersebut diberi ID dan ketika akan diimplementasikan ke dalam suatu tag HTML, ID tersebut tinggal dipanggil mengunakan atribut ID pada tag HTML pemanggil. Selain itu, ID CSS juga bisa digunakan pada tag-tag HTML yang berbeda. Penggunaan ID
pada CSS menjadikan implementasi style CSS pada tag-tag HTML lebih fleksibel.
Penamaan ID dalam CSS diawali dengan karakter "#" dan diikuti dengan ID nya.
Penggunaan CLASS dalam CSS memiliki kemiripan dengan ID, bahkan keduanya bisa digunakan secara bersama-sama dan diimplementasikan pada tag HTML yang sama.
Penamaan CLASS dalam CSS diawali dengan karakter "." (karakter titik) dan diikuti dengan nama CLASS nya. Ketika akan diimplementasikan ke dalam suatu tag HTML, CLASS tersebut tinggal dipanggil menggunakan atribut CLASS pada tag HTML pemanggil.
Dalam CSS dimungkinkan untuk mendefinisikan suatu CLASS yang sifatnya spesifik untuk tag tertentu sehingga CLASS tersebut tidak bisa diimplementasikan oleh tag lain. Selain itu, penggunaan CLASS spesifik juga memungkinkan untuk didefinisikan suatu CLASS dengan nama yang sama tetapi menghasilkan efek style yang berbeda bergantung dengan tag HTML yang memanggilnya / mengimplementasikannya.
Pendefinisian CLASS spesifik ini dilakukan dengan mendefinisikan nama tag yang akan
mengimplementasikan lalu diikuti oleh karakter "." (karakter titik) dan disertai dengan nama CLASS nya.