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 >

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 >

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 >

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 >

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 >

pertemuan pertama

Di pertemuan pertama mat kul progweb, saia diajarkan beberapa tag..
beberapa tag yang harus ada di dalam sebuah site html adalah [html] dan [body]
tapi biasanya orang2 suka menambahkan [head] untuk menampilkan judul nya

selain itu juga banyak beberapa tag yang bisa digunakan dalam file html yang tidak wajib ada
contohnya
[/br] - untuk pindah ke baris selanjutnya
[small] - untuk mengecilkan tulisan
[big] untuk membesarkan tulisan
dan masih banyak lagi

sekian hasil rangkuman dari pertemuan pertama..
thx..

karena untuk mengurangi kesalahan, tanda < diganti dengan [

posting pertama nie...
blog ini dibikin untuk memenuhi tugas mata kuliah progweb saya..
semoga blog ini berguna untuk orang lain..
kalau sampai gk, minimal blog ini bisa membantu saya untuk dapat nilai di matkul tsb..
hehhee...
silakan disimak postingan slanjutnya..