HTML layout in Hindi

Posted on by

दोस्तों, HTML Tutorial के इस post ( HTML layout in Hindi ) के जरिये web page का layout के बारे में जानेगे |

Contents hide
1 HTML layout kya hota hai ( HTML Layout in Hindi )
1.1 Table Based Layout in HTML
2 Tutorial Republic
2.1 Table layout example
2.2 Div Based layout in HTML
3 Tutorial Republic
3.1 Table layout example
3.2 HTML layout in Hindi Video
3.3 Layout using structural elements in html5
4 Tutorial Republic
4.1 Table layout example

HTML layout kya hota hai ( HTML Layout in Hindi )

यदि आप जानना चाहते हो की HTML layout ( What is HTML Layout in Hindi ) क्या है तो आप बिलकुल सही जगह आये है | में आपको इस HTML tutorial के post के जरिये HTML layout को आसान भाषा में explain करने की कोशिश करूँगा ताकि आप आसानीसे समझ सको |

HTML Layout और कुछ नहीं बल्कि web page पर HTML elements की position arrange करना है , जिससे की website proper structure के साथ attractive लगे |

आपने देखा होगा कि internet पर अधिकांश websites आम तौर पर अपने content को multiple row and column में प्रदर्शित करती हैं |

User website के content को magazine या newspaper के formate की तरह अच्छी तरह से read और write कर सके उसके लिए HTML layout का use किया जाता है |

HTML tags, जैसे <table> , <span> , <p> , <header> , <footer> आदि का उपयोग करके और उनमें कुछ CSS स्टाइल ऐड करके आसानी से HTML layout set किया जा सकता है।

Table Based Layout in HTML

Table HTML में layout बनाने का सबसे सरल तरीका प्रदान करता है। आम तौर पर, इसमें text, image आदि जैसी सामग्री row और column में arrange किये जाते है |

निम्नलिखित layout 3 rows और 2 column वाली HTML table का उपयोग करके बनाया गया है – पहली और आखिरी row, table के colspan attribute का उपयोग करके दोनों columns तक फैलाई गई है:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table Layout in HTML</title>
</head>
<body style="margin:0px;">
        <table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;">
        <tr>
            <td colspan="2" style="padding:10px 20px; background-color:#bcdfef;">
                <h1 style="font-size:24px;">Tutorial Republic</h1>
            </td>
        </tr>
        <tr style="height:170px;">
            <td style="width:20%; padding:20px; background-color:#bcefe5; vertical-align: top;">
                <ul style="list-style:none; padding:0px; line-height:24px;">
                    <li><a href="#" style="color:#333;">Home</a></li>
                    <li><a href="#" style="color:#333;">About</a></li>
                    <li><a href="#" style="color:#333;">Contact</a></li>
                </ul>
            </td>
            <td style="padding:20px; background-color:#f2f2f2; vertical-align:top;">
                <h2>Table layout example</h2>
                <p>This is simple way to arrange content on web pages</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="padding:5px; background-color:#acb3b9; text-align:center;">
                <p></p>
            </td>
        </tr>
    </table>     
</body>
</html>

Output :

Tutorial Republic

Table layout example

This is simple way to arrange content on web pages

हमने table tag in HTML in Hindi के post में colspan attribute और rowspan attribute के बारेमे explain किया है तो आप उस post को भी read कीजिये |

उपरोक्त उदाहरण में layout बनाने के लिए table का उपयोग किया है – हलाकि यह विधि गलत नहीं है, लेकिन यह recommnded नहीं है।

क्यों की table का उपयोग करके बनाए गए layout अक्सर web page पर बहुत धीमी गति से प्रस्तुत होते है | जिससे page speed slow हो जाती है | इसलिए HTML layout बनाने के लिए table और inline styles को avoid करे |

Div Based layout in HTML

HTML में layout बनाने का सबसे common तरीका <div> element का उपयोग करना है। <div> ( division ) element का उपयोग content के एक block को चिह्नित ( marking ) करने या HTML document के अंदर अन्य element का set define करने के लिए किया जाता है |

यदि आवश्यक हो तो एक div element के अंदर अन्य div element शामिल कर सकते है |

निम्न उदाहरण में एक से अधिक column layout बनाने के लिए div element का उपयोग किया है। इसका output भी table layout की तरह आएगा जैसे की हमने ऊपर के example में देखा |

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Div Layout</title>
<style>
    body {
        font: 14px Arial,sans-serif; 
        margin: 0px;
    }
    .header {
        padding: 10px 20px;
        background: #bcdfef; 
    }
    .header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2; 
    }
    .nav, .section {
        float: left; 
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    .nav {            
        width: 20%;             
        background: #bcefe5;
    }
    .section {
        width: 80%;
    }
    .nav ul {
        list-style: none; 
        line-height: 24px;
        padding: 0px; 
    }
    .nav ul li a {
        color: #333;
    }    
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .footer {
        background: #acb3b9;            
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Tutorial Republic</h1>
        </div>
        <div class="wrapper clearfix">
            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="section">
                 <h2>Table layout example</h2>
                <p>This is simple way to arrange content on web pages</p>
            </div>
        </div>
        <div class="footer">
            <p></p>
        </div>
    </div>
</body>
</html>

Output

Tutorial Republic

Table layout example

This is simple way to arrange content on web pages

हमने यह layout CSS float techniques का उपयोग करके बनाया है, क्योंकि अधिकांश web browser इसका समर्थन करते हैं।

वैकल्पिक रूप से, आप modern और अधिक flexible layout बनाने के लिए CSS3 flexbox का भी उपयोग कर सकते हैं। CSS3 flexbox के बारे मे हम CSS3 के course series में सीखेंगे |

DIV element और CSS का उपयोग करके हम बेहतर web page layout बना बना सकते हैं। आप केवल एक CSS file को add करके अपनी website के सभी pages का layout बदल सकते हैं।

HTML layout in Hindi Video

Layout using structural elements in html5

HTML5 ने web page के विभिन्न भागों को अधिक अर्थपूर्ण तरीके से परिभाषित ( define ) करने के लिए new structural elements जैसे <header> , <footer> , <section> , <nav> आदि को introduced किया है।

आप इन elements को आमतौर पर उपयोग की जाने वाली classes जैसे .header, .footer, .nav, .section, आदि के replacement के रूप में मान सकते हैं।

निम्न उदाहरण में हमने new HTML5 structural elements का उपयोग करके same ऊपर दिये गये example की तरह layout बनाया है |

<style>
    body {
        font: 14px Arial,sans-serif; 
        margin: 0px;
    }
    header {
        padding: 10px 20px;
        background: #bcdfef; 
    }
    header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2;  
    }
    nav, section {
        float: left; 
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    section {
        width: 80%;
    }
    nav {
        width: 20%;             
        background: #bcefe5;
    }    
    nav ul {
        list-style: none; 
        line-height: 24px;
        padding: 0px; 
    }
    nav ul li a {
        color: #333;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    footer {
        background: #acb3b9;            
        text-align: center;
        padding: 5px;
    }
</style>
    <div class="container">
        <header>
            <h1>Tutorial Republic</h1>
        </header>
        <div class="wrapper clearfix">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <section>
                 <h2>Table layout example</h2>
                <p>This is simple way to arrange content on web pages</p>
            </section>
        </div>
        <footer>
            <p></p>
        </footer>
    </div>

Output

Tutorial Republic

Table layout example

This is simple way to arrange content on web pages

यह भी पढ़े |