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>

I used instead now. It still didn't work. I have to be doing something wrong. I'm sorry I'm new to this. — ThatGamor, Mar 14 '15 at 23:11
I'm sorry it took so long took me a while to figure out that you tab 8 times :P — ThatGamor, Mar 14 '15 at 23:27
Actually, it's 4 spaces (or more) followed by each line of code. Using Notepad++ makes this task a LOT easier ;-) — Funk Forty Niner, Mar 14 '15 at 23:29
I used notepad++. How would I do 4 spaces on each line without spending a lot of time? I can highlight all and space it. When I highlight all and space it it removes it all. So off topic sorry :L — ThatGamor, Mar 14 '15 at 23:32
No problem. You highlight all your code CTRL-A, then hit the tab key, then copy and paste it in your question ;-) instant indentation. I posted an answer for you, btw. — Funk Forty Niner, Mar 14 '15 at 23:32

Funk Forty Niner · Answer 1 · 2015-03-14T23:53:41.953

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

How exactly would I instruct Apache to treat html files as PHP? — ThatGamor, Mar 14 '15 at 23:36
@ThatGamor See this Q&A http://stackoverflow.com/q/7181853/ or http://www.besthostratings.com/articles/php-in-html-files.html or https://encodable.com/parse_html_files_as_php/ - Any special reason why you want to keep it as `.html`? Can you not use `.php` for your initial file? — Funk Forty Niner, Mar 14 '15 at 23:41

score 0 · Answer 2 · answered Mar 15 '15 at 09:02

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?

2 Answers2