Sepert i y ang dapat anda lihat pada gam bar sket sa proyek, pada websit e t ersebut m em iliki 1 t abel ut am a dan 2 t abel anak yait u t abel fot o dan t abel m enu. Tabel ut am a t erdiri dari 2 kolom dan 1 baris. Sedangkan pada t abel fot o dan m enu m asing- m asing m em iliki 1 kolom dan 1 baris.
Gam bar 3.0: Sket sa proyek
1 . H a la m a n Ut a m a [ in de x .h t m l]
Baik lah m ari kit a m ulai bekerj a. Pert am a j alankan PH P D ESI GN ER 2 0 0 6 klik m enu File N e w -H TM L/ X -H TM L. Sepert i biasa m ari k it a m enget ik kode- kode y ang enak ini.
<html> <head>
<title>David Joko Website</title> </head>
<body bgcolor="#D7E7F3">
<table border="1" style="border-collapse: collapse" width="100%" cellpadding="8"
bordercolor="black"> <tr>
<td width="20%">
<!-- ini tabel foto -->
<table border="1" style="border-collapse: collapse" width="100%"
cellpadding="8" bordercolor="black"> <tr>
<td align="center"><img border="1" height="100 " width="100" src=""></td> </tr>
</table>
<p></p> <!-- untuk memberi jarak --> <!-- ini tabel menu -->
<table border="1" style="border-collapse: collapse" width="100%"
cellpadding="8" bordercolor="black"> <tr>
<td>Ini nanti untuk link</td> </tr>
</table> </td>
<!-- ini untuk kolom 2 tabel utama -->
<td valign="top"><p align="center"><b>SELAMAT DATANG</b></p></td> </tr>
</table> </body>
</html>
Set elah selesai sim pan kode diat as dengan nam a index.ht m l dan let akkan di folder bab3. Perlu diket ahui file ut am a unt uk sebuah w ebsit e m em iliki nam a index.ht m l. Server pert am a kali akan m encari file bernam a index.ht m l. Jika ia t idak m enem ukan m aka server akan m enam pilkan pesan error. Unt uk ket erangan lebih lanj ut nant i akan dij elask an pada bab selanj ut ny a. Buk a file t ersebeut dengan I nt ernet Ex plorer, hasilny a akan t erlihat sepert i gam bar 3.1.
Gam bar 3.1: Desain aw al index .ht m l saat dij alankan.
File gam bar ini yang akan kit a gunakan unt uk m enam pilkan fot o. ( Kalau bisa y a fot o anda sendiri, j ika t idak punya sem barang fot o j uga t idak apa- apa)
I n ga t se su sa ik a n isi sr c= ”” se su a i de n ga n n a m a file a nda .
Sekarang saat ny a m engupdat e isi w ebsit e dengan yang sebenarnya. Unt uk it u buk alah file
index.ht m l dan rubahlah k ode yang diberi w a r n a k u n in g diat as sehingga m enj adi sepert i berikut . Jangan lupa ubah at ribut border pada set iap t abel m enj adi “0 ”
<html> <head>
<title>David Joko Website</title> </head>
<body bgcolor="#D7E7F3"> <font face="verdana">
<table border="0" style="border-collapse: collapse" width="100%" cellpadding="8"
<tr>
<td width="20%">
<!-- ini tabel foto -->
<table border="0" style="border-collapse: collapse" width="100%"
cellpadding="8" bordercolor="black"> <tr>
<td align="center"><img border="1" height="100" width="150"
src="gambar/fotoku.jpg"></td> </tr>
</table>
<p><hr></p> <!-- untuk memberi jarak --> <!-- ini tabel menu -->
<table border="0" style="border-collapse: collapse" width="100%"
cellpadding="8" bordercolor="black"> <tr>
<td><font size="2"> <ul>
<li><a href="profil.html">Profil</a></li> <li><a href="kegiatan.html">Kegiatan</a></li> <li><a href="foto.html">Foto-foto</a></li> <li><a href="puisi.html">Puisi Teman</a></li>
<li><a href="mailto: davidjoko@yahoo.com">Email saya</a></li> </ul>
</td> </tr> </table> </td>
<!-- ini untuk kolom 2 tabel utama --> <td valign="top">
<p align="center"><font size="4"><b>SELAMAT DATANG DI WEBSITE DAVID JOKO</b></font></p>
<p><font size="2">Saya ucapkan terima kasih atas kunjungan anda ke website saya. Pada website ini anda dapat melihat profil data diri saya dan kegiatan-kegiatan yang saya lakukan. Di bawah ini adalah puisi yang saya buat beberapa waktu lalu. Inspirasi puisi ini datang ketika saya termenung sendirian dan memandang langit nan luas.</font></p>
<p><b>Aku dan Tuhanku</b></p> <p><font size="2">
<i>Ketika aku memandang langit<br> aku bertanya pada pada diriku<br> aku...<br>
<br>
siapakah aku sebenarnya?<br> darimanakah aku berasal?<br> jauhkah aku dari Tuhanku?<br> aku....<br>
<br>
Tuhan...<br>
betapa kuasanya engkau<br> menciptakan langit dan bumi<br> untuk menghidupi orang-orang<br> seperti aku<br>
<br>
aku...<br>
rasanya hanya aku dan Engkau yang tahu<br> </i></font></p> </td> </tr> </table> </body> </html>
Set elah selesai m engedit sim panlah file t ersebut . Jalank an file t ersebut lewat I E Hasilny a dapat anda lihat pada gam bar 3.2.
Gam bar 3.2: Out put file index.ht m l
2 . H a la m a n Pr ofil [ pr ofil.h t m l]
Selanj ut nya kit a akan m em buat file profil.ht m l yang akan m enam pilkan daft ar riw ayat hidup david j oko. File profil.ht m l t erdiri dari 1 t abel dan m em iliki 2 kolom dan banyak baris.
Jalankan PHP DESI GNER 2006 Klik File - N e w - H TM L/ X H TM L. Ket ik kode dibaw ah ini.
<html> <head>
<title>Profil David Joko</title> </head>
<body bgcolor="#D7E7F3"> <font face="verdana"> <p align="center">
<table border="0" cellpadding="8" bordercolor="black"> <tr>
<td colspan="2" align="center"><b>DATA PRIBADI</b><hr></td> </tr>
<tr>
<td align="right"><font size="2"><b>Nama: </b></td> <td><font size="2">David Joko</td>
</tr>
<td align="right"><font size="2"><b>Tempat/Taggal lahir: </b></td> <td><font size="2">Surabaya, 10 Nopember 1978</td>
</tr>
<td align="right"><font size="2"><b>Agama: </b></td> <td><font size="2">Islam</td>
</tr> <tr>
<td align="right"><font size="2"><b>Gol. Darah: </b></td> <td><font size="2">O</b></td>
</tr> <tr>
<td align="right"><font size="2"><b>Pekerjaan: </b></td> <td><font size="2">Swasta</td>
</tr> <tr>
<td align="right"><font size="2"><b>Hobi: </b></td> <td><font size="2">Traveling, Mancing</td>
</tr> <tr>
<td colspan="2" align="center"><a href="index.html">Kembali ke halaman utama</a></td> </tr> </table> </font> </body> </html>
Sim pan file diat as dengan nam a profil.ht m l. Lalu j alankan pada brow ser, hasilnya ak an nam apak sepert i gam bar 3.3.
Pada kode diat as t erdapat at ribut colspa n = ”2 ” pada t ag < t d> . I ni dikarenakan kit a ingin m enj adikan 2 kolom m enj adi 1 kolom unt uk j udul D ATA PRI BAD I. Karena j um lah kolom nya 2 m ak a isi colspan= ” 2” j ika kolom nya 4 m ak a isiny a 4 j uga.
Gam bar 3.3: File profil.ht m l saat dij alank an.
3 . H a la m a n Ke gia t a n [ k e gia t a n.h t m l]
Wih..., t idak t erasa m at eri kit a sudah j auh rupany a. Bagaim ana, m enyenangkan bukan berm ain dengan kode langsung daripada program WYSI WYG. Sek arang kit a akan m em buat file
kegiat an.ht m l yang berisi t ent ang kegiat an- kegiat an yang dilakukan David Jok o.
Desain kegit an.ht m l t erdiri dari 2 kolom dan 2 baris unt uk set iap kegiat an. Kolom 1 berisi gam bar dan kolom 2 berisi ket erangan.
Unt uk it u copylah sebuah file gam bar k e direkt ori C: \ HTML\ gam bar. Gam bar ini yang akan m enam pilkan/ m ewakili kegiat an yang kit a lakukan. Silahkan m odifik asi kode dibaw ah ini sesuka anda. Karena saya yak in anda sekarang sudah paham dasar pem buat an w ebsit e.
Buat file baru klik File - N e w - H TM L/ XH TM L lalu ket ik kode di bawah ini.
<html> <head>
<title>Kegiatan David Joko</title> </head>
<body bgcolor="#D7E7F3"> <font face="verdana">
<p align="center"><font size="4"><b>Kegiatan David Joko</b><hr></p> <center>
<table border="1" style="border-collapse: collapse" cellpadding="8"
<tr>
<td><img src="gambar/pantai.jpg" width="231" height="149"></td>
<td bgcolor="white"><font size="2"><p><b>Kegiatan Akhir Tahun Bersama
Teman</b></p>Pada akhir tahun 2005 nanti saya dan teman-teman mempunyai acara tahun baruan di Bali. Rencananya kami dibali mulai tanggal 29 Desember sampai 2 Januari.</font></td>
</tr> <tr>
<td align="center" colspan="2"><a href="index.html">Kembali ke halaman utama</a></td> </tr> </table> </center> </font> </body> </html>
Sim panlah kode diat as dengan nam a kegiat an.ht m l. Lalu buka m elalui I E hasilnya ak an nam pak sepert i gam bar 3.4.
Gam bar 3.4: File kegiat an.ht m l saat dij alank an.
Pada halam an ini nant inya akan kit a t am pilk an fot o- fot o yang ada m aupun yang belum ada pada websit e david j oko. Desain halam an t eridiri dari 2 kolom dan 2 baris unt uk set iap 2 buah gam bar.
Unt uk segera m elihat hasilnya buat lah file baru pada PHP DESI GNER 2006 klik m enu File N e w -H TM L/ X -H TM L. Dan ket ik k ode di baw ah ini.
<html> <head>
<title>Foto-Foto</title> </head>
<body bgcolor="#D7E7F3"> <font face="verdana">
<p align="center"><font size="4"><b>Foto-foto koleksi David Joko</b></font><hr></p>
<center>
<table border="1" style="border-collapse: collapse" width="80%" cellpadding="8"
bordercolor="black" bgcolor="white"> <tr>
<td align="center"><img src="gambar/fotoku.jpg" height="149" width="231"></td> <td align="center"><img src="gambar/pantai.jpg" height="149" width="231"></td> </tr>
<tr>
<td align="center"><font size="2">David Joko</font></td> <td align="center"><font size="2">Pantai</font></td> </table>
<p></p>
<table border="1" style="border-collapse: collapse" width="80%" cellpadding="8"
bordercolor="black" bgcolor="white"> <tr>
<td align="center"><img src="gambar/kantor.jpg" height="149" width="231"></td> <td align="center"><img src="gambar/bromo.jpg" height="149" width="231"></td> </tr>
<tr>
<td align="center"><font size="2">Kantor</font></td> <td align="center"><font size="2">Bromo</font></td> </table>
<p><a href="index.html">Kembali ke halaman utama</a></p> </center>
</font> </body> </html>
Sim pan k ode diat as dengan nam a fot o.ht m l, lalu j alankan hasilny a akan t erlihat sepert i gam bar 3.5.
5 . H a la m a n Pu isi [ pu isi.h t m ]
Puisi? Suat u bent uk ungkapan ekspresi bat in secara abst rak. I t ulah yang ingin dit am pilkan oleh
D a vid Jok o pada websit eny a. Puisi yang ada pada halam an t ersebut t idak hanya puisi David Joko t et api j uga puisi para pengunj ung yang m ereka kirim k an k epada David Joko unt uk dit am pilkan pada w ebsit enya.
Desain halam annya set iap puisi m em iliki 2 baris dan 1 kolom . Baris 1 digunakan unt uk puisi it u sendiri dan baris 2 unt uk penulisnya.
Buat file baru dan ket ik kode di bawah ini.
<html> <head>
<title>Puisi Teman-teman</title> </head>
<body bgcolor="#D7E7F3"> <font face="verdana">
<p align="center"><font size="4"><b>Puisi-Puisi Hati</b><hr></font></p> <center>
<table border="1" style="border-collapse: collapse" bgcolor="white"
bordercolor="black" width="60%" cellpadding="8"> <tr>
<td>
<p><font size="2"><b>SEBUAH PUISI UNTUK SAHABATKU</b></p> <i>Matamu bagaikan kilatan pedang yang tajam<br>
Menghujam tepat di hati lawanmu<br>
Tutu katamu membuat suasana jadi tentram<br> <br>
Mengapa sekarang kau terdiam<br> Tanpa candamu hari-ahriku kelabu<br> Dukamu bagai tangisan alam<br>
Bawakan sebuah kesedihan yang dalam </font>
</td> </tr> <tr>
<td align="right"><font size="2">Oleh: Istiqamah</font></td> </tr>
</table> <p></p>
<table border="1" style="border-collapse: collapse" bgcolor="white"
bordercolor="black" width="60%" cellpadding="8"> <tr>
<td>
<p><font size="2"><b>SERIBU TANYA</b></p> <i>Adakah seuntai kata<br>
Tanpa bicara?<br>
Adakah sejuta jawab<br> Tanpa tanya?<br>
<br>
Adakah langit kelam<br> Tanpa mendung hitam?<br> Adakah guratan merah darah Tanpa luka?<br>
Adakah isak tangis pilu<br> Tanpa kesedihan?<br>
Adakah rasa damai<br> Tanpa perjuangan?<br> <br>
Begitulah hidup manusia<br> Hamba yang selalu bertanya<br> Adakah keadilan di bumi ini?<br> O, betapa banyak waktu<br>
Untuk menjawab semua itu<br> </font>
</td> </tr> <tr>
<td align="right"><font size="2">Oleh: Susanti</font></td> </tr>
</table>
<p><font size="2">Jika anda ingin puisi anda ditampilkan pada website ini. Silahkan kirimkan puisi anda ke email saya di <a href="mailto:
davidjoko@yahoo.com">davidjoko@yahoo.com.</font></p> <p><a href="index.html">Kembali ke halaman utama</a></p> </font>
</body> </html>
Sim pan dengan nam a puisi.ht m l lalu j alankan di I E hasilny a akan sepert i gam bar 3.6.
BERI KU TN YA
Pada bab selanj ut ny a k it a ak an m em pelaj ari cara m enguploa d file ke server. Sehingga w ebsit e k it a dapat diakses oleh sem ua orang di seluruh dunia.
