How do I add a navbar on every page of my website?

Question

Hello I am new to creating websites and have lately been messing around with HTMl and CSS. I have a navbar created and would like to put it on every page. I've looked into this before but just can't figure it out. It just doesn't put in the navbar on the page.

home.html

                            <!DOCTYPE html>
                            <html>
                            <head>
                            <link rel="stylesheet" type="text/css" href="style.css">
                            </head>
                            <body>
                            <?php include 'navbar.php';?>
                            <div id="hbox1">
                            <h2>Random</h2>
                            <p>Is he staying arrival address earnest. To preference considered it themselves inquietude collecting estimating. View park for why gay knew face. Next than near to four so hand. Times so do he downs me would. Witty abode party her found quiet law. They door four bed fail now have. <a href="#">here.</a></p>
                            </div>
                            <div id="hbox2">
                            <h2>Random</h2>
                            <p>Is he staying arrival address earnest. To preference considered it themselves inquietude collecting estimating. View park for why gay knew face. Next than near to four so hand. Times so do he downs me would. Witty abode party her found quiet law. They door four bed fail now have. <a href="#">here.</a></p>
                            </div>
                            <div id="hbox3">
                            <h2>Random</h2>
                            <p>Is he staying arrival address earnest. To preference considered it themselves inquietude collecting estimating. View park for why gay knew face. Next than near to four so hand. Times so do he downs me would. Witty abode party her found quiet law. They door four bed fail now have. <a href="#">here!</a></p>
                            </div>
                            <div id="hbox4">
                            <h2>Random</h2>
                            <p>Is he staying arrival address earnest. To preference considered it themselves inquietude collecting estimating. View park for why gay knew face. Next than near to four so hand. Times so do he downs me would. Witty abode party her found quiet law. They door four bed fail now have. <a href="#">here.</a></p>
                            </div>
                            </body>
                            </html>

and navbar.php

                            <h1>&nbsp&nbspMy Homepage</h1>
                            <ul id="nav">
                            <li><a href="#">Random</a></li>
                            <li><a href="#">Random</a></li>
                            <li><a href="#">Random</a></li>
                            <li><a href="#">Random</a></li>
                            </ul>

Answer 1

The reason why your code is not working is because you're trying to parse PHP codes using an .html document.

Either you instruct Apache to treat .html files as PHP, or rename home.html to home.php .

To treat .html files as PHP.

In .htaccess in the root of your server:

<FilesMatch "\.(htm|html|php)$">
SetHandler application/x-httpd-php
</FilesMatch>

or a single filename:

<Files yourpage.html>
AddType application/x-httpd-php .html
</Files>

or multiple filenames:

<FilesMatch "^(file_one|file_two|file_three)\.html$">
  AddType application/x-httpd-php .html
</FilesMatch>

or

AddType application/x-httpd-php .php .htm .html
AddHandler x-httpd-php .php .htm .html

For people hosted by HostGator: Source

AddHandler application/x-httpd-php5 .html .htm

And if you're developing locally with XAMPP, you should use AddHandler instead of AddType

AddHandler application/x-httpd-php .html .htm

Answer 2

Fred is right, your file extension have to be registered as interpretable by php.

I would personally suggest you to change the extension of your home file for .php, rather than configuring your web server to interpret html with php.

You will also want to consider the use of a template engine (like Twig or Smarty ) which would allow you to extend your contents. It is a common practice to have a base template defining narbar, toolbar or other header/footer and extend it with your other files.

Here is an example with Twig:

base.html

<html>
  <body>
    <your_navbar_markup />
{% block body %}{% endblock %}
  </body>
</html>

content1.html

{% extends 'base.html' %}
{% block body %}
  My pretty content1
{% endblock %}

How do I add a navbar on every page of my website?

Question

2 answers

solution1
5 2015-03-14 23:30:24

solution2
0 2015-03-15 09:02:51

How do I add a navbar on every page of my website?

Question

2 answers

solution1 5 2015-03-14 23:30:24

solution2 0 2015-03-15 09:02:51

solution1
5 2015-03-14 23:30:24

solution2
0 2015-03-15 09:02:51