{"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 – Bagian 1"},"content":{"rendered":"\n

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 <\/em>membuat website sederhana, panduan ini masih sangat relevan dan bermanfaat. Karenanya artikel ‘cara membuat web template tanpa table’ ini kami tulis ulang.<\/p>\n\n\n\n\n\n

Mengenal Web Template<\/h2>\n\n\n\n

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

Web template memudahkan kita untuk membuat website. Dengan 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

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

Contoh script web template<\/h2>\n\n\n\n

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

<html>\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><\/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\">\u00c2\u00a9 2006 Web Programmer. All Rights Reserved.<\/div><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/html><\/code><\/pre>\n\n\n\n
Tampilan dari script tersebut adalah sebagai berikut :<\/p>\n\n\n
<\/p>\n\n\n\n
\n\n\n\n\n\n
#JUDUL_WEBSITE#<\/strong><\/td>\n<\/tr>\n
\n
HOME | FAQ | CONTACT | SITEMAP<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
\n\n\n\n
#BLOCK_KIRI#<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\n
#CONTENT#<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\n\n
#BLOCK_KANAN#<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n
\n\n\n\n
\n
@2021 Rumahweb Programmer. All Rights Reserved.<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
<\/html><\/p>\n\n\n\n
<\/p>\n\n\n\n
Script diatas adalah contoh web template dengan menggunakan table untuk pengaturan tata letak content<\/em>. <\/p>\n\n\n\n
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. <\/p>\n\n\n\n
Misalnya #JUDUL_WEBSITE#, ini akan diisi dengan judul dari website, kemudian #BLOCK_KIRI# akan diisi dengan semua content <\/em>yang nanti akan diisikan di area sebelah kiri, dan seterusnya.<\/p>\n\n\n\n
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<\/a><\/em> menemukan website anda dan menyimpannya di cache search engine<\/em>. Dan tentu saja byte HTML yang akan dimuat oleh browser menjadi lebih kecil dibandingkan dengan TABLE.<\/p>\n\n\n\n
Lanjut part 2 : Cara Membuat Web Template Tanpa Table - Bagian 2<\/a><\/strong><\/pre>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":57,"featured_media":29852,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,7],"tags":[410,74,22],"class_list":["post-70","post","type-post","status-publish","format-standard","has-post-thumbnail","category-web-design","category-web-programming","tag-desain","tag-template","tag-website"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"Cara Membuat Web Template Tanpa Table \u2013 Bagian 1 \u2013 Rumahweb","description":"Web template memudahkan kita untuk membuat halaman-halaman website dengan layout yang sama. Pelajari cara membuat web template tanpa table pada artikel","canonical_url":"https:\/\/www.rumahweb.com\/journal\/cara-membuat-web-template-tanpa-table-bagian-1\/","robots":"max-image-preview:large","keywords":"tutorial membuat template website,membuat tema website,membuat template,cara membuat template html,cara membuat template,cara membuat web template,membuat web template,desain,template,website","webmasterTools":{"google-site-verification":"wPstUwU5246IbK_1PqwGrc1LoSDnB-9rPbcT8_vSNgQ","miscellaneous":""},"schema":null,"og:locale":"id_Id","og:site_name":"Rumahweb Journal \u2013 News, Article, and Tutorial of Web Dev","og:type":"article","og:title":"Cara Membuat Web Template Tanpa Table \u2013 Bagian 1 \u2013 Rumahweb","og:description":"Web template memudahkan kita untuk membuat halaman-halaman website dengan layout yang sama. Pelajari cara membuat web template tanpa table pada artikel","og:url":"https:\/\/www.rumahweb.com\/journal\/cara-membuat-web-template-tanpa-table-bagian-1\/","og:image":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/11\/Banner-Cara-Membuat-Web-Template-Tanpa-Table-Bagian-1.png","og:image:secure_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/11\/Banner-Cara-Membuat-Web-Template-Tanpa-Table-Bagian-1.png","og:image:width":740,"og:image:height":389,"article:published_time":"2021-11-09T20:27:00+00:00","article:modified_time":"2022-10-13T05:40:08+00:00","article:publisher":"https:\/\/www.facebook.com\/RumahwebIndonesia\/","twitter:card":"summary_large_image","twitter:site":"@rumahwebtweet","twitter:title":"Cara Membuat Web Template Tanpa Table \u2013 Bagian 1 \u2013 Rumahweb","twitter:description":"Web template memudahkan kita untuk membuat halaman-halaman website dengan layout yang sama. Pelajari cara membuat web template tanpa table pada artikel","twitter:creator":"@rumahwebtweet","twitter:image":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/11\/Banner-Cara-Membuat-Web-Template-Tanpa-Table-Bagian-1.png"},"aioseo_meta_data":{"post_id":"70","title":"#post_title #separator_sa Rumahweb","description":"Web template memudahkan kita untuk membuat halaman-halaman website dengan layout yang sama. Pelajari cara membuat web template tanpa table pada artikel","keywords":[{"label":"tutorial membuat template website","value":"tutorial membuat template website"},{"label":" membuat tema website","value":" membuat tema website"},{"label":" membuat template","value":" membuat template"},{"label":" cara membuat template html","value":" cara membuat template html"},{"label":" cara membuat template","value":" cara membuat template"},{"label":" cara membuat web template","value":" cara membuat web template"},{"label":" membuat web template","value":" membuat web template"}],"keyphrases":{"focus":{"keyphrase":"Web Template","score":88,"analysis":{"keyphraseInTitle":{"title":"Focus keyphrase in SEO title","description":"Focus keyphrase found in SEO title.","score":9,"maxScore":9,"error":0},"keyphraseInDescription":{"title":"Focus keyphrase in meta description","description":"Focus keyphrase found in meta description.","score":9,"maxScore":9,"error":0},"keyphraseLength":{"title":"Focus keyphrase length","description":"Good job!","score":9,"maxScore":9,"error":0,"length":2},"keyphraseInURL":{"title":"Focus keyphrase in URL","description":"Focus keyphrase used in the URL.","score":5,"maxScore":5,"error":0},"keyphraseInIntroduction":{"title":"Focus keyphrase in introduction","description":"Your Focus keyphrase appears in the first paragraph. Well done!","score":9,"maxScore":9,"error":0},"keyphraseInSubHeadings":{"title":"Focus keyphrase in Subheadings","description":"More than 75% of your H2 and H3 subheadings reflect the topic of your copy. That's too much. Don't over-optimize!","score":3,"maxScore":9,"error":1},"keyphraseInImageAlt":[]}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[],"defaultGraph":"Article","defaultPostTypeGraph":""},"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"},\"blockGraphs\":[]}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2020-12-21 10:48:06","updated":"2026-04-19 04:19:23","seo_analyzer_scan_date":null},"_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}]}}