{"id":70,"date":"2021-11-10T03:27:00","date_gmt":"2021-11-09T20:27:00","guid":{"rendered":"http:\/\/www.rumahweb.com\/journal\/web-template-tanpa-table-php-javascript-dan-css-bagian-1.htm"},"modified":"2022-10-13T12:40:08","modified_gmt":"2022-10-13T05:40:08","slug":"cara-membuat-web-template-tanpa-table-bagian-1","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cara-membuat-web-template-tanpa-table-bagian-1\/","title":{"rendered":"Cara Membuat Web Template Tanpa Table &#8211; Bagian 1"},"content":{"rendered":"\n<p>Artikel ini kami terbitkan tahun 2006 dan mungkin saat ini sudah tidak terlalu berguna bagi kebanyakan orang. Namun bagi beberapa orang yang baru belajar <em>coding <\/em>membuat website sederhana, panduan ini masih sangat relevan dan bermanfaat. Karenanya artikel &#8216;cara membuat web template tanpa table&#8217; ini kami tulis ulang.<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Mengenal Web Template<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Web template memudahkan kita untuk membuat website. Dengan <a href=\"https:\/\/blog.rumahweb.com\/template-adalah\/\" title=\"template adalah\">template<\/a>, 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. <\/p>\n\n\n\n<p>Untuk membuat layout, ada 4 bahasa pemrograman yang perlu kita pelajari yaitu CSS, PHP, HTML dan <a href=\"https:\/\/blog.rumahweb.com\/javascript-adalah\/\" title=\"javascript adalah\">JavaScript<\/a>. Empat bahasa pemrograman ini dapat dijadikan sebagai satu halaman file, atau bisa dipisahkan sesuai dengan kebutuhan. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh script web template<\/h2>\n\n\n\n<p>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 :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n&lt;table border=\"0\" width=\"400\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\"&gt;\n&lt;tbody&gt;\n&lt;tr&gt;\n&lt;td colspan=\"3\"&gt;\n&lt;table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\"&gt;\n&lt;tbody&gt;\n&lt;tr&gt;\n&lt;td&gt;&lt;strong&gt;#JUDUL_WEBSITE#&lt;\/strong&gt;&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;\n&lt;div align=\"right\"&gt;HOME | FAQ | CONTACT | SITEMAP&lt;\/div&gt;&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;\n&lt;table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\"&gt;\n&lt;tbody&gt;\n&lt;tr&gt;\n&lt;td&gt;#BLOCK_KIRI#&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/td&gt;\n&lt;td&gt;\n&lt;table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\"&gt;\n&lt;tbody&gt;\n&lt;tr&gt;\n&lt;td&gt;#CONTENT#&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/td&gt;\n&lt;td&gt;\n&lt;table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\"&gt;\n&lt;tbody&gt;\n&lt;tr&gt;\n&lt;td&gt;#BLOCK_KANAN#&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td colspan=\"3\"&gt;\n&lt;table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\"&gt;\n&lt;tbody&gt;\n&lt;tr&gt;\n&lt;td&gt;\n&lt;div align=\"center\"&gt;\u00c2\u00a9 2006 Web Programmer. All Rights Reserved.&lt;\/div&gt;&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Tampilan dari script tersebut adalah sebagai berikut :<\/p>\n\n\n<p><html><\/p>\n<table border=\"0\" width=\"400\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<td colspan=\"3\">\n<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\">\n<tbody>\n<tr>\n<td><strong>#JUDUL_WEBSITE#<\/strong><\/td>\n<\/tr>\n<tr>\n<td>\n<div align=\"right\">HOME | FAQ | CONTACT | SITEMAP<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\">\n<tbody>\n<tr>\n<td>#BLOCK_KIRI#<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>\n<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\">\n<tbody>\n<tr>\n<td>#CONTENT#<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>\n<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\">\n<tbody>\n<tr>\n<td>#BLOCK_KANAN#<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td colspan=\"3\">\n<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"5\">\n<tbody>\n<tr>\n<td>\n<div align=\"center\">@2021 Rumahweb Programmer. All Rights Reserved.<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><\/html><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Script diatas adalah contoh web template dengan menggunakan table untuk pengaturan tata letak <em>content<\/em>. <\/p>\n\n\n\n<p>Coba perhatikan kode program yang menggunakan tanda #&#8230;# sebagai awalan dan akhiran. Tanda tersebut menunjukkan bahwa itu adalah variable template, yang nanti akan diisi dengan content website. <\/p>\n\n\n\n<p>Misalnya #JUDUL_WEBSITE#, ini akan diisi dengan judul dari website, kemudian #BLOCK_KIRI# akan diisi dengan semua <em>content <\/em>yang nanti akan diisikan di area sebelah kiri, dan seterusnya.<\/p>\n\n\n\n<p>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 <em><a href=\"https:\/\/blog.rumahweb.com\/search-engine-adalah\/\" title=\"search engine adalah\">search engine<\/a><\/em> menemukan website anda dan menyimpannya di cache <em>search engine<\/em>. Dan tentu saja byte HTML yang akan dimuat oleh browser menjadi lebih kecil dibandingkan dengan TABLE.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><strong>Lanjut part 2 : <a href=\"https:\/\/www.rumahweb.com\/journal\/cara-membuat-web-template-tanpa-table-bagian-2\/\" title=\"cara membuat web template\">Cara Membuat Web Template Tanpa Table - Bagian 2<\/a><\/strong><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8216;cara membuat web template tanpa table&#8217; ini kami tulis ulang. Mengenal Web Template Web template adalah kumpulan file [&hellip;]<\/p>\n","protected":false},"author":57,"featured_media":29852,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5,7],"tags":[410,74,22],"class_list":{"0":"post-70","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"category-web-programming","9":"tag-desain","10":"tag-template","11":"tag-website"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/11\/Banner-Cara-Membuat-Web-Template-Tanpa-Table-Bagian-1.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-18","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/70","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=70"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/70\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/29852"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=70"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=70"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}