Pada minggu ketujuh kuliah pemrograman web, diadakan ujian tengah semester di kelas praktikum. Di kelas teori diadakan kuis besar dan diajarkan mengenai CSS internal, in line, dan eksternal.
Ada 3 cara yang dapat digunakan untuk mendefinisikan suatu style CSS, yaitu secara internal, secara in line, dan secara eksternal.
Model pendefinisian secara internal dilakukan dengan menempatkan definisi style CSS di antara pasangan tag STYLE dan /STYLE yang ditempatkan di bagian HEAD dari suatu dokumen HTML yang akan mengimplementasikan style CSS tersebut. Model pendefinisian semacam inilah yang digunakan pada contoh - contoh sebelumnya.
Model pendefinisian secara in line merupakan model pendefinisian yang paling sederhana di mana style CSS langsung ditempelkan pada tag yang akan dikenakan efek style CSS dengan menggunakan bantuan atribut STYLE dari tag tersebut. Kelemahan dari model pendefinisian semacam ini adalah apabila ada tag - tag lain yang akan mengimplementasikan efek style CSS yang sama maka atribut STYLE dari tiap - tiap tag tersebut harus diatur nilai yang sama. Perulangan yang sebenarnya tidak perlu semacam ini (karena memang efek style yang akan diterapkan sudah pernah didefinisikan sebelumnya pada tag lain) dapat diatasi dengan model pendefinisian Internal. Kelebihan dari model pedefinisian In Line adalah kemudahan dan kesederhanaan dalam penulisannya.
Model pendefinisian style CSS secara Eksternal memungkinkan beberapa file dokumen HTML untuk menggunakan efek style CSS yang sama tanpa harus mendefinisikan ulang. Hal ini dimungkinkan dengan menempatkan pendefinisian style CSS dalam file tersendiri yang diberi nama dengan ekstensi *.css. Selanjutnya di bagian BODY dari tiap dokumen HTML yang akan mengimplementasikan efek style CSS diberi tag LINK. Adapun format lengkap dari tag LINK yang digunakan adalah sebagai berikut LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="nama_file.css
Sabtu, 27 Maret 2010
Sabtu, 20 Maret 2010
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.
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.
Sabtu, 13 Maret 2010
minggu kelima progweb
Di minggu kelima kuliah progweb, diajarkan mengenai form.
Penggunaan tag FORM pada dokumen HTML akan sangat erat hubungannya untuk mendukung implementasi pemrograman di sisi server / server side scripting. Salah satu contoh bahasa pemrograman web di sisi server yang banyak digunakan adalah PHP, ASP, dan JSP.
Tag FORM memiliki tiga atribut utama, yaitu NAME untuk mengatur nama form, ACTION untuk
memanggil file yang akan memproses data isian form, dan METHOD untuk menentukan metode
pengiriman datanya. Berikut ini adalah contohnya:
(FORM NAME="form_nilai" ACTION="proses.php" METHOD="POST")
.....
(/FORM)
Pada contoh tersebut terdapat sebuah form bernama form_nilai yang akan mengirimkan datanya ke file pemroses bernama proses.php dengan menggunakan metode pengiriman post.
Tag INPUT merupakan tag yang akan digunakan untuk mendukung fungsionalitas dari tag FORM. Secara garis besar, tag FORM akan digunakan untuk membentuk kerangka form dan tag INPUT digunakan untuk membuat jenis / komponen inputannya. Ada bermacam - macam jenis inputan dan jenis - jenis tersebut diatur oleh atribut TYPE pada tag INPUT.
Beberapa jenis inputan yang bisa digunakan sebagai nilai dari atribut TYPE adalah: TEXT, SUBMIT, RESET, PASSWORD, TEXTAREA, CHECKBOX, RADIO, dan BUTTON.
Tipe inputan TEXT biasa digunakan untuk menangani inputan data berupa teks, misalnya untuk menangani data inputan nama, alamat, dan data - data lainnya. Pada tipe inputan TEXT bisa disertakan beberapa atribut tambahan, yaitu NAME untuk mengatur
nama data inputannya, SIZE untuk mengatur panjang area inputannya, MAXLENGTH untuk
mengatur jumlah karakter maksimum yang bisa diinputkan, dan VALUE untuk mengatur nilai inputan default. Untuk merapikan posisi peletakkan komponen input dapat menggunakan bantuan tabel.
Tipe inputan SUBMIT digunakan sebagai triger / pemicu pengiriman data - data
nilai inputan yang terdapat pada suatu form sedangkan tipe inputan RESET digunakan untuk mengembalikan nilai pada tiap inputan ke nilai default / nilai awal. Baik tipe inputan SUBMIT maupun tipe inputan RESET keduanya memiliki atribut VALUE yang
digunakan untuk mengatur label pada tombol SUBMIT atau RESET.
Tipe inputan PASSWORD digunakan untuk menangani inputan berupa kata sandi / kode rahasia. Tipe inputan ini akan menyembunyikan setiap karakter yang diinputkan menjadi karakter *.
Tipe inputan CHECKBOX adalah tipe inputan berupa daftar pilihan yang apabila dipilih diberi tanda centang. Umumnya tipe inputan CHECKBOX digunakan pada daftar pilihan yang bisa dipilih lebih dari satu, misalnya hoby, makanan favorit, dan data - data
sejenis lainnya yang memungkinkan untuk dipilih lebih dari satu.
Tipe inputan CHECKBOX memiliki dua atribut utama, yaitu atribut NAME untuk memberi nama inputan dan atribut CHECKED untuk menjadikan suatu pilihan inputan dicentang secara default.
Berbeda dengan tipe inputan CHECKBOX, tipe inputan RADIO digunakan untuk daftar pilihan yang sifatnya hanya boleh dipilih salah satu saja, misalnya daftar pilihan jenis kelamin, status menikah / belum menikah, dan pilihan - pilihan sejenis lainnya.
Tipe inputan RADIO memiliki tiga atribut utama, yaitu atribut NAME untuk menentukan kategori pilihan VALUE untuk menentukan nilai yang akan dikirimkan apabila suatu pilihan tertentu dipilih, dan atribut CHECKED untuk menjadikan suatu pilihan inputan dijadikan pilihan default.
Selain menggunakan tag INPUT, suatu form juga bisa memiliki beberapa tipe inputan yang lain dan salah satunya adalah dengan menggunakan tag TEXTAREA.
Tag TEXTAREA digunakan untuk menampung suatu inputan berupa teks mirip seperti tipe
inputan TEXT, hanya saja TEXTAREA mampu menampung inputan teks yang ukurannya lebih
panjang dibanding dengan tipe inputan TEXT.
Tag TEXTAREA sering digunakan untuk menampung inputan berupa komentar karena kemampuannya yang bisa menampung inputan teks dengan ukuran cukup panjang.
Tag ini memiliki beberapa atribut penting, diantaranya adalah atribut NAME digunakan untuk memberi nama suatu inputan, atribut ROWS dan COLS untuk menentukan panjang baris dan kolom, dan atribut WRAP yang menjadikan sejumlah teks yang diinputkan akan otomatis berpindah baris bila panjangnya sudah melebihi panjang TEXTAREAnya.
Tag SELECT pada dokumen HTML juga digunakan untuk menangani inputan. Tipe inputan yang dihasilkan oleh tag ini berupa daftar pilihan combo atau dikenal dengan istilah combo box. Tag SELECT memiliki atribut NAME yang digunakan untuk menentukan nama inputan. Item - item pada daftar pilihan dari tag SELECT akan diatur oleh tag OPTION.
Tag OPTION akan memiliki dua buah atribut utama yaitu atribut VALUE yang digunakan untuk mengatur nilai dari suatu pilihan dan atribut SELECTED untuk menentukan suatu pilihan sebagai pilihan default.
Secara default tag SELECT akan menghasilkan sebuah daftar inputan berupa combo box di mana hanya memungkinkan untuk memilih satu item dari sejumlah item yang ditampilkan oleh daftar inputan. Untuk menjadikan daftar inputan ini mampu menangani lebih dari satu pilihan inputan dapat dilakukan dengan menambahkan atribut MULTIPLE pada tag SELECT. Dengan menambahkan atribut MULTIPLE pada tag SELECT akan mengubah tipe daftar pilihan yang dihasilkan dari bentuk combo box menjadi bentuk list box.
Penggunaan tag FORM pada dokumen HTML akan sangat erat hubungannya untuk mendukung implementasi pemrograman di sisi server / server side scripting. Salah satu contoh bahasa pemrograman web di sisi server yang banyak digunakan adalah PHP, ASP, dan JSP.
Tag FORM memiliki tiga atribut utama, yaitu NAME untuk mengatur nama form, ACTION untuk
memanggil file yang akan memproses data isian form, dan METHOD untuk menentukan metode
pengiriman datanya. Berikut ini adalah contohnya:
(FORM NAME="form_nilai" ACTION="proses.php" METHOD="POST")
.....
(/FORM)
Pada contoh tersebut terdapat sebuah form bernama form_nilai yang akan mengirimkan datanya ke file pemroses bernama proses.php dengan menggunakan metode pengiriman post.
Tag INPUT merupakan tag yang akan digunakan untuk mendukung fungsionalitas dari tag FORM. Secara garis besar, tag FORM akan digunakan untuk membentuk kerangka form dan tag INPUT digunakan untuk membuat jenis / komponen inputannya. Ada bermacam - macam jenis inputan dan jenis - jenis tersebut diatur oleh atribut TYPE pada tag INPUT.
Beberapa jenis inputan yang bisa digunakan sebagai nilai dari atribut TYPE adalah: TEXT, SUBMIT, RESET, PASSWORD, TEXTAREA, CHECKBOX, RADIO, dan BUTTON.
Tipe inputan TEXT biasa digunakan untuk menangani inputan data berupa teks, misalnya untuk menangani data inputan nama, alamat, dan data - data lainnya. Pada tipe inputan TEXT bisa disertakan beberapa atribut tambahan, yaitu NAME untuk mengatur
nama data inputannya, SIZE untuk mengatur panjang area inputannya, MAXLENGTH untuk
mengatur jumlah karakter maksimum yang bisa diinputkan, dan VALUE untuk mengatur nilai inputan default. Untuk merapikan posisi peletakkan komponen input dapat menggunakan bantuan tabel.
Tipe inputan SUBMIT digunakan sebagai triger / pemicu pengiriman data - data
nilai inputan yang terdapat pada suatu form sedangkan tipe inputan RESET digunakan untuk mengembalikan nilai pada tiap inputan ke nilai default / nilai awal. Baik tipe inputan SUBMIT maupun tipe inputan RESET keduanya memiliki atribut VALUE yang
digunakan untuk mengatur label pada tombol SUBMIT atau RESET.
Tipe inputan PASSWORD digunakan untuk menangani inputan berupa kata sandi / kode rahasia. Tipe inputan ini akan menyembunyikan setiap karakter yang diinputkan menjadi karakter *.
Tipe inputan CHECKBOX adalah tipe inputan berupa daftar pilihan yang apabila dipilih diberi tanda centang. Umumnya tipe inputan CHECKBOX digunakan pada daftar pilihan yang bisa dipilih lebih dari satu, misalnya hoby, makanan favorit, dan data - data
sejenis lainnya yang memungkinkan untuk dipilih lebih dari satu.
Tipe inputan CHECKBOX memiliki dua atribut utama, yaitu atribut NAME untuk memberi nama inputan dan atribut CHECKED untuk menjadikan suatu pilihan inputan dicentang secara default.
Berbeda dengan tipe inputan CHECKBOX, tipe inputan RADIO digunakan untuk daftar pilihan yang sifatnya hanya boleh dipilih salah satu saja, misalnya daftar pilihan jenis kelamin, status menikah / belum menikah, dan pilihan - pilihan sejenis lainnya.
Tipe inputan RADIO memiliki tiga atribut utama, yaitu atribut NAME untuk menentukan kategori pilihan VALUE untuk menentukan nilai yang akan dikirimkan apabila suatu pilihan tertentu dipilih, dan atribut CHECKED untuk menjadikan suatu pilihan inputan dijadikan pilihan default.
Selain menggunakan tag INPUT, suatu form juga bisa memiliki beberapa tipe inputan yang lain dan salah satunya adalah dengan menggunakan tag TEXTAREA.
Tag TEXTAREA digunakan untuk menampung suatu inputan berupa teks mirip seperti tipe
inputan TEXT, hanya saja TEXTAREA mampu menampung inputan teks yang ukurannya lebih
panjang dibanding dengan tipe inputan TEXT.
Tag TEXTAREA sering digunakan untuk menampung inputan berupa komentar karena kemampuannya yang bisa menampung inputan teks dengan ukuran cukup panjang.
Tag ini memiliki beberapa atribut penting, diantaranya adalah atribut NAME digunakan untuk memberi nama suatu inputan, atribut ROWS dan COLS untuk menentukan panjang baris dan kolom, dan atribut WRAP yang menjadikan sejumlah teks yang diinputkan akan otomatis berpindah baris bila panjangnya sudah melebihi panjang TEXTAREAnya.
Tag SELECT pada dokumen HTML juga digunakan untuk menangani inputan. Tipe inputan yang dihasilkan oleh tag ini berupa daftar pilihan combo atau dikenal dengan istilah combo box. Tag SELECT memiliki atribut NAME yang digunakan untuk menentukan nama inputan. Item - item pada daftar pilihan dari tag SELECT akan diatur oleh tag OPTION.
Tag OPTION akan memiliki dua buah atribut utama yaitu atribut VALUE yang digunakan untuk mengatur nilai dari suatu pilihan dan atribut SELECTED untuk menentukan suatu pilihan sebagai pilihan default.
Secara default tag SELECT akan menghasilkan sebuah daftar inputan berupa combo box di mana hanya memungkinkan untuk memilih satu item dari sejumlah item yang ditampilkan oleh daftar inputan. Untuk menjadikan daftar inputan ini mampu menangani lebih dari satu pilihan inputan dapat dilakukan dengan menambahkan atribut MULTIPLE pada tag SELECT. Dengan menambahkan atribut MULTIPLE pada tag SELECT akan mengubah tipe daftar pilihan yang dihasilkan dari bentuk combo box menjadi bentuk list box.
Minggu, 07 Maret 2010
minggu keempat progweb
Di minggu keempat kuliah progweb (pemrograman web) ini, diajarkan mengenai frame.
Antara lain pembuatan frame sederhana, pembuatan frame dengan link, permainan warna dalam frame.
Frame digunakan untuk membagi jendela web browser menjadi beberapa bagian yang lebih kecil. Untuk membuat frame pada dokumen HTML menggunakan tag FRAMESET dan FRAME.
Frame nantinya berperan sebagai bingkai yang akan diisi dengan dokumen - dokumen HTML yang lain. Untuk membagi jendela browser dalam beberapa kolom dapat diatur melalui atribut COLS pada tag FRAMESET. Untuk menampilkan dokumen HTML pada suatu frame dapat diatur melalui atribut SRC pada tag FRAMESET.
Selain membagi jendela web browser dalam beberapa kolom, frame juga dapat membagi jendela web browser dalam beberapa baris dan gabungan keduanya (baris dan kolom). Untuk membagi jendela web browser dalam beberapa baris dapat diatur dengan menggunakan atibut ROWS pada tag FRAMESET.
Secara default frame akan memiliki bingkai pembatas, untuk menghilangkan bingkai pembatas tersebut dapat diatur dengan memberikan nilai 0 pada atribut BORDER dari tag FRAMESET.
Suatu frame juga bisa diberi nama dengan mengatur atribut NAME pada tag FRAME. Pemberian nama pada frame ditujukan untuk melakukan link antar frame yang berbeda.
Dalam dokumen HTML suatu frame dapat disertakan tanpa harus membagi jendela browser secara keseluruhan dengan menggunakan tag FRAMESET. Hal ini dimungkinkan dengan menggunakan tag IFRAME. Dokukem HTML yang ingin disertakan diatur oleh atribut SRC pada tag IFRAME. Tag IFRAME juga memiliki atribut WIDTH dan HEIGHT yang bisa digunakan untuk mengatur luas area dari frame yang disertakan. Untuk mengatur alignmentnya bisa diatur lewat atribut ALIGN.
Antara lain pembuatan frame sederhana, pembuatan frame dengan link, permainan warna dalam frame.
Frame digunakan untuk membagi jendela web browser menjadi beberapa bagian yang lebih kecil. Untuk membuat frame pada dokumen HTML menggunakan tag FRAMESET dan FRAME.
Frame nantinya berperan sebagai bingkai yang akan diisi dengan dokumen - dokumen HTML yang lain. Untuk membagi jendela browser dalam beberapa kolom dapat diatur melalui atribut COLS pada tag FRAMESET. Untuk menampilkan dokumen HTML pada suatu frame dapat diatur melalui atribut SRC pada tag FRAMESET.
Selain membagi jendela web browser dalam beberapa kolom, frame juga dapat membagi jendela web browser dalam beberapa baris dan gabungan keduanya (baris dan kolom). Untuk membagi jendela web browser dalam beberapa baris dapat diatur dengan menggunakan atibut ROWS pada tag FRAMESET.
Secara default frame akan memiliki bingkai pembatas, untuk menghilangkan bingkai pembatas tersebut dapat diatur dengan memberikan nilai 0 pada atribut BORDER dari tag FRAMESET.
Suatu frame juga bisa diberi nama dengan mengatur atribut NAME pada tag FRAME. Pemberian nama pada frame ditujukan untuk melakukan link antar frame yang berbeda.
Dalam dokumen HTML suatu frame dapat disertakan tanpa harus membagi jendela browser secara keseluruhan dengan menggunakan tag FRAMESET. Hal ini dimungkinkan dengan menggunakan tag IFRAME. Dokukem HTML yang ingin disertakan diatur oleh atribut SRC pada tag IFRAME. Tag IFRAME juga memiliki atribut WIDTH dan HEIGHT yang bisa digunakan untuk mengatur luas area dari frame yang disertakan. Untuk mengatur alignmentnya bisa diatur lewat atribut ALIGN.
Langganan:
Postingan (Atom)