HTML: Creating a layout
You'll be learning how to create a simple layout with DIV layers in this tutorial.DIV layers are simply layers that contain your information, but can be changed to suit your needs.
- A layout always starts with its base, which is its HTML. Here's a brief walkthrough (which you can copy and paste it in your code if you are unsure of the format):
<HTML>
<title>This is the title of your webpage which appears on the top of your browser.<title>
<head><!-- This is where your stylesheets and scripts are placed. -->
</head><!-- Do remember to close this section off when you are completed with it! -->
<body><!-- This is where all of your content come in - be it text, images or anything of that sort. -->
</body><!-- Do remember to close this section off when you are finished with your content! -->
</html><-- This is where everything in your webpage ends. --> - So, after you've settled in, it's time to work on a simple CSS stylesheet.
A stylesheet defines how all the elements in your webpage look like - the colour of your text, the size of your headers, the emphasis of your links, and much, much more.
For this tutorial, I would like the text to be in "Arial", with a size of "8 points (8pt)", in "light grey (#999999)".
Your stylesheet will look like this:<style type="text/css">
body {
background-color: #ffffff /* #ffffff is actually white */;
font-family: Arial;
font-size: 8pt;
font-weight: normal /* You can change this to "bold" if you want emphasis */;
color: #999999;
}
</style>
Of course, you can customise your stylesheet however you like. This is only an example.
Place your stylesheet in the "head" section! - This is the fun part, where you get your layout done. DIV layers are very flexible - they can be tweaked to have a different position. So, you won't need to read all your information from the edge of the screen anymore!
For this tutorial, I would like my DIV layer to be positioned "200 pixels (200px)" from the top, "150 pixels (150px)" from the left and have a width of "400 pixels (400px)".
But before you do that, do remember that all these elements are to be done on a stylesheet. First, name your DIV layer. For this tutorial, I will name it "Layer1". Do note that the names cannot start with a number.
So, let's get on to customising the DIV layer! Add this in your CSS stylesheet:#Layer1 {
position: absolute /* This must be included to give the DIV layer a specific position! */;
top: 200px;
left: 150px;
width: 400px;
}
Of course, you can add a little padding, fix the margins and give it a border if you'd like! Once again, this is an example. - Now it's time to add the layout in your webpage. It must be added in the "body" section of your HTML!
It will look like this:<div id="Layer1">
This is where your content comes in!
You can add in some headers and images - it is completely customisable!
I'll leave it to you to do that! :)
</div>
Isn't it simple? Now you've got a layout. If you'd like to add a sidebar or something extra, just create a new DIV layer, and customise it as you wish. Hope you have fun, and do enjoy creating your layout!
Labels: creating a layout
Posted by Geng Hao
5 comment(s) | Leave a comment
