Desain Web HTML Layout Oleh : Ady Purna Kurniawan, ST., MT.
Materi HTML Layout 1. Tabel 2. Frame
TABLE Digunakan untuk membuat tabel (kolom dan baris) Diperbolehkan membuat tabel di dalam tabel (nested table) Syntaks : <TABLE> <TR> <TD>Isi Sel Baris 1 Kolom 1 </TD> <TD>Isi Sel Baris 1 Kolom 2</TD>... </TR>... </TABLE>
TABLE Tag <TABLE></TABLE> merupakan tag dasar membuat tabel Tag <TR></TR> merupakan tag untuk membuat baris dalam tabel Tag <TD></TD> merupakan tag untuk membuat kolom dalam tabel
TABLE Atribut : <TABLE></TABLE> Width Mengatur lebar tabel (dalam pixel atau persen) Border Mengatur ukuran bingkai tabel Cellspacing Mengatur jarak antar sel Cellpadding Mengatur jarak bingkai dengan isi dalam sel Align Mengatur perataan tabel pada layar (kiri, tengah, kanan) Bgcolor Mengatur warna dasar pada tabel Bordercolor Mengatur warna bingkai tabel
TABLE Atribut : <TR></TR> Align Mengatur perataan isi sel dalam baris secara horisontal (kiri, tengah, kanan) Valign Mengatur perataan isi sel dalam baris secara vertikal (atas, tengah, bawah) Bgcolor Mengatur warna dasar isi sel Hih Height Mengatur tinggi ibaris Colspan Rowspan Width <TD></TD> Menggabungkan beberapa kolom menjadisatu (ekspansi kolom> Menggabungkan beberapa baris menjadi satu (ekspansi baris) Mengatur lebar kolom
TABLE Contoh h1: Hasil : <TABLE border="1" bgcolor="yellow align="center cellpadding="20"> <TR> <TD>1-1</TD> <TD>1-2</TD> <TD>1-3</TD> </TR> <TR> <TD>2-1</TD> 2 1 <TD>2-2</TD> <TD>2-3</TD> </TR> </TABLE>
TABLE Contoh 2: Hasil : TABLE border="1"> <TR align="center"> <TD colspan="3">1-1</td> </TR> <TR> <TD>2-1</TD> <TD>2-2</TD> <TD>2-3</TD> 2 3 </TR> </TABLE>
TABLE Contoh 3: Hasil : <TABLE border="1"> <TR> <TD rowspan="2">1-1</td> <TD>1-2</TD> <TD>1-3</TD> </TR> <TR> <TD>2-2</TD> <TD>2-2</TD> </TR> </TABLE>
Latihan TABLE Dari syntaks form yang telah dibuat pada praktikum pertemuan 3, rapikan menggunakan tag tabel sehingga tampilan form seperti pada gambar di samping.
Frame Digunakan untuk membuat area web dimana tampilannya terbagi-bagi. g Konsep frame hampir sama dengan tabel, namu sel dalam tabel diganti dokumen file. Bagan frame : FRAMESET FRAME (file 1.html) FRAME (file 2 2.html)
Frame Syntaks : <FRAMESET> <FRAME src= file-1.html > <FRAME src= file-2.html >... <NOFRAME>Bagian i ini i ditampilkan ilk jika browser tidak mendukung Frameset </NOFRAMES </FRAMESET>
Frame Atribut : Rows Cols Frameborder Border Src Name Scrolling Noresize <FRAMESET> Membagi jendala menjadi beberapa baris Membagi jendala menjadi beberapa kolom Memberikan bingkai (yes atau no) ) Mengatur lebar bingkai <FRAME> Menentukan lokasi atau nama file yang ditampilkan Menentukan nama target hyperlink Mengatur pergeseran halaman Mengatur perubahan ukuran halaman
Frame Atribut : Rows Cols Frameborder Border Src Name Scrolling Noresize <FRAMESET> Membagi jendala menjadi beberapa baris Membagi jendala menjadi beberapa kolom Memberikan bingkai (yes atau no) ) Mengatur lebar bingkai <FRAME> Menentukan lokasi atau nama file yang ditampilkan Menentukan nama target hyperlink Mengatur pergeseran halaman Mengatur perubahan ukuran halaman
Contoh h1 : Frame Membagi baris menjadi 2 bagian. 50% dari jendela komputer dan sisanya (*) <FRAMESET rows="50%,*"> <FRAMESET cols="300,*"> <FRAME src="file-1.html"> <FRAME src="file-1 1.html html"> </FRAMESET> <FRAMESET cols="500,*"> j <FRAME src="file-1.html"> <FRAME src="file-1.html"> </FRAMESET> </FRAMESET> Membagi kolom menjadi 2 bagian. 300 pixel dan sisanya (*)
Hasil 1 : Frame
Frame Contoh h2 : <FRAMESET cols= 60%,*"> <FRAMESET rows="300 300,200, *"> <FRAME src="file-1.html"> <FRAME src="file-1.html"> <FRAME src="file-1.html"> </FRAMESET> <FRAMESET rows= 30%,*"> <FRAME src="file-1.html"> <FRAME src="file-1 1.html html"> </FRAMESET> </FRAMESET>
Hasil 2 : Frame
Layout Website Menggunakan Table dan Frame Tag dalam Tabel dan Frame dapat digunakan untuk membuat desain layout sebuah website, namun tidak dianjurkan sebagai acuan utama dalam membuat desain website karena banyaknya kekurangan yang dimiliki oleh tag table dan frame
Layout Website Menggunakan Table
Layout Website Menggunakan Frame
</THANKS>