index.html

   1 <?xml version="1.0" encoding="iso-8859-1"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.1//EN" "xhtml11.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   4  <head>
   5  <title>WebmasterWorld CSS Crash Course</title>
   6  <style type="text/css">
   7   div.links {
   8     color: green;
   9     text-decoration: none;
  10     background-color: LightGray;
  11   }
  12   div.links a, div.links a:active, div.links a:hover, div.links a:visited {
  13     margin: 0px;
  14     padding: 0 5px 0 5px;
  15     color: green;
  16     text-decoration: none;
  17   }
  18   div.links a:hover {
  19     text-decoration: underline;
  20   }
  21   div.links h3 {
  22     margin: 0px;
  23     padding: 5px 5px 2px 5px;
  24     color: blue;
  25   }
  26   body {
  27     font-family: Georgia;
  28     font-size: 12px;
  29   }
  30   h1 {
  31     font-size: 16 px;
  32     color: red;
  33   }
  34   div#content {
  35     font-family: Verdana;
  36   }
  37   em#pirmas {
  38     color: Red;
  39   }
  40   em[id="antras"] {
  41     color: Yellow;
  42   }
  43   em {
  44     color: blue !important;
  45   }
  46   p a {
  47     color: inherit;
  48   }
  49   p > strong {
  50     color: red;
  51   }
  52   @media print {
  53     * {
  54       font-family: Arial;
  55       color: black !important;
  56       background-color: white !important;
  57     }
  58     em {
  59       color: black !important;
  60     }
  61   }
  62  </style>
  63  </head>
  64  <body>
  65  <h1>WebmasterWorld CSS Crash Course</h1>
  66
  67  <!-- Top section links -->
  68  <div class="links">
  69  <a href="#">Home</a> -
  70  <a href="#">Section 1</a> -
  71  <a href="#">Section 2</a> -
  72  <a href="#">Section 3</a> -
  73  <a href="#">Section 4</a> -
  74  <a href="#">Section 5</a> -
  75  <a href="#">Contact</a>
  76  </div>
  77  <!-- End Top section links -->
  78  <!-- Content here -->
  79  <div id="content">
  80  <p>The WebmasterWorld CSS Crash Course is a set of <em id="pirmas"><strong>hands</strong> on</em>
  81  tutorials covering the basics of Cascading StyleSheets. The course
  82  is intended to give members a useful introduction to CSS and the
  83  neccessary tools to learn more.</p>
  84
  85  <p>This xhtml document has no presentational elements whatsoever,
  86  giving Search Engines and Users a fast, light document that makes
  87  good semantic sense.
  88  </p>
  89
  90  <p>Some of the advantages of a CSS layout include:</p>
  91
  92  <ul>
  93  <li>Smaller file sizes</li>
  94  <li><strong>Faster</strong> loading pages</li>
  95  <li>Greater accessibility</li>
  96  <li>Ease of maintenance</li>
  97  </ul>
  98
  99  <p>By the end of the course you should be really enjoying CSS and
 100  hopefully become regulars to the great
 101  <a href="http://www.webmasterworld.com/forum83/">CSS Forum</a>
 102  WebmasterWorld recently put up.</p>
 103
 104  <p>Copyright &copy; Nobody. Feel free to use what you need.</p>
 105  </div>
 106  <!-- End Content -->
 107
 108  <!-- Begin Righthand Filler -->
 109  <div>
 110  <h2>SEO Friendly Layout</h2>
 111  <p>One of the many advantages to a CSS layout is the ease in which
 112  one can make search engine friendly content appear high in the
 113  code.</p>
 114
 115  <p>As most members here are obsessed with SEO we'll be focusing on
 116  this subject as we develop the page. This right hand section could
 117  be placed <strong>anywhere</strong> in the <em id="antras">code flow</em> as
 118  we'll be using a fairly well established 3 column fluid layout
 119  using absolute positioning.</p>
 120
 121  <p>Personally, I find the righthand section very useful for pages that
 122  contain little <em>body text</em>: Such as product lists etc. The
 123  absolute positioning allows the user to see the products where they
 124  expect them but, the search engines to see the right hand text first
 125  in the code flow.</p>
 126  </div>
 127  <!-- End Righthand Filler -->
 128
 129  <!-- Begin Lefthand Navigation -->
 130  <div class="links">
 131  <h3>Section Navigation</h3>
 132  <a href="#">Sub page 1</a>
 133  <a href="#">Sub page 2</a>
 134  <a href="#">Sub page 3</a>
 135  <a href="#">Sub page 4</a>
 136  <a href="#">Sub page 5</a>
 137  <a href="#">Sub page 6</a>
 138  <a href="#">Sub page 7</a>
 139  </div>
 140
 141  </body>
 142 </html>