Sepert i yang sudah kit a singgung sebelum nya. Kalau kit a akan m erubah form at personal hom epage pada bab 3 dengan m enam bahkan CSS kedalam ny a. Unt uk it u sebelum nya lakukan hal- hal berikut .
Gam bar 6.4: out put file css_file.ht m l • Buat lah folder baru di direkt ori C: \ HTML\ Bab 5\
• Beri nam a folder t ersebut PH CSS
• Copyk an sem ua file yang ada di dir ekt or i C: \ HTML\ Bab 3\ ke direkt ori C:\ H TM L\ Ba b 5 \ PH CSS\ ( t e r m a suk folde r ga m ba r n ya )
Sudah? OK, sekarang m ari kit a m em buat file CSSnya t erlebih dahulu. File ini nant inya yang akan digunak an oleh seluruh halam an personal hom e D a vid Jok o.
Jalankan PHP DESI GNER 2006 klik m enu File - N e w - CSS. Lalu silahkan ket ik kode dibaw ah ini at au dilihat - lihat saj a! .
body{font-family: verdana; font-size: 12px; background-color: #D7E7F3}
a{color: blue; text-decoration: none; font-family: verdana; font-size: 12px} a:hover{text-decoration: underline; font-weight: bold; color: navy}
a:visited{color: navy}
td{font-family; verdana; font-size: 12px}
.puisi{font-family: Palatino LinoType; font-size: 15px; font-style: italic} .foto{background-color: white}
.judul{font-size: 18px; font-weight: bold; text-align: center}
Sim pan dengan nam a dj .css. Jangan lupa sim pan di direkt ori C: \ HTML\ Bab 5\ PH CSS yang baru anda buat .
Saya akan m enj elaskan sedikit ringk asan k ode diat as. Pert am a Dav id Joko ingin font ut am a dari halam an websit enya adalah Verdana dan ukurannya adalah 12 point / pixel. Oleh karena it u ia m elet akkan CSSnya pada t ag body. Unt uk linknya, David Joko ingin warna linknya berubah m enj adi biru t ua( navy) dan m em iliki garis bawah ket ik a user m enggerakkan m ouse ke link t ersebut . Unt uk link yang sudah pernah diklik akan warnanya m enj adi navy.
Sedangk an unt uk puisi, David Joko ingin font nya berj enis Pa la t in o LinoType dan hur ufnya m iring. Karena t idak ingin repot David Joko j uga m em buat class unt uk kat a- k at a yang ingin dij adikan j udul. I a m em beri ukuran 18px, t ebal dan berada dit engah unt uk class j udul t ersebut .
Kelihat annya anda sudah t idak sabar ingin m erubah form at personal hom epage t ersebut . OK OK, sek arang j alank an PH P D ESI GN ER 2 0 0 6 klik m enu File - Ope n arahk an ke direkt ori
C:\ H TM L\ Ba b 5 \ PH CSS\ pilih file in de x .h t m l lalu klik open.
Nah ini dia file yang akan kit a rubah form at nya. File ini m asih sam a persis dengan y ang ada di bab 3 oleh karena it u rubah kode t ersebut sehingga m enj adi sepert i dibaw ah ini.
<html> <head>
<title>David Joko Website</title>
<link rel="stylesheet" href="dj.css" type="text/css"> </head>
<body>
<table border="0" style="border-collapse: collapse" width="100%" cellpadding="8"
bordercolor="black"> <tr>
<td width="20%">
<!-- ini tabel foto -->
<table border="0" style="border-collapse: collapse" width="100%"
cellpadding="8" bordercolor="black"> <tr>
<td align="center" class="foto"><img border="1" height="100" width="150"
src="gambar/fotoku.jpg"></td> </tr>
<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 class="judul">SELAMAT DATANG DI WEBSITE DAVID JOKO</p>
<p>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 class="puisi"><font size="+1">Aku dan Tuhanku</font></p> <p class="puisi">
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>
apakah aku sudah mengabdi kepadamu?<br> rasanya hanya aku dan Engkau yang tahu<br> </p> </td> </tr> </table> </body> </html>
Klik m enu File - Sa ve . Jalankan! , bagaim ana hasilnya lebih ciam ik kan. Ya j elas dong w ong saya gurunya ( LOL) .
File ut am a sudah k it a m odifikasi. Sekarang file berikut nya y ait u pr ofil.h t m l. Klik m enu File -Ope n arahkan ke direkt ori C:\ H TM L\ Ba b 5 \ PH CSS\ pilih file pr ofil.h t m l lalu klik open. Sekarang rubahlah kode t ersebut hingga m enj adi sepert i berikut ini.
<html> <head>
<title>Profil David Joko</title>
<link rel="stylesheet" href="dj.css" type="text/css"> </head>
<body>
<p align="center">
<table border="0" cellpadding="8" bordercolor="black"> <tr>
<td colspan="2" align="center" class="judul">DATA PRIBADI<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> </body> </html>
Klik m enu File - Sa ve . Jalankan bagaim ana hasilnya? Lebih bagus dan kodenya lebih elegan kan. Dua file t elah kit a rubah form at nya kedalam CSS. sekarang t inggal 3 file lagi. Sekarang buk a file k e gia t a n .h t m l. langkahnya sam a dengan k edua file diat as. Lalu rubahlah kodenya hingga m enj adi sepert i dibaw ah ini.
<html> <head>
<link rel="stylesheet" href="dj.css" type="text/css"> </head>
<body>
<p class="judul">Kegiatan David Joko<hr></p> <center>
<table border="1" style="border-collapse: collapse" cellpadding="8"
bordercolor="black" width="80%"> <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> </body> </html>
Klik File - Sa ve unt uk m enyim pan perubahan.
File berikut nya yang akan k it a rubah adalah fot o.h t m l. Segera saj a k lik File - Ope n pilih fot o.ht m l dan klik open.
Rubah k ode original m enj adi kode berikut ini unt uk m erubah ke form at CSS.
<html> <head>
<title>Foto-Foto</title>
<link rel="stylesheet" type="text/css" href="dj.css"> </head>
<body>
<p class="judul">Foto-foto Koleksi David Joko<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>
</body> </html>
Klik File - Sa ve silahkan lihat hasilnya.
I ni yang t erk ahir. Klik m enu File - Ope n pilih pu isi.h t m l dan klik open. Rubahlah kodenya agar m enj adi sepert i berikut .
<html> <head>
<title>Puisi Teman-teman</title>
<link rel="stylesheet" href="dj.css" type="text/css"> </head>
<body>
<p class="judul">Puisi-puisi Hati<hr></p> <center>
<table border="1" style="border-collapse: collapse" bgcolor="white"
bordercolor="black" width="60%" cellpadding="8"> <tr>
<td>
<p class="puisi"><font size="+1">SEBUAH PUISI UNTUK SAHABATKU</font></p> <p class="puisi">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</p> </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 class="puisi"><font size="+1">SERIBU TANYA</font></p> <p class="puisi">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></p> </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> </body>
</html>
Klik File - Sa ve dan selesailah sudah kit a m erubah form at personal hom epage David Joko dari HTML t ulen ke HTML CSS.
Dari berbagai cont oh yang saya saj ikan diat as saya yak in anda sudah m engert i bagaim ana m enggunakan CSS. Jika anda sudah m engert i m aka j ik a anda m elihat sour ce code suat u w ebsit e anda sudah t ahu m aksud dari kode- kode t ersebut . Raj in- raj inlah m elihat source code w ebsit e lain agar penget ahuan dan daya kreat ifit as anda bert am bah. Tinggal klik kanan view source m aka penget ahuan anda akan bert am bah.
BERI KU TN YA
Pada bab selanj ut nya kit a akan m encoba m em buat websit e k om ersil. Dim ana didalam nya ada unsur “ BI SNI S” ent ah it u perorangan at au pun perusahaan. Dalam m endesain w ebsit e yang kom ersil t ent unya ada beberapa krit eria khusus yang perlu kit a perhat ikan. Unt uk it ulah kit a akan sam a- sam a belaj ar bagaim ana m endesain w ebsit e KOM ERSI L.
