EduBlog!

Pada sesi ini akan membahas tentang bagaimana frame. Frame banyak digunakan untuk membuat halaman web yg area tampilannya terbagi-bagi. Konsep frame hamper sama dg table, namun perbedaannya adalah masing2 bagian tersebut yg berupa baris atau kolom pada frame adalah merupakan filesedangkan pd table adalah sel. Sehingga frame dpt dikatakan kumpulandari byk file dokumen HTML yg tersusun sedemikian rupa. Frame jg berfungsi untuk membingkai beberapa dokumen HTML ke dlm satu tampilan halaman web.

Karakteristik dari frame :
# Lebih dari satu dpt ditampilkan secara bersamaan dlm satu tampilan dokumen.
# Setiap dokumen ditampilkan dalam sebuah frame,jd minimal satu frame memiliki satu file dokumen.
# Dibutuhkan satu dokumen tersendiri yg berisi definisi frameset. Frameset iniliah yg akan membungkus keseluruhan file frame.
# Skema dasar dokumen frameset :
< FRAMESET FRAMEBORDER=”….” BORDER=”…” FRAMESPACING=”….” >
< FRAME SRC=”namafile1.html” name=”…” >
< FRAME SRC=”namafile2.html” name=”…” >
Dst…
< /FRAMESET >

# Sebuah frameset menentukan tata letak,ukuran dan banyaknya frame yg akan ditampilkan. Untuk menyatakan tata letak dokumen dlm frame yg tersusun secara baris,maka ditambahkan atribut rows=”ukuran-1, ukuran-2”. Adapun untuk kolomnya yaitu cols=” ukuran-1, ukuran-2”.

Contoh sederhana…!!
Nama file=frameku.html
< html >
< head >
< title > frameKu < /title >
< /head >
< frameset cols="30%,*" >
< frame src="halaman_a.html"/ >
< frame src="halaman_b.html"/ >
< /frameset >
< /html >

Nama file= halaman_a.html
< html >
< head >
< title > Halaman A < /title >
< /head >
< body >
< h1 align="center">Ini Halaman A< /h1 >
< /body >
< /html >

Membuat link dalam frame
Contoh :
Nama file=frameku.html
< html >
< head >
< title >Latihan Frame< /title >
< /head >
< frameset cols="40%,*" >
< frame name="kiri" src="halaman_b.html"/ >
< frame name="kanan" src="halaman_c.html"/ >
< /frameset >
< /html >

Nama file=halaman_a.html
< html >
< head >
< title > halaman a < /title >
< /head >
< body >
< h1 >Ini Halaman A< /h1 >
< a href="halaman_a.html" target="kanan">halaman b< /a >< br/ >
< a href="halaman_a.html" target="kanan">halaman c< /a >
< /body >
< /html >

Pada sesi ini, akan dibahas tentang bagaimana cara membuat form, apa itu form, dan apa ja sih atributnya..^o^
Form identik dengan formulir. Form sangat dibutuhkan pada saat anda ingin adanya nilai (data) yg dipilih atau yg di input oleh user.
Form dlm HTML merupakan jembatan komunikasi antara client dg server.
Tag-tag form terletak dalam tag BODY, yg meliputi :
< HTML >
…
< BODY >
< FORM name=”X” method=”GET|POST” action=”y” >
…
… (elemen tag-tag data form)
< /FORM >
…
< /BODY >
< /HTML >

• Name --> nama untuk form yg berlaku, digunakan untuk form handling.
• Method --> Get = data dikirimkan melalui URL address.
Post = data dikirimkan bersam HTTP header.
• Action --> URL/File yg digunakan untuk menangkap dan mengolah data yg dikirimkan.
Untuk membuat tampilan menjadi rapi, maka kita bias menggunakan table.

1. TextBox
Type ini digunakan untuk data isian seperti nama orang atau alamat.
Contoh sintaksnya :
< INPUT type=”TEXT” name=”Nama” size=”20” maxlength=”20” >

2. Type SUBMIT dan RESET
Tombol submit digunakan untuk mengirimkan data2 yg dibuat dalam form.
Syntax ny :
< INPUT type=”SUBMIT” name=”aksi” value=”kirim” >

Tombol reset digunakan mengosongkan apa yg kita tulis dalam form.
Syntax nya :
< INPUT type= ”RESET ” name=”aksi” value=”UNDO” >

