Titan Fusion

Alexandar Tzanov's Personal Blog

Basic HTML5 Template


The Basic HTML5 Template is perfect for testing code snippets. Its purpose is to save you time from having to code a new template every time you want to start working on a new script or test some other code sample. It is just the very basics, and it only supports modern browsers.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.  
  6.     <!-- Basic HTML5 template for quick sample and testing pages.
  7.         No compatibility for older browsers.
  8.         Author: Alexandar Tzanov
  9.         Library: Source Code DNA -->
  10.  
  11.     <title>Basic HTML 5 Template</title>
  12.  
  13.     <meta name="description" content="Basic HTML5 template.">
  14.     <meta name="author" content="Source Code DNA">
  15.  
  16.     <meta content="width=device-width, initial-scale=1.0, user-scalable=yes" name="viewport" />
  17.     <!-- <link href="template/test.css?v=1.0" rel="stylesheet" type="text/css"> -->
  18.  
  19.     <style>
  20.     body
  21.     {
  22.         font-size: 62.5%;
  23.         font-family: Sans-Serif;
  24.         color: black;
  25.     }
  26.     #wrapper
  27.     {
  28.         margin: 28px auto 28px auto;
  29.         width: 1024px;
  30.     }
  31.     header
  32.     {
  33.         text-align: center;
  34.         padding: 8px;
  35.         margin-bottom: 10px;
  36.         background: -webkit-linear-gradient(rgba(230,160,9,0.67) 0%, #ffffff 100%)
  37.     }
  38.     section
  39.     {
  40.         padding: 8px;
  41.         background: white;
  42.     }
  43.     footer
  44.     {
  45.         text-align: center;
  46.         padding: 8px;
  47.         margin-top: 10px;
  48.         background: -webkit-linear-gradient(#ffffff 10%, rgba(230,160,9,0.67) 90%);
  49.         color: grey;
  50.     }
  51.     </style>
  52.  
  53.     <!--[if lt IE 9]>
  54.         <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
  55.     <![endif]-->
  56.     <!-- <script type="text/javascript">
  57.     </script> -->
  58. </head>
  59. <body>
  60.     <div id="wrapper">
  61.         <header>
  62.             <h1>Hello World.</h1>
  63.         </header>
  64.         <section id="secton1">
  65.             <h2>Intro</h2>
  66.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  67.         </section>
  68.         <footer>
  69.             <p>Source Code DNA by Alexandar Tzanov.</p>
  70.         </footer>
  71.     </div>
  72.  
  73.     <!-- Best to load the JavaScript files last to improve the page speed. -->
  74.     <!-- <script src="lib/test.js" type="text/javascript" charset="utf-8"></script> -->
  75. </body>
  76. </html>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.