Desain halaman web dengan konsep tabel

dengan Konsep Tabel

3) Desain halaman web dengan konsep tabel - Top Index

Berikut adalah listing program untuk membuat layout “top index” halaman web dengan elemen table.

<!DOCTYPE html> <head>

<title>Top index</title> </head>

<body>

<form id="form1" name="form1" method="post" action=""> <table width="800" height="542" border="1"

align="center"> <tr>

bordercolor="#FFFFFF" bgcolor="#FFFF00">Banner atau iklan</td> </tr> <tr> <td height="27" align="center" bgcolor="#FFCCCC">Daftar isi atau navigasi </td>

</tr> <tr>

<td height="457" align="center" bgcolor="#FF66CC"> Body atau contents(isi)

Body atau contents(isi)

Body atau contents(isi)

Body atau contents(isi)

Body atau contents(isi)</td>

</tr> <tr>

<td height="23" align="center"

bgcolor="#CCFF99">Info tambahan atau lain-lain </td> </tr>

</table> </form> </body> </html>

Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :

112 | P a g e Gambar 10.12 penerapan <table> pada layout top index

- Bottom Index

Berikut adalah listing program untuk membuat layout “bottom index” halaman web dengan elemen table.

<!DOCTYPE html> <head>

<title>Top index</title> </head>

<body>

<form id="form1" name="form1" method="post" action=""> <table width="800" height="542" border="1"

align="center"> <tr>

<td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00">Banner

/ Judul</td> </tr>

<tr>

<td height="457" align="center" bgcolor="#CCCCCC"> Body atau contents(isi)

Body atau contents(isi)

Body atau contents(isi)

Body atau contents(isi)

Body atau contents(isi)</td> </tr> <tr> <td height="23" align="center" bgcolor="#CCFF99">Daftar

isi atau navigasi  </td>

</tr> </table> </form>

114 | P a g e </body>

</html>

Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :

Gambar 10.13 penerapan <table> pada layout bottom index - Left Index

Berikut adalah listing program untuk membuat layout “left index” halaman web dengan elemen table.

<!DOCTYPE html > <head>

<title>Left Colour</title> </head>

<body>

<form id="form1" name="form1" method="post" action=""> <table width="800" height="447" border="1"

align="center" cellspacing="1"> <tr>

<th width="160" rowspan="3" valign="top" bgcolor="#993366">Home

Profile About Us Blog

Contact Us</th>

<th width="627" height="23" align="center" bgcolor="#FFFF99">Electronic

Shop</th> </tr>

<tr>

Selamat datang di web kami, penjualan produk online ini adalah yang pertama di kota kami.

kualitas dan harga dapat dipercaya langsung saja pesan dan menjadi langganan kami.

116 | P a g e </td>

</tr> <tr>

<td height="30" align="center" bgcolor="#FFFF99"> profilkami.com</td> </tr> </table> </form> </body> </html>

Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :

Gambar 10.14 penerapan <table> pada layout left index - Layout Split

Berikut adalah listing program untuk membuat layout “split” halaman web dengan elemen table.

<!DOCTYPE html > <head>

<body>

<form id="form1" name="form1" method="post" action=""> <table width="800" height="512" border="1"

align="center"> <tr>

<td width="15%" rowspan="2" align="center" bgcolor="#99CC99">Daftar

Isi </td>

<td width="67%" height="23" align="center" bgcolor="#FFCCFF"><font

size="+3">Banner/judul</td> <td width="18%" rowspan="2" align="center" bgcolor="#99CC99">Daftar Isi </td> </tr> <tr> <td height="456" align="center" bgcolor="#CCCCCC">

Body atau contents(isi)

118 | P a g e contents(isi)

Body atau contents(isi)

Body atau contents(isi)

Body atau contents(isi)

</td> </tr>

Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :

Gambar 10.15 penerapan <table> pada layout split - Alternating Index

Berikut adalah listing program untuk membuat layout “alternating index” halaman web dengan elemen table.

<!DOCTYPE html > <head>

<title>alternating</title> </head>

<body>

<form id="form1" name="form1" method="post" action=""> <table width="800" height="738" border="1"

align="center"> <tr>

120 | P a g e bgcolor="#FF66CC">Teks/Daftar isi</td> <td align="center" bgcolor="#FFFFCC">Gambar </td> </tr> <tr> <td height="261" align="center" bgcolor="#FFFF99">Gambar </td> <td align="center" bgcolor="#FF66CC">Teks/daftar isi</td> </tr> <tr bgcolor="#996666">

</html>

Bila listing program di atas dijalankan maka akan menghasilkan tampilan halaman web seperti berikut ini :

Gambar 10.16 penerapan <table> pada layout alternating index c. Rangkuman

Pada kegiatan belajar desain Web dengan Konsep Tabel dapat disimpulkan menjadi beberapa point penting seperti berikut

Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut dengan sel.

HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal yang disebutkan sebelumnya, yaitu elemen table,tr,td,th, caption.

122 | P a g e Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari

containing block, Logo, navigation, content, white space Desain layout suatu halaman web meliputi penyusunan:

- pembagian tempat pada halaman - pengaturan jarak sepasi

- pengelompokan teks dan grafik

- serta penekanan pada suatu bagian tertentu

Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah top index, bottom index, left index, layout split, alternating index

d. Tugas

Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam kegiatan ini masing-masing kelompok kerjakan tugas berikut :

1. Buat desain layout halaman web yang dengan tema web sekolah atau web daerah. Desain halaman web tersebut dengan menggunakan salah satu model layout tabel

2. Terapkan desain layout tabelnya ke dalam listing program sehingga menjadi halaman web yang menarik.

3. Lengkapi halaman web tersebut dengan teks

4. Kemudian secara bergantian masing-masing kelompok mempresentasikan hasilnya didepan kelas.

e. Tes Formatif

Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya pada lembar jawaban test formatif yang telah disediakan.

1. Jelaskan tentang bagian dari anatomy sebuah halaman web 2. Sebutkan dan jelaskan tentang 5 model layout pada halaman web

3. Tuliskan listing kode dengan memanfaatkan elemen table untuk membuat sebuah halaman web sebagai berikut

f. Lembar Jawaban Tes Formatif

LJ- 01 :

anatomy sebuah halaman web

... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...

124 | P a g e

LJ- 02 :

5 model layout pada halaman web

... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...

LJ- 03 :

listing kode elemen table pada halaman web

... ... ... ... ... ... ... ... ...

... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...

126 | P a g e g. Lembar Kerja Peserta Didik

Dalam dokumen Kelas 10 SMK Pemrograman Web 1 (Halaman 123-140)