To create a navigation bar in HTML, it is essential to adhere to the following steps outlined below. By following these instructions, one can effortlessly generate the navigation bar.
To begin, the initial step involves entering the HTML code into a text editor or accessing the current HTML file in the text editor where the Navigation Bar is intended to be created.
<!Doctype Html>
<Html>
<Head>
<Title>
Make a Navigation Bar
</Title>
</Head>
<Body>
</Body>
</Html>
Next, in order to create the bar, it is necessary to specify the <nav> tag within the <body> tag.
<Body>
<nav>
</nav>
You are at C# Tutorial Site.....
</Body>
</Html>
Step 3: Next, it is necessary to specify the <ul> element, which is utilized for displaying an unordered list. Subsequently, the items for the list must be defined within the <li> element. These items should correspond to the content intended for display in the navigation bar.
<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 C# Tutorial Site.....
</Body>
</Html>
Step 4: After then, we have to place the cursor in the <head> just after the closing of the title tag. And then, we have to define the <style> tag . Step 4: After then, we have to place the cursor in the <head> just after the closing of the title tag. And then, we have to define the <style> tag.
<Head>
<Title>
Make a Navigation Bar
</Title>
<style type=text/css>
</style>
</Head>
Step 5: Next, we need to define various id attributes that determine the placement and color of the navigation bar. To achieve this, the code below should be included within the head tag. Adjusting the property values is also possible to suit our specific needs.
<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: Following this, it is necessary to input the <header> element right before the commencement of the <nav> element. Furthermore, the closure of this element is also essential. Finally, the HTML document must be saved and subsequently executed in a web browser.
<!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 C# Tutorial Site.....
</Body>
</Html>
The HTML code displayed above produces the output depicted in the screenshot below: