Is there a way to have all links on a page be relative to the root directory?
For example, on www.example.com/fruits/apples/apple.html I could have a link saying:
Back to Fruits List
Would this link be pointing to www.example.com/fruits/apples/fruits/index.html or www.example.com/fruits/index.html? If the first, is there a way to have it point to the 2nd instead?
A root-relative URL starts with a / character, to look something like link text.
The link you posted: Back to Fruits List is linking to an html file located in a directory named fruits, the directory being in the same directory as the html page in which this link appears.
To make it a root-relative URL, change it to:
Back to Fruits List
Edited in response to question, in comments, from OP:
So doing / will make it relative to www.example.com, is there a way to specify what the root is, e.g what if i want the root to be www.example.com/fruits in www.example.com/fruits/apples/apple.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.
The base tag element allows you to specify the base-uri for that page (though the base tag would have to be added to every page in which it was necessary for to use a specific base, for this I'll simply cite the W3's example:
For example, given the following BASE declaration and A declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Our Products</TITLE>
<BASE href="http://www.aviary.com/products/intro.html">
</HEAD>
<BODY>
<P>Have you seen our Bird Cages?
</BODY>
</HTML>
the relative URI "../cages/birds.gif" would resolve to:
http://www.aviary.com/cages/birds.gif
Example quoted from: http://www.w3.org/TR/html401/struct/links.html#h-12.4.
Suggested reading:
http://www.motive.co.nz/glossary/linking.php
http://www.communitymx.com/content/article.cfm?cid=AEDCC52C4AD230AD
Use
Back to Fruits List
or
Back to Fruits List
If you are creating the URL from the server side of an ASP.NET application, and deploying your website to a virtual directory (e.g. app2) in your website i.e.
http://www.yourwebsite.com/app2/
then just insert
<base href="~/" />
just after the title tag.
so whenever you use root relative e.g.
<a href="/Accounts/Login"/>
would resolve to "http://www.yourwebsite.com/app2/Accounts/Login"
This way you can always point to your files relatively-absolutely ;)
To me this is the most flexible solution.
Back to Fruits List
Relative Path Summary (applicable to href, src etc.,):
/file_Or_FolderName Root directory
./file_Or_FolderName Current directory
../file_Or_FolderName Previous directory (One level up)
../../file_Or_FolderName Previous of previous directory (Two levels up)
../../../file_Or_FolderName Just like above - Three levels up
Example:
www.example.com
├── apple.html
└── FolderA
├── fileA.html
└── FolderB
├── fileB.html
└── FolderC
├── fileC.html
└── FolderD <------ Suppose you're here (current directory)
├── fileD.html
└── FolderE
└── fileE.html
Following shows how to access the file at different levels using the relative path (applicable to href, src etc.,)
fileD.html - same level access(or)
./fileD.html - same level
./FolderE/fileE.html - 1 level Down
../fileC.html - 1 level Up
../../fileB.html - 2 levels Up
../../../fileA.html - 3 levels Up
../../../../apple.html - 4 levels Up (or)
/apple.html - 4 levels Up but direcly using root /
To give a URL to an image tag which locates images/ directory in the root like
`logo.png`
you should give src URL starting with / as follows:
<img src="/images/logo.png"/>
This code works in any directories without any troubles even if you are in branches/europe/about.php still the logo can be seen right there.
Use this code "./" as root on the server as it works for me
Back to Fruits List
but when you are on a local machine use the following code "../" as the root relative path
Back to Fruits List
Related
I am combining many small semi-static, single-page webapps into one larger web site. The backend is a lot of proxies, but the forward facing server basically just make it look like the app was moved from the root filepath to a more specifics one. IE:
/
├── css
│ └── app1.css
├── index.html
└── js
└── app1.js
would be moved to
/apps/app1/
├── css
│ └── app1.css
├── index.html
└── js
└── app1.js
This migration has been relatively painless mainly due to the use of ./ in the apps' html files, such that most apps just load their resources relative to their new location. The problem I am having is that some apps are resolving ./ differently. For these trouble cases, the primary html file gets loaded; however, the ./ in the script and style elements are resolving to a higher file-path (IE: I would expect ./ to resolve to /apps/app1 but am getting /apps). It may be a coincidence, but the troubled apps often have additional, non-index HTML files.
What are the rules for how ./ is resolved?
Determine the base URL
This is usually the URL of the HTML document
It might be overridden by the base element
For CSS it is the URL of the stylesheet
JS is always with respect to the HTML document
Remove everything after the last / in the path section of the URL
e.g. the base URL for https://example.com/example/foo?bar=baz#fragment is https://example.com/example/
Keep in mind that an HTML document might be visible at the path /example and /example/ and you should avoid this by making one path canonical (I prefer the one that ends in a /) and redirecting to it from the other
Strip the ./ from the front of the relative path
Append the result of step 3 to the result of step 2
A common gotcha is to confuse URLs with file paths. While a simple static site will usually have a direct 1:1 mapping between them, many modern sites will use routing code (e.g. for Express for HTML documents and a separate static route for static files like images, js and css.
I am having an issue getting my background-image to load as a live website (using github pages). When i load it locally I can get it to work by entering in the full directory. However when I then move it to Github the directory changes and so it no longer works. To summarise, when I use background-image url("images/picture.jpg"); it will not work at all. I have to type in background-image url("c/onedrive/webroot/images/picture.jpg"); so the whole file name. However that does not work when put onto Github. Any help would be much appreciated. (:
As others mentioned, it seems like a file path issue. When using relative paths like images/picture.jpg, make sure the target image is in the correct relative location as indicated. If your images folder is located at the project root, your background-image url had safer/better be /images/picture.jpg with the / at the beginning to denote the project root.
Update
Looking at your code on the repo, I fixed it by updating the relative path — background-image: url("../images/abstract.jpg");
Your folder structure looks like...
/
|
├── css/
├── images/
├── js/
├── objects/
└── video/
Since your stylesheet in css folder is pointing to a file in images folder, you'd need to use a correct relative path.
I have faced this problem before. If you're background-image doesn't work check if your path is correct you could also right click the image in the file browser open Properties
--> Security and copy the path from there. If this doesn't work copy the image address directly from the browser and paste it there.
Check your path is correct
body {
background-image: url("path_of_image_from_this_page.jpg");
}
I'm newbie in web development and design, my question is the following:
When I'm creating my own page with following directory structure:
projectName [dir]
|
+-- public_html [dir]
|
+-- index.html <-- main web page file
+-- AnimationSrc [dir]
|
+-- animation1.html
+-- animation2.html
(...)
navigation from index.html to animation1.html is done using tag:
<li>Animation1</li>
Only this construction of href with leading dot and direct html file at end gives me correct results, which means that after selecting link I'm navigated from:
http://localhost:8383/ProjectName/index.html
To:
http://localhost:8383/ProjectName/AnimationsSrc/animation1.html
If I delete leading dot, instead I got:
http://localhost:8383/AnimationsSrc/animation1.html
Also, when I remove direct file name, page is not rendering as well.
But when I'm looking around other websites using firebug/any other browser tool I often see constructions like that:
From Bower.io:
Search packages
Where no leading dot is present and path is not pointing to specific html file
From Netbeans.org:
<a title="NetBeans IDE" href="/features/index.html">NetBeans IDE</a>
Where no leading dot is present.
Could someone please explain me, what's the difference? Why I'm forced to put that leading dot and direct link to html file, while e.g. Netbeas is doing same without leading dot, and bower only with directory? Is that related with underlying back-end technology? Some scripting?
Thank you in advance for help
/ means the root of the current drive.
./ means the current directory.
../ means the parent of the current directory.
SO when you are removing . then with / in front will navigate it to the root directory and will search for AnimationsSrc folder in root directory.
Best practice is to use without / ie.
href="AnimationsSrc/animation1.html"
The difference is
<a href="http://www.example.com/example.css"> is an absolute URL, it mean points to another web site.
<a href="/search"> is a relative URL, it mean points to a file within a web site.
You can learn about ./ and / difference here: http://www.dirigodev.com/blog/seo-web-best-practices/relative-vs-absolute-urls-seo/
I am creating a website on localhost. I want to make all of link resources in my website to relative path ( I mean only internal resources).
website is located in
http://localhost/mywebsite
I read this useful question Absolute vs relative URLs.
I found differences between /images/example.png and images/example.png
Link To Image
Above relative path should return ROOT_DOCUMENT/images/example.png because of / at first of url. As ROOT_DOCUMENT is something like /wamp/www/mywebsite
But when I tested it, it only return /wamp/www/images/example.png
And I should add manually my website folder /mywebsite/images/example.png to relative path.
Link To Image
And it is not useful because of changing the name of mywebsite. So:
Why does this problem occur?
How can I resolve this problem?
You say your website is in http://localhost/mywebsite, and let's say that your image is inside a subfolder named pictures/:
Absolute path
If you use an absolute path, / would point to the root of the site, not the root of the document: localhost in your case. That's why you need to specify your document's folder in order to access the pictures folder:
"/mywebsite/pictures/picture.png"
And it would be the same as:
"http://localhost/mywebsite/pictures/picture.png"
Relative path
A relative path is always relative to the root of the document, so if your html is at the same level of the directory, you'd need to start the path directly with your picture's directory name:
"pictures/picture.png"
But there are other perks with relative paths:
dot-slash (./)
Dot (.) points to the same directory and the slash (/) gives access to it:
So this:
"pictures/picture.png"
Would be the same as this:
"./pictures/picture.png"
Double-dot-slash (../)
In this case, a double dot (..) points to the upper directory and likewise, the slash (/) gives you access to it. So if you wanted to access a picture that is on a directory one level above of the current directory your document is, your URL would look like this:
"../picture.png"
You can play around with them as much as you want, a little example would be this:
Let's say you're on directory A, and you want to access directory X.
- root
|- a
|- A
|- b
|- x
|- X
Your URL would look either:
Absolute path
"/x/X/picture.png"
Or:
Relative path
"./../x/X/picture.png"
The easiest way to solve this in pure HTML is to use the <base href="…"> element like so:
<base href="http://localhost/mywebsite/" />
Then all of the URLs in your HTML can just be this:
Link To Image
Just change the <base href="…"> to match your server. The rest of the HTML paths will just fall in line and will be appended to that.
The relative pathing is based on the document level of the client side i.e. the URL level of the document as seen in the browser.
If the URL of your website is: http://www.example.com/mywebsite/ then starting at the root level starts above the "mywebsite" folder path.
How can I link to html pages if they are in same or different folders without writing full path?
Within the same folder, just use the file name:
my link
Within the parent folder's directory:
my link
Within a sub-directory:
my link
Also, this will go up a directory and then back down to another subfolder.
link
To go up multiple directories you can do this.
link
To go the root, I use this
link
In addition, if you want to refer to the root directory, you can use:
/
Which will refer to the root. So, let's say we're in a file that's nested within a few levels of folders and you want to go back to the main index.html:
My Index Page
Robert is spot-on with further relative path explanations.
You can go up a folder in the hierarchy by using
../
So to get to folder /webroot/site/pages/folder2/mypage.htm from /webroot/site/pages/folder1/myotherpage.htm your link would look like this:
Link to My Page
use the relative path
main page might be:
/index.html
secondary page:
/otherFolder/otherpage.html
link would be like so:
otherpage
If you'd like to link to the root directory you can use
/, or /index.html
If you'd like to link to a file in the same directory, simply put the file name
Employees Click Here
To move back a folder, you can use
../
To link to the index page in the employees directory from the root directory, you'd do this
Employees Directory Index Page
I would caution you: if you are using absolute paths, then your application cannot be installed in a "subdirectory" of the server!
eg, http://yourserver.com/yourapp may work, but http://myserver.com/apps/yourapp will not!
Short answer:
. is for current directory
.. is for upper directory as in cd .. command on shell.
Simple yet tricky, I write this answer primarily for myself not to forget next time.
ademSite/
├── index.html
└── style.css
The link to CSS in index.html:
<link rel="stylesheet" href="style.css"> or
<link rel="stylesheet" href="./style.css">
ademSite/
├── index.html
└── stylefiles
└── style.css
This case it should be:
<link rel="stylesheet" href="stylefiles/style.css"> or <link rel="stylesheet" href="./stylefiles/style.css">
├── html
│ └── index.html
└── stylefiles
└── style.css
In this case path must be:
<link rel="stylesheet" href="../stylefiles/style.css">
Use
../
For example if your file, lets say image is in folder1 in folder2
you locate it this way
../folder1/folder2/image
href="./page.htm" for the same directory
href="../page.htm" parent directory
href="~/page.htm" root directory or the upper most dir.
Answer below is what I created to link html contents from another shared drive to the html page I would send out to managers. Of course, the path is relative to your using, but in my case, I would just send them the html, and everything else that is updated from load runner dynamically would be updated for me.
Saves tons of paper, and they can play with the numbers as they see fit instead of just a hard copy this way.
SRC="file://///shareddrive/shareddrive-folder/username/scripting/testReport\contents.html" NAME="contents_frame" title="Table of Contents"
For ASP.NET, this worked for me on development and deployment:
<a runat="server" href="~/Subfolder/TargetPage">TargetPage</a>
Using runat="server" and the href="~/" are the keys for going to the root.
This worked for me <a href="preferedfile name.html">to be clicked <a/>
When I Was creating a webpage, I found out that With moving Html files to different Folders, It changes the paths of the images, videos, music, PDF files, etc. With them, you have to go out of the file the HTML is located in, with the
../HTML. Then when your out, depending on where your page content is, insert,
Chipmunk Memes
*/ This is where the HTML is located ^^^^^^ */
<img class="demo cursor" src="../6.png" width="100" height="50" onclick="currentSlide(6)" alt="Sasha Having Some Fun">
*/ This is where the images are located. The "../6.png" is the image file, and it is located one directory back. */