cara membuat web sederhana

Web dibawah ini adalah web sederhana yang saya buat…
 tampilan menu  dari web saya 

Lalu disini membuat beberapa subMenu seperti gambar gambar diatas,,,
Disini saya akan membrikan rincian kode yang saya buat pada setiap sub menu.

MENU HOME
<body class="twoColElsLtHdr"  bgcolor="#FFCC99">
<div id="container">
  <div id="header">
    <table width="45%" border="1">
  <tr>
    <td width="33%" height="33" align="center" bgcolor="#6699CC"><a href="layanan.html">KOMENTAR</a></td>
   <td width="34%" align="center" bgcolor="#CCCCCC"><a href="iklan.html">IKLAN</a></td>
   <td width="33%" align="center" bgcolor="#333333"><a href="kontak.html">KONTAK</a></td>
  </tr>
</table>
<table width="100%" border="1" background="../image/background.png">
  <tr>
    <td height="150" > <center><marquee behavior="alternate"  ><h1>Selamat <span class="style2 style1">Datang</span> di Website Saya</h1>
    </marquee></center>
  <center><h2 class="style2 style1">Terima Kasih Telah Berkunjung </h2>
  </center></td>
  </tr>
  <tr>
    <td height="43"><table width="100%" border="1">
      <tr>
        <td width="24%" height="31" align="center" bgcolor="#00CCFF"><a href="home1.html">HOME</a></td>
        <td width="24%" align="center" bgcolor="#00CCFF"><a href="profil.html">PROFIL</a></td>
        <td width="24%"align="center" bgcolor="#00Ccff"><a href="berita.html">BERITA</a></td>
        <td width="24%" align="center" bgcolor="#ooccFF"><a href="sumber.html">SUMBER</a></td>
      </tr>
    </table></td>
  </tr>
</table>
  <!-- end #header --></div>
  <div id="sidebar1">
    <h3>SEJARAH  NOVEL  </h3>
    <p align="left" >Perkataan “novel” banyak maksud dan dapat dibahagikan kepada dua iaitu   “novel kecil”  yang dikenali sebagi novella dan “novel besar” yang   dipanggil novel.  Semua cerita yang panjangnya sederhana atau yang   sangat panjang semuanya boleh terangkum dalam satu dan dikenali sebagi   novel.  Kemuncunlan karya-karya sastera seperti novel-novel Melayu sejak   tahun-tahun 1920an hingga akhir-akhir tahun 1960an dengan membawakan   isu, pemikiran dan dan juga gaya bahasa dan teknik penceritaan   tersendiri dan sesuai pada kontek zamannya, sebenarnya telah menjadi   dasar (model) dan kovensi kepada proses penciptaan bentuk novel yang   kukuh kepada pengarang-pengarang novel Melayu yang mula brkarya pada   dekad 40an hingga dekad 60an.</p>
    <!-- end #sidebar1 --></div>
  <div id="mainContent">
    <p>Website ini merupakan homepage pertama saya.. </p>
    <p>Website ini Dibuat sebagai wadah  saya untuk menulis dan mengarang. </p>
    <p>Bila ada Kritik dan Saran,klik <strong>KOMENTER </strong>dan tinggalkan komentar Anda </p>
    <p>atau Anda  bisa juga klik <strong>KONTAK. </strong></p>
    <h1>&nbsp;</h1>
  <!-- end #mainContent --></div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
   <div id="footer">
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Hasil tampilannya akan seperti dibawah ini
 


Menu profil
<body class="twoColElsLtHdr">
<div id="container">
  <div id="header">
    <table width="45%" border="1">
  <tr>
    <td width="33%" height="33" align="center" bgcolor="#6699CC"><a href="layanan.html">KOMENTAR</a></td>
   <td width="34%" align="center" bgcolor="#CCCCCC"><a href="iklan.html">IKLAN</a></td>
   <td width="33%" align="center" bgcolor="#333333"><a href="kontak.html">KONTAK</a></td>
  </tr>
</table>
<table width="100%" border="1" background="../image/background.png">
  <tr>
    <td height="150"> <center><marquee behavior="alternate"  ><h1>Selamat <span class="style2">Datang</span> di Website Saya</h1>
    </marquee></center>
  <center><h3 class="style2">Terima Kasih Telah Berkunjung </h3>
  </center></td>
  </tr>
  <tr>
    <td><table width="100%" border="1">
 <tr>
        <td width="24%" height="31" align="center" bgcolor="#00CCFF"><a href="home1.html">HOME</a></td>
        <td width="24%" align="center" bgcolor="#00CCFF"><a href="profil.html">PROFIL</a></td>
