Professional Documents
Culture Documents
HTML Layouts: HTML Layout - Useful Tips
HTML Layouts: HTML Layout - Useful Tips
HTML Layouts: HTML Layout - Useful Tips
<table width="800" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#EEEEEE;height:400px;width:700px;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Copyright W3Schools.com</td> </tr> </table> </body> </html>
<div id="container" style="width:800px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:400px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:400px;width:700px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright W3Schools.com</div> </div> </body> </html> PRACTICE (Exercise 11): 1. Create a web page named "css_layout.html" and add the code above to it.
3- HTML layout - using an external stylesheet. See the folder called "layouts" for an example. This demonstrates using the div tag only in the web page to place content and using the external CSS file to control where the div tags appear on the web page. Please note the use of the ID attribute on the div tags. This is similar to CSS classes.
USING TEMPLATES- Practice 6 Download the zipped folder "crosswalk.zip". This is a free website template that was downloaded from http://www.freecsstemplates.org/. Explore the files and folders that make up this template and try customizing it.