Html5 New Layout Tags Awesomeco Blog

<p> HTML5 – NEW LAYOUT TAGS – AWESOMECO BLOG</p><p>1. Using Code View in Dreamweaver or Notepad++, create a new HTML5 document save the page as blog.html and enter the following code: </p><p><!DOCTYPE html> <html lang="en-UK"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link rel="stylesheet" href="style.css" type="text/css"> <title>AwesomeCo Blog</title> </head></p><p><body> <header id="page_header"> <h1>AwesomeCo Blog!</h1> <nav> <ul> <li><a href="/">Latest Posts</a></li> <li><a href="archives">Archives</a></li> <li><a href="contributors">Contributors</a></li> <li><a href="contact">Contact Us</a></li> </ul> </nav></p><p>07f04e94233f6e4bde0ea14fe5db1f34.doc Version 1 Page 1 of 5 </header> <section id="posts"> <article class="post"> <header> <h2>How Many Should We Put You Down For? </h2> <p>Posted by Brian on <time datetime="2014-03-13T14:39">October 1st, 2010 at 2:39PM</time> </p> </header> <aside> <p> "Never give someone a chance to say no when selling your product." </p> </aside> <p>The first big rule in sales is that if the person leaves empty-handed, they're likely not going to come back. That's why you have to be somewhat aggressive when you're working with a customer, but you have to make sure you don't overdo it and scare them away. </p> <p>One way you can keep a conversation going is to avoid asking questions that have yes or no answers. For example, if you're selling a service plan, don't ever ask "Are you interested in our 3 or 5 year service plan?" Instead, ask "Are you interested in the 3 year service plan or the 5 year plan, which is a better value?" At first glance, they appear to be asking the same thing, and while a customer can still opt out, it's harder for them to opt out of the second question because they have to say more than just "no." </p> <footer> <p><a href="comments"><i>25 Comments</i></a> ...</p> </footer> </article> </section></p><p>07f04e94233f6e4bde0ea14fe5db1f34.doc Version 1 Page 2 of 5 <section id="sidebar"> <nav> <h3>Archives</h3> <ul> <li><a href="2014/03">March 2014</a></li> <li><a href="2014/02">February 2014</a></li> <li><a href="2014/01">January 2014</a></li> <li><a href="2014/12">December 2013</a></li> <li><a href="2014/11">November 2013</a></li> <li><a href="2014/10">October 2013</a></li> <li><a href="2014/09">September 2013</a></li> <li><a href="2014/08">August 2013</a></li> <li><a href="2014/07">July 2013</a></li> <li><a href="2014/06">June 2013</a></li> </ul> </nav> </section> <footer id="page_footer"> <p>© 2014 AwesomeCo.</p> <nav> <ul> <li><a href="http://www.awesome.co.uk">Home</a></li> <li><a href="about">About</a></li> <li><a href="terms.html">Terms of Service</a></li> <li><a href="privacy.html">Privacy</a></li> </ul> </nav> </footer> </body> </html></p><p>2. Save the file and view the page in a browser.</p><p>3. Create a new CSS file, save as style.css and view in a range of browsers. body{ width:960px; margin:15px auto;</p><p>07f04e94233f6e4bde0ea14fe5db1f34.doc Version 1 Page 3 of 5 font-family: Arial, "MS Trebuchet", sans-serif; } p{ margin:0 0 20px 0; } p, li{ line-height:20px; } header#page_header{ width:100%; } header#page_header nav ul, #page_footer nav ul{ list-style: none; margin: 0; padding: 0; } #page_header nav ul li, footer#page_footer nav ul li{ padding:0; margin: 0 20px 0 0; display:inline; } section#posts{ float: left; width: 74%; } section#posts aside{ float: right; width: 35%; margin-left: 5%; font-size: 20px; line-height: 40px; } section#sidebar{ float: left; width: 25%;</p><p>07f04e94233f6e4bde0ea14fe5db1f34.doc Version 1 Page 4 of 5 } footer#page_footer{ clear: both; width: 100%; display: block; text-align: center; }</p><p>4. View the page blog.html in a range of browsers.</p><p>07f04e94233f6e4bde0ea14fe5db1f34.doc Version 1 Page 5 of 5</p>

Html5 New Layout Tags Awesomeco Blog

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support