The physical folder structure on my web server is:
inetpub
oo|
oo|_wwwroot
oooooo|
oooooo|_MyApp ----> this is the root folder of my web application
oooooooooo|
oooooooooo|_images
oooooooooo|
oooooooooo|_styles
oooooooooo|
oooooooooo|_pages
I have an html file (test.html) under the pages folder. I want to link to other files (eg. stylesheets and images) via absolute paths. So, I have a line of code similar to this:
<img src="/images/roundbutton.png" />
When the page is rendered, the image is not displayed, as the "/" tells it to look for the image in a folder wwwroot/images.
Is there another way to use absolute paths to refer to the application root, instead of the site root? Or is using relative paths the only other option?
Yes, use the <base> element.
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.
web page with my uploaded image here
I was trying to find the path my computer was using. I tried the basic code that
I learned in a program I'm currently in, but it didn't seem to work. The path is desktop/my-skillcrush-project/101-skillcrush-project-images/images-icons/html-icon.png
The program directed to download the zip file of the image on my computer and create a folder. With the root directory associated with the file including the image.Then to use this code. <img src="img/html-icon.png" alt="HTML icon"/ (closing tag disappears when I try to type it. Sorry, it's in my code.) and that was it. It seems too simple in my opinion. How should the files be saved so that it will show up??????
What is wrong
The problem is, in the src, you put a relative path. In HTML, a relative path is a path without a slash(/) at the beginning. So, HTML was expecting a folder called desktop in the 101-skillcrush-project-code folder which had all of the other folders and the image.
What you should do
You do not need to put the full(absolute) path for the image. You can put the relative path. That is, relative to where the index.html is located.
Solution
So, in the src of the image, you can put 101-skillcrush-project-images/image-icons/HTML Icon.png.
More Info
HTML File Paths on W3 Schools
HTML File Paths on GeeksforGeeks
It definitely is much easier if you make a clear structure for all of your html assets. That also makes it much easier to handle your paths. So for example start with a root folder - lets name it html, where you put all your html pages in. Inside html create a sub folder for e.g. for your images and css. Folder structure can look like that:
/html image path from html folder: <img src="img/html-icon.png">
|- img save "html-icon.png" here
|- css
|- js
|- fonts
|- etc
To access an image from another folder e.g. css folder, you first have to go one level up with .. and then, go into the img folder. e.g. <img src="../img/html-icon.png">
If you have your images somewhere outside your "web folder" the paths can get a pain. So just organize your assets - it is much more effective and much easier for you to find and work with it.
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
I have many html files, all named index.html but being in different subdirectories.
These files are created by a software. After these files being created, I want to add a Stylesheet to all of them!
If i use SEARCH:"<head>" and REPLACE:"<head><link rel='stylesheet' href='/style.css'>" it wouldnt work because the files would need relative paths.
Any idea how I could achieve my goal? While Iframes are oldschool they do not use the CSS of the main page i assume.
Other ideas?
You could use an absolute path to your CSS-file. Then it doesn't matter that they're in different paths:
<link href="/styles/site.css" ...
Now every file will look up the styles-folder in the root, and the file site.css in that folder
Just use the absolute path as you mentioned.
And DO NOT open your html files directly in the
file://D:/path/to/your/file/index.html
because the root path '/' means D:/
You should setup a http server to host your pages and open them by visiting like
http://localhost/url/to/your/file/index.html
the root path '/' means
http://localhost/
Or upload them to a server.
In this way the absolute path of your css will work correctly.
Forget the relative paths.
I had created one HTML page for my experiance. In this i had use the background image like c:\documents ans settings.....\leftline.png.
But i don't know how to add images from a common directory. (like background-image= ('./images/leftline.png'). how i can do like this?
The second line you have is a relative address, relative to the "thing" that is calling it.
So, say you have a webpage called "index.html" and it lives in
C:\My Documents\WebPages\My Page. You might also have C:\My Documents\WebPages\My Page\images\leftline.png
Now, rather than type in "C:\My Documents\WebPages\My Page\images\leftline.png" we can simply use "images\leftline.png" in our index.html page. Why? Well, check the locations:
C:\My Documents\WebPages\My Page\images\leftline.png
C:\My Documents\WebPages\My Page\index.html
RELATIVE to index.html, leftline is only one directory away, so you can address relatively.
You have to save the images inside the directory of your website and then you can acess these images using relative path.
If your page for example Default.htm lies inside the virtual directory WebSite1 then you can create a folder for images say 'Images' and can point to an image inside the 'Images' directory by using 'Images/image1.jpg'
If from your html file you have to traverse a folder up then you can use '../Images/image1.jpg'
You can also give an absolute path for the image like http://.....
Put the files in a directory that is in the same folder the html file is in. name the folder images.
You need to have this image inside your website.
And then the trick is to work out what URL to use (that's apparently your problem).
When you use an HTML image tag () in you page, then the browser sees the URL you specify. If that URL is relative (does not start with "http://" or a "/"), then it is sees as relative to the URL of the page. So usually you will need some "../" to go back to the root of the site and then back up again to the image.
A URL that is specified inside a .css file is relative to that css file.
If you use asp.net and want to specify the image-url in a server tag ( for instance), then you can use a "~" as first character to specify the "root of the site". This will work only if that URL is processed by the server as a property of some server control.