Web Template 2

Monday, July 7, 2008 | By admin


Seperti telah disebutkan pada artikel sebelumnya, bahwa dengan layout website tanpa table, akan memudahkan search engine mengetahui content website anda. Sekarang mari kita coba membuat layout website tanpa table yang hasilnya sama dengan layout website sebelumnya yang menggunakan table.
Berikut ini adalah contoh kode html untuk layout website tanpa table:

utama.htm
PLAIN TEXT

HTML:






  2. <div>#JUDUL_WEBSITE#</div>


  3. <div>HOME | FAQ | CONTACT | SITEMAP</div>




  5. <div>#BLOCK_KIRI#</div>


  6. <div>#CONTENT#</div>


  7. <div>#BLOCK_KANAN#</div>


  8. </div>


  9. <div>© 2006 Web Programmer. All Rights Reserved.</div>


  10. </div>





Dan CSS untuk style dari layout diatas disimpan dengan nama file table.css yang berisi:
PLAIN TEXT

CSS:




  1. * {


  2. font-family: Georgia, "Times New Roman", Times, serif;


  3. font-size: 12px;


  4. }


  5. #main {


  6. width: 800px;


  7. margin: 0px 0px 0px 100px;


  8. }


  9. #header {


  10. font-weight: bold;


  11. padding: 10px 10px 10px 10px;


  12. background: #FFCC00;


  13. }


  14. #nav {


  15. text-align: right;


  16. padding: 0px 20px 0px 0px;


  17. background: #6666CC;


  18. }


  19. #middle {


  20. clear: both;


  21. }


  22. #left {


  23. float: left;


  24. width: 180px;


  25. padding: 5px 5px 5px 5px;


  26. }


  27. #content {


  28. float: left;


  29. width: 350px;


  30. padding: 10px 10px 10px 10px;


  31. }


  32. #right {


  33. float: left;


  34. padding: 5px 5px 5px 5px;


  35. }


  36. #footer {


  37. float: left;


  38. padding: 10px 10px 10px 10px;


  39. text-align: center;


  40. }





#main merupakan definisi style untuk tag <div id="main"> ... </div>, dan demikian juga untuk #header merupakan definisi tag <div id="header"> ... </div>. Jadi pengaturan susunan tata letak content diatur melalui CSS. Didalam #main didefinisikan width = 600px, artinya lebar dari space yang dibentuk oleh tag <div> sebesar 600 pixel. Selanjutnya untuk komposisi margin, berturut-turut, top = 0px, right = 0px, bottom = 0px, dan left =240px, px = pixel.

  • width: lebar

  • margin: jarak batas dengan batas terluar

  • font-weight: untuk menetukan ketebalan teks

  • padding: jarak isi dengan batas

  • text-align: mengatur rata kanan / kiri dari suatu teks

  • clear: mengatur floating block yang dapat ditampilkan dibaris yang sama

  • float: mengatur posisi floating block


Anda silakan mencoba-coba memberikan value yang berbeda dimasing-masing definisi style pada CSS.


Labels:

0 comments:

Post a Comment