Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Defining root of HTML in a folder within the site root folder

Tags:

html

I want to have a new folder containing a set of new html files. All the images inside it are in the format src="image.png" and image.png is located in the root folder. But when you put the HTML file in a new folder it can't find the image. You have to have it in the format src="../root folder/folder/image.png" to make it work. Which would mean a lot of pasting. I have tried putting image.png inside the folder but no change.

like image 302
maxmitch Avatar asked Jun 28 '13 18:06

maxmitch


People also ask

How do I refer to the root directory in html?

Yes, prefacing the URL, in the href or src attributes, with a / will make the path relative to the root directory. For example, given the html page at www.example.com/fruits/apples.html , the a of href="/vegetables/carrots. html" will link to the page www.example.com/vegetables/carrots.html .

Does index html have to be in root folder?

As such, the index. html file should always be placed directly within the root directory, not in any sub-folders. Side note: Any folder can have its own index. html file, and a browser directed to that folder with no specific file specified will display index.

How do I get to the root of a folder?

In most cases, your store's root folder is located in the “home” folder. However, if you can't find it, please use the path “/sub_folder/site_root_folder” to access directly to your root directory.

What is a site root folder for a website and what is its importance?

The root directory of your website holds the content that loads when visitors type your domain name in a browser. For example, you need to put your index file in your website's root directory for visitors to see your site. Website-related applications might also need to know your website's root directory.


1 Answers

Use the <base> element. It allows you to specify a URL for all relative URLs in a page.

For example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>This is an example for the <base> element</title>
        <base href="http://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

The link in the this example would be a link to "http://www.example.com/news/archives.html".

For you, the base URL may be something as simple as <base href="http://www.yoursite.com/">. This would make images specificed as src="image.png" resolve as "http://www.yoursite.com/image.png"

See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

like image 189
j08691 Avatar answered Sep 19 '22 11:09

j08691