<td width="24%"align="center" bgcolor="#00Ccff"><a href="berita.html">BERITA</a></td>
<td width="24%" align="center" bgcolor="#ooccFF"><a href="sumber.html">SUMBER</a></td>
      </tr>
    </table></td>
  </tr>
</table>
  <!-- end #header --></div>
  <div id="sidebar1">
   <strong>PROFIL PENULIS</strong>
   </p>
<p><a href="biografi.html">Ahmad Fuadi</a> <br />
  <img src="../image/fuadi.jpg" width="116" height="177" /></p>
<a href="biografi2.html">Asma Nadia</a><br />
<img src="../image/Asma Nadia.JPG" width="160" height="198" /><a href="biografi3.html">Habiburrahman El Shirazy</a><br />
<img src="../image/Habiburrahman.jpg" width="179" height="231" />
<p><br />
</p>
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
   <h4 class="style1" align="justify">PROFIL SAYA </h4>
<img src="../image/barbie.jpg" width="123" height="234" />
<p>NAMA : FATMA RAHMAN</p>
<p>NAMA Panggilan : FATMA</p>
<p>Kelahiran :  Gorontalo,31 Oktober 1996</p>
<p>Alamat : Desa Huyula, jl.Anggrek Kwandang </p>
<p>Seorang Mahasiswa di salah satu kampus di Gorontalo, yakni tepatnya di   KAMPUS POLITEKNIK GORONTALO mengambil jurusan Teknik Informatika.<br />
bercita-cita jadi seorang penulis dan motivator, menjadi seorang penulis   berawal dari kebiasaan membaca cerpen,novel,cerita rakyat menonton film   Drama, <br />
dan menjadi seorang motivator pada awalnya karena terbiasa mengarang   kata-kata dan menonton siaran televisi metrotv Mario Teguh GoldenWays.</p>
<!-- end #mainContent --></div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />

 
Untuk profil Penulis terdapat link masing-masing  tepai disini saya hanya menggunakan link utama profil

MENU BERITA
<body class="oneColElsCtrHdr">
<div id="container">
  <div id="header">
     <table width="45%" border="1">
  <tr>
    <td width="33%" height="33" align="center" bgcolor="#6699CC"><a href="layanan.html">KOMENTAR</a></td>
   <td width="34%" align="center" bgcolor="#CCCCCC"><a href="iklan.html">IKLAN</a></td>
   <td width="33%" align="center" bgcolor="#333333"><a href="kontak.html">KONTAK</a></td>
  </tr>
</table>
<table width="100%" border="1" background="../image/background.png">
  <tr>
    <td height="150" > <center><marquee behavior="alternate"  ><h1>Selamat <span class="style2 style1">Datang</span> di Website Saya</h1>
    </marquee></center>
  <center><h2 class="style2 style1">Terima Kasih Telah Berkunjung </h2>
  </center></td>
  </tr>
  <tr>
    <td height="43"><table width="100%" border="1">
      <tr>
        <td width="24%" height="31" align="center" bgcolor="#00CCFF"><a href="home1.html">HOME</a></td>
        <td width="24%" align="center" bgcolor="#00CCFF"><a href="profil.html">PROFIL</a></td>
    <td width="24%"align="center" bgcolor="#00Ccff"><a href="berita.html">BERITA</a></td>
    <td width="24%" align="center" bgcolor="#ooccFF"><a href="sumber.html">SUMBER</a></td>
      </tr>
    </table></td>
  </tr>
