Jumat, 26 Maret 2010

1. Apa itu CSS?
- Cascading Style Sheet
- Meningkatkan kemampuan XHTML
- Berperan Dalam Desain Tampilan

2. Menulis CSS
- CSS bisa ditulis dalam dokumen XHTML
- Antar atribut dipisahkan tanda ; (titik koma)
- Menggunakan pasangan tag < style type="text/css" > < /style >
- Pemberian nilai atribut menggunakan tanda : (titik dua)

3. Mengatur Warna Teks
< html >
< head >
< title > ini judulnya < /title >
< style type="text/css" >
h1 {color: blue;}
p {color: red;}
< /style >
< /head >
< body >
< h1 > Berwarna Biru < /h1 >
< h2 > Kondisi Normal < /h2 >
< p > Berwarna Merah < /p >
< /body >
< /html >

4. Mengatur Pemformatan Teks
-> text-align=left, right, center, justify
< html >
< head >
< title > ini judulnya < /title >
< style type="text/css" >
h1 {text-align: center;}
p {text-align: justify;}
< /style >
< /head >
< body >
< h1 > Balonku ada lima < /h1 >
< p > rupa-rupa warnanya merah kuning dan hijau < /p >
< /body >
< /html >

5. Mengatur Garis Pada Text
-> text-decoration: overline, underline, linethrough, blink
< style type="text/css" >
h1 {text-decoration: overline;}
h2 {text-decoration: underline;}
h3 {text-decoration: linethrough;}
< /style >

6. Mengatur Identasi Text
-> dilakukan dengan mengatur nilai atribut text-indent
-> satuan : cm, px
< style type="text/css" >
p {text-indent: 1cm;}
< /style >

7. Mengatur Penggunaan Huruf Kapital
-> text-transform: uppercase, lowercase, capitalize
< style type="text/css" >
h1 {text-transform: uppercase;}
h2 {text-transform: lowercase;}
h3 {text-transform: capitalize;}
< /style >

8. Mengatur Ukuran dan Jenis Huruf
< style type="text/css" >
p {font-family: arial; font-size: 24pt;}
< /style >

9. Mengatur Cetak Tebal dan Cetak Miring
< style type="text/css" >
p {font-weight: bold; font-style: italic;}
< /style >

Rabu, 17 Maret 2010

1. Mengenal Form
-> untuk menampung komponen liputan
. action
. method
. name

2. Mengenal TextBox
-> < input type="text" >
< body >
< form >
nama : < input type="text"
name="nama"
size="15"
maxlength="15"
value="mbah boedy" / > < br/ >
alamat : < input type="text"
name="alamat"
size="20"
maxlength="20" / > < br/ >
< /form >
< /body >

3. Mengenal Tombol Submit dan Reset
-> < input type="submit" / >
< input type="reset" / >
< body >
< form >
nama : < input type="text"
name="nama"
size="15"
maxlength="15"
value="mbah boedy" / > < br/ >
alamat : < input type="text"
name="alamat"
size="20"
maxlength="20" / > < br/ >
< input type="submit" value="kirim" / >
< input type="reset" value="hapus" / >
< /form >
< /body >

4. Mengenal Inputan Password
-> < input type="password" / >
< body >
< form >
username < input type="text"
name="username" / > < br/ >
Password < input type="password"
name="password" / > < br / >
< input type="submit" value="login"
< /form >
< /body >

5. Mengenal CheckBox
-> < input type="checkbox" / >
< form >
daftar hobi < br/ >
< input type="checkbox" name="renang" / > renang < br/ >
< input type="checkbox" name="baca" checked / > baca < br/ >
< input type="checkbox" name="mancing" / > mancing < br/ >
< /form >

6. Mengenal RadioButton
-> < input type="radio" / >
< form >
jenis kelamin : < br/ >
< input type="radio" name="kelamin" value="pria" checked / > lakilaki < br / >
< input type="radio" name="kelamin" value="wanita" / > perempuan < br > < br/ >
< /form >

7. Mengenal TextArea
-> < textarea > < / textarea >
. cols
. wrap
. rows
nama < input type="text" name="nama" > < br/ >
komentar < textarea name="komentar"
cols="20"
rows="5"
wrap >
< /textarea >
< /form >

