I am having a simple but frustrating problem. I have a logo on my website that I want to link back to the website's homepage. If i do href="index.html" it works but I when I try to do href="/", which I believe should also work, it takes me to the literal root directory of my computer.
For example, if I have href="/" and then I click on my logo, it directs me here:
Will this be alleviated as soon as it's hosted on a server? Any insight into this behavior would be greatly appreciated.
You're correct, an href of "/" is the root of where the file is being served from, in this case your local file system.
However, I do believe that setting an href of "index.html" or "/index.html" would be slightly more optimized performance, as "/" just resolves to "index.html" anyways.
I would also suggest you set up your local environment to have a local server, where the files are served not just read by your browser. MAMP is an easy way to do this.
Yes, this is a problem that will only occur if you're viewing a site off your filesystem rather than a local or remote server.
If you'd like to prevent this anyway, you could use relative paths rather than absolute. For example:
If you're on /photos/index.html and would like your header logo to go to /, your link could be: ../ to go up one directory.
If you're on /index.html and would like your header logo to point to the current directory, your link could be: ./ to stay in the current folder level.
You can also add this option to disable directory listing and display contents of index.html
Create a .htaccess file with the following:
Options -Indexes
Or you can have this option in the <VirtualHost> directive.
What you wanted to do can be done by :
This will clear the differnce
Further Refrence
https://www.w3schools.com/tags/att_a_href.asp
https://html.com/attributes/a-href/#Different_URL_Forms
This problem was already answered
Base URL - How to call the home link
Related
I am learning HTML and i am keeping my secondary websites in /subwebsites/website.html
/ is the root folder containing also index.html:
File structure
However, opening the subwebsites anywhere outside of the VSCode live server browser makes the subwebsites not be able to find any stylesheet, other .html file or image anymore. It works with the index.html, but as soon as the website is contained in a subfolder it won't work anymore. I am sure it has to do with the way my paths are set but i tried everything I know off:
styles/main.css
./styles/main.css
/styles/main.css
picture showing how i added my paths
Thanks for your help in advance.
In this case your html file need to go one level up. So for this you can easily use ../.
So just use this:
../styles/main.css ^_^
or
./../styles/main.css for your subwebsites.
But better to think to start use some kind of local server. For example, live-server for VSCode.
Also useful information for you:
/ - root of the current drive
./ - current directory
../ - parent of the current directory
you can use ~/styles/main.css or ../styles/main.css
../ is previous folder
~/ is root of server
The reason, may be server look for style inside this folder. And can't find it.
While uploading a website I made to a domain, I realized that simply putting in the address without any specific paths, the site didn't work. For example, typing in "example.com" leads to the path directory instead of the homepage which would be under something like "example.com/home". How can I set it so that when typing in "example.com" it leads to "example.com/home"? Thanks.
Hi,
Just make a file name .htaccess and put in it this code
DirectoryIndex homepage.html
Take care you can't make .htaccess file from windows explored
Because it unnamed try to write in notepad and save without name just extension
Finally put it in website root (in hompage.html folder).
The element is selected properly because other properties apply. There are no console errors.
I have tried:
img/hero.jpg - works when I click on link in VS Code
/img/hero.jpg - works when I click
../../hero.jpg - work when I click
../img/hero.jpg - doesn't work
the full path - works when I click
The problem is seen here. You can see that images called by the src attribute work.
Here is the file structure.
I honestly don't understand your setup / question, but I think if you understand how relative URLs work a little better you can figure it out yourself.
On your server you have your files in somewhere like,
/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png
On your computer you have your files somewhere like,
C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png
And in your styles.css you have something like this,
body {
background-image: url('/img/background.png');
}
Starting the URL with / tells the browser to interpret it as the root directory. On a Windows PC it will be C:\ and on a Linux PC it'll be /.
However, when you access the page once it is online from a url like https://example.com, the root directory becomes https://example.com/.
Therefore, using /img/background.png will make it look for the image at https://example.com/img/background.png once it is online, but on your local machine it'll be looking for the image at C:\img\background.png
Starting the url without the slash like this, img/background.png looks for the image relative to the folder that the css file is in. So in that case online it'll look for the background here at https://example.com/css/img/background.png and on your local machine it'll look in C:\Users\Nani\Desktop\Website\css\img\background.png
In my example, the best solution would be to use ../img/background.png, that'll look up one directory relative to the css folder, and then in the img folder. That'll work consistently on both your own computer and once it is uploaded.
That should be enough to figure out what you need to do assuming that the problem is the way the url path is declared. Otherwise, the problem might be with something else. For example, it seems like you're using SCSS. Perhaps the SCSS isn't compiled on your local machine (or hasn't been in a while), but it is compiled on the live server?
It works on live server because its settings make location of index.html a root of your document (/). When you open index.html directly your root is different and images aren't loaded from correct location if you start the path with /.
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
I had the same problem and it turns out that I wrote the path wrongly. You have to write the url based on where the css file is, not where the index file is. Because the one that reads the url is the css file. So it should look like this:
body {background-image: url('../img/background.png');}
Because your CSS and your IMG are in different folders.
I just started developing web page, hosted by iPage.
I wanted to publish my own index.html instead of what was given.
But, when I actually enter the page, it directs to the previously changed page, which does not exist anymore.
I can access index.html, but only when I manually type in the address as epseattle.com/index.html.
How do I fix this?
I have tried fix on htaccess already.
Thanks in advance.
Please try this. Rename the original index.html which was available earlier in your web root to something like this index_1.html. And then try http://www.epseattle.com.
If the above not works, kindly post with your .htaccess file content.
In your .Htaccess file, try this:
DirectoryIndex index.html
Try switching off buffering on the iPage server (you can do this via their site). You will also need to do the same on the browser. Your changes should then be immediately visible. Remember, this is for development only and severely restricts performance of your server.
When I code my website, on my local computer i can use
blablabla.
However, I also can see this type of thing on other places as
blablabla.
I am not sure what I will need when my site goes live. If I try to do this on my local computer, it doesn't understand it. My question is, if I post my site up like this, will it work?
Ok, if I have all of the files of my site in the root directory that the main index.html file is located in, will it work when it is being hosted?
If you do not use a slash, the link will point to index.html in the same folder as the page the link is on.
For example, if you have a link to index.html on the page www.example.com/page2.html then the link will take you to www.example.com/index.html. If you include a slash, it will do the same thing.
However, if the link is in a page in a subfolder, like www.example.com/projects/page2.html, then the first link will take you to www.example.com/projects/index.html while the second link will still take you to www.example.com/index.html.
The slash denotes the "web root."
Note that these are still considered "relative" links: they refer to a resource on the same server, regardless of the server's name. If your domain name changes or you upload it to another server, relative links will still work provided they have the same folder structure.