{"id":3073,"date":"2016-06-08T13:24:49","date_gmt":"2016-06-08T13:24:49","guid":{"rendered":"http:\/\/www.webhozz.com\/blog\/?p=3073"},"modified":"2019-06-14T13:55:45","modified_gmt":"2019-06-14T13:55:45","slug":"html-layouts-2","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/","title":{"rendered":"HTML Layouts"},"content":{"rendered":"<p>Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran). tata letak html menggunakan elemen. Div elemen sering digunakan sebagai alat tata letak, karena dengan mudah dapat diposisikan dengan CSS.<br \/>\nContoh ini menggunakan 4 div elemen untuk membuat tata letak beberapa kolom:<\/p>\n<p>kode html nya seperti berikut:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n\r\n&lt;div id=&quot;header&quot;&gt;\r\n&lt;h1&gt;City Gallery&lt;\/h1&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=&quot;nav&quot;&gt;\r\nLondon&lt;br&gt;\r\nParis&lt;br&gt;\r\nTokyo&lt;br&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=&quot;section&quot;&gt;\r\n&lt;h1&gt;London&lt;\/h1&gt;\r\n\r\n&lt;p&gt;\r\nLondon is the capital city of England.\r\n It is the most populous city in the United Kingdom,\r\nwith a metropolitan area of over 13 million inhabitants.\r\n&lt;\/p&gt;\r\n\r\n&lt;p&gt;\r\nStanding on the River Thames, \r\nLondon has been a major settlement for two millennia,\r\nits history going back to its founding by the Romans, \r\nwho named it Londinium.\r\n&lt;\/p&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=&quot;footer&quot;&gt;\r\nCopyright \u00a9 webhozz.com\r\n&lt;\/div&gt;\r\n\r\n<\/pre>\n<p>lalu kode css seperti ini:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\"> \r\n\r\n&lt;style&gt;\r\n#header {\r\n    background-color:black;\r\n    color:white;\r\n    text-align:center;\r\n    padding:5px;\r\n}\r\n#nav {\r\n    line-height:30px;\r\n    background-color:#eeeeee;\r\n    height:300px;\r\n    width:100px;\r\n    float:left;\r\n    padding:5px;\r\n}\r\n#section {\r\n    width:350px;\r\n    float:left;\r\n    padding:10px;\r\n}\r\n#footer {\r\n    background-color:black;\r\n    color:white;\r\n    clear:both;\r\n    text-align:center;\r\n    padding:5px;\r\n}\r\n&lt;\/style&gt; \r\n\r\n<\/pre>\n<p>maka hasinya akan sperti ini:<\/p>\n<p><a href=\"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout.png\"><img decoding=\"async\" src=\"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout-300x101.png\" alt=\"html_layout\" width=\"300\" height=\"101\" class=\"alignnone size-medium wp-image-3074\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout-300x101.png 300w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout-1024x345.png 1024w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout.png 1265w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran). tata letak html menggunakan elemen. Div elemen sering digunakan sebagai alat tata letak, karena<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[9,225,1057,1058],"class_list":["post-3073","post","type-post","status-publish","format-standard","hentry","category-belajar-web-design","tag-belajar-html","tag-layout","tag-layout-html","tag-membuat-layout-dengan-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML Layouts - WebHozz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Layouts - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran). tata letak html menggunakan elemen. Div elemen sering digunakan sebagai alat tata letak, karena\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-08T13:24:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-14T13:55:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1265\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/ad1c5822a60b5b228c5ceda20e439fea\"},\"headline\":\"HTML Layouts\",\"datePublished\":\"2016-06-08T13:24:49+00:00\",\"dateModified\":\"2019-06-14T13:55:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/\"},\"wordCount\":244,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/html_layout-300x101.png\",\"keywords\":[\"HTML\",\"layout\",\"layout html\",\"membuat layout dengan html\"],\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/\",\"name\":\"HTML Layouts - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/html_layout-300x101.png\",\"datePublished\":\"2016-06-08T13:24:49+00:00\",\"dateModified\":\"2019-06-14T13:55:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/html_layout-300x101.png\",\"contentUrl\":\"http:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/html_layout-300x101.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/html-layouts-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Layouts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web &amp; Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/ad1c5822a60b5b228c5ceda20e439fea\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/putralucio\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Layouts - WebHozz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/","og_locale":"en_US","og_type":"article","og_title":"HTML Layouts - WebHozz Blog","og_description":"Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran). tata letak html menggunakan elemen. Div elemen sering digunakan sebagai alat tata letak, karena","og_url":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/","og_site_name":"WebHozz Blog","article_published_time":"2016-06-08T13:24:49+00:00","article_modified_time":"2019-06-14T13:55:45+00:00","og_image":[{"width":1265,"height":426,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/ad1c5822a60b5b228c5ceda20e439fea"},"headline":"HTML Layouts","datePublished":"2016-06-08T13:24:49+00:00","dateModified":"2019-06-14T13:55:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/"},"wordCount":244,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/#primaryimage"},"thumbnailUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout-300x101.png","keywords":["HTML","layout","layout html","membuat layout dengan html"],"articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/","url":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/","name":"HTML Layouts - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/#primaryimage"},"thumbnailUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout-300x101.png","datePublished":"2016-06-08T13:24:49+00:00","dateModified":"2019-06-14T13:55:45+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/html-layouts-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/#primaryimage","url":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout-300x101.png","contentUrl":"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2016\/06\/html_layout-300x101.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/html-layouts-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Layouts"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web &amp; Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/ad1c5822a60b5b228c5ceda20e439fea","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/putralucio\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/3073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=3073"}],"version-history":[{"count":1,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/3073\/revisions"}],"predecessor-version":[{"id":3075,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/3073\/revisions\/3075"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=3073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=3073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=3073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}