The markup for our mockup now needs to go between those body
tags we created.
<body>
tags in index.html, add the code for a very basic semantic overview of your theme:<div id="container"><!--layout container--> <header> <em>Header:</em> background image and text elements for header will go inside this div. </header><!--//header--> <!-- Begin #container2 this holds the content and sidebars--> <div id="container2"> <!-- Begin first section holds the left content columns--> <section> <!-- Begin content --> <article> <em>Main Content:</em> Post content will go here inside this div. </article> </section> <!-- Second section holds the right columns--> <section> <!-- #left sidebar --> <aside class="sidebar1"> <em>Left Side Bar:</em> Will contain WordPress content related links </aside><!--//.sidebar1 --> <!-- #right sidebar --> <aside class="sidebar2"> <em>Right Side Bar:</em> This will include additional ads, or non-content relevant items. </aside><!--//.sidebar2--> </section> </div><!--//#container2--> <nav id="mainNav"> <em>Top Nav:</em> For reading through straight text, it's best to have links at bottom (css will place it up top, for visual ease of use) </nav><!--//mainNav--> </div><!--//container--> <footer> <em>Footer:</em> Useful information and quick links for CSS design users who've had to scroll to the bottom plus site information and copyright will go here </footer>
index.html
file.We added some semantic markup to our HTML file to give us an idea of what will be going where. Note that the actual text won't be the same in our final theme, this is just to give us some direction as we complete our design.
So, what does this page look like if we open it in a browser?
As you can see, it's very simple right now, but it's a start.
If a search engine bot or someone using a text-only/text-to-speech browser or mobile device arrived and viewed our site, the following is the order they'd see things in:
So, now that we have an HTML file set up, the next step is to create a stylesheet for our CSS.
Here's a quick refresher on how to apply the following CSS selectors (if these seem unfamiliar or new to you, you may want to check out the resources in Chapter 1, Getting Started as a WordPress Theme Designer and brush up on your CSS skills):
div{...} p{...}
.#
" hash mark in front of their CSS selector for example, #container{...} #sidebar{...}
..
) in front of the selector's name for example, .floatLeft{...}
.