3. Type PASSWORD
Type ini bila digunakan maka setiap karakter yg diketik akan berubah mjd *.
Biasa digunakan untuk input account password.
Syntax nya :
< INPUT type=”PASSWORD” name=”Pwd” size=”8” maxlength=”8” >

4. Type CHECKBOX
Tipe ini digunakan untuk membuat kotak2 cek. Kotak cek adalah suatu bentuk masukan yg memungkinkan user memilih 1 atau lebih pilihan nya.
< INPUT type=”CHECKBOX” name=”buah” value=”pisang” >Pisang
< INPUT type=”CHECKBOX” name=”buah” value=”Apel” >Apel

5. Type RADIO
Tipe ini hamper sama dg checkbox, namun yg dipilih hanya bisa satu.
Biasa nya digunakan unutk memilih jenis kelamin, status, dll.
Syntax nya :
< INPUT type=”RADIO” name=”Sex” value=”Male” >Male
< INPUT type=”RADIO” name=”Sex” value=”Female” >Female

6. Type TextArea
Digunakan untuk pengisian karakter yg panjang seperti komentar dan email.
Syntaxnya :
< textarea name=”x rows=”y” cols=”z” > default text < /textarea >

7. Type ComboBox
Syntax nya :
< select name=”x” >
< option value=”y”/ >Y
< option value=”z” / >Z
< option value=”a” / >A
< /select >

8. Type ListBox
Syntaxnya :
< select name=”x” MULTIPLE/ >
< option value=”y”/ >Y
< option value=”z” / >Z
< option value=”a” / >A
< /select >

Inilah semua tentang FORM, kalian bias mencobanya..^o^
Semoga bermanfaat..n_n

Tabel merupakan elemen yg sangat berguna bila ingin mengubah tampilan informasi menjadi lebih tertata rapi.
Tag untuk membuat Tabel dibagi menjadi dua bagian berdasarkan pada letak tag.
Tag outside yg digunakan adalah < TABLE >....< /TABLE > sbg tag dasar,sedangkan taginside adalah tag < TR >....< /TR > untuk menyatakan setiap baris yg ada pada tabel tsb. Dan tag < TD >....< /TD > untuk menyatakan kolom pd setiap baris yg ada pd tabel tsb. Adapun tag < CAPTION >....< /CAPTION > untuk memberi judul pada tabel tsb.
Lita dapat mengisi isi tabel dlm tag < TD >,kita dpt mengisi nya dg gambar,tulisan,atau membuat tabel lg.Untuk memberi judul pada kolom,kita bs menggunakan tag < TH >....< /TH >.

Contoh :
< html >
< head >
< title >Latihan Table< /title >
< /head >
< body >
< table border="10%" >
< caption >Daftar Hadir Mahasiswa< /caption >
< tr >< th >NRP< /th >< th >Nama< /th >< th >TTD< /th >
< tr >< td >0972111< /td >< td >Ucup< /td >< td >HADIR< /td >
< tr >< td >0972222< /td >< td >Ujang< /td >< td >HADIR< /td >< /tr >
< tr >< td >0972333< /td >< td >Untung< /td >< td >TIDAK HADIR< /td >< /tr >
< /body >
< /html >

Atribut2 yg ada pd tag2 table :
1. Width="..."
Untuk mengatur lebar dari tabel.

2. Border="..."
Mengatur ukuran bingkai tabel.

3. Cellspacing="..."
Mengatur jarak antar sel.

4. Cellpadding="..."
Mengatur jarak bingkai dg isi.

5. Align="..."
Mengatur perataan tengah,kanan,atau kiri.

6. Bgcolor="..."
Mengatur warna background dari tabel atau sel.

7. Bordercolor="..."
Mengatur warna dari bingkai tabel.

8. Valign="..."
Mengatur perataan vertikal atas,tengah,atau bawah.

9. Rowspan="..."
Menggabungkan beberapa baris jadi satu.

10. Colspan="..."
Menggabungkan beberapa kolom jadi satu.

Demikian pertemuan sesi 5,semoga bermanfaat bagi yg membaca..^o^

Link / Hyperlink dalam dokumen HTML digunakan untuk berpindah dari suatu halam 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.
Pada contoh kali ini terdapat dua buah file dokumen HTML di mana pada masing masing
dokumen
terdapat suatu link yang apabila dipilih (diklik) akan memanggil dokumen lainnya.

Pada dokumen HTML terdapat 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

Dalam dokumen HTML dimungkinkan untuk menyertakan serta memainkan suatu file multimedia
berupa animasi atau video dengan menggunakan tag . 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 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.