Pada minggu kedelapan kuliah progweb ini diajarkan mengenai Java Script.
Java Script merupakan bahasa pemrograman yang dieksekusi di sisi klien atau yang biasa dikenal dengan istilah client side programming di mana suatu kode program akan dikirimkan ke klien dan dieksekusi / dijalankan oleh web browser dan bukannya dieksekusi di web server. Dalam implementasinya, suatu kode program Java Script akan disisipkan pada suatu dokumen HTML dengan menggunakan pasangan tag SCRIPT dan /SCRIPT di atribut LANGUAGE dari tag SCRIPT akan diberi nilai JavaScript.
Dalam menuliskan kode program Java Script ada beberapa hal yang perlu diperhatikan:
1. Java Script merupakan bahasa pemrograman yang bersifat case sensitive, artinya Java Script akan membedakan penggunaan huruf besar dan huruf kecil. "DOCUMENT" akan lain artinya dengan "document" ataupun "Document".
2. Setiap statement / pernyataan dalam kode program Java Script selalu diakhiri dengan karakter ";" (titik koma / semicolon).
Dalam Java Script perintah yang digunakan untuk mencetak suatu teks pada dokumen HTML adalah document.write("pesannya").
Dalam menuliskan kode program adakalanya dibutuhkan untuk menuliskan suatu komentar ataupun keterangan berkenaan dengan kode program tersebut, oleh karenanya dibutuhkan suatu mekanisme penulisan komentar. Komentar itu sendiri akan diabaikan dan tidak akan dieksekusi / dijalankan oleh web browser.
Terdapat dua cara untuk menyertakan komentar dalam Java Script:
1. Menggunakan penanda //
Penanda // digunakan untuk menuliskan komentar dalam satu baris
2. Menggunakan pasangan penanda /* dan */
Pasangan penanda /* dan */ digunakan untuk menuliskan komentar yang lebih dari satu baris
Dalam Java Script terdapat tiga macam tipe data utama, yaitu tipe data String (kumpulan karakter), tipe data bilangan / numerik, dan tipe data logika / boolean. Pada tipe data boolean akan mengenal dua buah nilai yaitu true dan false.
Pendeklarasian variabel dalam Java Script ditandai dengan penggunaan kata kunci var dan diikuti dengan nama variabel. Tipe data dari suatu variabel ditentukan oleh nilai yang diisikan ke dalam variabel tersebut dan bukannya dideklarasikan secara eksplisit.
Operator aritmatika adalah operator yang digunakan untuk menangani / mengoperasikan suatu nilai bertipe data numerik.
Operator penugasan / assignment adalah operator yang digunakan untuk memberikan / memasukkan nilai ke dalam suatu variabel.
Operator pembanding adalah operator yang digunakan untuk membandingkan dua buah nilai dan akan menghasilkan nilai bertipe data boolean yaitu benar(true) atau salah (false).
Operator logika adalah operator yang digunakan untuk mengoperasikan nilai - nilai
bertipe data boolean yang bernilai true atau false.
Seperti pernah dijelaskan sebelumnya bahwa nilai bertipe data string merupakan nilai yang terdiri dari sekumpulan karakter sehingga membentuk suatu nilai berupa kata ataupun kalimat tertentu. Untuk nilai - nilai bertipe data string terdapat suatu operator yang berguna untuk menggabungkan nilai string. Operator ini dikenal dengan nama operator penggabungan string yang dituliskan dengan penanda +. Apabila suatu nilai bertipe data string dijumlahkan dengan nilai bertipe data numerik maka secara otomatis nilai bertipe data numerik tersebut akan dikonversi menjadi tipe data string sehingga pada akhirnya akan dihasilkan suatu nilai bertipe data string.
Dalam pemrograman Java Script dimungkinkan untuk melakukan konversi / pengubahan tipe data. Tipe data yang memungkinkan untuk dikonversi adalah tipe data string ke tipe data numerik. Ada dua fungsi yang bisa digunakan untuk mengkonversi suatu nilai bertipe data string ke numerik. Fungsi yang pertama adalah fungsi parseInt() dan fungsi yang kedua adalah fungsi parseFloat(). Fungsi parseInt() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik berbentuk bilangan bulat / integer. Dan fungsi parseFloat() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik berbentuk bilangan pecahan / floating point.
Statemen if digunakan untuk melakukan percabangan dalam melakukan eksekusi sejumlah statement. Bentuk umum dari statement if yang paling sederhana adalah:
if (kondisi)
{
//statement - statement yang akan dieksekusi bila kondisi benar
}
Statement if tersebut adalah bentuk statement if yang paling sederhana di mana statement - statement yang berada di antara penanda kurung kurawal akan dieksekusi apabila kondisi yang dicek menghasilkan nilai true. Apabila kondisi yang dicek ternyata menghasilkan nilai false, maka statement - statement yang berada di antara
penanda kurung kurawal tersebut tidak akan dieksekusi.
Statement if ... else ... merupakan pengembangan dari bentuk statement if. Bentuk umum dari statement ini adalah:
if (kondisi)
{
//statement - statement yang dieksekusi bila kondisi benar
}
else
{
//statement - statement yang dieksekusi bila kondisi salah
}
Pada statement ini terdapat dua blok kurung kurawal, di mana blok kurung kurawal pertama akan berisi statement - statement yang hanya akan dieksekusi apabila kondisi yang dicek menghasilkan nilai true, sedangkan statemant - statement pada blok kurung kurawal kedua akan diabaikan. Apabila ternyata kondisi yang dicek menghasilkan nilai false maka statement - statement pada blok kurung kurawal pertama tidak akan dieksekusi melainkan statement - statement pada kurung kurawal kedua lah yang akan dieksekusi.
Statement if ... else if ... memungkinkan terjadinya pengecekan kondisi secara berlapis. Berikut ini adalah bentuk umum dari statement if ... else if ...
if (kondisi1)
{
//statement - statement bila kondisi 1 benar
}
else if (kondisi2)
{
//statement - statement bila kondisi 2 benar
}
else
{
//statement - statement bila semua kondisi salah
}
Bentuk ini juga dikenal sebagai if bertingkat di mana terdapat beberapa kondisi yang akan dicek. Kondisi kedua hanya akan dicek apabila kondisi pertama bernilai salah, kondisi ketiga juga hanya akan dicek apabila kondisi pertama dan kedua bernilai salah, demikian seterusnya proses pengecekan kondisi berlangsung sampai ditemui suatu kondisi yang bernilai benar. Apabila tidak ditemui satu kondisi pun yang bernilai benar maka yang akan dieksekusi adalah statement - statement yang berada pada blok else.
Statement switch ... case ... merupakan suatu bentuk statement alternatif untuk melakukan percabangan. Statement ini sebenarnya merupakan bentuk ringkas dari statement if ... else if ...
Bentuk umum dari statement switch ... case ... adalah:
switch (variabel)
{
case nilai_penguji1: //stament - statement pilihan 1
break;
case nilai_penguji2: //stament - statement pilihan 2
break;
default : //statement - statement default
};
Statement - statement pilihan 1 hanya akan dieksekusi bila didapati nilai variabel yang diuji sama dengan nilai penguji 1, dan statement - statement pilihan 2 pun hanya akan dieksekusi bila nilai dari variabel yang diuji sama dengan nilai penguji 2, demikian seterusnya. Yang perlu diperhatikan di sini adalah di akhir penulisan
statement - statement pada tiap pilihan harus diakhiri oleh statement break. Apabila nilai dari variabel yang diuji tidak memiliki kesamaan dengan salah satu dari nilai - nilai penguji yang ada, maka statement - statement yang akan dieksekusi adalah statement - statement pada blok default.
Operator ... ? ... : ... digunakan untuk melakukan suatu proses percabangan sederhana. Operator ini biasa digunakan untuk menyederhanakan statement if ... else ..., hanya saja pada operator ini hanya mampu menangani satu statement untuk pengecekan kondisi yang menghasilkan nilai true dan satu statement untuk pengecekan kondisi yang menghasilkan nilai false.
Bentuk umum dari penggunaan operator ... ? ... : ... adalah:
kondisi ? statement_kondisi_true : statement_kondisi_false;
Statement while merupakan salah satu statement yang bisa digunakan untuk melakukan suatu proses perulangan / looping. Bentuk umum dari statement while adalah:
while (kondisi)
{
//statement - statement yang diulang
}
Statement - statement yang berada di antara penanda kurung kurawal buka dan kurung kurawal tutup akan diulang berkali - kali selama kondisi yang dicek menghasilkan nilai true. Proses perulangan akan berakhir ketika didapati kondisi yang dicek menghasilkan nilai false.
Selain menggunakan statement while, proses perulangan / looping juga bisa dilakukan dengan menggunakan statement do ... while.
Bentuk umum dari statement do ... while adalah:
do
{
//statement - statement yang diulang
} while (kondisi);
Sedikit berbeda dengan statement while, pada statement do ... while pengecekan kondisi dilakukan di akhir penanda kurung kurawal. Artinya statement - statement
yang berada di antara penanda kurung kurawal akan dieksekusi terlebih dahulu baru kemudian dilakukan pengecekkan kondisi. Apabila kondisi yang dicek menghasilkan nilai true maka statement - statement tersebut akan dieksekusi kembali secara berulang - ulang sampai ditemui hasil pengecekan kondisi yang menghasilkan nilai false.
Statement for juga merupakan salah satu statement yang bisa digunakan untuk melakukan perulangan / looping. Bentuk umum dari statement for adalah:
for (inisialisasi; kondisi; penaikan_penurunan)
{
//statement - statement yang diulang
}
Statement for banyak digunakan untuk melakukan perulangan di mana banyaknya jumlah perulangan sudah diketahui dengan pasti sebelumnya. Inisialisasi dalam konteks for merupakan proses pemberian nilai awal pada variabel pencacah. Variabel inilah yang akan selalu diuji nilainya pada bagian pengecekan kondisi. Apabila hasil pengecekan kondisi bernilai benar maka statement - statement yang berada di antara kurung kurawal buka dan kurung kurawal tutup akan dieksekusi. Diakhir eksekusi statement - statement tersebut, nilai dari variabel pencacah tersebut akan mengalami proses penaikan ataupun penurunan. Setelah itu variabel ini akan kembali dicek nilainya di bagian kondisi. Dan apabila didapati hasil true dari proses pengecekan tersebut
maka statement - statement pada blok kurung kurawal akan kembali diulang. Dan demikian seterusnya proses perulangan ini berlangsung sampai didapati nilai false dari hasil pengecekan kondisi.
Minggu, 25 April 2010
Sabtu, 27 Maret 2010
minggu ketujuh progweb
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
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, 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.
Sabtu, 27 Februari 2010
minggu ketiga progweb
Di minggu ketiga kuliah pemrograman web, diajarkan mengenai tag table.
Antara lain cara membuat table, table border, headings pada table, mengosongkan sel pada table, menggabungkan 2 kolom, menggabungkan 2 baris, menggunakan cellpadding, dan contoh daftar nilai.
Untuk membuat tabel pada suatu dokumen HTML akan melibatkan beberapa tag seperti TABLE, CAPTION, TR, TH, dan TD.
Tag TABLE digunakan sebagai penanda dimulai dan diakhirinya suatu tabel.
Tag TR digunakan untuk membuat baris / row baru.
Tag TH digunakan untuk membuat judul kolom / baris
Tag TD digunakan untuk mengisikan data pada suatu cell.
Untuk mengganti warna latar pada suatu table dapat dilakukan dengan mengatur attribut BGCOLOR pada tag TABLE dan untuk mengatur ketebalan garis tepi dari suatu table dapat dilakukan dengan mengatur atribut BORDER pada tag TABLE.
Pengaturan jarak pada tabel diatur oleh atribut CELLPADDING dan CELLSPACING pada tag TABLE. CELLPADDING digunakan untuk mengatur jarak antara teks dengan batas tepi kiri, atas, dan bawah dari suatu cell dan CELLSPACING digunakan untuk mengatur jarak antar cell.
Untuk mengatur lebar dan tinggi suatu table dapat dilakukan melalui atribut WIDTH dan HEIGHT pada tag TABLE.
Atribut WIDTH digunakan untuk mengatur lebar table sedangkan atribut HEIGHT digunakan untuk mengatur tinggi table.
Untuk mengatur alignment dari suatu table dapat diatur melalui atribut ALIGN pada tag TABLE, sedangkan untuk mengatur alignment suatu teks yang terdapat dalam suatu cell dapat diatur melalui atribut ALIGN pada tag TD.
Untuk mengatur vertical alignment suatu teks yang terdapat dalam suatu cell dapat diatur melalui atribut VALIGN pada tag TD. Nilai yang memungkinkan untuk atribut ini adalah TOP, MIDDLE, BOTTOM.
Selain mengubah warna latar table secara keseluruhan, bisa juga dilakukan perubahan warna latar hanya pada cell tertentu saja. Hal ini dapat dilakukan dengan mengatur atribut BGCOLOR pada tag TD.
Untuk melakukan penggabungan cell dapat dilakukan dengan mengatur atribut COLSPAN dan
ROWSPAN pada tag TD ataupun TH. Atribut COLSPAN digunakan untuk mengatur penggabungan kolom sedangkan atribut ROWSPAN digunakan untuk penggabungan baris.
Antara lain cara membuat table, table border, headings pada table, mengosongkan sel pada table, menggabungkan 2 kolom, menggabungkan 2 baris, menggunakan cellpadding, dan contoh daftar nilai.
Untuk membuat tabel pada suatu dokumen HTML akan melibatkan beberapa tag seperti TABLE, CAPTION, TR, TH, dan TD.
Tag TABLE digunakan sebagai penanda dimulai dan diakhirinya suatu tabel.
Tag TR digunakan untuk membuat baris / row baru.
Tag TH digunakan untuk membuat judul kolom / baris
Tag TD digunakan untuk mengisikan data pada suatu cell.
Untuk mengganti warna latar pada suatu table dapat dilakukan dengan mengatur attribut BGCOLOR pada tag TABLE dan untuk mengatur ketebalan garis tepi dari suatu table dapat dilakukan dengan mengatur atribut BORDER pada tag TABLE.
Pengaturan jarak pada tabel diatur oleh atribut CELLPADDING dan CELLSPACING pada tag TABLE. CELLPADDING digunakan untuk mengatur jarak antara teks dengan batas tepi kiri, atas, dan bawah dari suatu cell dan CELLSPACING digunakan untuk mengatur jarak antar cell.
Untuk mengatur lebar dan tinggi suatu table dapat dilakukan melalui atribut WIDTH dan HEIGHT pada tag TABLE.
Atribut WIDTH digunakan untuk mengatur lebar table sedangkan atribut HEIGHT digunakan untuk mengatur tinggi table.
Untuk mengatur alignment dari suatu table dapat diatur melalui atribut ALIGN pada tag TABLE, sedangkan untuk mengatur alignment suatu teks yang terdapat dalam suatu cell dapat diatur melalui atribut ALIGN pada tag TD.
Untuk mengatur vertical alignment suatu teks yang terdapat dalam suatu cell dapat diatur melalui atribut VALIGN pada tag TD. Nilai yang memungkinkan untuk atribut ini adalah TOP, MIDDLE, BOTTOM.
Selain mengubah warna latar table secara keseluruhan, bisa juga dilakukan perubahan warna latar hanya pada cell tertentu saja. Hal ini dapat dilakukan dengan mengatur atribut BGCOLOR pada tag TD.
Untuk melakukan penggabungan cell dapat dilakukan dengan mengatur atribut COLSPAN dan
ROWSPAN pada tag TD ataupun TH. Atribut COLSPAN digunakan untuk mengatur penggabungan kolom sedangkan atribut ROWSPAN digunakan untuk penggabungan baris.
Sabtu, 20 Februari 2010
minggu kedua progweb
Di minggu kedua kuliah progweb, diajarkan mengenai list pada dokumen HTML. Ada dua jenis list yaitu unordered list dan ordered list. Unordered list adalah suatu list yang tidak memperhatikan urutan penomoran sedangkan ordered list adalah list yang memperhatikan urutan penomoran. Untuk membuat suatu unordered list menggunakan tag (UL) sedangkan untuk membuat ordered list menggunakan tag (OL). Dan untuk mengisikan item pada list menggunakan tag (LI). Untuk unordered list terdapat beberapa pilihan tipe yang bisa diatur dengan mengubah atribut TYPE pada tag (UL). Pilihan tipe yang tersedia adalah CIRCLE, DISC, dan SQUARE. Untuk ordered list dapat pula diatur tipenya dengan mengatur nilai dari atribut TYPE pada tag (OL). Ada beberapa macam tipe dalam ordered list yaitu tipe huruf, angka, dan romawi. Selain tipe, pada ordered list juga dapat diatur penomoran awalannya yaitu dengan mengatur nilai dari atribut START pada tag (OL). Pada dokumen HTML juga dimungkinkan untuk membuat sub list atau adanya list lain di dalam suatu list.
Tag (DL), (DT), (DD) pada dokumen HTML digunakan untuk membuat suatu daftar definisi (definition list).
Tag (MARQUEE) digunakan untuk menjadikan suatu teks bergerak berputar. Atribut yang terdapat pada tag (MARQUEE) adalah DIRECTION yang akan mengatur arah gerak text. Nilai yang memungkinkan untuk atribut DIRECTION adalah LEFT, RIGHT, UP, dan DOWN.
Pada dokumen HTML untuk menambahkan gambar pada latar belakang / background dapat
dilakukan dengan mengubah nilai dari atribut BACKGROUND pada tag (BODY) sesuai dengan
nama file yang ingin dijadikan latar belakang.
Tag (IMG) pada dokumen HTML digunakan untuk menambahkan gambar pada suatu halaman web. Untuk menambahkan gambar dapat dilakukan dengan mengubah nilai atribut SRC disesuaikan dengan nama file gambar yang diinginkan.
Selain atribut SRC, tag (IMG) juga memiliki atribut lain seperti ALIGN, BORDER, ALT, HEIGHT, dan WIDTH. Atribut ALIGN digunakan untuk mengatur aligmen. Nilai yang bisa diberikan pada atribut ALIGN adalah TOP, MIDDLE, dan BOTTOM. Atribut BORDER digunakan untuk menentukan ketebalan garis tepi dari suatu gambar. Atribut ALT digunakan untuk memberi keterangan ketika suatu gambar gagal untuk ditampilkan ke
web browser. Atribut HEIGHT dan WIDTH digunakan untuk mengatur tinggi dan lebar gambar.
Untuk membuat tabel pada suatu dokumen HTML akan melibatkan beberapa tag seperti (TABLE), (CAPTION), (TR), (TH), dan (TD). Tag (TABLE) digunakan sebagai penanda dimulai dan diakhirinya suatu tabel. Tag (TR) digunakan untuk membuat baris / row baru. Tag (TH) digunakan untuk membuat judul kolom / baris. Tag (TD) digunakan untuk mengisikan data pada suatu cell. Untuk mengganti warna latar pada suatu table dapat dilakukan dengan mengatur attribut BGCOLOR pada tag (TABLE) dan untuk mengatur ketebalan garis tepi dari suatu table dapat dilakukan dengan mengatur atribut BORDER pada tag (TABLE). Pengaturan jarak pada tabel diatur oleh atribut CELLPADDING dan CELLSPACING pada tag (TABLE). CELLPADDING digunakan untuk mengatur jarak antara teks dengan batas tepi kiri, atas, dan bawah dari suatu cell dan CELLSPACING digunakan untuk mengatur jarak antar cell. Untuk mengatur lebar dan tinggi suatu table dapat dilakukan melalui atribut WIDTH dan HEIGHT pada tag (TABLE). Atribut WIDTH digunakan untuk mengatur lebar table sedangkan atribut HEIGHT digunakan untuk mengatur tinggi table. Untuk mengatur alignment dari suatu table dapat diatur melalui atribut ALIGN pada tag (TABLE), sedangkan untuk mengatur alignment suatu teks yang terdapat dalam suatu cell dapat diatur melalui atribut ALIGN pada tag (TD). Untuk mengatur vertical alignment suatu teks yang terdapat dalam suatu cell dapat diatur melalui atribut VALIGN pada tag (TD). Nilai yang memungkinkan untuk atribut ini adalah TOP, MIDDLE, BOTTOM. Selain mengubah warna latar table secara keseluruhan, bisa juga dilakukan perubahan warna latar hanya pada cell tertentu saja. Hal ini dapat dilakukan dengan mengatur atribut BGCOLOR pada tag (TD). Untuk melakukan penggabungan cell dapat dilakukan dengan mengatur atribut COLSPAN dan ROWSPAN pada tag (TD) ataupun (TH). Atribut COLSPAN digunakan untuk mengatur penggabungan kolom sedangkan atribut ROWSPAN
digunakan untuk penggabungan baris.
Link / Hyperlink dalam dokumen HTML digunakan untuk berpindah dari suatu halaman ke halaman lainnya. Tag yang berperan dalam membuat link adalah tag (A) atau yang biasa dikenal sebagai tag anchor / jangkar. Tag (A) akan memiliki suatu atribut yang sangat penting yaitu atribut HREF yang digunakan untuk menentukan halaman tujuan dari suatu link. Tapi dimungkinkan juga ketika suatu halaman memanggil halaman yang lain maka halaman kedua tersebut akan tampil pada jendela web browser yang lain. Hal ini dimungkinkan dengan mengatur atribut TARGET pada tag (A). Atribut TARGET ini nantinya diberi nilai "_blank". Selain melakukan link ke halaman / dokumen yang berbeda, suatu dokumen HTML juga dapat melakukan link ke alamat suatu situs. Yang perlu dilakukan adalah dengan memberi nilai atribut HREF sesuai dengan alamat situs/URL yang ingin dituju. Suatu gambar juga bisa dijadikan link ke halaman lain, hal ini dimungkinkan dengan melatakkan tag (IMG SRC="nama gambar") di antara tag (A) dan (/A).
Suatu dokumen HTML juga bisa memainkan suatu file suara / sound ketika dibuka oleh web browser. Hal ini dilakukan dengan bantuan tag (BGSOUND). Tag ini akan memainkan file suara / sound yang diatur oleh atribut SRC. Untuk memungkinkan terjadinya perulangan / looping dalam pemutaran suatu file dapat diatur melalui atribut LOOP pada tag (BGSOUND).
Dalam dokumen HTML dimungkinkan untuk menyertakan serta memainkan suatu file multimedia berupa animasi atau video dengan menggunakan tag (EMBED). Nama file video yang akan disertakan diatur oleh atribut SRC. Untuk mengatur lebar dan ketinggian area diatur oleh atribut WIDTH dan HEIGHT. Atribut LOOP dapat digunakan untuk mengatur apakah adanya perulangan / looping dalam pemutar suatu file video. Dan atribut AUTOSTART digunakan untuk mengatur apakah pemutaran suatu file video dilakukan secara otomatis atau tidak.
Tag (DL), (DT), (DD) pada dokumen HTML digunakan untuk membuat suatu daftar definisi (definition list).
Tag (MARQUEE) digunakan untuk menjadikan suatu teks bergerak berputar. Atribut yang terdapat pada tag (MARQUEE) adalah DIRECTION yang akan mengatur arah gerak text. Nilai yang memungkinkan untuk atribut DIRECTION adalah LEFT, RIGHT, UP, dan DOWN.
Pada dokumen HTML untuk menambahkan gambar pada latar belakang / background dapat
dilakukan dengan mengubah nilai dari atribut BACKGROUND pada tag (BODY) sesuai dengan
nama file yang ingin dijadikan latar belakang.
Tag (IMG) pada dokumen HTML digunakan untuk menambahkan gambar pada suatu halaman web. Untuk menambahkan gambar dapat dilakukan dengan mengubah nilai atribut SRC disesuaikan dengan nama file gambar yang diinginkan.
Selain atribut SRC, tag (IMG) juga memiliki atribut lain seperti ALIGN, BORDER, ALT, HEIGHT, dan WIDTH. Atribut ALIGN digunakan untuk mengatur aligmen. Nilai yang bisa diberikan pada atribut ALIGN adalah TOP, MIDDLE, dan BOTTOM. Atribut BORDER digunakan untuk menentukan ketebalan garis tepi dari suatu gambar. Atribut ALT digunakan untuk memberi keterangan ketika suatu gambar gagal untuk ditampilkan ke
web browser. Atribut HEIGHT dan WIDTH digunakan untuk mengatur tinggi dan lebar gambar.
Untuk membuat tabel pada suatu dokumen HTML akan melibatkan beberapa tag seperti (TABLE), (CAPTION), (TR), (TH), dan (TD). Tag (TABLE) digunakan sebagai penanda dimulai dan diakhirinya suatu tabel. Tag (TR) digunakan untuk membuat baris / row baru. Tag (TH) digunakan untuk membuat judul kolom / baris. Tag (TD) digunakan untuk mengisikan data pada suatu cell. Untuk mengganti warna latar pada suatu table dapat dilakukan dengan mengatur attribut BGCOLOR pada tag (TABLE) dan untuk mengatur ketebalan garis tepi dari suatu table dapat dilakukan dengan mengatur atribut BORDER pada tag (TABLE). Pengaturan jarak pada tabel diatur oleh atribut CELLPADDING dan CELLSPACING pada tag (TABLE). CELLPADDING digunakan untuk mengatur jarak antara teks dengan batas tepi kiri, atas, dan bawah dari suatu cell dan CELLSPACING digunakan untuk mengatur jarak antar cell. Untuk mengatur lebar dan tinggi suatu table dapat dilakukan melalui atribut WIDTH dan HEIGHT pada tag (TABLE). Atribut WIDTH digunakan untuk mengatur lebar table sedangkan atribut HEIGHT digunakan untuk mengatur tinggi table. Untuk mengatur alignment dari suatu table dapat diatur melalui atribut ALIGN pada tag (TABLE), sedangkan untuk mengatur alignment suatu teks yang terdapat dalam suatu cell dapat diatur melalui atribut ALIGN pada tag (TD). Untuk mengatur vertical alignment suatu teks yang terdapat dalam suatu cell dapat diatur melalui atribut VALIGN pada tag (TD). Nilai yang memungkinkan untuk atribut ini adalah TOP, MIDDLE, BOTTOM. Selain mengubah warna latar table secara keseluruhan, bisa juga dilakukan perubahan warna latar hanya pada cell tertentu saja. Hal ini dapat dilakukan dengan mengatur atribut BGCOLOR pada tag (TD). Untuk melakukan penggabungan cell dapat dilakukan dengan mengatur atribut COLSPAN dan ROWSPAN pada tag (TD) ataupun (TH). Atribut COLSPAN digunakan untuk mengatur penggabungan kolom sedangkan atribut ROWSPAN
digunakan untuk penggabungan baris.
Link / Hyperlink dalam dokumen HTML digunakan untuk berpindah dari suatu halaman ke halaman lainnya. Tag yang berperan dalam membuat link adalah tag (A) atau yang biasa dikenal sebagai tag anchor / jangkar. Tag (A) akan memiliki suatu atribut yang sangat penting yaitu atribut HREF yang digunakan untuk menentukan halaman tujuan dari suatu link. Tapi dimungkinkan juga ketika suatu halaman memanggil halaman yang lain maka halaman kedua tersebut akan tampil pada jendela web browser yang lain. Hal ini dimungkinkan dengan mengatur atribut TARGET pada tag (A). Atribut TARGET ini nantinya diberi nilai "_blank". Selain melakukan link ke halaman / dokumen yang berbeda, suatu dokumen HTML juga dapat melakukan link ke alamat suatu situs. Yang perlu dilakukan adalah dengan memberi nilai atribut HREF sesuai dengan alamat situs/URL yang ingin dituju. Suatu gambar juga bisa dijadikan link ke halaman lain, hal ini dimungkinkan dengan melatakkan tag (IMG SRC="nama gambar") di antara tag (A) dan (/A).
Suatu dokumen HTML juga bisa memainkan suatu file suara / sound ketika dibuka oleh web browser. Hal ini dilakukan dengan bantuan tag (BGSOUND). Tag ini akan memainkan file suara / sound yang diatur oleh atribut SRC. Untuk memungkinkan terjadinya perulangan / looping dalam pemutaran suatu file dapat diatur melalui atribut LOOP pada tag (BGSOUND).
Dalam dokumen HTML dimungkinkan untuk menyertakan serta memainkan suatu file multimedia berupa animasi atau video dengan menggunakan tag (EMBED). Nama file video yang akan disertakan diatur oleh atribut SRC. Untuk mengatur lebar dan ketinggian area diatur oleh atribut WIDTH dan HEIGHT. Atribut LOOP dapat digunakan untuk mengatur apakah adanya perulangan / looping dalam pemutar suatu file video. Dan atribut AUTOSTART digunakan untuk mengatur apakah pemutaran suatu file video dilakukan secara otomatis atau tidak.
Langganan:
Postingan (Atom)