8. Mengenal ComboBox
-> < select >
< option / >
< /select >
< form >
distro linux favorit : < br >
< select name="distro" >
< option value="fedora" / > fedora core
< option value="suse" / > open suse
< option value="ubuntu" selected / > ubuntu
< /select >
< /form >

9. Mengenal ListBox
-> < select multiple >
< option / >
< /select >
< form >
distro linux favorit : < br/ >
< select name="distro" multiple / >
< option value="fedora" / > fedora core
< option value="suse" / > open suse
< option value="ubuntu" selected / > ubuntu
< / select >
< /form >

Jumat, 12 Maret 2010

1. Tabel pada dokumen XHTML:
a. < table > = tabel
b. < caption > = judul tabel
c. < tr > = baris
d. < th > = cell heading
e. < td > = cell data

2. Membuat tabel sederhana
< body >
< table >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td > superman < /td > < td > bisa terbang < /td > < /tr >
< tr > < td > spiderman < /td > < td > bisa panjat dinding < /td > < /tr >
< tr > < td > mbah boedy < /td > < td > bisa ngajar < /td > < /tr >
< /table >
< /body >

3. Mengenal atribut border dan bgcolor
-> atribut border untuk mengatur ketebalan garis tepi.
-> atribut bgcolor untuk mengatur latar pada keseluruhan tabel.
< body >
< table bgcolor="grey" border="2" >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td > superman < /td > < td > bisa terbang < /td > < /tr >
< tr > < td > spiderman < /td > < td > bisa panjat dinding < /td > < /tr >
< tr > < td > mbah boedy < /td > < td > bisa ngajar < /td > < /tr >
< /table >
< /body >

4. Mengenal atribut cellspacing dan cellspadding
-> untuk mengatur jarak spasi dan padding
< body >
< table border="10" cellpadding="10" cellspacing="20" >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td > superman < /td > < td > bisa terbang < /td > < /tr >
< tr > < td > spiderman < /td > < td > bisa panjat dinding < /td > < /tr >
< tr > < td > mbah boedy < /td > < td > bisa ngajar < /td > < /tr >
< /table >
< /body >

5. Mengenal atribut width dan height
-> digunakan untuk mengatur lebar dan tinggi tabel
< body >
< table border="1" width="300" height="200" >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td > superman < /td > < td > bisa terbang < /td > < /tr >
< tr > < td > spiderman < /td > < td > bisa panjat dinding < /td > < /tr >
< tr > < td > mbah boedy < /td > < td > bisa ngajar < /td > < /tr >
< /table >
< /body >

6. Mengenal atribut align
-> untuk melakukan perataan secara horizontal
< body >
< table border="1" width="300" height="200" align="center" >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td > superman < /td > < td align="right" > bisa terbang < /td > < /tr >
< tr > < td > spiderman < /td > < td align="right" > bisa panjat dinding < /td > < /tr >
< tr > < td > mbah boedy < /td > < td align="right" > bisa ngajar < /td > < /tr >
< /table >
< /body >

7. Mengenal atribut valign
-> untuk melakukan perataan secara vertikal
< body >
< table border="1" width="300" height="200" align="center" >
< caption > tabel keahlian < /caption >
< tr > < th > nama < /th > < th > keahlian < /th > < /tr >
< tr > < td valign="top" > superman < /td > < td > bisa terbang < /td > < /tr >
< tr > < td valign="middle" > spiderman < /td > < td > bisa panjat dinding < /td > < /tr >
< tr > < td valign="bottom" > mbah boedy < /td > < td > bisa ngajar < /td > < /tr >
< /table >
< /body >

8. Mengenal atribut colspan dan rowspan
-> untuk menggabungkan cell baik seacra kolom maupun baris
< body >
< table border="1" >
< caption > data mamalia di kebun binatang < /caption >
< tr >
< th rowspan="2" colspan="2" > mamalia < /th > < th colspan="3" > jenis kelamin < /th >
< /tr >
< tr >
< th > orang utan < /th > < th > gajah < /th > < th > zebra < /th >
< /tr >
< th rowspan="2" > jenis kelamin < /th > < th > jantan < /th > < td > 15 < /td > < td > 5 < /td > < td > 8 < /td >
< /tr >
< tr >
< th > betina < /th > < td > 25 < /td > < td > 7 < /td > < td > 10 < /td >
< /tr >
< /table >
< /body >


