Setelah kita membuat kolom-kolom untuk membagi halaman web kita. Sekarang tinggal buat isinya. Kita mulai dari atas dulu saja, ya dari header.
Header
Biasanya header diposisikan untuk menampilkan banner situs atau gambar sebagai ilustrasi yang sesuai dengan content yang disajikan atau hanya sebagai pemanis agar tampilan secara keseluruhan tampak menarik.
Biar praktis Anda bisa memakai banner yang sudah saya siapkan disini. Dan letakkan satu folder dengan file html yang kita buat ini.
Kita akan buat header dengan ukuran 800 x 150px. Tambahkan kode berikut pada tag <td> dibawah <table>.
height="150px"
Kode diatas untuk menyesuaikan ukuran kolom dengan banner.
Lalu untuk banner ganti text The header dengan
<img src="banner.jpg" width="800" height="150" alt="triksitus">.
img src="banner.jpg" --> menunjukkan alamat dan nama gambar.
alt="triksitus" --> text yang tampil bila browser tidak menampilkan gambar.
Footer
Habis header kita turun ke footer. Biasanya menjadi tempat untuk meletakkan informasi singkat seperti navigasi tambahan, copyright, disclaimer dan lain sebaginya.
Kita mulai dulu dari background. Kalau mau yang cepet Anda bisa pakai background yang sudah saya buatkan disini.
Beri kode berikut setelah <td colspan="3" yang paling bawah.
background="footer-bg.jpg" height="64px"
Berikut tampilan setelah Anda menambahkan kode itu.
background="footer-bg.jpg" --> menujukkan alamat dan nama dari gambar background.
Text Pada Footer
Ganti Footer dengan copyright© 2009 triksitus, misalnya atau Anda bisa menggantinya dengan text yang lain. Dan, tambahkan setelah background="footer-bg.jpg" height="64px", kode berikut:
valign="top"
Untuk membuat text yang berada pada footer diatas.
Dan, kode yang sudah kita buat tadi seperti ini.
<html>
<title>
</title>
<body>
<table border="1" width="800px" align="center">
<tr><td colspan="3" height="150px"><img src="banner.jpg" width="800" height="150" alt="triksitus"></td></tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr><td colspan="3" background="footer-bg.jpg" height="64px" valign="top">copyright© 2009 triksitus</td></tr>
</table>
</body>
<html>
Tampilannya menjadi seperti berikut
bersambung ke part 3
Minggu, 08 November 2009
Mendesain Web Page - Part 2 : header and footer
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar