Membuat Layout menggunakan CSS

  



Download Source code


Penjelasan : ini adalah sample membuat layout menggunakan CSS, penggunaan TOP header ini menggunakan sourcode:
 <td colspan=2 height=5 class="top">
                    <marquee>
                    <h2><p style="color:blue; font:bold 20px candara, arial, tahoma; text-align:center;"> SELAMAT DATANG DI WEB SUSU SEHAT </p>
                    </h2>
                    </marquee>
                    </td>
 yang sistem kerjanya seperti fotter. Selain itu saya menggunakan marquee dalam
<h2><p style="color:blue; font:bold 20px candara, arial, tahoma; text-align:center;"> SELAMAT DATANG DI WEB SUSU SEHAT </p> </h2> agar tulisan SELAMAT DATANG DI WEB SUSU SEHAT dapat berjalan dan lebih menarik

Pengisian kolom kanan menggunakan sourcode:

 <table width="125" height="100" border="1">
                  <tr>
                    <td height="24"><font size="4" color="#FFFF00"> SHARE IT </font></td>
                  </tr>
                  <tr>
                    <td height="75"><a href="https://www.facebook.com/tri.adi.putra.ramdanI?ref=tn_tnmn">Facebook </a>
                      <p><img src="FB.png"></p></td>
                  </tr>
                  <tr>
                    <td height="75"><p><a href="https://twitter.com/kbscbwi"> Twitter </a></p>
                    <p><img src="TW.png"></p></td>
                  </tr>
                 
                </table>
disini saya menggunakan tabel kolom untuk meletakan gadget facebook dan twitter yang pastinya menggunakan langkah kerja CSS. selain itu jika kita mengclick URL dibawah gambar akan langsung masuk ke dalam akun saya ini menggunakan hyperlink dalam dreamweaver. 

                      </tr>
                </table>
            <tr>
<td colspan=2 height=20 class="footer"><h2><p style="color:blue; font:bold 10px candara, arial, tahoma; text-align: inherit"> Copyright &copy; 2013 Tri Adi Putra Ramdani 1110651247</p>
                </h2>
                <marquee>
                </marquee>
              </td>
            </tr>
          </table>

Selanjutnya dibagian footer saya menambahkan Copyright &copy; 2013 Tri Adi Putra Ramdani 1110651247 gunanya untuk memberikan catatan kalau template disini adalah template dari tugas dosen PBW namun saya disini saya tidak sepenuhnya membuat template yang menggunakan CSS namun saya sedikit menambahkan variasi agar lebih menarik.

Semoga Bermanfaat dan Selamat Mencoba .......