File Management

What is a URL

URL stands for Uniform Resource Locator. A URL is nothing more than the address of a given unique resource on the Web. 

In theory, each valid URL points to a unique resource. Such resources can be an HTML page, a CSS document, an image, etc. In practice, there are some exceptions, the most common being a URL pointing to a resource that no longer exists or that has moved. As the resource represented by the URL and the URL itself are handled by the Web server, it is up to the owner of the web server to carefully manage that resource and its associated URL.

Protocol

A protocol is a set method for exchanging or transferring data around a computer network. It indicates how the browser must use to request the resouce. Usually for websites the protocol is HTTPS or HTTP (its unsecured version).

Server/Domain

The domain indicates which Web server is being requested. Usually this is a domain name, but an IP address may also be used (but this is rare as it is much less convenient).

Path

The path leads to the resource on the Web server. A path is a slash-separated list of directory names followed by either a directory name or a file name. A directory is the same as a folder.

We can see our file structure as a tree, and the folders as the branches. For example, here’s the file structure of my class website example:
See also: What is a URL -MDN

Manage Your Files

index.html

This file will generally contain your homepage content, that is, the content that people see when they first go to your site. The index.html in the URL can be omitted if we’re trying to reach the index file in a directory. That’s also why we should only have one index.html file in one folder.

Absolute URLs vs relative URLs


Absolute URL:
<a href="https://mengyi-class-website.glitch.me/p1/index.html">p1 homepage</a>
or
<a href="https://mengyi-class-website.glitch.me/p1">p1 homepage</a>

Relative URL:
<a href="p1/index.html">p1 homepage</a>
or
<a href="p1">p1 homepage</a>

Navigating the Files Relatively


When a URL is used within a document, such as in an HTML page,  things are a bit different. Because the browser already has the document's own URL, it can use this information to fill in the missing parts of any URL available inside that document. 

Now our current document is located at “p1” directory
https://mengyi-class-website.glitch.me/p1
and we would like to create a link in this page that reaches another file in the same directory “p1”.

If the path part of the URL starts with the "/" character, the browser will fetch that resource from the top root of the server, without reference to the context given by the current document. 
For example:
<a href="/pages/page.html">subpage</a>
equals to
<a href="https://mengyi-class-website.glitch.me/pages/page.html">subpage</a>
We can tell from the URL that this is not the correct path we want.