FRAME dan IFRAME

1. Mengenal frame
Frame :
a. < frame > - src
b. < frameset > - cols, - rows

2. Membuat frame sederhana 1
nama file: frameku.html
< html >
< head >
< title > latihan frame < /title >
< /head >
< frameset cols="40%,*" >
< frame src="halaman_a.html" >
< frame src="halaman_b.htlml" >
< /frameset >
< /html >
nama file: halaman a.html
< body >
< h1 > ini halaman a < h1 >
< /body >

3. Membuat frame sederhana 2
< html >
< head >
< title > latihan frame < /title >
< /head >
< frameset rows="30%,*" >
< frame src="halaman_a.html" >
< frameset cols="40%,*" >
< frame src="halaman_b.html" >
< frame src="halaman_b.html" >
< /frameset >
< /frameset >
< /html >

4. Mengenal borderless frame
-> memberi nilai 0 pada atribut border
< html >
< head >
< title > latihan frame < /title >
< /head >
< frameset cols="40%,*" border="0" >
< frame src="halaman_a.html" >
< frame src="halaman_b.htlml" >
< /frameset >
< /html >

5. Mengenal link dalam frame
nama file: frameku.html
< html >
< head >
< title > latihan frame < /title >
< /head >
< frameset cols="40%,*" >
< frame name="kiri" src="halaman _a.html" >
< frame name="kanan" src="halaman_b.htlml" >
< /frameset >
< /html >
nama file: halaman a.html
< html >
< head >
< title > halaman a < /title >
< /head >
< body >
< h1 > ini halaman a < /h1 >
< a href="halaman_b.html" target="kanan" > halaman b < /a > < br >
< a href="halaman_c.html" target="kanan" > halaman c < /a >
< /body >
< /html >

6. Mengenal iframe
nama file: ifarmeku.html
< body >
< h1 > mencoba iframe <l; /h1 >
< iframe src="halaman 1.html"
width="200"
height="100"
align="right" / >
< /body >
nama file: halaman 1.html
< body >
< h1 > ini halaman 1 < /h1 >
< /body >

Minggu, 07 Maret 2010

1. Tipe List
a. Ordered List
- memperhatikan urutan
- Tag < ol >
b. Unordered List
- tidak memperhatikan urutan
- Tag < ul >

2. Mengenal Ordered List
< body >
klasifikasi hewan
< ol type="a" start="3" >
< li > mamalia < /li >
< li > reptil < /li >
< li > amfibi < /li >
< li > aves < /li >
< li > insecta < /li >
< /ol >
< /body >
* Atribut:
type: 1, A, a, I, i

3. Mengenal Unordered List
< body >
klasifikasi hewan
< ul type="circle" >
< li > mamalia < /li >
< li > reptil < /li >
< li > amfibi < /li >
< li > aves < /li >
< li > insecta < /li >
< /ul >
< /body >
* circle, disk, square

4. Mengenal Definition List
< body >
< font size="5" >
< dl >
< dt > html < /dt >
< dd > dokumen yang digunakan
untuk web < /dd >
< dt > web browser < /dt >
< dd > aplikasi yang digunakan untuk mengartikan dokumen html < /dd >
< dl >
< /font >
< /body >

5. Mengenal Link atau Hyperlink
nama file: halaman 1.html
< html >
< head >
< title > halaman pertama < /title >
< /head >
< body >
< h1 > ini adalah halaman pertama < /h1 >
< a href="halaman 2.html" > ke halaman 2 < /a >
< /body >
< /html >
nama file: halaman 2.html
< html >
< head >
< title > halaman kedua < /title >
< /head >
< body >
< h1 > ini adalah halaman kedua < /h1 >
< a href="halaman 1.html" > ke halaman 1 < /a >
< /body >
< /html >

6. Mengenal Link Pada jendela Browser Baru
* memberi nilai _blank pada atribut target
nama file: halaman 1.html
< html >
< head >
< title > halaman pertama < /title >
< /head >
< body >
< h1 > ini adlah halaman pertama < /h1 7gt;
< a href="halaman 2.html" target="_blank" > ke halaman 2 < /a >
< /body >
< /html >

