Desain Web. Oleh : Ady Purna Kurniawan, ST., MT.

Ukuran: px

Mulai penontonan dengan halaman:

Download "Desain Web. Oleh : Ady Purna Kurniawan, ST., MT."

Sucianty Rachman
7 tahun lalu
Tontonan:

1 Desain Web HTML Layout Oleh : Ady Purna Kurniawan, ST., MT.

2 Materi HTML Layout 1. Tabel 2. Frame

3 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>

4 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

5 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

6 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

7 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>

8 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>

9 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>

10 Latihan TABLE Dari syntaks form yang telah dibuat pada praktikum pertemuan 3, rapikan menggunakan tag tabel sehingga tampilan form seperti pada gambar di samping.

11 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)

12 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>

13 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

14 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

15 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 (*)

16 Hasil 1 : Frame

17 Frame Contoh h2 : <FRAMESET cols= 60%,*"> <FRAMESET rows=" ,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>

18 Hasil 2 : Frame

19 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

20 Layout Website Menggunakan Table

21 Layout Website Menggunakan Frame

22 </THANKS>

dokumen-dokumen yang mirip

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id 1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 3 HTML Layout Tujuan: Mahasiswa mengenal konsep-konsep dan komponen layout dasar untuk membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha