{"id":2752,"date":"2013-06-03T20:37:19","date_gmt":"2013-06-03T20:37:19","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2013\/06\/03\/adding-html-web-design\/"},"modified":"2021-08-16T23:12:54","modified_gmt":"2021-08-17T03:12:54","slug":"adding-html-web-design","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/","title":{"rendered":"Step 1: Adding HTML to the Responsive Template"},"content":{"rendered":"

Now that you have been introduced to responsive templates<\/a>, we can start building the template. The first step in creating a Responsive template is to add the code for the header, body, and footer. <\/p>\n

Adding the Responsive Template HTML code<\/h2>\n

You will need to create an HTML file that you will use to create the HTML for the webpage. <\/p>\n

1. Create an HTML page<\/strong> called index.php<\/em>.<\/h3>\n

Once you create the HTML file, you can paste the below in to the page.<\/p>\n

Note!<\/strong> The HTML code has filler Lorem Ipsum text<\/a> in it. You can put whatever text you want.<\/p>\n

<body>  <div id=\"wrapper\">      <div id=\"header-content\">       <h2>Your Responsive Template<\/h2>     <\/div><\/pre>\n
<div id=\u201dmain-content\u201d>          <div id=\u201dinner-content\u201d>       <h1>Suspendisse commodo purus aliquam mi<\/h1>         <p>Donec sed urna lectus, vel viverra tellus. Nullam molestie tortor eu erat aliquet            fermentum. Suspendisse commodo purus aliquam mi tempor pulvinar.  Pellentesque            bibendum suscipit dui, id vehicula leo aliquet at. Duis sem diam, pharetra sed            posuere sed, iaculis vitae leo.<\/p>            <div class=\u201dbox\u201d>            <h2>Pellentesque bibendum<\/h2>            <img class=\u201dimage-box\u201d src=\u201dhttps:\/\/www.google.com\/images\/srpr\/logo4w.png\u201d \/>            Curabitur pulvinar odio ut magna aliquet consequat. Etiam id euismod justo.            Praesent vel lectus ipsum, ac placerat urna. Quisque a leo nibh.  Curabitur            bibendum accumsan orci eget euismod. Pellentesque mattis gravida imperdiet.         <\/div>         <div class=\u201dbox\u201d> <h2>Donec sed urna lectus<\/h2>            <img class=\u201dimage-box\u201d src=\u201dhttps:\/\/www.google.com\/images\/srpr\/logo4w.png\u201d \/>            Vestibulum luctus augue at arcu eleifend ac convallis massa bibendum. Proin ut            quam, eu feugiat risus. Curabitur bibendum accumsan orci eget euismod. Aliquam            porttitor faucibus orci, vitae semper dui varius eu.         <\/div>         <div class=\u201dbox\u201d>            <h2>Proin ut odio quam<\/h2>            <img class=\u201dimage-box\u201d src=\u201dhttps:\/\/www.google.com\/images\/srpr\/logo4w.png\u201d \/>            Vivamus ut enim eu leo euismod semper. Cras sagittis auctor ante, sagittis            scelerisque diam iaculis at. Pellentesque mattis gravida imperdiet. Praesent            vestibulum volutpat vestibulum.         <\/div>         <div class=\u201dbox\u201d>            <h2>Vestibulum luctus elementum<\/h2>            <img class=\u201dimage-box\u201d src=\u201dhttps:\/\/www.google.com\/images\/srpr\/logo4w.png\u201d \/>            Quisque eget leo eget magna ultrices tincidunt. Vestibulum luctus elementum            sollicitudin. Sed at mi sit amet nisl semper tincidunt non in lorem. Donec semper            commodo interdum.         <\/div>          <br style=\u201dclear:both\u201d \/>     <\/div>      <\/div>         <div id=\u201dfooter-content\u201d>Copyright &copy; 2013 | My Responsive Web Template<\/div>       <\/div> <\/body><\/p>\n
\"Responsive<\/a>\n
<\/div>\n<\/h3>
2. Save the page<\/strong>.\n<\/p>
You will now have a page with no styles just content. Now we need to create the CSS files for the Template to change between different layouts. <\/p>\n
The Next tutorial will explain how to add the styles to the stylesheets for your Responsive webpage<\/a>.
<\/p>\n","protected":false},"excerpt":{"rendered":"
Now that you have been introduced to responsive templates, we can start building the template. The first step in creating a Responsive template is to add the code for the header, body, and footer. Adding the Responsive Template HTML code You will need to create an HTML file that you will use to create the Read More ><\/a><\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4288,4346],"tags":[],"class_list":["post-2752","post","type-post","status-publish","format-standard","hentry","category-website","category-website-design"],"acf":[],"yoast_head":"\nStep 1: Adding HTML to the Responsive Template | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"The first step to getting your responsive template created is to add the HTML code for the site. This tutorial will show you what to put in your Responsive Website template.\" \/>\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.inmotionhosting.com\/support\/website\/adding-html-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Step 1: Adding HTML to the Responsive Template | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"The first step to getting your responsive template created is to add the HTML code for the site. This tutorial will show you what to put in your Responsive Website template.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-03T20:37:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:12:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_introduction-responsive-templates_withoutstyles.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\"},\"headline\":\"Step 1: Adding HTML to the Responsive Template\",\"datePublished\":\"2013-06-03T20:37:19+00:00\",\"dateModified\":\"2021-08-17T03:12:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/\"},\"wordCount\":495,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_introduction-responsive-templates_withoutstyles.png\",\"articleSection\":[\"Website\",\"Website Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/\",\"name\":\"Step 1: Adding HTML to the Responsive Template | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_introduction-responsive-templates_withoutstyles.png\",\"datePublished\":\"2013-06-03T20:37:19+00:00\",\"dateModified\":\"2021-08-17T03:12:54+00:00\",\"description\":\"The first step to getting your responsive template created is to add the HTML code for the site. This tutorial will show you what to put in your Responsive Website template.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_introduction-responsive-templates_withoutstyles.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_introduction-responsive-templates_withoutstyles.png\",\"width\":600,\"height\":631,\"caption\":\"Click here to view the larger image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Step 1: Adding HTML to the Responsive Template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41\",\"name\":\"InMotion Hosting Contributor\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Step 1: Adding HTML to the Responsive Template | InMotion Hosting","description":"The first step to getting your responsive template created is to add the HTML code for the site. This tutorial will show you what to put in your Responsive Website template.","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.inmotionhosting.com\/support\/website\/adding-html-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Step 1: Adding HTML to the Responsive Template | InMotion Hosting","og_description":"The first step to getting your responsive template created is to add the HTML code for the site. This tutorial will show you what to put in your Responsive Website template.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2013-06-03T20:37:19+00:00","article_modified_time":"2021-08-17T03:12:54+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_introduction-responsive-templates_withoutstyles.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41"},"headline":"Step 1: Adding HTML to the Responsive Template","datePublished":"2013-06-03T20:37:19+00:00","dateModified":"2021-08-17T03:12:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/"},"wordCount":495,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_introduction-responsive-templates_withoutstyles.png","articleSection":["Website","Website Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/","name":"Step 1: Adding HTML to the Responsive Template | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_introduction-responsive-templates_withoutstyles.png","datePublished":"2013-06-03T20:37:19+00:00","dateModified":"2021-08-17T03:12:54+00:00","description":"The first step to getting your responsive template created is to add the HTML code for the site. This tutorial will show you what to put in your Responsive Website template.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_introduction-responsive-templates_withoutstyles.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2013\/06\/edu_website-design_206_introduction-responsive-templates_withoutstyles.png","width":600,"height":631,"caption":"Click here to view the larger image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/adding-html-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Step 1: Adding HTML to the Responsive Template"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0ba9f3ef6fadef71df5aa120ff996c41","name":"InMotion Hosting Contributor","url":"https:\/\/www.inmotionhosting.com\/support\/author\/jamesr\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=2752"}],"version-history":[{"count":2,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2752\/revisions"}],"predecessor-version":[{"id":84564,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/2752\/revisions\/84564"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=2752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=2752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=2752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}