HTML Layout

ஒரு webpage user-ன் பார்வைக்கு எவ்வாறு தெரியவேண்டும் என்பதை வடிவமைப்பதே HTML layout என்பதாகும். இதில் div tag அதிக அளவில் பயன்படுத்தபடுகிறது. ஏனெனில் வடிவமைக்க மிக சுலபமாக இருக்கும். layout-ல் மிக முக்கியமானது css, இதை அடிப்படையாக கொண்டு தான் layout-ன் வடிவம் display செய்யபடுகிறது.

HTML Layout with border

Example

Try this code 
<div class="container0">
    <div class="header0">Header</div>
    <div class="content0">
        <div class="left-content0">Left content</div>
        <div class="right-content0">right content</div>
    </div>
    <div class="footer0">footer</div>
</div>
<style>
    .container0{
        border:1px solid #111;
        width:100%;
    }
    .header0{
        border:1px solid #111;
        width:100%;
        height:50px;
    }
    .content0{
        border:1px solid #111; 
        width:100%;
    }
    .left-content0{
        border:1px solid #111;
        width:70%;
        height: 300px;
    }
    .right-content0{
        border:1px solid #111;
        width:30%;
        height: 300px;
    }
    .footer0{
        border:1px solid #111;
        width:100%;
        height:50px;
 
    }
</style>
Output:
Header
Left content
right content
footer

HTML Layout with floating

Example

Try this code 
<div class="container1">
    <div class="header1">Header</div>
    <div class="content1">
        <div class="left-content1">Left content</div>
        <div class="right-content1">right content</div>
    </div>
    <div class="footer1">footer</div>
</div>
<style>
    .container1{
        width:100%;
        box-sizing: border-box;
    }
    .header1{
 
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
    }
    .content1{
        width:100%;
    }
    .left-content1{
        background-color:#93a43e;
        width:20%;
        height: 300px;
        float:left;
        color:#fff;
    }
    .right-content1{
        background-color:#feac00;
        width:80%;
        height: 300px;
        float:left;
        color:#fff;
    }
    .footer1{
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
        clear:both;
    }
</style>
Output:
Header
Left content
right content
footer
Note: float என்பது ஒரு block எங்கு display ஆகவேண்டும் என்பதை வரையறுக்கிறது. eg : float ="left " or float ="right"

HTML Column Layout

Example

Try this code 
<div class="container2">
    <div class="header2">Header</div>
    <div class="content2">
        <div class="left-content2">Left content</div>
        <div class="middle-content2">Middle content</div>
        <div class="right-content2">right content</div>
    </div>
    <div class="footer2">footer</div>
</div>
<style>
    .container2{
        width:100%;
    }
    .header2{
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
    }
    .content2{
        width:100%;
    }
    .left-content2{
        background-color:#93a43e;
        width:20%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .middle-content2{
        background-color:#1e6abc;
        width:60%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .right-content2{
        background-color:#feac00;
        width:20%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .footer2{
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
        clear:both;
    }
</style>
Output:
Header
Left content
Middle content
right content
footer

HTML Layout With Menu

Example

Try this code 
<div class="container2">
    <div class="header2">Header</div>
    <div class="nav-bar2">
        <ul>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
        </ul>
    </div>
    <div class="content2">
        <div class="left-content2">
            <p>Side menu</p>
            <div class="side-menu">
                <ul>
                    <li><a href="#">menu1</a></li>
                    <li><a href="#">menu2</a></li>
                    <li><a href="#">menu3</a></li>
                </ul>
            </div>
        </div>
        <div class="middle-content2">Middle content</div>
        <div class="right-content2">right content</div>
    </div>
    <div class="footer2">footer</div>
</div>
<style>
    .container2{
        width:100%;
    }
    .header2{
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
    }
    .nav-bar2{
        background-color:#00a0d2;
        width:100%;
        height:50px;
        color:#fff; 
    }
    .content2{
        width:100%;
    }
    .left-content2{
        background-color:#93a43e;
        width:20%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .middle-content2{
        background-color:#1e6abc;
        width:60%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .right-content2{
        background-color:#feac00;
        width:20%;
        height: 200px;
        float:left;
        color:#fff;
    }
    .footer2{
        background-color:#005082;
        width:100%;
        height:50px;
        color:#fff;
        clear:both;
    }
 
    .nav-bar2 ul{
        list-style-type: none;
        display: inline;
    }
    .nav-bar2 ul li{
        float: left;
        padding: 5px;
    }
    .side-menu ul{
        list-style-type: none;
        padding-left:5px;
    }
    .side-menu ul li{
        padding-top:5px;  
    }
</style>
Output:
Header

Side menu

Middle content
right content
footer

Comments

Amrin 26th September,2022 02:39 am
Easy aga iruku css and web development podunga thank you sir label enandrathu purila onu neraya tutuoril podunga supera understand aguthu u are right teacher
g.harishraj 29th July,2021 01:17 pm
hi sir, please give the notes are pdf in free