With a page layout in place, you can finally start writing some HTML5 code. Begin with your standard page layout diagram and create an HTML template to implement the diagram in working code. The HTML template is quite simple because most of the design should happen in the CSS. Keep these guidelines in mind:
Remember that the template is simply a framework. The HTML is mainly blank. It's meant to be duplicated and filled in with live data.
It has a reference to the style sheet. External CSS is critical for large web projects because many pages refer to the same style sheet. Make a reference to the style sheet, even though it may not actually exist yet.
Include all necessary elements. The elements themselves can be blank, but if your page needs a list for a menu, add an empty list. If you need a content div, put it in place.
Create a prototype from the template. You'll need sample data in order to test the CSS. Build a prototype page that contains typical data. The amount of data should be typical of the actual site so that you can anticipate formatting problems.
It's very possible that you'll never manually put content in your template. There are several options for automating this process.
The HTML template should be easy to construct because everything you need is in the page template diagram.
Here's the HTML code for the prototype:
<!DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>CS Standard Template</title> <link rel = "stylesheet" type = "text/css" href = "csStd.css" /> </head> <body> <div id = "all"> <!-- This div centers a fixed-width layout → <div id = "heading"> <h1>Heading</h1> </div><!-- end heading div → <div id = "menu"> menu <ul> <li><a href = "#">one</a></li> <li><a href = "#">two</a></li> <li><a href = "#">three</a></li> </ul> </div> <!-- end menu div → <div class = "content"> <h2 id="tab1" >Content 1</h2> One or more of these will contain content One or more of these will contain content One or more of these will contain content One or more of these will contain content One or more of these will contain content One or more of these will contain content One or more of these will contain content One or more of these will contain content </div> <!-- end content div → <div class = "content"> <h2 id="tab2" >Content 2</h2> One or more of these will contain content One or more of these will contain content One or more of these will contain content One or more of these will contain content One or more of these will contain content One or more of these will contain content One or more of these will contain content One or more of these will contain content </div> <!-- end content div → <div id = "footer"> contact and footer info </div> <!-- end footer div → </div> <!-- end all div → </body> </html>
People commonly start writing pages at this point, but that's a dangerous idea. Don't use any real data until you're certain of the general HTML structure. You can always change the style later, but if you create 100 pages and then decide that each of them needs another tag, you have to go back and add 100 divs.