i have multiple folders with other htmls, i want to link them all between each other.
folder structure looks like this:
Main Folder
index.html
nav.js
Project Folder
project1.html
project2.html
images
image1.png
image2.png
this is how i try to link:
index.html:
project1.html: <img src="./images/image1.png> <script src="./nav.js">
it works with visual code live, but doesn't work when i open just index.html.
i get error for not loading neither image or script, and when i press on a i get another error of page not found.
i want to figure out what is proper way of linking items inside multiple folders and in which case i have to use "./" or "/" and if there is anything else.
When you start a URL with "/", it goes to the very beginning (root) of the path.
When using VSCode Live Server, it runs a local server which has a root path of the directory you have open in VSCode. With live server, you will have a URL like localhost:5000/index.html. As the root path is in the same location where the index.html is located, you can just type /index.html to access it.
When you manually open the index.html, the root directory changes to the root of the drive you have the file located in (e.g. C:). If you open the file manually, your web browser is opening something like C:/Users/User/Desktop/Website/index.html. If you were to try access /index.html, it would then go to C:/index.html on your hard drive.
If you are trying to access a file that is in the same directory as the current html file you have open, you want to remove the / from the beginning of the URL.
If you are wanting to access a file that is accessible from the parent directory, you want to have it start as ../
To make what you currently have work when you directly open the .html file, make the following changes:
index.html
Before:
After:
project1.html
Before: <img src="./images/image1.png"> <script src="./nav.js">
After: <img src="../images/image1.png"> <script src="../nav.js">
Related
I want the path to the file to look like this: "/assets/style/home.css"
But even though VSCode recognizes this path, and takes me there when I click it, the CSS doesn't appear on the page. It only appears when the path has the two dots: "../assets/style/home.css"
Any ideas on how can I fix this? This is what the entire path looks like:
It's like that with every single path I use in this project, actually. I have to use the two dots for everything.
The "../" means that it is to return a directory, as your HTML file is inside the PAGES directory it is necessary to use the "../".
To call the css file like this "/assets/style/home.css" you need to move the assets folder into the PAGES folder
The "../" before the file path is used to move up one directory level. It seems that the HTML file linking to the CSS file is in a subdirectory and the CSS file is in a directory one level up. If you want to use the path "/assets/style/home.css" the file should be in the same directory as the HTML file or a subdirectory of the HTML file.
You could also consider using absolute path instead of relative path, it would work regardless of where the HTML file is.
Upvote if it helps.
Your code should work if RANDOMWEBSITE is the root folder of the web server.
It will work in VSCode if you open the folder RANDOMWEBSITE, but perhaps your webserver is configured to use a different root folder above your directory.
For example the root folder might be html, and your website is at html/RANDOMWEBSITE/. In this case it would look for the css file in html/assets/style/home.css, rather than html/RANDOMWEBSITE/assets/style/home.css.
Check what the root folder of the webserver is set to and reconfigure, or alternativly remove the RANDOMWEBSITE folder from your folder tree and work within the existing root folder.
You have to do that because .html is isn't "in the same line" as css. You can imagine that it's something like a crossroad if turn right but then you realise that you want to go left firstly you have to go back and than you can turn left. If you want do do "/assets/etc" you need to move you .html file to "randomwebsite/.html"
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 directory is shaped like this
image
in order to use my navbar between different html files, I made it into a seperate html file and use a placeholder to insert it where i need it. the problem is that now the links get thrown off.
for example: when im on the index file, the link works without a problem. however, when im in the about_us file, the link throws a cannot find in directory error because it would need ../ in front of the link.
any javascript I have also does not work for the nav.html.
any suggestions? is there a way to create links and start the directory from the root?
To navigate to the correct HTML file, you have to pass the full path of the HTML file.
For eg: If your application is running in https://localhost:8080 than you have to pass the full path as below:
Home
About Us
Or if you directly opening the HTML file in your browser without any server, than pass the full path of your project folder as below:
Home
About Us
Note: Always use the file or folder name with a hyphen - or underscore _.
For eg: instead of html files rename your folder name as html_files or html-files.
I have just uploaded two images to my website in "images" folder. I'm trying to display them using img tag -but all I'm getting is broken tag. So I have tried to open the image in a new tab using it's URL. But the URL kept on loading forward and backward and finally stopped displaying a blank page. Please help
<img src="images/guestbook4.jpg" width="129" height="63" name="MyImage5">
Here's the URL to the image I've uploaded
your image directory is in the root. so you can access to it from the root or from the current path.
when you set image src to example/avatar.png, that means, example folder exist in current path. so the request will send to example directory in current path. if your code file not be in the same directory that example directory exist in, this problem occur.
if you use /example/avatar.png, that means, example folder exist in root. so the request will send to example directory in root path.
I am working on embedded website that will be served by a device running Linux. We are trying to maintain a system where editable items are in root/var/data/.. and static files are in root/opt/..
Right now my server.js is located at root/opt/webapp/server.js, i have an html file at root/opt/webapp/html/file.html
in the file.html i need to render images that are in the root/var/data folder, but my understanding of now this works is node considers localhost at root/opt/webapp(the location of server.js) how do I tag to a file that is outside of said local host but still within the file directory of the device?
I attempted an absolute path but the html just assumed that it should start the chain from localhost so
looks at http://localhost:8080/file:/C:/projects/root/var/data/fms/share/icons/avocado.png
The var folder is two folders up from your .html file, so it sounds like you're looking for either:
../../var/data/fms/share/icons/avocado.png (relative)
/root/var/data/fms/share/icons/avocado.png (root-relative)
It depends on how you're linking to the file, but you may also be able to use the absolute path relative to C::
file:///C:/projects/root/var/data/fms/share/icons/avocado.png