Make common headers and footers for website with folders

user_10623723 0
Viewed 213

I'm wanting to create a website with common headers and footers for each webpage and am currently using the answer supplied here.

However, I have a website with a tree diagram similar to:

- index.html
- header.html
- footer.html
- folder
    - info.html

In my header and footer files, there are multiple (relative) links such as to image sources, other pages, etc, which means while they may work in index.html, if I try to load it into info.html, the links break.

Is there any way to change all links to look one folder back, etc, or would I have to use javascript to change the src property for every referenced image?

html jquery javascript
3 Answers

Add the <base> element to your info.html and make its href tallying the relative links of your header and footer markups.

For example, if your website is hosted in http://example.com/foo and your relative links are such as ./images/xyz.jpg, the base element of the info.html would be like this:

<base href="http://example.com/foo">

The browser will compose the relative urls from there.

Another option is to configure your relative urls to pick up resources from the root.

In above configuration, instead of this:

<img src="./images/xyz.jpg">

...you can use

<img src="/foo/images/xyz.jpg">

So, wherever it is executed from, browsers will start the relative paths from the root.

The advantage is that this will enable easy local testing too.

user_41852340

You can use <base> tag in your info.html file's <head> tag with a href attribute.

The <base> tag specifies the base URL and target for all relative URLs in a document.

The <base> tag must have either an href or a target attribute present, or both.

There can only be one single <base> element in a document, and it must be inside the <head> element.

You can find more in this example.

user_65342190

This is basically what the <base> element is for. You include it in the document and specify an href from which all relative links/urls are resolved.

user_6360770
Related