Salam Blogger Selalu,
Duh udah 2 hari gak posting, gimana kabarnya para netter Indnesia mudah-mudahan baik deh, postingan kali bisa di sebut percobaan pertama dari pembahasan HTML sebelumnya, and mudah - mudahan udah ngerti di pembahasan tentang Table.
Kenapa saya katakan bahwa dengan hanya menguasai pembahasan tentang table kita udah bisa bikin web sederhana ? karena saya rasa pembahasa tentang misal link, pengaturan font, penyisipan gambar itu hanya sebagai atribut, dan saya pikir yang paling inti di html itu cuma table sama form.
Ok ! kita langsung aja, tapi sebelumnya sekedar mengingatkan aja, bahwa tag table itu ada 3 yang intinya, yaitu tag <table> .. </table>, tag <tr> .. </tr>, dan tag <td> .. </td>, juga perhatikan bahwa di setiap tag <table> pasti di dalamnya ada tag <tr> dan di dalam tag <tr> pasti di dalamnya ada tag <td>, siipp !! udah ingat !! kalo kita lanjutkan.
Pertama yang harus di persiapkan adalah tema dari web yang akan kita buat, di sini saya bawa tema yang mudah dulu aja, yaitu web tentang profil, saya contohkan dengan profil saya sendiri, hehehe (sambil promosi) .. terus siapkan juga foto & gambar - gambar yang mendukung, penyesuaan warna yang akan dipakai, font/jenis huruf yang akan dipakai, link yang akan di tampilkan, dan yang terakhir tata letak, misal buat header, link sidebar, isi, dan fotter. yuup's mungkin kurang lebih seperti ini :
Pembuatan Web Sederhana Ala Ilham :
- Tema : Web Profil Ilham Hamdani
- Header & foto saya sendiri
- Warna : Background (#800080), Kombinasi (#EEBBEE & #FFEEDD)
- Lebar Web : 90% di relosusi monitor 1024
- Font : Verdana
- Link : Home, Profil, Tentang dan Kontak
| <html> <head> <title>Home Page Ilham Hamdani</title> </head> <body bgcolor="#800080" text="#FFEEDD" link="#FFEEDD" vlink="#EEBBEE"> <table border="1" cellpadding="1px" cellspacing="1" width="90%" align="center"> <tr> <td colspan="2">bar atas</td> </tr> <tr> <td colspan="2">Header Judul</td> </tr> <tr> <td colspan="2">link atas</td> </tr> <tr> <td>Home</td> <td rowspan="5">isi web</td> </tr> <tr> <td>Profil</td> </tr> <tr> <td>Tentang </td> </tr> <tr> <td>Kontak</td> </tr> <tr> <td>Gambar </td> </tr> <tr> <td colspan="2">Fotter </td> </tr> </table> </body> </html> |
Tampilan Pertama.
Penjelasan :
- Layoutnya kira - kira seperti diatas.
- Untuk header di atas, link sebelah kiri, isi di sebelah kiri
- Perhatikan script yang saya kasih warna kuning, dalam pemakaian "COLSPAN" dan "ROWSPAN".
- Untuk Colspan saya kasih nilai 2, karena ada 2 colom yang di "MARGE".
- Untuk Rowspan saya kasih nilai 5 karena ada 5 baris yang di "MARGE"
| <html> <head> <title>Home Page Ilham Hamdani</title> </head> <body bgcolor="#800080" text="#FFEEDD" link="#FFEEDD" vlink="#EEBBEE"> <table border="1" cellpadding="1px" cellspacing="1" width="90%" align="center"> <tr> <td colspan="5">Selamat Datang Di Web Site Ilham Hamdani</td> </tr> <tr> <td colspan="5" height="130">Header Judul</td> </tr> <tr> <td align="center">Menu</td> <td align="center">Home</td> <td align="center">Profil</td> <td align="center">Tentang</td> <td align="center">Kontak</td> </tr> <tr> <td width="21%">Home</td> <td rowspan="5" colspan="4">isi web</td> </tr> <tr> <td>Profil</td> </tr> <tr> <td>Tentang </td> </tr> <tr> <td>Kontak</td> </tr> <tr> <td height="150">Gambar </td> </tr> <tr> <td colspan="5">Fotter </td> </tr> </table> </body> </html> |
Tampilan Kedua.
Penjelasan :
- Perhatikan Script yang di beri warna merah, disitu bagian link atas yang tadinya hanya 2 kolom, sekarang menjadi 5 kolom dan text berada di tengah.
- Otomatis penambahan nilai Colspan di tambah beradasarkan banyak kolom yaitu 5 (script yang berwarna kuning.
- Penambahan atribut height untuk header nilainya "130" dan bagian untuk gambar di bawah link kiri nilainya "150".
Nah kalo sudah seperti ini kita tinggal sisipkan gambar - gambar yang kira - kira menarik dan konten buat halaman pertama dari web.
Lengkapnya seperti dibawah ini :
| <html> <head> <title>Home Page Ilham Hamdani</title> </head> <body bgcolor="#800080" text="#FFEEDD" link="#FFEEDD" vlink="#EEBBEE"> <table border="1" cellpadding="1px" cellspacing="1" width="90%" align="center"> <tr> <td colspan="5" bgcolor="#EEBBEE"> <font color="Black"> <marquee> Selamat Datang Di Web Site Ilham Hamdani </marquee> </font> </td> </tr> <tr> <td colspan="5" height="130"> <img src="banner.jpg" width="100%" height="130"> </td> </tr> <tr> <td align="center">Menu</td> <td align="center"><a href="home.html">Home</a></td> <td align="center"><a href="prohfiltml">Profil</a></td> <td align="center"><a href="tentang.html">Tentang</a></td> <td align="center"><a href="kontak.html">Kontak</a> </td> </tr> <tr> <td width="21%"> <a href="home.html">Home</a></td> <td rowspan="5" colspan="4" valign="top"> Nama : Ilham Hamdani <br> Email : maulidan90@gmail.com<br> dll. </td> </tr> <tr> <td><a href="home.html">Profil</a></td> </tr> <tr> <td><a href="home.html">Tentang</a></td> </tr> <tr> <td><a href="home.html">Kontak</a></td> </tr> <tr> <td height="150" align="center"><img src="print.bmp"></td> </tr>` <tr> <td colspan="5" bgcolor="#EEBBEE" align="center"> <font color="Black">Copyright© Ilham Hamdani 2011</font> </td> </tr> </table> </body> </html> |
Tampilan Akhir.
Catatan :
- Setiap script yang di beri warna, anda analisis,caranya denga menghapus dulu scriptnya, nah nanti pasti ada perubahan.
- Gambar berada dalam 1 folder dengan file html
Salam Blogger Selalu
1 komentar:
sae
Posting Komentar