MODUL PRAKTIKUM

PERANCANGAN WEB

Oleh :Sri Herawati, S.Kom, M.Kom

TEKNIK MULTIMEDIA DAN JARINGANFAKULTAS TEKNIK

UNIVERSITAS TRUNOJOYO2014

MODUL 1

1

TABEL DAN GAMBAR

I. TUJUAN PRAKTIKUM

Peserta Praktikum dapat memahami dan mengimplementasikan penggunaan tabel dan

gambar

II. TUGAS PENDAHULUAN

1. Apa perbedaan website, web page dan homepage? Jelaskan dan beri contoh!

2. Sebutkan fitur-fitur yang ada pada Insert Bar? Jelaskan dan beri contoh!

3. Sebutkan kegunaan dari fungsi merge cells dan split cells dalam tabel?

4. Apa perbedaan antara insert Colums atau Rows dengan split cells? Jelaskan dan beri

contoh!

III. LANDASAN TEORI

Tabel membantu dalam membagi ruang halaman web. Tabel ini mirip tabel yang ada

pada word atau Excel, tetapi tabel dalam web dapat digunakan dengan cara yang lebih

fleksibel. Tabel memberikan pilihan untuk membuat ukuran halaman web yang tetap atau

membuat halaman sesuai dengan jendela pengguna. Tabel menjamin bahwa letak teks dan

gambar tidak berubah jika dilihat pada layar dengan resolusi atau web browser yang berbeda.

Selain itu, tabel berfungsi menampilkan informasi secara terstruktur, ringkas dan mudah

dibaca serta mengatur tampilan homepage agar lebih menarik. Atribut-atribut yang dimiliki

oleh tabel antara lain :

Rows digunakan untuk menentukan jumlah baris

Columns digunakan untuk menentukan jumlah kolom

Width digunakan untuk mengatur lebar tabel

Border thickness digunakan untuk mengatur ketebalan border. Jika memilih 0

berarti border tidak terlihat.

Cell padding digunakan untuk mengatur spasi antara border dengan tulisan, sehingga

menambahkan ruang dalam sel. Masukkan 0 untuk tidak ada spasi atau nomor untuk

menambah spasi.

Cell spacing digunakan untuk menambah ruang antara sel-sel tabel. Masukkan 0 untuk

tidak ada ruang atau nomor untuk menambah ruang.

Header digunakan untuk memilih letak header tabel, terdapat empat pilihan header

yaitu: None, Left, Top dan Both.

2

IV. PRAKTIKUM

1. Menambahkan Tabel

Untuk menambahkan tabel, ikuti langkah-langkah berikut :

a. Pada menu utama, klik Insert > Table, sehingga muncul tampilan sebagai

berikut:

b. Masukkan jumlah baris (Rows) diisi dengan 3 dan kolom (Columns) diisi

dengan 3

c. Atur lebar tabel (Table width) 600 piksel.

d. Atur ketebalan border dengan 1.

e. Cell padding diisi dengan 5 dan cell spacing diisi dengan 0.

f. Pada pilihan header, pilih None

g. Klik OK, sehingga akan menunjukkan hasil sbb:

3

2. Menggabungkan beberapa cell

Langkah-langkah untuk menggabungkan beberapa cell dalam tabel antara lain :

a. arahkan mouse pada sel pertama (kiri atas atau kanan bawah),

b. kemudian drag beberapa sel sampai sel-sel yang diinginkan dalam keadaan

terpilih

c. klik kanan samapi muncul menu pilih Table, kemudian pilih Merge Cells.

d. hasil dari penggabungan sel seperti ditunjukkan pada gambar berikut:

Catatan : grup sel yang terpilih tadi sekarang menjadi satu sel yang lebih besar. Jika

ada 2 sel atau lebih yang memiliki isi di dalamnya (baik berupa tulisan, gambar, tabel,

dsb) dan dilakukan operasi merge, maka isi-isi sel tadi akan dijadikan satu.

3. Menyisipkan satu sel

4

Langkah-langkah untuk menyisipkan satu sel sebagai berikut :

a. Letakkan kursor pada sel yang ingin disisipkan. Kemudian klik kanan mouse.

b. Muncul menu konteks, pilih Table, kemudian Split Cell. Maka muncul Split

Cell dialog box.

c. Jika ingin menyisipkan sel tersebut menjadi beberapa baris, maka

- klik radio button Rows,

- masukkan jumlah baris yang diinginkan, misalnya 2

- klik OK, maka hasil dari menyisipkan baris sebagai berikut:

d. Jika ingin menyisipkan sel menjadi beberapa kolom, maka

- klik radio button Columns

- masukkan jumlah kolom yang diinginkan, misalnya 2

- klik OK, maka hasil menyisipkan beberapa kolom sebagai berikut :

4. Menambah atau mengurangi baris dan kolom

5

Langkah-langkah untuk menambah atau mengurangi baris dan kolom sebagai berikut:

a. Letakkan posisi kursor pada sel yang diinginkan

b. Klik tombol kanan mouse, sehingga muncul menu konteks pilihan Table.

c. Kemudian muncul menu pilihan yaitu :

- Insert Row digunakan untuk menyelipkan satu baris diatas sel yang terpilih.

- Insert Column digunakan untuk menyelipkan satu kolom di sebelah kiri sel

yang terpilih.

- Insert Row or Column digunakan untuk menyelipkan baris atau kolom

seperti ditunjukkan pada gambar berikut :

Jika ingin menambahkan baris,maka :

klik pada radio button Rows, masukkan jumlah baris yang ingin

ditambahkan.

pilih apakah baris akan ditambahkan di atas sel terpilih (Above the

Selection) ataukah di bawah sel terpilih (Below the Selection).

klik OK, maka hasil dari penambahaan dua baris seperti ditunjukkan pada

gambar berikut:

Jika ingin menyelipkan kolom,maka:

klik pada radio button Columns, masukkan jumlah kolom yang ingin

diselipkan,

pilih apakah kolom akan ditambahkan sebelum sel terpilih (Before

current Column) ataukah sesudah sel terpilih (After current Column).

6

klik OK, maka hasil dari penambahan satu kolom seperti ditunjukkan

pada gambar berikut :

- Delete Row digunakan untuk menghapus baris.

- Delete Column digunakan untuk menghapus kolom.

5. Memasukkan gambar

Langkah-langkah untuk memasukkan gambar sebagai berikut :

a. Pilih menu Insert > Image

b. Tampak dialog box untuk memilih file gambar, kemudian pilih gambar yang

akan ditampilkan.

c. Klik select, maka gambar akan dimasukkan pada halaman web seperti

ditunjukkan pada gambar berikut :

6. Membuat rollover gambar

Rollover image merupakan perubahan gambar yang akan terjadi ketika pointer dari

mouse diarahkan pada gambar tersebut. Rolover image terdiri dari 2 gambar yaitu

gambar pertama yang akan tampak pada saat pertama kali ditampilkan pada browser,

dan gambar kedua akan tampil ketika pointer diarahkan pada gambar tersebut. Untuk

membuat rollover gambar, pastikan kedua gambar mempunyai ukuran yang sama,

supaya tampilan web tampak konsisten.

Langkah-langkah untuk membuat rollover gambar sebagai berikut:

7

a. Klik button image rollover pada object panel, maka akan muncul dialog box

yang harus diisi nama rollover gambar tersebut,

b. Pilih gambar pertama dan memilih rollover image atau image kedua.

Sehingga hasil dari penambahan rollover gambar seperti ditunjukkan pada gambar

berikut:

Ketika pointer mouse diletakkan diatas gambar, maka akan muncul tampilan sebagai

berikut:

V. KESIMPULAN

- Tabel membantu dalam membagi ruang halaman web supaya lebih mudah diatur dan

tampilan lebih menarik

- Rollover image merupakan perubahan gambar yang akan terjadi ketika pointer dari

mouse diarahkan pada gambar tersebut.

VI. TUGAS PRAKTIKUM

8

1. Buat tampilan web dengan menggunakan tabel dan gambar seperti ditunjukkan pada

gambar di bawah ini. Tampilan dan isi website bisa juga dibuat sesuai dengan kreatifitas

masing-masing peserta praktikum.

Ketika pointer mouse diletakkan diatas gambar, maka tampilan gambar akan berubah

seperti ditunjukkan pada gambar berikut:

9