I am building a website. The files are:
/index.php
/pic.jpg
/dir/index.php
/dir/pic.jpg
people can visit my site's dir/index.php page using different urls:
1. site.com/dir
2. site.com/dir/
3. site.com/dir/index.php
I have a link in /dir/index.php, which I want to relativly link to /dir/pic.jpg :
<a target="_blank" href="pic.jpg">
The problem is: people using url 1 get /pic.jpg , and others using url 2 or 3 get /dir/pic.jpg
How can I write a relative <a> link in /dir/index.php that links to /dir/pic.jpg whatever url visitors use?
I want to make folder dir portable (I may change dir's name, or copy dir folder to another site so it may have different path), so hard code href="/dir/pic.jpg" isn't a good solution.
You can use ../ to go back a directory. Thus, if you're in the dir folder and you want to go out of this folder into its parent directory you can use:
<a target="_blank" href="../pic.jpg">Link</a>
Or you can simply just use your site's URL (however this isn't as robust):
<a target="_blank" href="http://www.example.com/pic.jpg">Link</a>
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.
I have two local pages, one called Index.html
https://pastebin.com/wA1Y1WC0
And another called biographies.html
https://pastebin.com/PBeW2hz8
The folder structure is Project1 for the root, which contains Index.html and a folder there called members that contains biographies.html.
When I follow the link:
a href="members/biographies.html/#John_Lewis"
and then try
a href="../Index.html"
The link back to Index does not work.
However, if I open biographies.html directly the link back to Index does work. I am restricted to using relative paths, and I have tried changing the path on the biographies page multiple times, including ../Index.html AND /Project1/Index.html to no avail. Can anyone give me a pointer as to why this doesn't work? I've asked my teacher and we are both stumped. Thanks!
When you serving from the file system, a link to /file.html means to look in the root of the drive for a file.html.
When dealing with a webpage served by the file system, you should only use relative links.
You also had a stray slash after the file name, remove that
/root/Index.html => <a href="members/biographies.html#John_Lewis">
/root/members/biographies.html => <a href="../Index.html">
I do a lot of off line programming.
Sometimes for example this path /a/b/c/d.html
to go backwards to an anchor at a/a.html
I frequently see ../ or ../../ what do they mean, how are they used?
how do I use them and not have to put the entire path of the website in,
if the main site is html.com
how do I use the folders without using html
example I want the anchor at a/a.html without using html.com/a/a.html
would this work the same to not have to use it? ../a/a.html
did not work in offline mode
explain please
so that I don't have to re write the links from offline to public html
and the sites name
../image.jpg means 'go up one directory and use image.jpg'
./image.jpg means use the image in this directory
/image.jpg means 'use the image from the root directory of the website'
So this example:
<img src"../../images/image.jpg" alt="an image">
Uses the image from 2 directory levels up and then go in the images directory and then use image.jpg.
That should get you started.
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 am very new to html. The following link works on a web hosting I am making:
Profile <br />
If I want to make a link on my local server would it be something link this?
Profile <br />
If you would like to make localhost link you should not use localhost, its enough to use folders & files only.
Here 2 link examples:
Link number 1 - localhost link
this link can be used not only in localhost, also in online server hosting, all you need is the file location you need and his extension (.php, .js, .html and more...)
assuming that file.html is inside folder1 and I would like to add link that will direct me in to it, i will write the next code:
File.html
lets assume the file i want to be redirected to is one folder back from my website, so I'll add ../ to return back and go to file.html.
This file is one folder before my website.
Link number 2 - unlocalhost link
A link who's not inside my website folder / hosting server will redirect me to other side, for example, stackoverflow.com website, if i would like to add link into stack overflow I will write the next line:
go to stackoverflow.com