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

Web template memudahkan kita membuat website dengan hanya beberapa disain web layout untuk banyak tampilan content web. Kenapa sedikit layout untuk banyak tampilan? Hal ini untuk memudahkan disain ulang web, jadi hanya beberapa layout saja yang perlu dirubah. Sekaligus dengan mekanisme template, sebuah website akan mudah dipelajari, karena kode program (PHP) dan disain layout web (HTML, JavaScript, dan CSS) dipisahkan, atau tidak dijadikan satu file atau bagian.


Kenapa tanpa Table? Biasanya seseorang akan lebih mudah memuat layout website dengan menggunakan table, karena memudahkan pada saat disain dan pengelolaan. Misalnya:

PLAIN TEXT

HTML:

  1. <table width=“400” cellspacing=“0” cellpadding=“0” border=“0” align=“center”>

  2. <tr>

  3. <td colspan=“3”>

  4. <table width=“100%” cellspacing=“0” cellpadding=“5” border=“0”>

  5. <tr>

  6. <td><strong>#JUDUL_WEBSITE#</strong></td>

  7. </tr>

  8. <tr>

  9. <td>

  10. <div align=“right”>HOME | FAQ | CONTACT | SITEMAP</div>

  11. </td>

  12. </tr>

  13. </table>

  14. </td>

  15. </tr>

  16. <tr>

  17. <td>

  18. <table width=“100%” cellspacing=“0” cellpadding=“5” border=“0”>

  19. <tr>

  20. <td>#BLOCK_KIRI#</td>

  21. </tr>

  22. </table>

  23. </td>

  24. <td>

  25. <table width=“100%” cellspacing=“0” cellpadding=“5” border=“0”>

  26. <tr>

  27. <td>#CONTENT#</td>

  28. </tr>

  29. </table>

  30. </td>

  31. <td>

  32. <table width=“100%” cellspacing=“0” cellpadding=“5” border=“0”>

  33. <tr>

  34. <td>#BLOCK_KANAN#</td>

  35. </tr>

  36. </table>

  37. </td>

  38. </tr>

  39. <tr>

  40. <td colspan=“3”>

  41. <table width=“100%” cellspacing=“0” cellpadding=“5” border=“0”>

  42. <tr>

  43. <td>

  44. <div align=“center”>© 2006 Web Programmer. All Rights Reserved.</div>

  45. </td>

  46. </tr>

  47. </table>

  48. </td>

  49. </tr>

  50. </table>

Kode program diatas adalah contoh layout website yang digunakan template dengan menggunakan table sebagai pengaturan tata letak content. Coba perhatikan kode program yang menggunakan tanda #…# sebagai awalan dan akhiran. Tanda tersebut menunjukkan bahwa itu adalah variable template, yang nanti akan diisi dengan content website. Misalnya #JUDUL_WEBSITE#, ini akan diisi dengan judul dari website, kemudian #BLOCK_KIRI# akan diisi dengan semua content yang nanti akan diisikan di area sebelah kiri, dan seterusnya.

Yang akan kita buat adalah template web yang tidak menggunakan table, melainkan dengan menggunakan tag-tag layer, yaitu DIV. Kenapa div? Karena ini akan memudahkan search engine menemukan website anda dan menyimpannya di cache search engine. Dan tentu saja byte HTML yang akan dimuat oleh browser menjadi lebih sedikit dibandingkan dengan TABLE.

Bagaimana untuk membuat web template tanpa table ini? Bersambung …

Copyan @ Filed under Web Design, SEO, Web Programming

3 Balasan ke Web Template Tanpa Table – PHP, JavaScript, dan CSS (Bagian 1)

  1. Afif Firdaus mengatakan:

    saya tunggu sambungannya lho..
    bagaimana cara mendapatkan macromedia dreamweaver 8 wat di download. yang free kalo bisa. yang saya punya versi mx jadi berbeda dengan versi 8.

  2. Afif Firdaus mengatakan:

    tambahan:
    saya sedang membangun website sekolah, saya tertarik untuk menggunakan dreamweaver 8, sepertinya lebih mudah. bagi2 tips n triknya ya. saya seorang pemula jadi belum begitu paham.
    terima kasih.

  3. oka mengatakan:

    coba aja download di torrent macromedia dreamweaver 8 torrent

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: