dirinya sendiri. Hal ini dikarenakan ia tidak tahu apa yang harus ia publikasikan. Kali ini kita
akan mencoba membuat sebuah personal homepage sederhana.
PERSIAPAN
Sebelum melakukan pendesainan lakukan beberapa hal berikut ini.
‐ Buatlah sebuah folder di direktori C:\HTML
‐ Beri nama folder tersebut Bab 1
‐ Buat sebuah folder di direktori C:\HTML\Bab 1 yang baru kita buat
‐ Beri nama folder tersebut gambar
Semua file HTML yang berhubungan dengan bab 1 akan kita simpan pada folder Bab 1. Begitu
pula dengan gambar-gambar yang berhubungan dengan bab 1 akan kita simpan di direktori
C:\HTML\Bab 1\gambar.
SKETSA PROYEK
Website yang akan anda buat adalah website pribadi yang berisi tentang profil data
David Joko
David Joko ingin pada website tersebut terdapat foto dirinya, keluarga atau rumah
rumahnya.
David Joko ingin profil datanya terletak pada halaman berbeda
David Joko ingin terdapat link-link di websitenya
Ketika mendesain website biasakan untuk membuat sketsa kasarnya terlebih dahulu. Ini
berguna agar pekerjaan kita menjadi lebih terfokus. Tidak masalah jika nantinya anda
melakukan perubahan pada tahap akhir yang penting sketsanya sudah ada.
Untuk membuat sketsa desain anda bisa menggambar di sehelai kertas atau pada program
pengolah gambar pada komputer. Yang namanya sketsa tidak harus bagus yang penting
gambaran umumnya saja. Contoh sketsa untuk proyek kita kali ini dapat anda lihat pada
gambar 3.0.
LANGKAH-LANGKAH PEMBUATAN
Seperti yang dapat anda lihat pada gambar sketsa proyek, pada website tersebut memiliki 1
tabel utama dan 2 tabel anak yaitu tabel foto dan tabel menu. Tabel utama terdiri dari 2 kolom
dan 1 baris. Sedangkan pada tabel foto dan menu masing-masing memiliki 1 kolom dan 1 baris.
Bab 1 - Membuat Personal Homepage
1. Halaman Utama [index.html]
Baiklah mari kita mulai bekerja. Seperti biasa mari kita mengetik kode-kode yang enak ini.
<html>
<head>
<title>Ninik Fitriani</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>
Setelah selesai simpan kode diatas dengan nama index.html dan letakkan di folder bab1. Perlu
diketahui file utama untuk sebuah website memiliki nama index.html. Server pertama kali akan
mencari file bernama index.html. Jika ia tidak menemukan maka server akan menampilkan
pesan error.
Buka file tersebeut dengan Internet Explorer, hasilnya akan terlihat seperti gambar dibawah ini
Gambar 3.1: Desain awal index.html saat dijalankan.
File gambar ini yang akan kita gunakan untuk menampilkan foto.
Ingat sesusaikan isi src=”” sesuai dengan nama file anda.
Sekarang saatnya mengupdate isi website dengan yang sebenarnya. Untuk itu bukalah file
index.html dan rubahlah kode yang diberi warna kuning diatas sehingga menjadi seperti
berikut. Jangan lupa ubah atribut border pada setiap tabel menjadi “0”
<html>
<head>
<title>Ninik Fitriani</title>
</head>
<body bgcolor="#D7E7F3">
<font face="verdana">
<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"><img border="1" height="250" width="150"
src="ninikkk.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="mailto: ninikfitriani5@gmail.com">Email saya</a></li>
<!-- ini untuk kolom 2 tabel utama -->
<td valign="top">
<p align="center"><font size="4"><b>SELAMAT DATANG DI WEBSITE NINIK FITRIANI</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 kegiatankegiatan
yang saya lakukan.
</td>
</tr>
</table>
</body>
</html>
Sekarang saatnya mengupdate isi website dengan yang sebenarnya. Untuk itu bukalah file
index.html dan rubahlah kode yang diberi warna kuning diatas sehingga menjadi seperti
berikut. Jangan lupa ubah atribut border pada setiap tabel menjadi “0”
<html>
<head>
<title>Ninik Fitriani</title>
</head>
<body bgcolor="#D7E7F3">
<font face="verdana">
<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"><img border="1" height="250" width="150"
src="ninikkk.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="mailto: ninikfitriani5@gmail.com">Email saya</a></li>
<!-- ini untuk kolom 2 tabel utama -->
<td valign="top">
<p align="center"><font size="4"><b>SELAMAT DATANG DI WEBSITE NINIK FITRIANI</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 kegiatankegiatan
yang saya lakukan.
</td>
</tr>
</table>
</body>
</html>
Setelah selesai mengedit simpanlah file tersebut. Jalankan file tersebut lewat IE
Hasilnya dapat anda lihat pada gambar dibawah ini.
Hasilnya dapat anda lihat pada gambar dibawah ini.
Selanjutnya kita akan membuat file profil.html yang akan menampilkan daftar riwayat hidup
david joko. File profil.html terdiri dari 1 tabel dan memiliki 2 kolom dan banyak baris. Ketik kode dibawah ini.
<html>
<head>
<title>Ninik Fitriani</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">Ninik Fitriani</td>
</tr>
<td align="right"><font size="2"><b>Tempat/Tanggal lahir: </b></td>
<td><font size="2">jakarta,15 Desember 1992</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>Pekerjaan: </b></td>
<td><font size="2">Mahasiswa</td>
</tr>
<tr>
<td align="right"><font size="2"><b>Hobi: </b></td>
<td><font size="2">Membaca buku</td>
</tr>
<tr>
<td colspan="2" align="center"><a href="index.html">Kembali ke halaman
utama</a></td>
</tr>
</table>
</font>
</body>
</html>
<head>
<title>Ninik Fitriani</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">Ninik Fitriani</td>
</tr>
<td align="right"><font size="2"><b>Tempat/Tanggal lahir: </b></td>
<td><font size="2">jakarta,15 Desember 1992</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>Pekerjaan: </b></td>
<td><font size="2">Mahasiswa</td>
</tr>
<tr>
<td align="right"><font size="2"><b>Hobi: </b></td>
<td><font size="2">Membaca buku</td>
</tr>
<tr>
<td colspan="2" align="center"><a href="index.html">Kembali ke halaman
utama</a></td>
</tr>
</table>
</font>
</body>
</html>
Pada kode diatas terdapat atribut colspan=”2” pada tag <td>. Ini dikarenakan kita ingin
menjadikan 2 kolom menjadi 1 kolom untuk judul DATA PRIBADI. Karena jumlah kolomnya 2
maka isi colspan=”2” jika kolomnya 4 maka isinya 4 juga.
menjadikan 2 kolom menjadi 1 kolom untuk judul DATA PRIBADI. Karena jumlah kolomnya 2
maka isi colspan=”2” jika kolomnya 4 maka isinya 4 juga.
Simpan file diatas dengan nama profil.html. Lalu jalankan pada browser, hasilnya akan
nampak seperti gambar dibawah ini.
nampak seperti gambar dibawah ini.
2. Halaman Foto [foto.html]
Pada halaman ini nantinya akan kita tampilkan foto-foto yang ada maupun yang belum ada
pada website Ninik fitriani. Desain halaman teridiri dari 2 kolom dan 2 baris untuk setiap 2 buahketik kode di bawah ini.
<html>
<head>
<title>Foto-Foto</title>
</head>
<body bgcolor="#D7E7F3">
<font face="verdana">
<p align="center"><font size="4"><b>Foto-foto koleksi Ninik fitriani</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/copy.jpg" height="149" width="231"></td>
<td align="center"><img src="gambar/ani.jpg" height="149" width="231"></td>
</tr>
<tr>
<td align="center"><font size="2">copy</font></td>
<td align="center"><font size="2">ani</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/peaceful.jpg" height="149" width="231"></td>
<td align="center"><img src="gambar/foto.jpg" height="149" width="231"></td>
</tr>
<tr>
<td align="center"><font size="2">peaceful</font></td>
<td align="center"><font size="2">foto</font></td>
</table>
<p><a href="index.html">Kembali ke halaman utama</a></p>
</center>
</font>
</body>
Simpan kode diatas dengan nama foto.html, lalu jalankan hasilnya akan terlihat seperti gambar dibawah ini.
0 Comments
