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.
Related
I assume that when I upload a repository, only one file is displayed on the site, and the other files are just sitting there in the folder, waiting to be accessed by the anchor tag. Instead, when I try to click one of the anchor tags hosted on GitHub, it leads to a 404 error. Do I have to make a repository for EACH of my .html files even if they're in the same folder? This sounds very insufficient, I believe there is another way to go about this that I don't know of.
On my main index.html file, I included anchor tags that direct the user to another section of the site with this:
Dashboard
I can already see why this doesn't work but I don't know how to fix it. So I just ended up with this:
Dashboard
I added basic-website because that was the name of my repository. Sadly, it didn't work. Any solutions?
Assuming you mean GitHub Pages and not GitHub.
If your repo is named basic-website then the URL to the top level of the repo will be https://example.github.io/basic-website/.
This means that dashboard.html will have the URL https://example.github.io/basic-website/dashboard.html.
If you link from https://example.github.io/basic-website/ to /dashboard.html then you get https://example.github.io/dashboard.html. Which is wrong. basic-website is missing.
If you link from https://example.github.io/basic-website/ to basic-website/dashboard.html then you get https://example.github.io/basic-website/dashboard.html. Which is wrong. basic-website is there too many times.
Just link to dashboard.html.
Don't put a / to go up to the root of the site.
Don't put a directory to go down into when you are already in that directory.
I faced a problem using a link inside my main html and giving another html file name to the link which is in the same root as the main html.
unfortunately after click on the link the address bar is changed but the page is not loaded and it redirects to the main html page.
this is the way I wrote the link:
click
this is my folder structure:
I also tried with giving the full path but I got this error:
Not allowed to load local resource: file:///C:/my_project/templates/PU.html
As you said in the comments, I assume you're working locally on your computer, so I'm going to answer accordingly.
The first and foremost thing to know is that your main, i.e the file you want users to see first should be named as index.html and it should be in the root directory of your project, i.e according to your question, it should be in my_project.
Now if it is as I said, then your my_project folder/directory will be considered as the root directory. With the help of this consideration, now you can set links with respect to the root directory. e.g:
click
The / at the beginning here tells the HTML to look from the root directory, i.e from my_project in your case.
I don't see any errors in the code you have. Though, I will tell you a few things here.
**./** at the beginning of the link tells HTML to look at the file in the same folder as of the present file. So, if the PU.html file is not in the same folder as of the file you're working on, it will give an error, because as I said, it's looking for the file in the same folder.
There is nothing wrong with your syntax.
click is correct,
but if you have your files in the same directory you don't need ./.
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
When creating the html files for my website, I had no problem understanding how to create links so that users could navigate between pages. For example, this worked fine to send someone to the about page:
ABOUT
I'm having issues upon uploading the html files to my web server.
How, do I get About link to send the user to: www.blahblahblah.com/about ?
My landing page has been renamed index.html.
You need to add http:// in the href to go to a page on an external site:
About page on blahblahblah.com
This is because when you simply link to it without the http:// in front (hyper text transfer protocol) it is trying to go to the page "www.blahblahblah.com" which obviously does not eixst on your server. When you add the http://, the browser knows that it is another website and therefore will bring you to the external site.
Your web server will be configured with a "document root" directory. Usually this is the directory where index.html is located. Place your about.html in the same directory, and the link you provided will link to it if it is served from the same URL-path (that is to say, it's not in a sub-folder). If your files are indeed in the document root, you may prefix your link href attributes with a forward-slash, which indicates that the path is relative to the document root.
As noted in the previous comment, this technique only works for pages hosted in the same directory as each other, on the same host. If the files are in different directories, you must start with the slash, and if they are on different hosts, you must include the full domain and path.
This is what he meant:
<input type="button" value="SampleText" onClick="window.location='http://www.blahblahblah.com/about';">
and this will open it in a new window:
<input type="button" value="SampleText" onclick="window.location='http://www.blahblahblah.com/about';" target="_blank">
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