Web Template Tanpa Table – PHP, JavaScript, dan CSS (Bagian 2)

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:

  1. <div>

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

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

  4. <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.

Copyan @ Web Design, SEO, Web Programming

Satu Balasan ke Web Template Tanpa Table – PHP, JavaScript, dan CSS (Bagian 2)

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: