Pengenalan CSS
CSS adalah singkatan dari Cascading Style Sheet, berfungsi untuk meningkatkan kemampuan XHTML dan berperan dalam desain tampilan.
CSS menggunakan pasangan tag <style type="text/css"> dan </style>. Dalam tag CSS antar atribut dipisahkan tanda ; (titik koma) dan pemberian nilai atribut menggunakan tanda :(titik dua).
1. Mengatur warna teks
Pewarnaan warna teks dapat ditulis di dalam tag style, contoh sintaks :
<style type="text/css">
h1{color : red;}
p{color : blue;}
</style>
Dan dalam tag body nya :
<body>
<h1>Berwarna merah</h1>
<p>Berwarna Biru</p>
</body>
2. Mengatur Perataan teks
Perataan teks tersedia dalam beberapa jenis, yaitu left, right, center, dan justify.
contoh sintaks:
<style type="text/css">
h1{text-align : center;}
p{text-align : left;}
</style>
3. Membuat Garis pada teks
Untuk membuat garis pada teks, digunakan sintaks text-decoration. Jenis text-decoration adalah :
-overline
untuk garis diatas teks
-underline
untuk garis dibawah teks
-linethrough
untuk coretan tengah
-blink
untuk modifikasi garis
contoh sintaks :
<style type="text/css">
h1{text-decoration : underline;}
p{text-decoration : overline;}
</style>
4. Mengatur Indentasi teks
Dilakukan dengan mengatur nilai atribut text-indent dengan satuan cm dan px.
contoh sintaks :
<style type="text/css">
p{text-indent : 2cm;}
</style>
5. Mengatur penggunaan Huruf Kapital
Tag yang digunakan untuk mengatur huruf kapital adalah tag text-transform. Jenis-jenis text-transform:
-uppercase
untuk penggunaan huruf besar semua
-lowercase
penggunaan huruf kecil
-capitalize
penggunaan huruf kapital di setiap awal kata
contoh sintaks :
<style type="text/css">
h1{text-transform : uppercase;}
</style>
6. Mengatur Ukuran dan jenis huruf
Untuk pengaturan ukuran huruf, digunakan tag font-size, sedangkan untuk pengaturan jenis huruf yaitu tag font-family.
contoh sintaks :
<style type="text/css">
p{font-family : arial;
font-size : 18pt;}
</style>
7. Menagtur Cetak tebal dan Cetak miring
Untuk pengaturan cetak tebal digunakan tag font-weight, dan pengaturan cetak miring menggunakan tag font-style.
contoh sintaks :
<style type="text/css">
p{font-weight : bold;
font-style : italic;}
</style>
8. Mengatur tipe border/garis tepi dan warna border
Jenis tag border-style:
-dotted
-dashed
-solid
-double
-groove
-ridge
-inset
-outset
Untuk pengaturan warna border digunakan tag border-color.
9. Mengatur Ketebalan border
Tag yang digunakan untuk mengatur ketebalan border adalah tag border-width.
contoh sintaks :
<style type="text/css">
p{border-style : dotted;
border-color : red;
border-width : 16px;}
</style>
10. Mengatur padding dan margin
padding digunakan untuk mengatur jarak teks dan border.
contoh sintaks :
<style type="text/css">
p{border-style : dotted;
border-color : red;
padding-left : 1cm;
padding-top : 1cm;
padding-bottom : 1.5cm;
padding-right : 1.5cm;}
</style>
Margin diatur untuk memberi jarak antara border dengan layar.
contoh sintaks :
<style type="text/css">
p{border-style : dotted;
border-color : red;
margin-left : 2cm;
margin-right : 3cm;}
</style>
11. CSS pada UnOrdered List dan Ordered List
contoh sintaks UnOrdered list :
<style type="text/css">
ul{list-style-type : disc}
</style>
contoh sintaks Ordered list :
<style type="text/css">
ol{list-style-type : lower-roman}
</style>
12. Membuat list dengan gambar
contoh sintaks :
<style type="text/css">
ul{list-style-image : url('contoh.jpg')}
</style>
13. Mengatur Warna dan Gambar Latar
contoh sintaks untuk mengatur warna latar:
<style type="text/css">
body{background-color : blue;}
h1{background-color : red;}
</style>
contoh sintaks untuk mengatur gambar latar:
<style type="text/css">
body{background-image : url('pic1.jpg');}
</style>
14. Mengatur posisi gambar latar
contoh sintaks untuk mengatur posisi gambar latar:
<style type="text/css">
body{background-image : url('pic1.jpg');
background-repeat : norepeat;
background-position : top-right;}
</style>
15. Mengatur Perulangan dan membekukan Gambar latar
contoh sintaks untuk mengatur perulangan gambar latar:
<style type="text/css">
body{background-image : url('pic1.jpg');
background-repeat : repeat-x;}
</style>
contoh sintaks untuk membekukan gambar latar:
<style type="text/css">
body{background-image : url('pic1.jpg');
background-repeat : norepeat;
background-position : top-right;
background-attachment : fixed;}
</style>
16. ID dalam CSS
ID digunakan untuk meningkatkan kemampuan dari CSS. Lambang ID dalam CSS adalah #.
contoh sintaks :
<style type="text/css">
#satu{font-style : italic;
background-color : aqua;
color : red;}
</style>
dan dalam tag body diisi :
<body>
<h1 id="satu">Header 1 Style 1</h1>
</body>
17. Class dalam CSS
Simbol yang digunakan oleh class adalah .(titik). Class dapat digabungkan dengan ID.
contoh sintaks :
<style type="text/css">
#satu{font-style : italic;
background-color : aqua;
color : red;}
.dua{text-decoration : underline;
font-family : arial;
border-style : dotted;
border-color : blue;}
h2.satu{font-family : arial;
color : aqua;}
</style>
dan dalam tag body diisi :
<body>
<h1 id="satu">Header 1 ID 1</h1>
<h1 class="dua">Header 1 Class 2</h1>
<h2 class="satu">Header 2 class 1</h2>
</body>
18. In line CSS
Pendefinisian CSS ditulis sebagai nilai dari atribut style pada tag XHTML. Ditulis dalam tag body.
contoh sintaks :
<body>
<h1 style="color : pink;
background-color : blue;
text-decoration : underline;">Menggunakan model pendefinisian In line</h1>
</body>
19. External CSS
Pendefinisian CSS ditulis dalam file yang terpisah dari dokumen XHTML. Digunakan tag <link rel="stylesheet" type="text/css" href="file1.css"> dalam tag body dokumen XHTML. Sedangkan dalam file1.css dibuat ID atau Class yang akan digunakan.
Jumat, 25 Maret 2011
Senin, 21 Maret 2011
Tugas Praktikum 5 Pemograman Web-Ratna Ayu-1072005
Form
Form digunakan untuk menampung komponen inputan, form berkaitan dengan pemograman. Form merupakan sejenis daftar dalam suatu formulir. Di dalam form terdapat 3 atribut yaitu name, method, dan action.
Ada beberapa tipe input didalam form, yaitu :
1. Tipe Text atau TextBox
digunakan untuk memberi kotak pada data yang akan diisi.
Contoh sintaks :
<body>
<form>
Nama: <input type="text" name="nama" size="20" maxlength="15" /><br/>
Alamat:<input type="text" name="alamat" size="20" maxlength="20">
</form>
</body>
Hasil :
2. Tombol Submit dan Reset
Contoh sintaks tombol submit adalah : <input type="submit" value="kirim"/>
Contoh sintaks tombol reset adalah : <input type="reset" value="hapus"/>
Hasil :
3. Tipe Input Password
Contoh sintaks :
<body>
<form>
username<input type="text" name="username"/><br/>
password<input type="password" name="password" />
<input type="submit" value="Subnit Query">
</form>
</body>
Hasil :
4. Tipe CheckBox
Contoh sintaks :
<body>
<form>
Daftar hobi</br>
<input type="checkbox" name="renang"/>renang</br>
<input type="checkbox" name="baca" checked/>membaca</br>
<input type="checkbox" name="mancing" checked/>memancing</br>
<input type="checkbox" name="nonton"/>nonton</br>
</form>
</body>
Hasil :
Daftar hobi
renang
membaca
memancing
nonton
5. Tipe RadioButton
Contoh sintaks :
<body>
<form>
Jenis kelamin</br>
<input type="radio" name="kelamin" value="pria"/>Laki-laki</br>
<input type="radio" name="kelamin" value="wanita" checked/>Perempuan</br>
</form>
</body>
Hasil :
Jenis kelamin
Laki-laki
Perempuan
6. Tipe TextArea
Contoh sintaks :
<body>
<form>
Nama<input type="text" name="nama"></br>
Komentar<textarea name="komentar" cols="20" rows="5" wrap> </textarea>
</form>
</body>
Hasil :
Nama
Komentar
7. Tipe ComboBox
Dalam combo box, pilihan yang dapat dipilih hanya satu.
Contoh sintaks :
<body>
<form>
distro linux favourite:</br>
<select name="distro">
<option value="fedora"/>Fedora Core
<option value="suse"/>Open Suse
<option value="ubuntu" selected/>Ubuntu
<option value="debian"/>Debian
</select>
</form>
</body>
Hasil :
8. Tipe ListBox
Dalam List box, dapat memilih lebih dari satu pilihan.
Contoh sintaks :
<body>
<form>
distro linux favourite:</br>
<select name="distro" multiple/>
<option value="fedora" selected/>Fedora Core
<option value="suse"/>Open Suse
<option value="ubuntu" selected/>Ubuntu
<option value="debian"/>Debian
</select>
</form>
</body>
Hasil :
Form digunakan untuk menampung komponen inputan, form berkaitan dengan pemograman. Form merupakan sejenis daftar dalam suatu formulir. Di dalam form terdapat 3 atribut yaitu name, method, dan action.
Ada beberapa tipe input didalam form, yaitu :
1. Tipe Text atau TextBox
digunakan untuk memberi kotak pada data yang akan diisi.
Contoh sintaks :
<body>
<form>
Nama: <input type="text" name="nama" size="20" maxlength="15" /><br/>
Alamat:<input type="text" name="alamat" size="20" maxlength="20">
</form>
</body>
Hasil :
| NAMA | : | ||
| ALAMAT | : | ||
2. Tombol Submit dan Reset
Contoh sintaks tombol submit adalah : <input type="submit" value="kirim"/>
Contoh sintaks tombol reset adalah : <input type="reset" value="hapus"/>
Hasil :
3. Tipe Input Password
Contoh sintaks :
<body>
<form>
username<input type="text" name="username"/><br/>
password<input type="password" name="password" />
<input type="submit" value="Subnit Query">
</form>
</body>
Hasil :
| Username | : | |
| Password | : |
4. Tipe CheckBox
Contoh sintaks :
<body>
<form>
Daftar hobi</br>
<input type="checkbox" name="renang"/>renang</br>
<input type="checkbox" name="baca" checked/>membaca</br>
<input type="checkbox" name="mancing" checked/>memancing</br>
<input type="checkbox" name="nonton"/>nonton</br>
</form>
</body>
Hasil :
Daftar hobi
renang
membaca
memancing
nonton
5. Tipe RadioButton
Contoh sintaks :
<body>
<form>
Jenis kelamin</br>
<input type="radio" name="kelamin" value="pria"/>Laki-laki</br>
<input type="radio" name="kelamin" value="wanita" checked/>Perempuan</br>
</form>
</body>
Hasil :
Jenis kelamin
Laki-laki
Perempuan
6. Tipe TextArea
Contoh sintaks :
<body>
<form>
Nama<input type="text" name="nama"></br>
Komentar<textarea name="komentar" cols="20" rows="5" wrap> </textarea>
</form>
</body>
Hasil :
Nama
Komentar
7. Tipe ComboBox
Dalam combo box, pilihan yang dapat dipilih hanya satu.
Contoh sintaks :
<body>
<form>
distro linux favourite:</br>
<select name="distro">
<option value="fedora"/>Fedora Core
<option value="suse"/>Open Suse
<option value="ubuntu" selected/>Ubuntu
<option value="debian"/>Debian
</select>
</form>
</body>
Hasil :
8. Tipe ListBox
Dalam List box, dapat memilih lebih dari satu pilihan.
Contoh sintaks :
<body>
<form>
distro linux favourite:</br>
<select name="distro" multiple/>
<option value="fedora" selected/>Fedora Core
<option value="suse"/>Open Suse
<option value="ubuntu" selected/>Ubuntu
<option value="debian"/>Debian
</select>
</form>
</body>
Hasil :
Senin, 14 Maret 2011
Tugas Praktikum 4 Pemograman Web-Ratna Ayu-1072005
FRAME
Frame digunakan untuk membingkai beberapa dokumen XHTML ke dalam satu tampilan halaman web.
Frame dibagi menjadi 2 frame, yaitu:
- tag <frame>
dapat dipakai sebagai tag <frame src/> yang biasanya dipergunakan untuk mengambil suatu halaman web lainnya. Contoh sintaks : <frame src="halaman_a.html"/>.
- tag <frameset>
didalam tag frameset dapat digunakan untuk membagi frame ke dalam bentuk kolom dan baris.
Contoh sintaks : <frameset cols="30%,*,*">,sintaks ini dipergunakan untuk membagi frame menjadi 3 kolom. Sedangkan sintaks : <frameset rows="30%,*,*">, dipergunakan untuk membagi frame menjadi 3 baris.
Untuk memahami frame biasanya digunakan teknik memotong roti.
Borderless Frame
digunakan untuk memberi nilai pada atribut border sesuai dengan keperluan. Atribut border diletakkan didalam tag frameset.
Contoh sintaks: <frameset cols="20%,40%,*" border="4">.
Untuk memberi nilai 0 pada atribut border, maka isi atribut border dalam tag frameset adalah 0 sehingga jika border = 0,tidak terdapat garis pemisah antar frame yang terlihat.
Link Dalam Frame
Untuk membuat link dalam frame digunakan 2 dokumen XHTML. Contoh tag yang digunakan dalam membuat link didalam link yaitu : <a href="halaman_b.html" target="kanan">Halaman b</a>.
IFrame
Merupakan implementasi frame yang lebih fleksibel. Untuk membuat iframe juga membutuhkan 2 dokumen XHTML.
Contoh sintaks : <iframe src="halaman1.html" width="200" height="200" align="right"/>.
Frame digunakan untuk membingkai beberapa dokumen XHTML ke dalam satu tampilan halaman web.
Frame dibagi menjadi 2 frame, yaitu:
- tag <frame>
dapat dipakai sebagai tag <frame src/> yang biasanya dipergunakan untuk mengambil suatu halaman web lainnya. Contoh sintaks : <frame src="halaman_a.html"/>.
- tag <frameset>
didalam tag frameset dapat digunakan untuk membagi frame ke dalam bentuk kolom dan baris.
Contoh sintaks : <frameset cols="30%,*,*">,sintaks ini dipergunakan untuk membagi frame menjadi 3 kolom. Sedangkan sintaks : <frameset rows="30%,*,*">, dipergunakan untuk membagi frame menjadi 3 baris.
Untuk memahami frame biasanya digunakan teknik memotong roti.
Borderless Frame
digunakan untuk memberi nilai pada atribut border sesuai dengan keperluan. Atribut border diletakkan didalam tag frameset.
Contoh sintaks: <frameset cols="20%,40%,*" border="4">.
Untuk memberi nilai 0 pada atribut border, maka isi atribut border dalam tag frameset adalah 0 sehingga jika border = 0,tidak terdapat garis pemisah antar frame yang terlihat.
Link Dalam Frame
Untuk membuat link dalam frame digunakan 2 dokumen XHTML. Contoh tag yang digunakan dalam membuat link didalam link yaitu : <a href="halaman_b.html" target="kanan">Halaman b</a>.
IFrame
Merupakan implementasi frame yang lebih fleksibel. Untuk membuat iframe juga membutuhkan 2 dokumen XHTML.
Contoh sintaks : <iframe src="halaman1.html" width="200" height="200" align="right"/>.
Minggu, 06 Maret 2011
Tugas Praktikum 3 Pemograman Web-Ratna Ayu-1072005
Tabel
Table digunakan untuk membagi tampilan dan mengelompokkan suatu informasi.
Terdapat beberapa tag didalam tag tabel, yaitu :
- <caption>
Tag untuk memberi judul pada tabel yang ingin dibuat.
- <tr>
Tag ini digunakan untuk membuat suatu baris pada tabel.
- <th>
Digunakan untuk menyatakan cell heading suatu tabel.
- <td>
Digunakan untuk membuat isi dari suatu cell data dalam tabel.
Dalam Tabel, terdapat beberapa atribut yang mendukung pembuatan tabel yang lengkap dan efisien.
Salah satunya yaitu atribut border, atribut ini digunakan umtuk mengatur ketebalan garis tepi. Garis tepi dapat diatur sesuai keinginan.
Atribut bgcolor digunakan untuk mengatur warna latar pada keseluruhan tabel.
Contoh penggunaan atribut border dan bgcolor pada tag table yaitu : <table bgcolor="red" border="3"> </table>.
Atribut yang digunakan untuk mengatur jarak spasi dan padding adalah atribut cellspacing dan cellpadding. Cellspacing digunakan untuk mengatur jarak antar cell. Sedangkan cellpadding digunakan untuk mengatur jarak tulisan dan border di masing-masing cell.
Contoh penggunaan atribut cellspacing dan cellpadding adalah : <table cellpadding="10" cellspacing="30"> </table>.
Penggunaan headings pada table, yaitu :
<html>
<body>
<table border="2">
<tr>
<th>heading</th>
</tr>
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
</table>
</body>
</html>
Atribut width dan height digunakan untuk mengatur lebar dan tinggi tabel.
Contoh penggunaan dalam tag : <table width="400" height="400"> </table>.
Atribut align dan valign juga dapat digunakan didalam tag table. Atribut align digunakan untuk melakukan perataan secara horisontal. Dapat digunakan didalam tag table dan tag td. Contoh : <table align="center"> <tr> <td align="left">Perataan</td> <td>Kiri</td> </tr> </table>.
Sedangkan atribut valign digunakan untuk melakukan perataan secara vertikal. Biasanya digunakan didalam tag td. Contoh : <tr> <td valign="top">Perataan</td> <td>atas</td> </tr>.
Atribut colspan dan rowspan. Atribut colspan digunakan untuk penggabungan cell secara kolom, sedangkan atribut rowspan untuk penggabungan cell secara baris. Kedua atribut ini diletakkan didalam tag yang ingin digabungkan. Contoh sintaks : <th rowspan="3" colspan="2">3 baris dan 2 kolom digabungkan</th>.
Mengosongkan cell pada table digunakan tag td, contoh sintaks : <td> </td>.
Table digunakan untuk membagi tampilan dan mengelompokkan suatu informasi.
Terdapat beberapa tag didalam tag tabel, yaitu :
- <caption>
Tag untuk memberi judul pada tabel yang ingin dibuat.
- <tr>
Tag ini digunakan untuk membuat suatu baris pada tabel.
- <th>
Digunakan untuk menyatakan cell heading suatu tabel.
- <td>
Digunakan untuk membuat isi dari suatu cell data dalam tabel.
Dalam Tabel, terdapat beberapa atribut yang mendukung pembuatan tabel yang lengkap dan efisien.
Salah satunya yaitu atribut border, atribut ini digunakan umtuk mengatur ketebalan garis tepi. Garis tepi dapat diatur sesuai keinginan.
Atribut bgcolor digunakan untuk mengatur warna latar pada keseluruhan tabel.
Contoh penggunaan atribut border dan bgcolor pada tag table yaitu : <table bgcolor="red" border="3"> </table>.
Atribut yang digunakan untuk mengatur jarak spasi dan padding adalah atribut cellspacing dan cellpadding. Cellspacing digunakan untuk mengatur jarak antar cell. Sedangkan cellpadding digunakan untuk mengatur jarak tulisan dan border di masing-masing cell.
Contoh penggunaan atribut cellspacing dan cellpadding adalah : <table cellpadding="10" cellspacing="30"> </table>.
Penggunaan headings pada table, yaitu :
<html>
<body>
<table border="2">
<tr>
<th>heading</th>
</tr>
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
</tr>
</table>
</body>
</html>
Atribut width dan height digunakan untuk mengatur lebar dan tinggi tabel.
Contoh penggunaan dalam tag : <table width="400" height="400"> </table>.
Atribut align dan valign juga dapat digunakan didalam tag table. Atribut align digunakan untuk melakukan perataan secara horisontal. Dapat digunakan didalam tag table dan tag td. Contoh : <table align="center"> <tr> <td align="left">Perataan</td> <td>Kiri</td> </tr> </table>.
Sedangkan atribut valign digunakan untuk melakukan perataan secara vertikal. Biasanya digunakan didalam tag td. Contoh : <tr> <td valign="top">Perataan</td> <td>atas</td> </tr>.
Atribut colspan dan rowspan. Atribut colspan digunakan untuk penggabungan cell secara kolom, sedangkan atribut rowspan untuk penggabungan cell secara baris. Kedua atribut ini diletakkan didalam tag yang ingin digabungkan. Contoh sintaks : <th rowspan="3" colspan="2">3 baris dan 2 kolom digabungkan</th>.
Mengosongkan cell pada table digunakan tag td, contoh sintaks : <td> </td>.