HTML Layout In Hindi – What is Webpage Layout In HTML?

HTML

HTML Layout In Hindi – What is Webpage Layout in HTML in Hindi? – Webpage Layout Ka Web Designing Mein Ek Bahut Ki Important Part Hai. Kyuki, Ek Web Designer Ki Koshish Hoti Hi Ek Attractive Website Design Karne Ki, Aur Agar Page Ko Design Karte Time Uske Graphical Elements Ko Ek Systematic Tareeke Se Lagaya Jaye Toh Webpage Bahut Attractive Lagega. Graphical Elements Ke Iss Systematic Placement Ko Hi Webpage Layout Kaha Jata Hai.

HTML Layout In Hindi

WWW Par Har Website Ka Apna Ek Layout Hota Hai. Neeche ek sample layout dikhaya gya hai:

Standard Webpage Layout Sections:

  • Header: Iss Section Mein Website Ka Logo, Website Ka Proper Naam Aur Website Ki Contact Information Di Jati Hai.
  • Menu/ Page Index/ Sidebar: Iss Section Ko Menu, Page Index Ya Phir Sidebar Bhi Keh Sakte Hain. Sidebar Left Ya Right Kisi Bhi Taraf Rakha Ja Sakta Hai. Isme Website Ke Kuch Quick Links Provide Kiye Jaate Hain.
  • Content Area: Ye Area Webpage Sections Me Sabse Bda Area Hota Hai, Isme Webpage Ka Main Content Likha Jata Hai.
  • Footer: Ye Section Webpage Ka Sabse Neeche Wala Section Hota Hai, Jisme Copyright Information Di Jati Hai.

HTML Webpage Layout Using <table> Tag

Kisi Bhi Webpage Ka Layout Set Karne Ka Sabse Asaan Tareeka Hai Tables Ko Istemal Karke, Jisme Graphical Elements Ko Place Karna Bahut Hi Easy Hota Hai. Aaiye Ek Example Mein Samajhte Hain Ki Aisa Kaise Possible Hai:

Also Read: HTML Tables

Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout using Tables</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr>
             <td>nav links here...</td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br />
               <a href="">HTML</a><br />
               <a href="">PHP</a><br />
               <a href="">PERL...</a>
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Main Content and Articles here...
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2021 masterprogramming.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>


Output:

HTML Webpage Layout Using <div> Tag

HTML Webpage Ka Layout Set Karne Ka Doosra Easy Tareeka Hai <div> Tag Ka Istemal Karke. <div> Tag Ek Block-Level Element Hai, Jiske Istemal Se Easily Blocks Or Partitions Create Kiye Ja Sakte Hain. Neeche Diye Gaye Example Mein CSS Ka Bhi Istemal Kiya Gya Hai:

Also Read: HTML Comments

Example:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layouts using DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            <a>HTML</a><br />
            <a>PHP</a><br />
            <a>PERL...</a>
         </div>
			
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Technical and Managerial Tutorials</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            <a>HTML</a><br />
            <a>PHP</a><br />
            <a>PERL...</a>
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2021 masterproramming.com
            </center>
         </div>
			
      </div>
   </body>

</html>


Output:

Leave a Reply

Your email address will not be published. Required fields are marked *