w w w w

baner
Anda ada di Halaman:   Home Basis Web Pemrograman HTML Membuat Website Pribadi dengan HTML

Popular

Membuat Website Pribadi dengan HTML PDF Print E-mail
Written by Hendrik Perdana   
Friday, 27 November 2009 21:35

Kebanyakan orang jika baru mengenal HTML maka ia akan membuat website tentang profil 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:\
  • Beri nama folder tersebut HTML
  • Buat sebuah folder di direktori C:\HTML\
  • Beri nama folder tersebut profil
  • Buat sebuah folder di direktori C:\HTML\profil\
  • Beri nama folder tersebut img

Semua file HTML yang dibuat akan di simpan pada folder profil. Begitu pula dengan gambar-gambar akan kita simpan di direktori C:\HTML\profil\img.

SKETSA TAMPILAN

  • Website yang akan anda buat adalah website pribadi yang berisi tentang profil data anda.
  • Anda ingin pada website tersebut terdapat foto diri atau keluarga.
  • Anda ingin profil datanya terletak pada halaman berbeda.
  • Anda ingin terdapat link-link di website anda.

Ketika mendesain website biasakan untuk membuat sketsa kasarnya terlebih dahulu. Ini berguna agar pekerjaan kita menjadi lebih terfokus dan tahu bagaimana tampilan yang akan dibuat. 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 tampilan kita kali ini dapat anda lihat dibawah ini :

foto  
 

Baiklah mari kita membuat koding HTML. Pertama jalankan aplikasi Dreamweaver 2004/2008 klik menu File -> New-> HTML/XHTML. Halaman yang dibuat untuk sesi ini adalah halaman utama atau index.html. Setalah itu ketikan kode HTML atau Copy Paste kode HTML di bawah :

Membuat Halaman Utama Website

<html>
<head>
<title>(Nama anda) Website</title>
</head>
<body>

<table align="center" width="500" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <!-- ini tabel foto -->
        <td colspan="0" height="150" width="150" valign="middle" align="center" bgcolor="#FFCCFF"><img src="/" alt="foto" width="120" height="120" border="1"></td>
        <!-- ini untuk konten -->
        <td colspan="0" width="350" valign="top" rowspan="2" bgcolor="#99CC66"></td>
    </tr>
    <tr>
        <!-- ini untuk link -->
        <td colspan="0" height="300" valign="top" bgcolor="#CCCCFF"></td>
    </tr>
</table>

</body>
</html>

Setelah selesai simpan kode diatas dengan nama index.html dan letakkan di folder C:\HTML\profil\. Untuk upload file foto yang berupa *.jpg, *.png atau *.gif uploadlah kedalam folder C:\HTML\profil\img\ dan jgn lupa untuk mengisi img src="/profil/namafile.jpg, .png atau .gif" 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. Untuk artikel selanjutnya kita akan isi konten dari halaman utama profil website anda, selamat  mencoba :).
Last Updated ( Sunday, 29 November 2009 20:05 )