How to Create Web Page with Header and Navbar

Web Page with Header and Navbar
A website Header is the area is one of the most valuable areas of your website. It runs across the top of the page and appears on every page of your website and Navigation bar is a user interface element within a webpage that contains links to other sections of the website. The navigation bar is an important element of a website's design since it allows users to quickly visit any section within the site.
 Here you can create your web page with following given simple stages:


Due to face zoom causes in image i give already complete source code. Please check out below



Stage1:-

  •  Open your Editor and choose a new project and save etc.html format.

  • Start your html code in the Editor, First declare <!DOCTYPE html> ,and after give  <html></html> tags.


  • In  between <html></html> tags, give <head></head> tags.
    .

  • In between <head></head> tags, give <title></title> tag and write title of your web page.(Like: <title>Make In Digital India</title> )

  • After title give <header></header> tag in your editor, And also give <nav></nav> tag in between <header></header> tag and give a id in your <nav> tag(Like: <nav id="navbar">).

  • In between <nav></nav> tag  give <ul></ul> tag , And also give <li></li> tag in between <ul></ul> tag.

  • In between <li></li> tag give your menus name. You can also give link with your menus.
(Like:- 
 <ul>
         
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Our Clients</a></li>
      <li><a href="#">Contact us</a></li> 
</ul>
).


  • After given menu's name, You can give <body></body> tag after  <header></header> tag to specify your body of your web page.
In here your HTML part is gone closed , now you can go your Stage2 in CSS part to style your navbar.



Stage2:-

  •  In Second stage you must first to link your css file into html file. 
syantax: <link rel="stylesheet" type="text/css" href="name.css">

(Like:    <link rel="stylesheet" type="text/css" href="style.css">)



  •  After linking your css file come to into css to style/design your web page and first give constant margin and padding of your web page.
(Like: *{
          margin: 0;
          padding: 0;
         }
)


  •  Now you can give your body's background for get better understand.
 ( Like: body{
              background-color: lightpink;
            } 
        )


  •  Now come to your navbar style, give a id #navbar(which you have declare in nav tag in html file) And give a position & background color of your navbar.
(Like: #navbar{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0;
    background: black;
   }  
    ) You can also choose your position (i.e. relative , static, sticky, absolute) as your choise.


  • Now give your navbar's menus display with display attribute.
(Like: #navbar ul{
  display: flex;
  }  
      )


  • Now come to your menu, here you can style your menus.
(Like:  #navbar ul li{
  list-style: none;
  font-size: 1.3em;
  margin-bottom: 10px; 
    } 
 )


  • Now you can give a background to your menus.
(Like: #navbar ul li a{
 color: white;
  padding: 3px 22px;
  border-radius: 20px;
  }
 )


  • At the end you can give a hover to your menus.
(Like: #navbar ul li a:hover{
  color: black;
 background-color: white;
  }
)  
                                   


Complete HTML Code:


<!DOCTYPE html>
<html>
<head>
   <title>Make In Digital India</title> 
     <link rel="stylesheet" type="text/css" href="style.css">
    <header>
      <nav id="navbar" >
        <ul>
         <li><a href="#">Home</a></li>

      <li><a href="#">Services</a></li>

      <li><a href="#">Our Clients</a></li>

      <li><a href="#">Contact us</a></li>
          </ul>
       </nav>
             </header>
    </head>
    <body>
        </body>
</html>




Complete CSS Code:

*{
    margin: 0;
    padding: 0;
}
body{
    background: lightpink;
}
#navbar{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0;
    background: black;
}
#navbar ul{
  display: flex;
  }
#navbar ul li{
  list-style: none;
  font-size: 1.3em;
  margin-bottom: 10px; 
    }
#navbar ul li a{
 color: white;
  padding: 3px 22px;
  border-radius: 20px;
  }
#navbar ul li a:hover{
  color: black;
 background-color: white;
   
}



Your Final Result:

















Please share to others:                                                                    Follow my blog with Bloglovin

Post a Comment

2 Comments

  1. You there, this is really good post here. Thanks for taking the time to post such valuable information. Quality content is what always gets the visitors coming. costruzione siti internet torino

    ReplyDelete
  2. Great survey. I'm sure you're getting a great response. Professionele webshop laten bouwen

    ReplyDelete