How do I create links in navbar?-CodePudding

I am in the process of creating my first ever website for my programming course this year and it will be put on the internet. I have kind of the home page and I have the navbar there. Now, let's say I have "contact us" in the navbar and after clicking on it, I want the "contact us" page to open. WHERE do I write the code fot the "contact us" page? Do I make a new .html file, copy some of the code from the original page and change what I want for the "contact us"?? And in what form do I write the link for the "contact us" page on the original page?

<li><a href="#">KONTAKTUJTE NÁS</a></li>

I looked at other websites on the net and its always URL of the original page and then /contact-us. But, just...how? I will be thankful for every answer.

I know I am gonna sound really dumb right now and believe me, I searched the internet for hours but I don't really know how to formulate my question (English isn't my motherlanguage, so that's probabably part of the problem, too). I always get the "put there with the hyperlink". But like the page is not on the internet yet and I just don't know where to write the code.

CodePudding user response：

Thats basic HTML. Let's say index.html is your landing page and you'd like to go to contact.html.

your index.html file would be:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <a href="./contact.html">contact</a>
</body>
</html>

contact.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>contact</title>
</head>
<body>
    <h2>Contact</h2>
</body>
</html>

Now you can open the index.html file in a browser and click on the link. The contact.html will open.

You might wanna read some articles about basic html:

CodePudding user response：

You can make the navigation as shown below, but in real project for each page only the part of the html is changed and other code like header, navigation, footer is reused. In order to achieve that template engines are used, you can refer https://www.educative.io/answers/what-are-template-engines to know more

*{
  margin:0;
  padding:0;
}
nav{
  width:100%;
  background-color:black;
  height:2rem;
  display:flex;
  justify-content:center;
  align-items:center;
}
ul{
  display:flex;
  list-style:none;
}
li:not(:last-child){
  padding-right:1rem;
}
li a{
  text-decoration:none;
  color:white;
}

<nav>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About Us</a></li>
    <li><a href="">Contact Us</a></li>
  </ul>
</nav>

CodePudding user response：

It's use PHP to direct multiple page from one index page

In index:

<?php
  require_once('config.php');
  require_once(@mainpage);
?>

In config.php:

<?php
  @$viewpage=$_REQUEST['page'];
  switch($viewpage)
  {
    case 'contactus':
      $mainpage="contactus.php";
      break;
  }
?>

To link the direction: "index.php?page=contactus"