This is one topic which I promised I would be explaining in detail. As the name suggests, it has go to do with dividing a space into different sections. We do this in order to effectively organize content in a web page. This is a slightly large topic and today I would be giving you an overall picture on what it is all about.
Let’s start with an example which would Illustrate how Divisions are applied on a web page.
So, what you see above is a basic layout of a web page. It contains the header, a body and a footer. As you can clearly see the whole page has been divided into 3 sections. This is done by using the concept of divisions. It is actually a kind of tool which a web designer could use while designing a web page.
Before applying the divisions concept, we should be clear on how we are going to divide the page. So, once we have decided that, the next thing to think about would be the order of sections. In this case I decided that I need to have 3 sections- Header, Body and Footer. And then I wanted the Header to be on top, followed by the body and then the footer.
In order to implement an order, we would need to use HTML. It is a markup language which would help you to design the content of a web page. Whenever we are using divisions in coding, it is abbreviated as div. So, don’t be surprised if you see this word somewhere.
We can apply divisions in two ways- By Using a Class or an Id. I will explain what each means a little later. This is what I wrote in HTML, to design the page. Have a look.
Let me explain what this means. As you can see there are 3 divisions abbreviated as div. Each one represents a section. The first one is the header followed by the Border and finally the footer. Please Note that the order is very important. Let’s see an example where I inter change the order.
See the difference? I just made a minor change to the HTML. And the whole structure has been re-ordered!
See what I wrote-
As you would notice, I pushed the Header Division down and brought up the Body Division. And as a result has made a significant change to the web page just by changing 1 line of code!
Compare the two results-
The one I wrote earlier
The one I wrote now
Let me formally explain the syntax of division
<div id/class> Content</div>
I will explain id and class in my next blog
The content in the curly braces is basically the action being applied on the Section. You can apply colors, set the height and width and many more things.
Will see you tomorrow!