Tampilan diatas masih berantakan, karena kita belum membuat file css untuk mengatur layout templatenya. <\/p>\n\n\n\n
CSS adalah singkatan dari Cascading Style Sheet, digunakan untuk melengkapi file HTMl, dan tugas utamanya adalah menetapkan aturan tampilan\/style yang akan digunakan pada sebuah website. <\/p>\n\n\n\n
Baca selengkapnya tentang CSS pada artikel: Belajar CSS<\/a><\/strong><\/pre>\n\n\n\nSilahkan anda buat file dengan nama table.css yang berisi script berikut : <\/p>\n\n\n\n
*{\nfont-family: Georgia, \"Times New Roman\", Times, serif;\nfont-size: 12px;\n}\n#main {\nwidth: 800px;\nmargin: 0px 0px 0px 100px;\n}\n#header {\nfont-weight: bold;\npadding: 10px 10px 10px 10px;\nbackground: #FFCC00;\n}\n#nav {\ntext-align: right;\npadding: 0px 20px 0px 0px;\nbackground: #6666CC;\n}\n#middle {\nclear: both;\n}\n#left {\nfloat: left;\nwidth: 180px;\npadding: 5px 5px 5px 5px;\n}\n#content {\nfloat: left;\nwidth: 350px;\npadding: 10px 10px 10px 10px;\n}\n#right {\nfloat: left;\npadding: 5px 5px 5px 5px;\n}\n#footer {\nfloat: left;\npadding: 10px 10px 10px 10px;\ntext-align: center;\n}<\/code><\/pre>\n\n\n\nKeterangan<\/strong>:<\/p>\n\n\n\n
#main merupakan definisi style untuk tag <div id=\u201dmain\u201d> \u2026 <\/div>, dan demikian juga untuk #header merupakan definisi tag <div id=\u201dheader\u201d> \u2026 <\/div>.<\/p>\n\n\n\n
Jadi pengaturan susunan tata letak content diatur melalui CSS. Di dalam #main di definisikan width = 600px, artinya lebar dari space yang dibentuk oleh tag <div> sebesar 600 pixel. <\/p>\n\n\n\n
Selanjutnya untuk komposisi margin, berturut-turut, top = 0px, right = 0px, bottom = 0px, dan left =240px, px = pixel.<\/p>\n\n\n\n
width: lebar<\/li>
margin: jarak batas dengan batas terluar<\/li>
font-weight: untuk menetukan ketebalan teks<\/li>
padding: jarak isi dengan batas<\/li>
text-align: mengatur rata kanan \/ kiri dari suatu teks<\/li>
clear: mengatur floating block yang dapat ditampilkan dibaris yang sama<\/li>
float: mengatur posisi floating block<\/li><\/ul>\n\n\n\nAnda bisa memberikan value yang berbeda pada masing-masing definisi style CSS tersebut. Anda bisa berkreasi, sesuai dengan style website yang ingin dibuat.<\/p>\n\n\n\n
Lanjut part 3 : Mengatur Web Template<\/p>\n","protected":false},"excerpt":{"rendered":"
Seperti yang telah kami sampaikan pada artikel bagian 1, bahwa dengan web template tanpa table, search engine lebih mudah mengetahui isi content website Anda. Nah, pada artikel ini kita akan mencoba membuat web template tanpa table yang hasilnya sama persis dengan layout html yang kita buat di bagian 1. Step 1. Buat file HTML Berikut […]<\/p>\n","protected":false},"author":57,"featured_media":29861,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,7],"tags":[410,1787,74,22],"class_list":["post-74","post","type-post","status-publish","format-standard","has-post-thumbnail","category-web-design","category-web-programming","tag-desain","tag-layout","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 2 \u2013 Rumahweb","description":"Melanjutkan tutorial cara membuat web template tanpa table bagian pertama, kali ini kami akan berbagi cara membuat script HTML dan CSS untuk membuat layout","canonical_url":"https:\/\/www.rumahweb.com\/journal\/cara-membuat-web-template-tanpa-table-bagian-2\/","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,layout,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 2 \u2013 Rumahweb","og:description":"Melanjutkan tutorial cara membuat web template tanpa table bagian pertama, kali ini kami akan berbagi cara membuat script HTML dan CSS untuk membuat layout","og:url":"https:\/\/www.rumahweb.com\/journal\/cara-membuat-web-template-tanpa-table-bagian-2\/","og:image":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/11\/Banner-Cara-Membuat-Web-Template-Tanpa-Table-Bagian-2.png","og:image:secure_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/11\/Banner-Cara-Membuat-Web-Template-Tanpa-Table-Bagian-2.png","og:image:width":740,"og:image:height":389,"article:published_time":"2021-11-11T07:43:00+00:00","article:modified_time":"2022-07-08T07:45:28+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 2 \u2013 Rumahweb","twitter:description":"Melanjutkan tutorial cara membuat web template tanpa table bagian pertama, kali ini kami akan berbagi cara membuat script HTML dan CSS untuk membuat layout","twitter:creator":"@rumahwebtweet","twitter:image":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2006\/11\/Banner-Cara-Membuat-Web-Template-Tanpa-Table-Bagian-2.png"},"aioseo_meta_data":{"post_id":"74","title":"#post_title #separator_sa Rumahweb","description":"Melanjutkan tutorial cara membuat web template tanpa table bagian pertama, kali ini kami akan berbagi cara membuat script HTML dan CSS untuk membuat layout","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":"Use your focus keyphrase more in your H2 and H3 subheadings.","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":"","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\"}}","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\/74","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=74"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/29861"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}