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 HTML for the webpage.

1. Create an HTML page called index.php.

Once you create the HTML file, you can paste the below in to the page.

Note! The HTML code has filler Lorem Ipsum text in it. You can put whatever text you want.

<body>

<div id="wrapper">

    <div id="header-content">
      <h2>Your Responsive Template</h2>
    </div>

<div id="main-content"> <div id="inner-content"> <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="box"> <h2>Pellentesque bibendum</h2> <img class="image-box" src="https://www.google.com/images/srpr/logo4w.png" /> 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="box"> <h2>Donec sed urna lectus</h2> <img class="image-box" src="https://www.google.com/images/srpr/logo4w.png" /> 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="box"> <h2>Proin ut odio quam</h2> <img class="image-box" src="https://www.google.com/images/srpr/logo4w.png" /> 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="box"> <h2>Vestibulum luctus elementum</h2> <img class="image-box" src="https://www.google.com/images/srpr/logo4w.png" /> 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="clear:both" /> </div> </div> <div id="footer-content">Copyright &copy; 2013 | My Responsive Web Template</div> </div> </body>

Responsive template with no styles2. Save the page.

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.

The Next tutorial will explain how to add the styles to the stylesheets for your Responsive webpage.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2220
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5641

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!