</table>
  <!-- end #header --></div>
  <div id="mainContent">
    <h1> BERITA TEKNOLOGI</h1>
    <p>&nbsp;</p>
    <p><B>Data dan Fakta tentang Teknologi Bluetooth </B>     </p>
    <p>Bluetooth menjadi teknologi yang sangat awam pada saat ini. Dengan adanya Bluetooth, menghubungkan antara satu perangkat elektronik dengan perangkat lainnya pun menjadi lebih sederhana. Seiring dengan perkembangan, berbagai perangkat pun banyak dilengkapi dengan Bluetooth. Dari handphone, komputer ataupun headset.</p>
    <p><IMG src="../image/teknologi-bluetooth.jpg" width="436" height="247" />
      <!-- end #mainContent -->
    </p>
    <p>Meskipun sering menggunakan Bluetooth, apakah Anda tahu asal mula   penamaan Bluetooth? Selain itu, terdapat fakta-fakta lain tentang   Bluetooth yang jarang diketahui oleh orang awam. Berikut ini adalah   fakta-fakta tersebut.</p>
    <p>1. Penamaan Bluetooth diambil dari salah seorang raja Denmark yang   bernama King Harald Blatand. Dalam pelafalan Inggris, nama tersebut   dibaca King Harold Bluetooth. Raja ini berkuasa dalam kurun 958 hingga   986. King Harrald pun terkenal sebagai orang yang mampu menyatukan   kawasan Denmark, Norwegia dan Swedia.</p>
    <p>2. Teknologi Bluetooth pertama diterapkan oleh Ericsson pada tahun   1994. Perusahaan yang berbasis di Swedia tersebut mengadakan penelitian   untuk mengetahui keuntungan menggunakan teknologi Bluetooth.   Selanjutnya, bersama Intel, IBM, Toshiba serta Nokia, Ericsson   menghimpun Special Interest Group (SIG) pada tahun 1998 dan selanjutnya   mengeluarkan spesifikasi Bluetooth pertama kali di dunia pada tahun   1999.</p>
    <p>3. Bluetooth merupakan salah satu sinyal radio. Sebagai sinyal radio,   ternyata Bluetooth tidak cocok digunakan untuk sarana berkomunikasi.   Hal ini terungkap setelah Andretti Racing Team menggunakannya. Dan,   karena mengandung gelombang radio microwave, penggunaan Bluetooth   dikatakan dapat menimbulkan permasalahan kesehatan.</p>
    <p>4. Bluetooth memiliki range yang cukup luas. Sebuah perangkat   Bluetooth, tetap mampu bekerja dalam jarak 10 meter. Bahkan dalam   perkembangan terbaru, Bluetooth mampu bekerja dalam jarak 100 meter.</p>
    <p>5. Saat ini, 95 persen handphone yang terjual memiliki konektivitas   Bluetooth. Jumlah tersebut jauh meningkat dibandingkan tahun 2008 di   mana hanya terdapat 5 persen yang ada di pasaran.</p>
    <p>&nbsp; </p>
  </div>
  <div id="footer">
    <!-- end #footer -->
  </div>
<!-- end #container --></div>
</body>
</html>



















MENU SUMBER
<body class="oneColElsCtrHdr">
<div id="container">
  <div id="header">
    <table width="45%" border="1">
  <tr>
    <td width="33%" height="33" align="center" bgcolor="#6699CC"><a href="layanan.html">KOMENTAR</a></td>
   <td width="34%" align="center" bgcolor="#CCCCCC"><a href="iklan.html">IKLAN</a></td>
   <td width="33%" align="center" bgcolor="#333333"><a href="kontak.html">KONTAK</a></td>
  </tr>
</table>
<table width="100%" border="1" background="../image/background.png">
  <tr>
    <td height="150" > <center><marquee behavior="alternate"  ><h1>Selamat <span class="style2 style1">Datang</span> di Website Saya</h1>
    </marquee></center>
  <center><h2 class="style2 style1">Terima Kasih Telah Berkunjung </h2>
  </center></td>
  </tr>
  <tr>
    <td height="43"><table width="100%" border="1">
      <tr>
        <td width="24%" height="31" align="center" bgcolor="#00CCFF"><a href="home1.html">HOME</a></td>
        <td width="24%" align="center" bgcolor="#00CCFF"><a href="profil.html">PROFIL</a></td>
        <td width="24%"align="center" bgcolor="#00Ccff"><a href="berita.html">BERITA</a></td>
        <td width="24%" align="center" bgcolor="#ooccFF"><a href="sumber.html">SUMBER</a></td>
      </tr>
    </table></td>
  </tr>
</table>
  <!-- end #header --></div>
  <div id="mainContent">
    <h1>SUMBER</h1>
    <p>&nbsp;</p>
  <p><a href="http://www.si-pedia.com/2014/03/profil-7-penulis-best-seller-terkenal-indonesia.html">http://www.si-pedia.com/2014/03/profil-7-penulis-best-seller-terkenal-indonesia.html</a></p>
<p>http://negeri5menara.com/penulis/</p>
<p><a href="http://tajaulama90.blogspot.com/2011/01/sejarah-perkembangan-novel-1960.html">http://tajaulama90.blogspot.com/2011/01/sejarah-perkembangan-novel-1960.html</a></p>
<p>http://gopego.com/news/tags/android</p>
<p>http://gopego.com/news/a/2015/05/samsung-galaxy-note-5-gunakan-display-4k-konsep</p>
<p>http://gopego.com/news/a/2015/05/lenovo-a6600-bakal-rilis-dengan-desain-stylish-harga-sejutaan</p>
<p>http://www.beritateknologi.com/tentang/perkembangan-teknologi/</p>
<p>http://www.beritateknologi.com/data-dan-fakta-tentang-teknologi-bluetooth/</p>
<!-- end #mainContent --></div>
  <div id="footer">
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Dan untuk menu 3 yang paling pojok atas silahkan dilanjutkan sendiri…