All language subtitles for 18 - URL paths.en

- Absolute URLs are just one way to form a link.

Instead, whenever we are linking to something

that's on the same site, in the same domain name

as the page that has the link,

we can use what's called a relative URL.

Let's imagine we're building a big website.

Eventually we're going to launch this site

at http://www.awesomedogs.com

but meanwhile I'm working on a copy of the site

on my local computer, adding a menu bar.

Later, we're going to put copies of the site

on different servers with different URLs

for testing and review.

If you use the absolute URL for all the links,

the browser will keep trying to get to the pages or files

at http://www.awesomedogs.com, we don't want that.

When I'm working locally, I want all the links

to connect to the local copy of the files.

When you put a copy of the site on a testing server,

you want all the links to point at pages

and files on the testing server.

We want a way to leave out the http://www.awesomedogs.com

part of the URL and have the browser still know

where to find the files.

Creating a relative URL isn't just useful for the A element,

this is a skill we'll use to point to image files,

video files, CSS, JavaScript files, any time we need

to specify a path to a file.

So how do we form a URL from scratch?

Well you need to understand how our files are organized.

There are a bunch of files, organized into a bunch

of directories or folders.

If we want to link to the blog post from March 9th,

we want to say, look inside the folder name blog,

and find the folder named March-9.html.

Filenames have an extension like .html or .jpg,

.css, .js, folder names just have names,

like blog or people, no extension.

The slashes in a URL mean, look inside there,

or go one level deeper.

To create a relative URL we leave off the domain name,

but we include the initial slash at the very beginning.

That tells the browser, go to the root level

of the file structure, the outermost top level

and start from there, or we can write the path

to be relative from the file in which the link is written.

For example, the styles.css file is

in a directory named CSS.

Let's imagine we want to put a link in our CSS file

that points to the logo.gif file,

which is in the images folder.

We could write /images/logo.gif,

or we could write ../images/logo.gif.

The first version creates a URL that's relative

to the root level.

The second version creates a URL that's relative

to the file where the URL is typed out.

The dot dot slash means go up a level.

This whole path means go from where we are now,

up one level, find the folder named images,

and then look inside there for the file logo.gif.

One more thing about URLs relative or absolute.

This URL, http://www.awesomedogs.com/people

is actually looking for a file

at http://www.awesomedogs.com/people/index.html.

People is a folder,

and the URL http://www.awesomedogs.com/people points

to a folder.

Anytime the browser is told to go to a URL

that is folder, it automatically looks

for an index.html file and loads it.

Index.html is a special file name.

This gives us a way to make our URLs pretty or clean

instead of creating file named people.html,

we can create a folder called people,

and inside that folder we put a file named index.html.

This trick only works for HTML files,

not other files.

You don't want to do this with images or CSS.

It also doesn't matter whether you include

that trailing slash or not in a URL

which means that these three URLs

go to exactly the same place.

Making a well structured, elegant URL

to our webpages is an art.

It's worth thinking about

how your URLs effect user experience

and search engine results, and craft them,

the way that you create any content.

Using relative URLs can be super helpful

on a project that moves from server to server

while it's being worked on.