Team Carbon : Silver Team

US12-Implement HTML5 semantic elements to templates

Description

As a developer I wanted to layout the HTML5 semantic elements and how they should be used while developing our site, so that we can remain consistent when developing new pages.

Acceptance Criteria

  • Design temples and HTML5 semantic elements must be approved by the team.
  • Design templates must be reviewed and approved by Luxury Hotel Supplies

Tasks

  • Create and Modify the templates - 6 hrs
  • Review templates with the team - 30 min
  • Review with Luxury Hotel Supplies - TBD

Notes

Demo of HTML5 Semantic Elements:

Example of HTML5 Semantic Elements

  • Head tag - used to group all header items and navigation. (See example below)

    <header id="header">
    <div class="htop">
    <div style="float: left;"> <img src="image/Luxury-Hotel-Supplies-Logo.jpg" alt="Header Image" style="width: 197px;" /> </div>
    <div id="currency" style="padding-top: 15px;">
    <span>
    <table>
    <tr>
    <td><img src="image/SleepInn.jpg" alt="Sleep Inn Brand Logo" style="padding-right: 10px;" /></td>
    <td>
    <div style="line-height: 15px;">Matthew Pacholek</div>
    <div style="line-height: 15px;">Dolce Atlanta - Sleep Inn</div>
    </td>
    <td style="vertical-align: middle; padding-left: 10px;">
    <img src="image/bullet-d.png" alt="" />
    </td>
    </tr>
    </table>
    </span>
    <ul>
    <li> <a title="My Favorites">My Favorites</a> </li>
    <li> <a title="My Orders">My Orders</a> </li>
    <li> <a title="My Information">My Information</a> </li>
    </ul>
    </div>
    </div>
    <section class="hsecond">
    <div id="logo">
    <nav id="menu">
    <ul>
    <li class="categories_hor"><a><span style="padding-right: 50px;">Product Departments</span><img src="image/bullet-w.png" alt="" /></a>
    <div>
    <div class="column"> <a href="category.html">Bed, Bath & Table Linens</a>
    <div>
    <ul>
    <li><a href="category.html">Test 1 (0)</a></li>
    <li><a href="category.html">Test 2 (0)</a></li>
    <li><a href="category.html">Test 3 (1)</a></li>
    <li><a href="category.html">Test 4 (1)</a></li>
    </ul>
    </div>
    </div>
    <div class="column"> <a href="category.html">Bathroom Amenities</a>
    </div>
    <div class="column"> <a href="category.html">Guest Apparel</a>
    </div>
    <div class="column"> <a href="category.html">Uniforms</a>
    </div>
    <div class="column"> <a href="category.html">Signs & Engraving</a>
    </div>
    </div>
    </li>
    </ul>
    </nav>
    </div>
    <div id="search">
    <div class="button-search"></div>
    <input type="text" name="search" placeholder="Search" value="" />
    </div>
    <!--Mini Shopping Cart Start-->
    <section id="cart">
    <div class="heading">
    <h4><img width="32" height="32" alt="" src="image/cart-bg.png"></h4>
    <a><span id="cart-total">2 item(s) - $710.18</span></a> </div>
    <div class="content">
    <div class="mini-cart-info">
    <table>
    <tr>
    <td class="image"><a href="product.html"><img src="image/product/product_45.jpg" alt="Product 1" title="Product 1" /></a></td>
    <td class="name"><a href="product.html">Product 1</a></td>
    <td class="quantity">x&nbsp;1</td>
    <td class="total">$589.50</td>
    <td class="remove"><img src="image/remove-small.png" alt="Remove" title="Remove" /></td>
    </tr>
    <tr>
    <td class="image"><a href="product.html"><img src="image/product/product_45.jpg" alt="Product 2" title="Product 2" /></a></td>
    <td class="name"><a href="product.html">Product 2</a></td>
    <td class="quantity">x&nbsp;1</td>
    <td class="total">$120.68</td>
    <td class="remove"><img src="image/remove-small.png" alt="Remove" title="Remove" /></td>
    </tr>
    </table>
    </div>
    <div class="mini-cart-total">
    <table>
    <tr>
    <td class="right"><b>Sub-Total:</b></td>
    <td class="right">$601.00</td>
    </tr>
    <tr>
    <td class="right"><b>Tax:</b></td>
    <td class="right">$4.00</td>
    </tr>
    <tr>
    <td class="right"><b>Shipping:</b></td>
    <td class="right">$105.18</td>
    </tr>
    <tr>
    <td class="right"><b>Total:</b></td>
    <td class="right">$710.18</td>
    </tr>
    </table>
    </div>
    <div class="checkout"><a class="button" href="cart.html">View Cart</a> &nbsp; <a class="button" href="checkout.html">Checkout</a></div>
    </div>
    </section>
    <!--Mini Shopping Cart End-->
    <div class="clear"></div>
    </section>
    </header>

  • Section tag - used to group specific content areas of the site. (see example below)

    <section id="cart">
    <div class="heading">
    <h4><img width="32" height="32" alt="" src="image/cart-bg.png"></h4>
    <a><span id="cart-total">2 item(s) - $710.18</span></a> </div>
    <div class="content">
    <div class="mini-cart-info">
    <table>
    <tr>
    <td class="image"><a href="product.html"><img src="image/product/product_45.jpg" alt="Product 1" title="Product 1" /></a></td>
    <td class="name"><a href="product.html">Product 1</a></td>
    <td class="quantity">x&nbsp;1</td>
    <td class="total">$589.50</td>
    <td class="remove"><img src="image/remove-small.png" alt="Remove" title="Remove" /></td>
    </tr>
    <tr>
    <td class="image"><a href="product.html"><img src="image/product/product_45.jpg" alt="Product 2" title="Product 2" /></a></td>
    <td class="name"><a href="product.html">Product 2</a></td>
    <td class="quantity">x&nbsp;1</td>
    <td class="total">$120.68</td>
    <td class="remove"><img src="image/remove-small.png" alt="Remove" title="Remove" /></td>
    </tr>
    </table>
    </div>
    <div class="mini-cart-total">
    <table>
    <tr>
    <td class="right"><b>Sub-Total:</b></td>
    <td class="right">$601.00</td>
    </tr>
    <tr>
    <td class="right"><b>Tax:</b></td>
    <td class="right">$4.00</td>
    </tr>
    <tr>
    <td class="right"><b>Shipping:</b></td>
    <td class="right">$105.18</td>
    </tr>
    <tr>
    <td class="right"><b>Total:</b></td>
    <td class="right">$710.18</td>
    </tr>
    </table>
    </div>
    <div class="checkout"><a class="button" href="cart.html">View Cart</a> &nbsp; <a class="button" href="checkout.html">Checkout</a></div>
    </div>
    </section>


  • Nav tag - Used to group all navgational elements together. (See example below)

    <nav id="menu">
    <ul>
    <li class="categories_hor"><a><span style="padding-right: 50px;">Product Departments</span><img src="image/bullet-w.png" alt="" /></a>
    <div>
    <div class="column"> <a href="category.html">Bed, Bath & Table Linens</a>
    <div>
    <ul>
    <li><a href="category.html">Test 1 (0)</a></li>
    <li><a href="category.html">Test 2 (0)</a></li>
    <li><a href="category.html">Test 3 (1)</a></li>
    <li><a href="category.html">Test 4 (1)</a></li>
    </ul>
    </div>
    </div>
    <div class="column"> <a href="category.html">Bathroom Amenities</a>
    </div>
    <div class="column"> <a href="category.html">Guest Apparel</a>
    </div>
    <div class="column"> <a href="category.html">Uniforms</a>
    </div>
    <div class="column"> <a href="category.html">Signs & Engraving</a>
    </div>
    </div>
    </li>
    </ul>
    </nav>


  • Footer tag - Used to group all footer elements and content together. (see example below)

    <footer id="footer">
    <div class="fpart-inner">
    <div class="column">
    <h3>Information</h3>
    <ul>
    <li><a href="about-us.html">About Us</a></li>
    <li><a href="delivery-info.html">Delivery Information</a></li>
    <li><a href="privacy-policy.html">Privacy Policy</a></li>
    </ul>
    </div>
    <div class="column">
    <h3>Customer Service</h3>
    <ul>
    <li><a href="contact-us.html">Contact Us</a></li>
    <li><a href="#">Returns</a></li>
    <li><a href="sitemap.html">Site Map</a></li>
    </ul>
    </div>
    <div class="column">
    <h3>My Account</h3>
    <ul>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Order History</a></li>
    <li><a href="#">Favorites</a></li>
    <li><a href="#">Newsletter</a></li>
    </ul>
    </div>
    <!-- Contact Details Start-->
    <div class="contact contact_icon">
    <h3>Contact Us</h3>
    <ul>
    <li class="address">123 State Street, Chicago, IL 60618</li>
    <li class="mobile">1-312-999-9999</li>
    <li class="fax">1-312-999-9999</li>
    <li class="email"><a href="mailto:info@contact.com">info@luxuryhotelsupplies.com</a></li>
    </ul>
    </div>
    <!-- Contact Details End-->
    <div class="clear"></div>
    <div id="powered">
    <!-- Payment Images Icon Start-->
    <div class="payments_types part3"> <img src="image/payment_paypal.png" alt="paypal" title="PayPal"> <img src="image/payment_american.png" alt="american-express" title="American Express"> <img src="image/payment_2checkout.png" alt="2checkout" title="2checkout"> <img src="image/payment_maestro.png" alt="maestro" title="Maestro"> <img src="image/payment_discover.png" alt="discover" title="Discover"> </div>
    <!-- Payment Images Icon End-->
    <!-- Powered by Text Start-->
    <div class="powered_text part3">
    <p>Luxury Hotel Supplies © 2013</p>
    </div>
    <!-- Powered by Text End-->
    <!-- Follow Social Icons Start-->
    <div class="social part3"> <a href="#" target="_blank"><img src="image/facebook.png" alt="Facebook" title="Facebook"></a> <a href="#" target="_blank"><img src="image/twitter.png" alt="Twitter" title="Twitter"> </a> <a href="#" target="_blank"> <img src="image/googleplus.png" alt="Google+" title="Google+"> </a> <a href="#" target="_blank"> <img src="image/pinterest.png" alt="Pinterest" title="Pinterest"> </a> <a href="#" target="_blank"> <img src="image/rss.png" alt="RSS" title="RSS"> </a> <a href="http://www.vimeo.com/#" target="_blank"> <img src="image/vimeo.png" alt="Vimeo" title="Vimeo"> </a> </div>
    <!-- Follow Social Icons End-->
    <div class="clear"></div>
    </div>
    <!-- Back to Top Button Start-->
    <div class="back-to-top" id="back-top"><a title="Back to Top" href="javascript:void(0)" class="backtotop">Top</a></div>
    <!-- Back to Top Button End-->
    </div>
    </footer>