7. Membuat Link ke Alamat Suatu Situs di Internet
* Nilai atribut ke alamat disesuaikan dengan alamat situs yang akan dituju
< html >
< head >
< title > halaman pertama < /title >
< /head >
< body >
< h1 > ini adalah halaman pertama < /h1 >
< a href="halaman 2.html" target="_blank" > ke halaman 2 < /a >
< a href="http:// google.com" target="_blank" > ke google < /a >
< /body >
< /html >

8. Gambar Sebagai Acuan Hyperlink
* Mengapit Tag < img > dengan Tag < a > < /a >
< html >
< head >
< title > halaman pertama < /title >
< /head >
< body >
< h1 > ini adalah halaman pertama < /h1 >
< a href="halaman 2.html" target="_blank" >
< img src="pic1.jpg" width="100" height="100" > < /a >
< /body >
< /html >

Selasa, 02 Maret 2010

1. Memberi gambar pada latar
-> dilakukan dengan mengatur nilai atribu background pada tag < body >
< body background="febby-11.jpg" >
< font color="red" size="5" >
Febby Surianto
< /font >
< /body >
*file gambar dan file xhtml harus berada di satu lokasi yang sama.

2. Tag < img >
-> untuk menambahkan gambar pada suatu halaman web
< body >
gambar 1
< img src="pic1.jpg" />
bunga tulip
< /body >
*file gambar dan file xhtml harus berada di satu lokasi yang sama.
Atribut dalam tag < img >
< body >
gambar 1
< img src="pic1.jpg" >
align="middle"
alt="sun flower"
width="200"
height="300" />
bunga tulip
< /body >

3. Tag < marquee >
-> untuk membuat animasi sederhana
< body >
< font size="7" color="blue" >
< marquee direction="right" > Febby < /marquee >
< /font >
< /body >
*atribut direction digunakan untuk mengatur arah gerakan

4. Tag < bgsound >
-> untuk memutar file audio sebagai suara latar
< body >
< bgsound src="lagu.mp3" loop="2" />
< h1 > mencoba lagu < /h1 >
< /body >

5. Tag < embed >
-> untuk memutar file video
< body >
< h1 > mencoba video < /h1 >
< embed src="video.mpg"
width="300"
height="200"
loop="true"
autostart="false" >
< /body >
1. Tag < b >, < i >, < u >
-> untuk cetak tebal, miring/italic, garis bawah/underline.
< body >
< b > Febby Surianto < /b > < br >
< i > Lahir di Bandung < /i > < br >
< u > Tinggal di Bandung < /u > < br >
< b > < u > dan besar di Bandung < /b > < /u > < br >
< /body >

2. Tag < big > dan < small >
-> untuk memperbesar dan memperkecil ukuran text.
< body >
< small > dari kecil < /small > < br >
lalu menjadi sedang < br >
< big > dan akhirnya menjadi besar < /big >
< /body >

3. Tag < sup >, < tt >, dan < del >
-> sup = diatas/superscript
sub = dibawah /subscript
tt = efek mesin tik
del = efek coretan
< body >
< del > salah < /del > < br >
h < sub > 2 < /sub > so < sub > 4 < /sub > < br >
meter < sup > 3 < /sup >
< /body >

4. Tag < pre >
-> digunakan untuk melakukan preformat.
< body >
< pre >
Febby Surianto
Lahir dan besar di Bandung
< pre >
< /body >

5. Tag < font >
-> untuk melakukan pengaturan huruf
< body >
< font face="arial" size="5" color="black" > ini Febby < /font >
< /body >

6. Tag < basefont >
-> untuk mengatur default font/huruf
< body >
< basefont face="arial" size="5" color="grey" / >
ini menggunakan efek default < br >
< font face="arial" size="5" color="blue" >
ini dengan efek font < br >
< /font >
< /body >

7. Tag < acronym >
-> untuk memberi keterangan tambahan terhadap suatu istilah/singkatan
< body >
Febby sangat mendukung < br >
upaya pemberantasan < br >
< acronym title="korupsi, kolusi, dan nepotisme" > kkn < /acronym >
< /body >

8. Special Character
< body >
< font size="6" >
©
®
&
×
÷
<
>
< /font >
< /body >