How to make a navigation bar in html Class-1

अगर हमें Html में नेविगेशन बार बनाना है तो हमें नीचे दिए गए STEPS को फॉलो करना होगा। इन स्टेप्स का इस्तेमाल करके हम आसानी से नेविगेशन बार बना सकते हैं।

Step1: सबसे पहले, हमें किसी भी टेक्स्ट एडिटर में HTML CODE करना होगा या टेक्स्ट एडिटर में मौजूदा HTML FILE को खोलना होगा जिसमें हम NAVIGATION BAR बनाना चाहते हैं।

<!Doctype Html>
<Html>
<Head>
<Title>
Make a Navigation Bar
</Title>
</Head>
<Body>
</Body>
</Html>

STEP 2: अब, हमें <body> टैग में <nav> TAG को defined करना होगा जहां हम बार बनाना चाहते हैं।

<Body>
<nav>

</nav>
You are at http://rinectar.com/
</Body>
</Html>

STEP 3: उसके बाद, हमें <ul> टैग को define करना होगा, जिसका उपयोग अनियंत्रित सूची दिखाने के लिए किया जाता है। और, फिर हमें <li> टैग में सूची आइटम को define करना होगा। हमें उन वस्तुओं को define करना होगा जिन्हें हम नेविगेशन बार में दिखाना चाहते हैं।

<Body>
<nav>
<ul>
<li>
<a href=”#”> Home </a>
</li>
<li>
<a href=”#”> About </a>
</li>
<li>
<a href=”#”> Contact </a>
</li>
<li> <a href=”#”> Terms of use </a>
</li>
<li>
<a href=”#”> Join Us </a>
</li>
</ul>
</nav>
You are at http://rinectar.com/
</Body>
</Html>

Step 4: उसके बाद, हमें टाइटल टैग के बंद होने के ठीक बाद कर्सर को <head> में रखना होगा। और फिर, हमें <style> टैग को define करना होगा। 

<Head>
<Title>
Make a Navigation Bar
</Title>
<style type=text/css>


</style>
</Head>

step 5: अब, हमें अलग-अलग आईडी attributes specified करनी होंगी जिनका उपयोग नेविगेशन बार की स्थिति, रंग सेट करने के लिए किया जाता है। तो, हमें <head> टैग में निम्नलिखित कोड का उपयोग करना होगा। हम अपनी आवश्यकताओं के अनुसार संपत्तियों के मूल्य को भी बदल सकते हैं।

<style type=text/css>
body
{
height: 125vh;
margin-top: 80px;
padding: 30px;
background-size: cover;
font-family: sans-serif;
}
header {
background-color: orange;
position: fixed;
left: 0;
right: 0;
top: 5px;
height: 30px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
}
header * {
display: inline;
}
header li {
margin: 20px;
}
header li a {
color: blue;
text-decoration: none;
}
</style>

Step 6: उसके बाद हमें Opening <nav> tag के ठीक पहले <header> tag type करना होता है। और हमें इस टैग को बंद भी करना है। और, अंत में, हमें Html फ़ाइल को सहेजना होगा और फिर फ़ाइल को ब्राउज़र में चलाना होगा।

<!Doctype Html>
<Html>
<Head>
<Title>
Make a Navigation Bar
</Title>
<style type=text/css>
body
{
height: 125vh;
margin-top: 80px;
padding: 30px;
background-size: cover;
font-family: sans-serif;
}
header {
background-color: orange;
position: fixed;
left: 0;
right: 0;
top: 5px;
height: 30px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
}
header * {
display: inline;
}
header li {
margin: 20px;
}
header li a {
color: blue;
text-decoration: none;
}
</style>
</Head>
<Body>
<header>
<nav>
<ul>
<li>
<a href=”#”> Home </a>
</li>
<li>
<a href=”#”> About </a>
</li>
<li>
<a href=”#”> Contact </a>
</li>
<li> <a href=”#”> Terms of use </a>
</li>
<li>
<a href=”#”> Join Us </a>
</li>
</ul>
</nav>
</header>
You are at http://rinectar.com/
</Body>
</Html>

If you want to join my online or offline graphic designing course than just call me - 9334029817

Related Posts

Leave a Reply

Open chat