I have been asked to make some changes to a friend's company website. It uses a PHP insert file for the header on each page, which is useful as the navigation etc is the same on every page.
The following code designates the company logo on every page:
<div id="logo">
</div>
As you can see, the href of the a tag contains only a forward slash / as it's path.
The link is working fine, and connects to the index.php page.
I'm wondering how it is doing this? Seeing as the default page for the domain is controlled by the server config file, is this a shortcut to link to whatever the default page is designated as?
I've never seen this done before, and I can't seem to find any documentation concerning it. I appreciate any information you can provide.
That link brings you to the public root, and then the default file kicks in.
It's the relative equivalent of an absolute path, such as http://stackoverflow.com/
In Linux and other Unix-like operating systems, a forward slash is used to represent the root directory, which is the directory that is at the top of the directory hierarchy and that contains all other directories and files on the system. Thus every absolute path, which is the address of a filesystem object (e.g., file or directory) relative to the root directory, begins with a forward slash.
Forward slashes are also used in URLs (universal resource locators) to separate directories and files, because URLs are based on the UNIX directory structure. A major difference from the UNIX usage is that they begin with a scheme (e.g., http or ftp) rather than a root directory represented by a forward slash and that the scheme is followed directly by the sequence of a colon and two consecutive forward slashes to indicate the start of the directories and file portion of the URL.
via: http://www.linfo.org/forward_slash.html
It is a relative URI. Since it consists of just the path part, it maintains the current scheme, host, port etc and so takes you to http://www.example.com/ (assuming you were on http://www.example.com/foo/bar?baz=x#123 )
The browser then requests / from www.example.com using http on the default port (80).
The server then devices what send back. How it does this depends on what the server is and how it is configured.
Since you mention index.php there will be something that tells the server to use that.
If we use Apache as an example, that will be a combination of the DirectoryIndex directive and something to tell Apache how to handle PHP programmes.
Related
I know ../ means go up a path, but what does ./ mean exactly?
I was recently going through a tutorial and it seems to be referring to just a file in the same location, so is it necessary at all? Can I just not use it if that's all it's doing?
/ means the root of the current drive;
./ means the current directory;
../ means the parent of the current directory.
You can use the following list as quick reference:
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
Useful article:
https://css-tricks.com/quick-reminder-about-file-paths/
./ is the the folder that the working file is in:
So in /index.htm ./ is the root directory
but in /css/style.css ./ is the css folder.
This is important to remember because if you move CSS from /index.htm to /css/style.css the path will change.
. = This location
.. = Up a directory
So, ./foo.html is just foo.html. And it is optional, but may have relevance if a script generated the path (relevance to the script that is, not how the reference works).
Yes, ./ means the current working directory. You can just reference the file directly by name, without it.
A fast and small recap about paths
Absolute paths
http://website.com/assets/image.jpg
IF the image is not on your domain - go look there for image
//website.com/assets/image.jpg
image loaded using http or https protocols
Relative paths
(For internal use if the image is on the same server)
image.jpg
image in the same place as the document calling the image!
./image.jpg
Same as above, image in the same place as the document calling the image!
/assets/image.jpg
Similar to Absolute Paths, just omitting the protocol and domain name
Go search my image starting from my root folder /, than into assets/
assets/image.jpg
this time assets is in the same place as the document, so go into assets for the image
../assets/image.jpg
From where the document is, go one folder back ../ and go into assets
../../image.jpg
go two folders back, there's my image!
../../assets/image.jpg
go two folders back ../../ and than go into assets
You are correct that you can omit it. It's useful only for clarity. There is no functional difference between it being there and not being there.
For example css files are in folder named CSS and html files are in folder HTML, and both these are in folder named XYZ means we refer css files in html as
<link rel="stylesheet" type="text/css" href="./../CSS/style.css" />
Here .. moves up to HTML
and . refers to the current directory XYZ
---by this logic you would just reference as:
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
Yeah ./ means the directory you're currently in.
Do NOT use ./ as a web path! I explain why and what it is below...
TRUE WEB PATHS YOU SHOULD ALWAYS USE
../siblingfolder/file.html is a web path that starts from the folder you are in, goes up one parent folder (../), goes down into a new folder called "siblingfolder" and to "file.html" inside it. This is a type of relative path in the web world.
childfolder/file.html is another kind of web path that starts from the folder you are in and goes down to "childfolder" and "file.html" inside it. This is also as a relative path.
/subrootfolder/file.html is a web path that starts from the web root of your website and goes down from the web root into "subrootfolder" as an absolute path. Note: This path has the added advantage in that it works from any file and folder location on the server.
http://somewebsite.com/subrootfolder/file.html is another web path which works exactly the same as the ones above, but requires your web domain in the path. It still works but is very limiting because the web domain is hard-coded into the path. Some call this a fully qualified web path, which has some uses. The web browser also resolves most file paths to this address or an IP version of it.
AWKWARD AND RARELY USED PATHS
. is a shorthand for the current location or file context and is used in Linux and Unix to execute a compiled program in the current directory. That is why you don't see this used in Web Development much except by open source, non-Windows frameworks like Google Angular which was written by people stuck on open source platforms.
./ also resolves to the current directory and is atypical in Web but supported as a path in some open source frameworks. Because it resolves the same as no path to the current file directory its not used. Example: ./image.jpg = image.jpg. Even though it is used by software to identify a current folder location, because it is identical to the current software path or file location, it is the same as no path so redundant. Again, this is a relic of Unix operating systems that need path resolutions like this to run executables and resolve paths for security reasons. Its not a typical web path. That is why this syntax is redundant in HTML and web technologies.
//somewebsite.com/folder/folder/file.html this is a form of a fully qualified web URL resolution format. "//" tells the web browser to determine the fully qualified web URL/URI at runtime and concatenate the right http protocol onto the front of your path as so: https://mywebsite.com/folder/folder/file.html. It allows the browser to query one of many web domains and determine the most secure location or protocol to use: Either "http" or "https" as the most favorable and secure prefix. This is rarely used in most internal web paths but likely found in link href attribute paths in newer HTML5 elements and used when adding links to resources that may resolve to unknown dynamic secure socket layer connections at runtime that change.
PATH EQUIVALENTS
folder = /folder a relative path is the same as an absolute path in this case if the file accessing this child "folder" is located under the web root directory. Both paths would work the same for them.
../folder = /folder a relative path going up to a parent folder then down to "folder" is the same as the absolute path if the file accessing this path again is in the web root directory.
./folder = folder both relative paths start with the files current folder and point to the child "folder" under them no matter where these folders are located, so are the same. "./" is therefore redundant.
./file.html = file.html both relative paths point to the current folder and then to a "file.html" inside that folder. This means use of "./" is redundant.
./ = {no path} an empty path is the same as ./ in the web world so redundant again.
./ = / only true again if the file is under the web root folder. Again this means "./" is redundant.
MY WEB PATH RECOMMENDATIONS
ALWAYS use Absolute Paths ("/myfolder/myfile") whenever possible as they will always work from any file location in the web project, add no confusion to developers, moving files with absolute paths will not change paths, and they are easy to maintain and manage. The only drawback to absolute paths is if you move the files or folders being pathed to new locations (example: You move an image or CSS folder of files to a new location later in the project). That is why I recommend you manage paths via server-side virtual paths, application paths, or server-generated variables so you can change absolute paths dynamically as you move things around.
ALWAYS use Relative Web Paths ("../myfile") as a secondary option. These are a must for CSS file paths, CSS imported files, or font paths within CSS files. They should only be used if your web application is designed with many parallel applications running side-by-side under one domain, and have nested and heavily dependent resource files running inside them that must be separated. In that one case, you will often move these applications as one module deeper into the application making relative pathing more valuable. You will determine paths relative to the source files in that case and not relative to the web domain via absolute paths. As above, I would still manage paths via server-side or virtual application generated paths. This makes paths extremely simple, robust, and easy to dynamically update on the fly via server variables rather than inside scripts and dependencies which constantly evolve.
NEVER use the other paths listed unless forced to by atypical, 3rd party, proprietary software conventions that use substandard pathing solutions that add confusion and added maintenance. :(
./ = Current directory
This is correct but as i figured out from some templates that i worked on before, the purpose of this identification is to remind the developer that the file to be accessed is not actually in the same directory as the HTML file being worked. Yes, I know it sounds weird.
Developers who use such definitions usually put a <base href=""> tag at the beginning of the HEAD block of the HTML page. Double quotes also indicate the directory they want to reach, so they don't have to define phrases like "../images" to access all of the image files that are not in the same directory as the HTML.
For example,
/main
/ /assets
/ / /css
/ / /images
/ / / /logo.png
/ /html
/ / /demo
/ / / /index.html
/ /plugins
every time you want to access the files in the images folder from the index.html file on a website with a directory structure like above, you need to use the src="../../assets/images" path. If you specify <base href="../../assets"> instead, you can now just use "images/" or "./images". Of course, remember, in this case, you will need to specify the file locations accordingly, as other page links will also be based on that <base> tag. So it's up to you whether you need to use it or not.
I did not wrote this to find the correct answer. This is my experience about the "./" usage so i wanted to share it. I hope it could help anybody.
In reference to the quick reference list, specifically you can use the following :
\.\ Root Directory + Current directory (Drive Letter)
I came across an HTML anchor which reads Home.
Normally we put something like Home but when I click on Home I am able to go to the index page on the website.
I can't replicate the behavior on localhost.
Why does \ direct to the website's homepage, and was it intentional on the developer's part?
You are correct that it is incorrect, and it's almost certainly not intentional. Backslashes (\) are considered unsafe in URLs, and if a backslash is necessary in your URL you would normally have to encode it as %5C.
Why it works
As Rocket Hazmat pointed out in a comment on your question, most browsers automatically substitute / for \ in URLs.
So the link to \ is converted to /, which requests the root of the current server. The server is probably set up to serve some default file like index.php when it receives a request for a directory, and the result is loading the homepage.
Why it doesn't work in localhost
I don't know your local http server setup, but chances are it hasn't been configured to serve a specific page (like index.php) when it receives a request for a directory. So you are likely just seeing a directory listing of whatever is at the root of the local http server you are running locally.
I have a site:
example.com/index.html
There is a subfolder (subsite):
example.com/subsite/different_index.html
different_index.html contains a form:
<FORM action="different_index.html?action=edit">
However, when the submit input button on this form is clicked, the page attempts to redirect to:
example.com/subsite/subsite/different_index.html
I've tried making the form action the exact url needed:
<FORM action="example.com/subsite/different_index.html?action=edit"> <!-- target self -->
But I still get:
example.com/subsite/subsite/different_index.html
subsite is duplicated within the URL.
Any ideas how to correctly target this form?
The fact that you have a form is actually irrelevant. What you are really asking is about referencing resources and the rules are pretty simple:
If the resource you need is part of the same web site (not talking about folder structure here, talking about domain), you should use relative paths, where:
a. fileName.ext is all you need if the resource is in the same folder as the currently loaded document.
b. folderName/fileName.ext is what you need if the file you need is in a sub-folder of the current folder that the loaded document is in.
c. ../fileName.ext is what to use if the file you need is one directory higher than the current document's folder. The ../ can be repeated if you need to go up more than one level (i.e. ../../fileName.ext).
d. /fileNameext or /folderName/fileName.ext indicates that the file or folder specified should be found starting from the root of the web site, regardless of where the current document is.
If the resource you need is located on another domain, you'd use an Absolute Path (http://something.something/file.ext).
a. DO NOT use absolute paths for local resources! This may work but causes the domain name to have to be resolved again, resulting in a longer load time.
WARNING: Different servers have different configurations and requirements that may affect whether these reference rules work or not. For example, GoDaddy web hosting provides an "httpDocs" folder at the root of a web site. You don't have to use it, but that's where their servers expect the site's content to be placed. Not following those rules result in relative paths not working. Additionally, many servers are hosted on operating systems the have case-sensitive file systems, so always refer to files and folders in the same case that is actually used. Again, not doing this may work for you locally, while you develop (because you haven't moved the files to the remote server yet), but don't let that lull you into thinking that case doesn't matter.
I've uploaded several files to my server and it's really quite baffling. The home page is saved as index.html, and when I type in the URL of said page it miraculously, and quite successfully shows the right page. What about my other pages? I have linked to them from the home page with the following code:
About Us
How does my html file, presumably called about.html, supposed to know that its URL is "http://www.example.com/about/"? I am dubbing this "The Unanswered Question" because I have looked at numerous examples of metadata and there is nothing about specifying the URL of a page.
It depends on what type of server you are running.
Static web servers
If it is the simplest kind of static file server with no URL aliasing or rewriting then URLs will map directly to files:
If your "web root" was /home/youruser/www/, then that means:
http://www.example.com -> /home/youruser/www/
And any paths (everything after the domain name) translate directly to paths under that web root:
http://www.example.com/about.html -> /home/youruser/www/about.html
Usually web servers will look automatically for an "index.html" file if no file is specified (i.e. the URL ends in a /):
http://www.example.com/ -> /home/youruser/www/index.html
http://www.example.com/about/ -> /home/youruser/www/about/index.html
In Apache, the filename searched for is configurable with the DirectoryIndex directive:
DirectoryIndex index.html index.txt /cgi-bin/index.pl
That means that every request to a path that ends in a / (and to add yet another rule, under some common settings it will automatically append a / if the path is the name of a directory, for example 'about'):
http://www.example.com/ -> /home/youruser/www/index.html
-> or /home/youruser/www/index.txt
-> or /home/youruser/www/cgi-bin/index.pl
Web servers with path interpretation
There are too many different types of servers which perform this functionality to list them all, but the basic idea is that a request to the server is captured by a program and then the program decides what to output based on the path.
For example, a program might perform different routes for basic matching rules:
*.(gif|jpg|css|js) -> look for and return the file from /home/user/static
blog/* -> send to a "blog" program to generate the resulting page
using a combination of templates and database resources
Examples include:
Python
Java Servlets
Apache mod_rewrites (used by Wordpress, etc.)
Links in HTML pages
Finally, the links in the HTML pages just change the URL of the location bar. The behavior of an HTML link is the same regardless of what exists on the server. And the server, in turn, only responds to HTTP requests and only produces resources (HTML, images, CSS, JavaScript, etc.), which your browser consumes. The server only serves those resources and does not have any special behavioral link with them.
Absolute URLs are those that start with a scheme (such as http: as you have done). The whole content of the location bar will be replaced with this when the user clicks the link.
Domain relative URLs are those that start with a forward slash (/). Everything after the domain name will be replaced with the contents of this link.
Relative URLs are everything else. Everything after the last directory (/) in the URL will be replaced with the contents of this link.
Examples:
My page on "mydomain.com" can link to your site using the Example.com about just as you have done.
If I change my links to about then it will link to mydomain.com instead.
An answer your question
How does my html file, presumably called about.html, supposed to know that its URL is "http://www.example.com/about/"?
First, the file itself has no idea what its URL is. Unless:
the HTML was dynamically generated using a program. Most server-side languages provide a way to get this.
after the page is served, client-side scripts can also detect the current URL
Second, if the URL is /about and the file is actually about.html then you probably have some kind of rewriting going on. Remember that paths, in their simplest, are literal translations and /about is not the same as about.html.
Just use /about.html to link to the page
Theoretically, it's better for URLs in your documents to be relative, so that you don't have to change them in the event you change the domain or the files location.
For example, if you move it from localhost to your hosted server.
In your example, instead of www.example.com/about.html use /about.html.
Given the link above you would need a about page named index.html located in a directory named about for your example to work. That is however not common practice.
I'm a bit confused, but here is some information. Any file named "index" is the default display page for any directory(folder) when trying to view that directory.
All files in a folder are always relative to that directory. So if your link is in a file, within a different directory, then you must type in that directory along with the file. If it is the same directory, then there is no need to type in that directory, just the file name.
about.html doesn't know what it's URL is, its the index.html file that calls your about.html file.
When you're in any given directory, linking to other pages within that directory is done via a simple relative link:
About Us
Moving up a directory, assuming you're in a sub folder (users) perhaps you can use the .. operator to navigate up one directory:
About Us
In your case your about page is in the same directory as the page you're linking from so it just goes to the right page.
Additionally (and I think this may be what you're asking) if you have:
about.html
about.php
about.phtml
about.jpg
for example, and you visit http://www.yoursite.com/about it will automatically bring up the html page and the other pages should be referenced explicitly somewhere if you want them to be used.
I'm loading a html file hosted on the OS X built in Apache server, within that file I am linking to another html file in the same directory as follows:
<a href="2ndFile.html"><button type="submit">Local file</button>
This works. However (for reasons too lengthy to go into) I am experimenting using the file: scheme instead, however I cannot get anything to work. Here is how I am re-writing the above line using file:
<a href="file://192.168.1.57/~User/2ndFile.html"><button type="submit">Local file</button>
(192.168.1.57 is my current IP address)
Changing it to the following does also not work:
<a href="file://Name-Of-MacBookPro/~User/2ndFile.html"><button type="submit">Local file</button>
But the file cannot be found, how should it be specified using the file: scheme?
The file: URL scheme refers to a file on the client machine. There is no hostname in the file: scheme; you just provide the path of the file. So, the file on your local machine would be file:///~User/2ndFile.html. Notice the three slashes; the hostname part of the URL is empty, so the slash at the beginning of the path immediately follows the double slash at the beginning of the URL. You will also need to expand the user's path; ~ does no expand in a file: URL. So you would need file:///home/User/2ndFile.html (on most Unixes), file:///Users/User/2ndFile.html (on Mac OS X), or file:///C:/Users/User/2ndFile.html (on Windows).
Many browsers, for security reasons, do not allow linking from a file that is loaded from a server to a local file. So, you may not be able to do this from a page loaded via HTTP; you may only be able to link to file: URLs from other local pages.
the "file://" url protocol can only be used to locate files in the file system of the local machine. since this html code is interpreted by a browser, the "local machine" is the machine that is running the browser.
if you are getting file not found errors, i suspect it is because the file is not found. however, it could also be a security limitation of the browser. some browsers will not let you reference a filesystem file from a non-filesystem html page. you could try using the file path from the command line on the machine running the browser to confirm that this is a browser limitation and not a legitimate missing file.
The 'file' protocol is not a network protocol. Therefore file://192.168.1.57/~User/2ndFile.html simply does not make much sense.
Question is how you load the first file. Is that really done using a web server? Does not really sound like. If it is, then why not use the same protocol, most likely http? You cannot expect to simply switch the protocol and use two different protocols the same way...
I suspect the first file is not really loaded using an apache http server at all, but simply by opening the file? href="2ndFile.html" simply works because it uses a "relative url". This makes the browser use the same protocol and path as where he got the first (current) file from.
I had similar issue before and in my case the file was in another machine
so i have mapped network drive z to the folder location where my file is
then i created a context in tomcat
so in my web project i could access the HTML file via context
For apache look up SymLink or you can solve via the OS with Symbolic Links or on linux set up a library link/etc
My answer is one method specifically to windows 10.
So my method involves mapping a network drive to U:/ (e.g. I use G:/ for Google Drive)
open cmd and type hostname (example result: LAPTOP-G666P000, you could use your ip instead, but using a static hostname for identifying yourself makes more sense if your network stops)
Press Windows_key + E > right click 'This PC' > press N
(It's Map Network drive, NOT add a network location)
If you are right clicking the shortcut on the desktop you need to press N then enter
Fill out U: or G: or Z: or whatever you want
Example Address: \\LAPTOP-G666P000\c$\Users\username\
Then you can use <a href="file:///u:/2ndFile.html"><button type="submit">Local file</button> like in your question
related: You can also use this method for FTPs, and setup multiple drives for different relative paths on that same network.
related2: I have used http://localhost/c$ etc before on some WAMP/apache servers too before, you can use .htaccess for control/security but I recommend to not do so on a live/production machine -- or any other symlink documentroot example you can google