HomeInformationTutorialsResourcesContact
What is This?
This is the online tutorial/resource blog of Geng Hao/doughnutcrazy.
If you have any questions or comments regarding this blog, feel free to leave a tag under "Contact" or leave a comment with the comment function in every post.
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.

  1. 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. -->


  2. 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!


  3. 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.


  4. 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: