Tutorial cara membuat website statis (part 10) | Membuat isi website


Setelah pada tutorial sebelumnya kita membahas tentang cara memasukkan header ke dalam layout website, kini saatnya saya akan coba memberikan tutorial sederhana tentang cara membuat isi suatu website.

Hal umum apa yang biasanya terkandung dalam website profil perusahaan ? Secara umum website profil perusahaan berisi tentang informasi perusahan, kontak perusahaan, visi/misi perusahaan, sejarah perushaan. Dari hal tersebut kita bisa menarik kesimpulan bahwa web tersebut membutuhkan 5 menu yaitu :

  1. Home
    Sebagai halaman utama profil perusahaan.
  2. About us
    Sebagai halaman yang berfungsi untuk menampilkan kegiataan perusahaan.
  3. Visi dan Misi
    Halaman yang nantinya berisi tentang visi dan misi perusahaan.
  4. History
    Halaman yang menjelaskan tentang sejarah perusahaan.
  5. Contact
    Sebagai halaman yang berisi kontak perusahaan, baik itu alamat ataupun no telepon perusahaan.

Setelah menu dari website, softholic mania juga tidak boleh melupakan sidebar yang nantinya bisa kita isi dengan customer support dan juga link yang terkait dengan perusahaan tersebut.

Pada bagian akhir dari website atau yang biasa disebut footer biasanya berisi tentang informasi singkat dari perusahaan itu sendiri ataupun hak cipta dan owner (pemilik) website.

Langsung saja dan tanpa berlama-lama, silahkan softholic mania persipakan dahulu sipakan layout website yang sudah kita buat pada tutorial sebelumnya, jika softholic mania ada yang lupa silahkan buka tutorial cara membuat layout website dari blog saya.

Jika layout sudah dibuat kita tinggal memasukkan menu, isi, sidebar, dan juga footer. Sekarang softholic mania lihat gambar 1.1.

gambar 1.1
Layout website | www.softholic.net

Pada tabel bagian menu masukkan tag <a> </a> untuk membuat link antar menu yang sudah saya jabarkan diatas. Untuk lebih jelasnya silahkan lihat script dibawah ini.

<a href='home.html' title='home'>Home</a><a href='about.html' title='about us'>About us</a><a href='visi_misi.html' title='visi dan misi'>Visi dan Misi</a><a href='history.html' title='history'>History</a><a href='contact.html' title='contact'>Contact</a>

Pada bagian isi berikan penjelasan tentang halaman utama tersebut. Pada website statis yang saya buat di halaman home.html saya berikan ucapan selamat datang dan beberapa informasi tentang perusahaan. Salin script konten dibagian tabel isi website.

script konten
<h4>Selamat datang di website Softholic's Electrical</h4></div>
Kami adalah perusahaan listrik terkemuka yang melayani berbagai macam masalah kelistrikan anda dengan cepat, tepat, dan murah

Pada bagian sidebar saya akan menambahkan list cabang perusahaan dengan memanfaatkan order list pada HTML. Masukkan script sidebar ini dibagian siderbar website.

script sidebar
Cabang softholic's electrical
<ol>
<li>Surabaya</li>
<li>Medan</li>
<li>Yogyakarta</li>
<li>Aceh</li>
<li>Papua</li>
</ol>

Khusus untuk bagian footer saya hanya menambahkan hak cipta dari pembuat website perusahaan, sehingga klaim terhadap perusahaan oleh orang lain bisa dicegah atau dipidanakan jika terjadi masalah. Masukkan script footer pada bagian footer

script footer
&copy; 2009-2011 <a href='www.softholic.net'>Softholic's Electrical</a>

Untuk hasil akhir dari script yang saya buat akan menghasilkan script seperti dibawah ini.

<html>
<head>
<title>Perusahaan Listrik Softholic | Home</title>
</head>
<body>
<table border='1px' align='center' width='800px'>
<tr><td colspan='2' height='200px'><img src='gambar/header.jpg' height='200px' width='800px'</td></tr>
<tr><td colspan='2' height='25px'><a href='home.html' title='home'>Home</a><a href='about.html' title='about us'>About us</a><a href='visi_misi.html' title='visi dan misi'>Visi dan Misi</a><a href='history.html' title='history'>History</a><a href='contact.html' title='contact'>Contact</a></td></tr>
<tr><td width='200px' height='500px' valign='top'>
Cabang softholic's electrical
<ol>
<li>Surabaya</li>
<li>Medan</li>
<li>Yogyakarta</li>
<li>Aceh</li>
<li>Papua</li>
</ol>
</td><td width='500px' valign='top'><div align='center'><h4>Selamat datang di website Softholic's Electrical</h4></div>
Kami adalah perusahaan listrik terkemuka yang melayani berbagai macam masalah kelistrikan anda dengan cepat, tepat, dan murah</td></tr>
<tr align='center'><td colspan='2' height='100px'>&copy; 2009-2011 <a href='www.softholic.net'>Softholic's Electrical</a></td></tr>
</table>
</body>
</html>

Jika softholic mania mengikuti langkah-langkah yang sudah saya berikan, maka hasil website yang dibuat akan seperti gambar 1.2

gambar 1.2
Hasil layout website | www.softholic.net

Setelah softholic mania berhasil membuat tampilan yang sama dengan saya, sekarang copy source code website yang sudah dibuat lalu buka file baru dan paste pada file baru. Pada file baru tersebut simpan dengan nama menu yang sudah kita buat yaitu about.html. visi_misi.html, history.html, dan contact.html.

Tutorial kali ini saya rasa cukup sampai disini, saya harap softholic mania tetap mengikuti tutorial-tutorial berikutnya sehingga pada akhir tutorial softholic mania bisa membuat wesbite statis dengan sendiri.

Tags: , , , ,

2 Responses to “Tutorial cara membuat website statis (part 10) | Membuat isi website”

  1. peringkat perguruan tinggi indonesia 2011 Says:

    makasih tutorialnya… :D

  2. admin Says:

    ok, sama2

Leave a Reply


5 + = ten