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/
Related
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.
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">
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 have a hierarchy like:
index.html
/share/index.html
/img/myImage.png
share/index.html is on a sub-domain (http://www.share.foo.com instead of http://www.foo.com).
I would like to access myImage.png from both domains.
So far, I've only been able to find one way to manage this. From index.html I reference the image as:
img/myImage.png
and from /share/index.html I reference the image as:
http://www.foo.com/img/myImage.png
This doesn't feel correct because I shouldn't have to be that explicit with my URL. It should probably be somewhat relative to my own path structure.
I'm wondering what the correct fix here is? Should share/index.html be on the same level as index.html? How would naming conventions work for something like that if they're both supposed to be index.html on the same level? Other suggestions?
To access the image from "index.html" you can use the relative path like you are currently using:
img/myImage.png
However, when you are in the /share/ folder you need to go back a folder:
../img/myImage.png
This is of course assuming your /share/ directory is locate within the root html folder (public_html or whatever yours may be called)
You can use
../img/myImage.png
for getting image in subdomain.
You can use multiple ../ to go back any level in the hierarchy
For eg: ../../ will take two levels back from the current level.
There are two ways to accomplish this
Filesystem way
If the server is on an Unix (Linux) based system, create a symbolic link in /share that points to /img.
From a shell:
~$ cd /docroot/share
~$ ln -s ../img img
This will make all contents of /img appear under /share/img as well.
If you do not have direct shell access to your web-host, you can try creating the symbolic link in your local copy of your /share directory and sync it to the server. To create a symbolic link you do not have to have a copy of the location where it points to on your local computer.
If you are on windows, NTFS supports symbolic links as well, but I can not tell you how that would sync to the web server.
Using relative paths lower than your doc_root (../img/myImage.png) to point to your image from your HTML document, is invalid in this case. It would resolve to: http://www.share.foo.org/../img/myImage.png
<base> tag way
The <base> tag sets the base address where to look for linked content. Downside is: It will form the base for al relative linked content. (Style sheets, images and links). So page linked as <a href=about.hmtl> will point to <base>/about.html.
<head>
<base href="http://www.foo.com/" target="_blank">
</head>
<body>
<img src="img/myImage.png">
</body>
I have a website, let's call it example.com. Within this site, I have some FAQs but the person that built the site saved the FAQ pages under a directory on the site named "FAQs".
As an example an FAQ page would be located at:
example.com/pages/en/faqs/faq-page1.html.
Note the pages/en/ directory. Ideally I would like all the pages to be saved under example.com/index.html etc but I can't change this.
Anyway, when I am on any of these FAQ pages, and I try to link back to say the home page index.html the navigation won't go to the page. So for example, when I am on:
example.com/pages/en/faqs/faq-page1.html
and I try to link back to the home page
example.com/pages/en/index.html (which is where the index page is saved) the nav won't work. Instead it will try to go to example.com/pages/en/faqs/index.html.
Now I am assuming this happens because I am in the "faq" directory, but how do I go back to the root directory when linking? The code for the link is simply Home. I could of course just put in the full link example.com/pages/en/index.html, which would solve this but is there another way around this?
You need to give a relative file path of Home
Alternately you can specify a link from the root of your site with
Home
.. and . have special meanings in file paths, .. means up one directory and . means current directory.
so Home is the same as Home
There are two type of paths: absolute and relative. This is basically the same for files in your hard disc and directories in a URL.
Absolute paths start with a leading slash. They always point to the same location, no matter where you use them:
/pages/en/faqs/faq-page1.html
Relative paths are the rest (all that do not start with slash). The location they point to depends on where you are using them
index.html is:
/pages/en/faqs/index.html if called from /pages/en/faqs/faq-page1.html
/pages/index.html if called from /pages/example.html
etc.
There are also two special directory names: . and ..:
. means "current directory"
.. means "parent directory"
You can use them to build relative paths:
../index.html is /pages/en/index.html if called from /pages/en/faqs/faq-page1.html
../../index.html is /pages/index.html if called from /pages/en/faqs/faq-page1.html
Once you're familiar with the terms, it's easy to understand what it's failing and how to fix it. You have two options:
Use absolute paths
Fix your relative paths
To go up a directory in a link, use ... This means "go up one directory", so your link will look something like this:
Home