I have a website and need to provide a relative path to a particular file from other html files within the website. However, the website also needs to run locally and so the links are not working.
For example, I have the following structure for my webpage:
\---home
| index.htm
|
+---folder1
| \---sub1
| file1.html
|
+---folder2
| \---sub2
| \---sub3
| file2.html
|
+---links |
**link.html**
I need to provide through a common link that gets embedded in the file1.html, file2.html, and the index.htm pages, a relative path to the link.html file.
I tried <a href="/links/link.htm"> and this works when my page it is hosted on a webserver, but when the page is run locally, the link resolves to C:\links\link.html. I need it to be where ever the index.html file is located. Like C:\home\link\links.html or C:\dir1\dir2\home\links\link.html
How do I provide a common link relative to the index.htm folder when running the webpage locally?
Thanks!
ken
Have not done it recently... but the idea is to use ../../folder123/file.html. Two dots is upper folder and one is current folder. For simple page it is possible to trace and correct the paths in every page (above example results to upperFolder/upperFolder/folder123/file.html) Not recomended for big projects.
When you add just slash at the begining it resolves to root. If there is dot or two dots then it is no longer root but relative path.
Better solution would be to get the address and manipulate the links with script but for simple pages using relative paths is perfect.
Guess it helps.
Related
Please bear with me since I am a noob at html.
Let's say I have a local directory called website saved inside my local Downloads folder, and inside this website directory I have an html file called page.html
Inside the website directory, I also have another directory called folder
Inside the folder directory, I have an html file called page2.html
In the html code for page.html, there is this line of code:
page 2
When I open page.html locally in a web browser, the file path name is file:///Users/myuser/Downloads/website/page.html.
When I then click that page 2 link on the webpage, it brings me to file:///website/folder/page2.html instead of the correct path file:///Users/myuser/Downloads/website/folder/page2.html so it doesn't work.
I know I could change the href link in page.html to file:///Users/myuser/Downloads/website/folder/page2.html but I want this link to work even if I move the website directory into a different local directory. For example, the href link would work whether I have the website directory inside my Downloads, Desktop, or Documents folder, or even if I saved this website directory onto a different PC.
Is there a way to word the href link so that this can happen?
You’ll need to use href="../page.html" in your page2.html file.
I recommend you read up on what a URL is, especially the part Absolute URLs vs relative URLs
So a URL has different parts, beginning with the scheme like file or https.
Image from Mozilla at the before-mentioned URLs
You can skip certain parts at the beginning of a URL, which will give you a relative URL. These parts will be replaced by the user agent (the browser) from the current location.
For example, you can use scheme-relative URLs:
<a href="//myhost.example.com/page.html">
If the page containing that code is served via https, the link will also be completed to https: https://myhost.example.com/page.html. If it’s served via ftp, it will complete to ftp://myhost.example.com/page.html.
The same goes for other parts, and when referencing other pages from the same site, you would use path-relative URLs.
Absolute and relative paths
Now, concerning the path part of a URL, there is also a distinction between absolute paths and relative paths, just like in your operating system.
<a href="/page.html"> is using an absolute path. This means go to the root directory of the same drive or host, to find page.html.
In your case, the page2.html is delivered from file:///Users/myuser/Downloads/website/folder/page2.html.
So when you use a path beginning with / (absolute), it will refer to the root of the drive, so basically C:\ and complete to file:///page.html.
<a href="../page.html"> now is a relative path, relative to the current location. It’s saying go up one directory to find page.html.
So with the same location as before, this will complete to
file:///Users/myuser/Downloads/website/page.html.
My files are set up like this:
Root
|
tours----------------about----------------gallery
| | |
tour1.html about.html gallery.html
I want to link the about.html page to the tour1.html page. Is this possible?
I've tried multiple things and I just can't figure it out. I know that if it were in the same folder I could use <a href="about.html"> and if it was in the root folder I could use <a href="..//about.html"> but neither of those are working.
When working with directories in a lot of places, such as some command line prompts (shells) and other applications, it's very useful to know that using / at the beginning of the the path will traverse to the home directory from any level, while ../ will traverse to the parent directory of the directory you're in.
For example, if I were creating a link from http://www.example.com/path/to/file.html to http://www.example.com I could simply use Home.
If I wanted to create a link from http://www.example.com/path/to/file.html to http://www.example.com/path/file.html I could use File or File.
Finally, if I wanted to create a link from http://www.example.com/path/to/file.html to http://www.example.com/file.html I could use either File or File.
So for your example you could use either <a href="/tours/tour1.html"> (starting from the root) or <a href="../tours/tour1.html"> (going up one folder and then down into the tours folder).
There are different methods
You could use ../ each time to go back one step in your directory and then target your file.
Or(if you are familiar with node/express or ejs templates) you could directly target /filename as you specified in your app.get("/filename",.....
Thank you everyone for the suggestions. I tried out an absolute path instead of a relative path and it worked, so I'm just going to work with that instead.
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´m working in a local project (offline) and need show a txt file outside of directory of html. How implement the relative path?
main-app
|
|-core-app
|
|-logs
| |-log-file.txt
|
|-plugin
|-plugin-core
|-www
|-index.html
The file is on logs folder, I need show it in index.html. I try to use src="../../../logs/log-file.txt" but don't work. An example of the code in html:
<object type="text/plain" data="../../../logs/log-file.txt"></object>
relative to index.html I think that it should be : data="../../logs/log-file.txt". One less directory shift.
Just change the .txt file to a .html file, and add styling... It works just fine, just add a linkto it in index.html.
I have HTML pages that I put inside temp folder(Outside WEB-INF directory). I have used some images inside my HTML pages. I have put those images also in temp folder and then I created my war file. When I run that in localhost, Images are not loaded into HTML pages. It shows all the contents except Images. Then I created a folder images outside WEB-INF directory, put all image files into that and created war file. But the result was same. Can anyoe tell Where I am going wrong?
What might really help is if you can share the structure of your WAR file and also a sample html snippet that shows how you are referring to those image files. The problem maybe the way you are referring to those image files.
Let me answer this question with an example
Lets assume your war structure is as follows
webapp.war
|
|---> WEB-INF
|------|
| ----> classes
|---> index.html
|---> images
|-------|
| ----> logo.gif
The way you'd refer to the image file is as follows
If you are doing this correctly and still not able to view the image files, you need to share some more details as I mentioned above.
Hope this helps.
Good luck!
Have you checked whether the .gif file is in Uppercase or Lower case(you can get this information when you make the war file from command prompt). If the "gif" is in Uppercase in the war file and you have given it as <image background="bg.gif">, then change it to <image background="bg.GIF">. I think this is the problem you are facing.
I have two suggestions for you for serving static content without modifying the war file. The first is what I would recommended.
Setup Apache as front end proxy and use Apache to serve the static content
Copy the static content into ROOT.war under directory say static and then reference the static content as "/static/logo.gif".