Rumahweb Journal
Banner - Cara Membuat Web Template Tanpa Table - Bagian 1

Cara Membuat Web Template Tanpa Table – Bagian 1

Artikel ini kami terbitkan tahun 2006 dan mungkin saat ini sudah tidak terlalu berguna bagi kebanyakan orang. Namun bagi beberapa orang yang baru belajar coding membuat website sederhana, panduan ini masih sangat relevan dan bermanfaat. Karenanya artikel ‘cara membuat web template tanpa table’ ini kami tulis ulang.

Mengenal Web Template

Web template adalah kumpulan file atau dokumen yang menggunakan format preset, yang digunakan sebagai core atau titik awal sebuah aplikasi. Sehingga format ini tidak harus dibuat ulang setiap kali digunakan.

Web template memudahkan kita untuk membuat website. Dengan template, kita dapat membuat beberapa halaman website sekaligus dengan layout yang sama. Kenapa sedikit layout untuk banyak tampilan? Hal ini berfungsi untuk memudahkan dalam proses desain ulang pada tiap halaman. Jadi yang perlu anda lakukan hanya mengubah isi website, bukan layout atau tampilan perhalaman.

Untuk membuat layout, ada 4 bahasa pemrograman yang perlu kita pelajari yaitu CSS, PHP, HTML dan JavaScript. Empat bahasa pemrograman ini dapat dijadikan sebagai satu halaman file, atau bisa dipisahkan sesuai dengan kebutuhan.

Contoh script web template

Pada panduan ini, kami akan berbagi cara membuat web template tanpa table. Kenapa tanpa table? Biasanya seseorang akan lebih mudah memuat layout website dengan menggunakan table, karena memudahkan pada saat disain dan pengelolaan. Misalnya contoh script berikut :

<html>
<table border="0" width="400" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td colspan="3">
<table border="0" width="100%" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td><strong>#JUDUL_WEBSITE#</strong></td>
</tr>
<tr>
<td>
<div align="right">HOME | FAQ | CONTACT | SITEMAP</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td>#BLOCK_KIRI#</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td>#CONTENT#</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td>#BLOCK_KANAN#</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" width="100%" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td>
<div align="center">© 2006 Web Programmer. All Rights Reserved.</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>

Tampilan dari script tersebut adalah sebagai berikut :

#JUDUL_WEBSITE#
HOME | FAQ | CONTACT | SITEMAP
#BLOCK_KIRI#
#CONTENT#
#BLOCK_KANAN#
@2021 Rumahweb Programmer. All Rights Reserved.

Script diatas adalah contoh web template dengan menggunakan table untuk 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 kecil dibandingkan dengan TABLE.

Lanjut part 2 : Cara Membuat Web Template Tanpa Table - Bagian 2

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 5 / 5. Vote count: 4

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

Domain & Hosting Gratis di Rumahweb