Is there any way to make the a href external?

Question

I was wondering if there is any ways to have the a href to be managed externally. That ways I don't have to deal with updating the links in each html files.

I'm not sure if PHP can deal with that or with cpython. If anyone can points me to the right direction. It would be very helpful. Thanks.

<nav>
        <ul>
            <li>
                <a href="index.html">Homepage</a>
                <ul>
                    <li><a href="sitemap.html">Sitemap</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                    <li><a href="certification.html">Certifications</a></li>
                </ul>
            </li>
            <li>
                <a href="web_development/webdevelopment.html">Web Development</a>
                    <ul>
                        <li><a href="web_development/html.html">HTML</a></li>
                        <li><a href="web_development/css.html">CSS</a></li>
                        <li><a href="web_development/javascript.html">JavaScript</a></li>
                        <li><a href="web_development/jquery.html">jQuery</a></li>
                        <li><a href="web_development/ascii.html">ASCII Table</a></li>
                    </ul>
            </li>
            <li>
                <a href="programming_languages/programming.html">Programming Languages</a>
                <ul>
                    <li><a href="programming_languages/c.html">C</a></li>
                    <li><a href="programming_languages/c++.html">C++</a></li>
                    <li><a href="programming_languages/java.html">Java</a></li>
                </ul>
            </li>
            <li>
                <a href="scripting_languages/scripting.html">Scripting Languages</a>
                <ul>
                    <li><a href="scripting_languages/python.html">Python</a></li>
                    <li><a href="scripting_languages/bash.html">Bash</a></li>
                    <li><a href="scripting_languages/unixshell.html">Unix Shell Script</a></li>
                    <li><a href="scripting_languages/php.html">PHP</a></li>
                </ul>
            </li>
            <li>
                <a href="operating_system/os.html">Operating System</a>
                <ul>
                    <li><a href="operating_system/windows.html">Windows</a></li>
                    <li><a href="operating_system/linux.html">Linux</a></li>
                    <li><a href="operating_system/mac.html">Mac</a></li>
                </ul>
            </li>
            <li>
                <a href="about/aboutme.html">About Me</a>
                <ul>
                    <li><a href="about/CV.html">CV</a></li>
                    <li><a href="about/reflection.html">Reflection</a></li>
                    <li><a href="about/portfolio.html">Portfolio</a></li>
                </ul>
            </li>
        </ul>
    </nav>`

Edit; My website so far without changes and using the code as above

https://i.stack.imgur.com/d3AJH.jpg

With Ema4rl's solution and <?php include 'page.php';?>

https://i.stack.imgur.com/rMcF5.jpg

<!DOCTYPE html>
<html lang="en">

<head>
<meta name="google-site-verification" content="MCQUXJvcfRxBpOiSL14SrYWBsaiaXT8xB_LunwccElI" />
    <title>Homepage</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">

<!-- CSS here -->
    <link rel="stylesheet" type="text/css" href="template.css">
<!-- JavaScript here -->
    <script src="externalscript.js" type="text/javascipt"></script>
<!-- PHP here -->

<!-- Python here -->

</head>

<body>
    <div class="nested">
        <div class="header">
            <div class="logo">
                <a href="/index.html"><img src="../images/codex.jpg" alt="echo Codex" width="154" height="156" class="topleft"/></a>
            </div>
            <div class="title">
                    <br>
                    <h1>Codex</h1>
                    <h4><b>Scientia Potentia Est. Knowledge is Power</b></h4>
            </div>
            <div class="search">
                <script>
                      (function() {
                        var cx = '002444324895425384483:h-an5qvcpci';
                        var gcse = document.createElement('script');
                        gcse.type = 'text/javascript';
                        gcse.async = true;
                        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                            '//www.google.com/cse/cse.js?cx=' + cx;
                        var s = document.getElementsByTagName('script')[0];
                        s.parentNode.insertBefore(gcse, s);
                      })();
                    </script>
                    <gcse:search></gcse:search>
            </div>
        </div>
        <div class="menu">
            <?php include 'page.php';?>
        </div>
        <div class="main">
            <div class="sidebar">
                <ul>
                    <li><a href="sitemap.html">Sitemap</a></li>
                    <li><a href="/contact.html">Contact Us</a></li>
                </ul>
            </div>
            <div class="content">
                <h1>Welcome to the Castillo's Vault</h1>
                <p>This website is built for general and specific knowledges about the world of computing such as</p>
                    <ul>
                        <li>Coding</li>
                        <li>Rules of coding</li>
                        <li>Operating System</li>
                        <li>Hacking world</li>
                        <li>Portfolio</li>
                        <li>CV</li>
                        <li>And much more</li>
                    </ul>
                <p>At the moment, I am designing the webpages by using Notepad++. It will take a long time until the website is at the stage where I feel like it is completed. The website is not even nearly done.</p>
                <p>The website will be continuously being updated. There are always new information that are being released about the world of Internet and its medium. The medium are the computers which can be divided into desktop, laptop, tablet, even mobile phone.</p>
                <p>This website is created by Hugo-Daniel Castillo for the purpose of education and revising. If there is any queries or comments, please email hugodanielcastillo@vaultofcastillo.comuv.com</p>
                <br>
            </div>
        </div>
        <div class="end">
            <footer>
                <p>Made by Hugo-Daniel Castillo <br>Coventry University Student<br>Ethical Hacking and Networking Security</p>
            </footer>
        </div>
    </div>
</body>

</html>

If you are using html you can create a xml file for links, a php file too, even extract from database the links. what are you using only php or php with a framework ? — Dante, Nov 07 '16 at 23:08
http://stackoverflow.com/questions/4908932/dynamic-navigation-in-php — Dante, Nov 07 '16 at 23:09
@DanteFañaBadia, is it okay if I use name.html rather than name.php? If it is the latter option, will I have to redefine the html file as php? I'm not sure yet with the PHP. I'm not very fluent with that language. — Hugo-Daniel Castillo, Nov 07 '16 at 23:22
@Hugo-DanielCastillo you need to rename all file, if you don't the server won't be able to understand php code. — Dante, Nov 07 '16 at 23:25
@Hugo-DanielCastillo Look into rewrite rules for whichever server you're using. You can have whatever you want in the URLs and still have PHP generate the output. — Brad, Nov 07 '16 at 23:31
@Hugo-DanielCastillo If you're not using PHP yet and you don't necessarily need PHP (that is, you're just using a templated site and have static files) you might look into some of the static website bundlers out there. They take care of running templates and outputting static HTML that you can then just upload directly to your webserver. Many are available. I've used Hexo before... wasn't a huge fan but it's a handy tool. — Brad, Nov 07 '16 at 23:33
I'm actually looking into expanding my knowledge whether it'll be XML or PHP. I have my own website but it's getting bigger than I expected and needs something to update on the fly. — Hugo-Daniel Castillo, Nov 07 '16 at 23:36
@Hugo-DanielCastillo, check / test-run my answer. Also I suggest using a framework since you want to expand your PHP knowledge. I suggest [CodeIgniter](http://codeigniter.com) for a start! — Ema4rl, Nov 08 '16 at 00:00

Ema4rl · Accepted Answer · 2016-11-08T04:40:56.500

Seems you are not using a PHP framework or PHP (at all). The simplest way to achieve this is by using PHP with file includes.

If I needed to achieve this I would separate the source of the links from the pages so I can easily change the source to maybe a database model, or even an API.

`nav-links.php`

- a separate file containing all the links

<?php

return array(
    array(
        "Homepage" => "index.html",
        array(
            "Sitemap" => "sitemap.html",
            "Contact Us" => "contact.html",
            "Certifications" => "certification.html"
        )
    ),
    array(
        "Web Development" => "web_development/index.html",
        array(
            "HTML" => "web_development/html.html",
            "CSS" => "web_development/css.html",
            "JavaScript" => "web_development/javascript.html",
            "jQuery" => "web_development/jquery.html",
            "ASCII Table" => "web_development/ascii.html"
        )
    ),
    // to be completed...
    array(
        "Homepage" => "index.html",
        array(
            "Sitemap" => "sitemap.html",
            "Contact Us" => "contact.html",
            "Certifications" => "certification.html"
        )
    ),
    array(
        "Homepage" => "index.html",
        array(
            "Sitemap" => "sitemap.html",
            "Contact Us" => "contact.html",
            "Certifications" => "certification.html"
        )
    ),
    array(
        "Homepage" => "index.html",
        array(
            "Sitemap" => "sitemap.html",
            "Contact Us" => "contact.html",
            "Certifications" => "certification.html"
        )
    ),
    array(
        "Homepage" => "index.html",
        array(
            "Sitemap" => "sitemap.html",
            "Contact Us" => "contact.html",
            "Certifications" => "certification.html"
        )
    )
);

`nav.php`

- the main page where the links will be

<?php

$links = require 'nav-links.php';

// check if the $links array is not empty (to avoid errors)
if ( ! empty($links))
{
    echo '<ul>';

    foreach ($links as $section)
    {
        echo '<li>';

        foreach ($section as $title => $link)
        {
            // check if it is a sub-array or a home/index link
            if ( ! is_array($link))
            {
                echo "<a href=\"{$link}\">{$title}</a>";
            }
            else
            {
                echo '<ul>';

                foreach ($link as $t => $l)
                {
                    echo "<li><a href=\"{$l}\">{$t}</a></li>";
                }

                echo '</ul>';
            }
        }

        echo '</li>';
    }

    echo '</ul>';
}

How do I show the screenshot of the result? Also there's a syntax error on the nav-links.php on line 3 with unexpected '='. — Hugo-Daniel Castillo, Nov 08 '16 at 00:04
upload it to an image hosting service and use markdown to display it in a comment. Hey! I just fixed a typo in `nav-links.php`. Change `return = array` to `return array`. — Ema4rl, Nov 08 '16 at 00:09
Yeah I figured that out too. Also ends the php file with the ?> I'll update my site and see if that works. Gonna upload the original site and your code soon. It's my first time using stackoverflow. Bear with me. — Hugo-Daniel Castillo, Nov 08 '16 at 00:15
It's not compulsory or ideal to end the php file with `?>`. Try to do without using the PHP closing tag at the end of a PHP file. If you're satisfied, let me know. — Ema4rl, Nov 08 '16 at 00:19
Is there any ways to incorporate the page.php in the index.html? It doesn't shows on the website. If you need the CSS file, let me know. — Hugo-Daniel Castillo, Nov 08 '16 at 00:34
Just change the **index.html** to **index.php** and include `nav.php` as indicated by your question update. _I just renamed **page.php** to **nav.php**_ — Ema4rl, Nov 08 '16 at 04:36
Is there any way to define a root path so that way I can use a file within a folder and subfolder to use the nav.php? — Hugo-Daniel Castillo, Nov 27 '16 at 01:20
Simply make your hrefs absolute Eg: **index.html** => **/index.html** — Ema4rl, Dec 04 '16 at 18:08

score 1 · Answer 2 · edited May 23 '17 at 12:16

The simplest way to achieve this is by using PHP's file includes but this also means you would need to do the following:

Change all your web files to PHP file extensions (like index.php, windows.php, etc)
To keep file extensions as html, configure your webserver to translate the url so index.html is internally changed to index.php
- This usually requires the usage of .htaccess
- Or change it the webserver globally, but as stated by comment this is not the preferred method.

Now I'm assuming with my URL's that you're using the Apache webserver as it is most common one.

And with the simplest, its not really the most flexible but its a good way to learn some PHP in the process:

<?php /* navbar.php */ ?>
<nav>
  <ul>
    <li>
      <a href="index.html">Homepage</a>
      <ul>
        <li><a href="sitemap.html">Sitemap</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="certification.html">Certifications</a></li>
      </ul>
    </li>
  </ul>
  ... etc
</nav>

Now for all other files:

<?php /* index.php */ 
  include 'navbar.php';
?>

<?php /* sitemap.php */ 
  include 'navbar.php';
?>

<?php /* certification.php */ 
  include 'navbar.php';
?>

Now if you would need to make a change to the navigation, you can do this by changing just 1 file. But as said before, its not really dynamic however you can make it more dynamic by jamming much more complicated PHP code into navbar.php

Now use your imagination a bit, because this does not have to apply to a navigation bar only. You can make a footer, header or whatever other repetitive code you have on your page:

<!-- index.php -->
<html>
  <head>
  <?php
    include 'header.php'; // containing contents of <head></head>
  ?>
  </head>
  <body>
    <?php include 'navbar.php'; ?>
    <p>Here is my text for index.php</p>
    <?php include 'footer.php'; ?>
  </body>
</html>

Don't configure your webserver to start executing any old HTML as PHP. Some day you might actually want to serve static HTML, and you don't want that to conflict. If you're going through the trouble of reconfiguring your web server, it'd be far easier to set up a rewrite rule to load a corresponding PHP file when the HTML file doesn't exist. — Brad, Nov 07 '16 at 23:32
While personally I never had the need to show static HTML, I can see how your method is the best between both worlds. Thus I've changed the URL to reflect this as well. — Xorifelse, Nov 07 '16 at 23:58
It's far better to configure your server outside of per-directory config files, as they have to be parsed and handled every request. This is highly inefficient. Also, `.htaccess` only applies to Apache. No matter what server you use, it'd be better to configure your rewrite rules in an application config that is loaded when the server is started. That doesn't mean you can't keep the config with your code repo... it just means that you won't have to parse config every single time someone visits a page. — Brad, Nov 08 '16 at 00:01

Krzysztof Atłasik · Answer 3 · 2019-06-12T17:11:36.413

0

If you don't want to use any server-side processing, you could use a simple javascript library from w3chools:

<html>
    <script src="http://www.w3schools.com/lib/w3data.js"></script>
    <body>
        <div w3-include-html="nav.html"></div> <!-- nav.html will be put in this palce -->
        <script>
        w3IncludeHTML(); //you have to call this function to include snippets
        </script>
    </body>
</html>

Other option would be to use html imports:

<link rel="import" href="nav.html">

Be aware this option is currently only supported by Chrome and Opera.

Lastly, you could use the tag iframe.

<iframe src="nav.htm"></iframe>

Actually, it was way websites were assembled some time ago. Here you have example of how sites looked in the 90s. If you inspect navigation you will see it 's built on nested iframes.

Nowadays it is not recommended way to create new sites.

edited Jun 12 '19 at 17:11

answered Nov 07 '16 at 23:38

Krzysztof Atłasik

21,985
6
54
76

Is that a dynamically html file? This is actually interesting and will it update the information everytime I add a new html file in the content.html, or in this case nav.html? Is it supported in all web browsers? – Hugo-Daniel Castillo Nov 07 '16 at 23:43
Yes, it will be updated when you reload any page on your website, on which you have used any of this snippets. – Krzysztof Atłasik Nov 07 '16 at 23:50
I wouldn't use that library. First off, you're loading a library from a third party for which you have no control over, over HTTP that anyone along the line and hijack. You could at least download this JS file, inspect it yourself, and put it into your code. That will also prevent W3 Schools from updating it and breaking your site. Next, this script doesn't even use standard attributes, like `data-` attributes. Finally, not all crawlers run JavaScript so your content will be missed and not indexed by many. (Although, that is less of an issue every day.) – Brad Nov 08 '16 at 00:04
You could say that every js downloaded from cdn is unsafe. For example jQuery could change some day to malicious code. So you have to ask yourself if you trust provider. If not download code and serve it from own server. For `ajax-crawling` it's possible but it [requires additional tag](https://developers.google.com/webmasters/ajax-crawling/docs/getting-started). I don't know why w3 didn't use `data-` attribute and if you wan't your site to be validable, it's a problem. You could either get code and change it to accept `data` attributes or get along with it :) – Krzysztof Atłasik Nov 08 '16 at 06:57

Is there any way to make the a href external?

3 Answers3

nav-links.php

nav.php

`nav-links.php`

`nav.php`