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