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

Desain Web

HTML Layout La out

Oleh : Ady Purna Kurniawan, ST., MT.

Materi HTML Layout Materi HTML Layout 1. Tabel 2 Frame 2.

TABLE • •

Digunakan Di k untuk t k membuat b t tabel t b l (kolom (k l dan d baris) b i) Diperbolehkan membuat tabel di dalam tabel (nested table)

Syntaks : ... ...

Isi Sel Baris 1 Kolom 1

Isi Sel Baris 1 Kolom 2

TABLE • Tag merupakan tag dasar membuat tabel • Tag merupakan tag untuk membuat baris dalam tabel • Tag merupakan tag untuk membuat kolom dalam tabel

TABLE Atribut : Width

Mengatur lebar tabel (dalam pixel atau persen)

Border

Mengatur ukuran bingkai tabel

Cellspacing

Mengatur jarak antar sel Mengatur jarak antar sel

Cellpadding

Mengatur jarak bingkai dengan isi dalam sel

Align g

Mengatur perataan tabel pada layar (kiri, g p p y ( , tengah, kanan) g , )

Bgcolor

Mengatur warna dasar pada tabel

Bordercolor

Mengatur warna bingkai tabel

TABLE Atribut : Align

Mengatur perataan isi sel dalam baris secara horisontal (kiri,  tengah, kanan)

g Valign

Mengatur perataan isi sel dalam baris secara vertikal (atas, g p ( , tengah, bawah)

Bgcolor

Mengatur warna dasar isi sel

H i h Height

M Mengatur tinggi baris i ib i

Colspan

Menggabungkan beberapa kolom menjadi satu (ekspansi kolom> Menggabungkan beberapa kolom menjadi satu (ekspansi kolom>

Rowspan

Menggabungkan beberapa baris menjadi satu (ekspansi baris)

Width

Mengatur lebar kolom

TABLE C t h 1: Contoh 1 TD 2 1 /TD

1-1	1-2	1-3
2-1	2-2	2-3

Hasil H il :

TABLE Contoh 2: TABLE border="1"> 1-1 2 1 2-1 2-2 2-3 TD 2 3 /TD

Hasil :

TABLE Contoh 3:

1-1	1 2	1-2	1-3
	2-2	2-2

Hasil :

Latihan TABLE Latihan TABLE • D Darii syntaks t k form yang telah dibuat pada p praktikum pertemuan 3, rapikan menggunakan tag tabel sehingga tampilan form seperti pada gambar di samping.

Frame • Digunakan untuk membuat area web dimana p y terbagi-bagi. g g tampilannya • Konsep frame hampir sama dengan tabel, namu sel dalam tabel diganti dokumen file. file • Bagan frame : FRAMESET FRAME (file‐1.html)

FRAME (file‐2 FRAME (file 2.html) html)

Frame • S Syntaks k : src file 2.html > .... B i ini Bagian i i ditampilkan dit ilk jika jik browser tidak mendukung Frameset

Frame • Atribut : Rows

Membagi jendala menjadi beberapa baris

Cols

Membagi jendala menjadi beberapa kolom

Frameborder

Memberikan bingkai (yes atau no) ( )

Border

Mengatur lebar bingkai

Src

Menentukan lokasi atau nama file yang ditampilkan

Name

Menentukan nama target hyperlink

Scrolling

Mengatur pergeseran halaman

Noresize

Mengatur perubahan ukuran halaman

Frame • Atribut : Rows

Membagi jendala menjadi beberapa baris

Cols

Membagi jendala menjadi beberapa kolom

Frameborder

Memberikan bingkai (yes atau no) ( )

Border

Mengatur lebar bingkai

Src

Menentukan lokasi atau nama file yang ditampilkan

Name

Menentukan nama target hyperlink

Scrolling

Mengatur pergeseran halaman

Noresize

Mengatur perubahan ukuran halaman

Frame • Contoh C t h1:

Membagi baris menjadi 2  bagian. 50% dari jendela  komputer dan sisanya (*)

l "300 *"> > Membagi kolom  j g cols 500, > menjadi 2 bagian. 300  pixel dan sisanya (*)

Frame • Hasil 1 :

Frame • Contoh C t h2: > “30% *" >

Frame • Hasil 2 :

Layout Website Menggunakan Table dan Frame • Tag dalam Tabel dan Frame dapat digunakan y sebuah untuk membuat desain layout 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