Membuat Rancangan Website Sederhana dengan 2 Kolom dengan Menu

Tugas Tugas dan Tugas, Ingin menindaklanjuti tugas dari pak Nufan disuruh membuat Layout Rancangan Website 2 / 3 Kolom, tapi disini saya akan membuat yang 2 Kolom Sajja biar lebih Mudah memahami,
Ya Langsung sajja simak tutorialnya di bawah ini :
1. Yang Pertama Coba Buat Tabel Rancangan dengan Script di Bawah ini :
<table width="600" border="1">
<tr><td colspan="2">&nbsp;</td></tr>          : Berarti Penggabungan 2 Tabel Menjadi 1
<tr><td colspan="2">&nbsp;</td></tr> : Berarti Penggabungan 2 Tabel Menjadi 1
<tr><td width="450">&nbsp;</td>       : Membuat Tabel Sebelah Kiri dengan Panjang 450px
<td width="150">&nbsp;</td></tr>      : Membuat Tabel Sebelah Kanan dengan Panjang 150px
<tr><td colspan="2">&nbsp;</td></tr>  : Berarti Penggabungan 2 Tabel Menjadi 1
</table>

2. Setelah Buat Rancangan Tabel Maka Customisasi Tabelnya dengan Copy Script di Bawah ini :
<table width="600" border="1"><tr><td colspan="2"><p align="center" class="style2">Selamat Datang Di My Personal Website</p><p align="center" class="style2">www.akunanda.com</p></td></tr>
<tr><td colspan="2">
<style type="text/css">#cssmenu { border:1px solid #b9121b; background:#b9121b; } #cssmenu > ul { padding:1px 0; margin:0px; list-style:none; width:100%; height:21px; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; font:normal 8pt verdana, arial, helvetica; } #cssmenu > ul li { margin:0; padding:0; display:block; float:left; position:relative; width:148px; } #cssmenu > ul li a:link, #cssmenu > ul li a:visited { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; } #cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; } #cssmenu > ul li ul { margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; } #cssmenu > ul li:hover ul { display:block; } #cssmenu > ul li ul li { width:146px; clear:left; width:146px; } #cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited { clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } #cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover { clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } #cssmenu > ul li ul li ul.navigation-3 { display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; } #cssmenu > ul li ul li:hover ul.navigation-3 { display:block; } #cssmenu > ul li ul li ul.navigation-3 li a:link, #cssmenu > ul li ul li ul.navigation-3 li a:visited { background:#b9121b; } #cssmenu > ul li ul li ul.navigation-3 li:hover a, #cssmenu > ul li ul li ul.navigation-3 li a:hover, #cssmenu > ul li ul li ul.navigation-3 li a:active { background:#ec454e; }</style>
<div id='cssmenu'> <ul> <li class='active '><a href='index.html'><span>Home</span></a></li> <li class='has-sub '><a href='#'><span>Products</span></a> <ul> <li><a href='#'><span>Product 1</span></a></li> <li><a href='#'><span>Product 2</span></a></li> </ul> </li> <li><a href='#'><span>Contact</span></a></li></ul></div></td></tr>
<tr><td width="450" valign="top"><p align="justify">Selamat Datang Di Blog Saya,</p>
<p align="justify">Semoga dengan Adanya Blog Saya Menjadi Lebih Bermanfaat buat Semuanya  </p>
<p align="justify">&nbsp;</p>
<p align="justify">TTD</p>
<p align="justify">ADMIN BLOG </p></td>
<td width="150"><p>Link Sponsor</p>
<p class="style1 style3">Link Sponsor :  </p>
<p align="left"><a href="http://www.unipdu.ac.id/" target="_blank">UNIPDU Jombang</a></span></span></span></li></div>
<p align="left"><a href="http://www.digilib.unipdu.ac.id/" target="_blank">Perpustakaan UNIPDU</a></li></p>
<p align="left"><a href="http://www.journal.unipdu.ac.id/" target="_blank">Journal Online UNIPDU</a></li></p>
<p align="left"><a href="http://www.fai.unipdu.ac.id/" target="_blank">Fakultas Agama Islam</a></li></p>
<p align="left"><a href="http://www.fbs.unipdu.ac.id/" target="_blank">Fakultas Bahasa dan Sastra</a></p>
<p align="left"><a href="http://www.fia.unipdu.ac.id/" target="_blank">Fakultas Ilmu Administasi</a></p>
<p align="left"><a href="http://www.ft.unipdu.ac.id/" target="_blank">Fakultas TEKNIK</a></p>
<p align="left"><a href="http://www.mipa.unipdu.ac.id/" target="_blank">Fakultas MIPA</a></p>
<p align="left"><a href="http://www.fik.unipdu.ac.id/" target="_blank">Fakultas Ilmu Kesehatan</a></p></td></tr>
<tr><td colspan="2"><div align="center">CopyRight 4ever by <a href="www.facebook.com/irultotti">www.akunanda.com</a> </div></td></tr></table>

Selamat Datang Di My Personal Website www.akunanda.com
Home Products Product 1 Product 2 Contact
Selamat Datang Di Blog Saya, Semoga dengan Adanya Blog Saya Menjadi Lebih Bermanfaat buat Semuanya TTD ADMIN BLOG	Link Sponsor : UNIPDU Jombang

CopyRight 4ever by www.akunanda.com

Selesailah Tutorial Sederhana ini
Semoga Bermanfaat

Baca Juga