is it a good practice to use / in front of paths in html pages?
If using / for paths, should I set a <base url=""> in my page?
I'm having an issue with a generated css spitting out the following:
background-image: url("/images/pizza.jpg");
as the website is in a domain subfolder, let's say domain.com/project I have a 404 error in the console because the resource is pointing to domain.com/images/pizza.jpg instead of domain.com/project/images/pizza.jpg
I don't want to set <base url="domain.com/project"> ..
In this specific case, how do I work this out?
In general: is it a good practice using / in front of paths, and why?
Use ./ which will point to the current directory (/project).
I use it for a link to the homepage in a subdir (index.php).
And in css it's common to use ../images/pizza.jpg, which means go one folder up and then select the images folder.
Related
How can I change the path of my site using HTML, CSS, or JS. I may be using the wrong grammar here using the word "path", but what I'm referring to is a subdomain, an example would be stackoverflow.com --> stackoverflow.com/questions
I attempted to use the element
<a href="about.html">
<img src="x">
</a>
but it did not work,
You could think of a server's public folder (the one that host your site's static files as HTML, CSS, Js) as a directory in your computer. For you to redirect the user to another path in your site you can use as you said Your link but keep in mind that if you want to go to another folder like yoursite.com/anotherfolder you must to have two things (for this example):
This folder structure in your site:
[ROOTFOLDER]/anotherfolder/index.html
In this case you need to add another file called index.html because is the default path that you get when no file is specified (file being specified: yoursite.com/anotherfolder/file.html).
The HTML anchor tag must to start with a slash like Your link.
Hope it answer your question.
Note
You are talking about a path http://yoursite.com/[PATH], a subdomain is like this http://subdomain.yoursite.com.
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 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.
Is there a way to direct a url such as an image location to your root folder and then into a directory from there.
Currently i am using "../" to go back folders but this gets annoying if you have a complex directory tree.
Thanks
It is just a single character:
/
For example:
/image.jpg
whatever page you put it in, it refers to the same file, root_folder/image.jpg
You can also use <base> to set the base url all urls should be relative to. In general using an absolute path with / is probably prefereable, but <base> may be useful if you have the "root" of your page not on the root of the domain. I.E. example.com/mysite/index.html vs. example.com
https://developer.mozilla.org/en-US/docs/HTML/Element/base
You can just use full Url, like:
http://domain.com/file_in_root_folder.jpg
or absolute paths
/file_in_root_folder.jpg
you can use static addressing that start with http:// and for relational addressing you can use your address with / for example: /foo/bar.jpg
Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.