How to handle paths in development? (URL)

Hello, how are you today?



We are back for a new tutorial.
What is a path in HTML?


Yep a path in development, is almost this.
Exactly, it is a address to get access to any resource, on a network or your machine.

Your mission, should you accept it, is to add an image in the header of this web page, otherwise the Internet will self destruct in 5 seconds.



With this code:


And here download the image we will use: logo.rar

Ok, now add an image just next to your file.



Keep in mind, we are adding an image server side, where the website files are.



Open the code of the HTML file….
We decided to add the image in the header of our web page.

Ah, I had almost forgot… even it is not the point, that will be useful:
You need to know what is the HTML tag for an image…

Src:
Means source, it is the place where your browser have to fetch the image.

Alt:
Means alternative, description of the image, very recommended for the search engine. (We will have a full tutorial for the search engine optimization!)
Also, some browsers display this text when the image is not found.

Title:
Title of the image.
Stop you cursor on your image for 2 seconds, and the title should appears on any image… well when they have one.

We are not here to fully study the image… too much to say!
There will be another tutorial only for images!

Let’s focus on what you have to learn: paths!
In the header code add:

In the code:

And execute your code, you should see the image on your page!



Yeaaaah!!!


Ah… yep… I use the Death Star as a logo because we won’t use it… you will see

Anyway, nothing is magic!
It works because you said to the browser this file, “logo.png”, is on the server at the same level than the file your browser is reading.
When I am saying it is at the same level, I mean it is at the same level in the folder hierarchy, so these both files are in the same folder.

I repeat again, but if you don’t understand something, just ask!
No silly question!



Let’s move a bit the image… we decided to create a folder to put all images.
Now we have this folder with our logo inside.



Run the same HTML file and your image disappears…
It is normal, we just changed the place of the image and not the image source.

We have to say to the browser than the logo is in the “images” folder.
To do it, we just need to change the path by adding the name of the folder with a slash:

In the cases there are more folders, you just need to add more folders to go deeper in the structure:


Ok, now it worked!

Next mission, if the image is in the parent folder than the file is getting read.
Let’s see an example.

We are going to improve our structure of our game.
Because a website has to be very well organised… a bit like your bedroom!

In “my-first-game” folder add a folder “game”.
Add a “index.html” in the folder game.



The game folder will be the place where we will add the code for our game.
I choose this structure but you can organized your website really how you want!
In this new index, the header and the footer will be the same than the other pages.

So copy everything from “my-first-page” index to the “game” index except article element.

Ok, when you run this file, you don’t see the image.

Hehe you don’t know how to run this script?
Could be an exercise…

Exercise:
– Run this new index
Quick tip: It works exactly like images and folders.
Keep in mind the structure of the website: Where is the file you are running? In which folder is it? And where do you have to go?
(Comment if you have any question!)

Now, the question is… (silence)
How to get the image? (What a intrigue!)

We have to say to the browser that to get the image, it has to go to the parent folder, then enter in the folder “images” and then you have the file.

To go to the parent folder:

That’s it!
There is only one parent to a folder, no need to precise.

Now, you know how to go in a child folder, so just add the child folder to the path:

And the name of the image

In the code:

Yeaahhh!!



From now you know how to get an image from a HTML file!
You will be able to catch them all…

But the adventure is not finished, we just saw the RELATIVE PATHS.

What?
That means the file path (an image here) is relative to the file we are running.

In the main index and in the game index, we got access to the logo with 2 different addresses.
The logo path is relative to the running file!

AND, there is another way to call a file: ABSOLUTE PATH.
What is an absolute path?

Let’s see!

What does your browser do?
If you think about client and server, your browser get the information of your website and receive a relative path in the HTML code.


Your browser is on the client side, so it doesn’t know about the structure of the server.
When your browser parses, in the HTML code, “image/logo.png”, it doesn’t know where it has to fetch data.



To solve this issue, your browser adds the hostname front of the logo path when it is a relative path.

becomes

Super cool!!
The issue is fixed, it knows where the image is, and this is an ABSOLUTE PATH and you can use it straight in your image source.

The ABSOLUTE PATH means it is the whole address of the file.
This address does not depend on anything!

In the main index, replace your image source with an ABSOLUTE PATH:

For me:

And the image is still displayed!

Which method is the best?
Both, is it correct?

There are some advantage and some inconvenient for both:

ABSOLUTE PATH:
– Very boring to change the hostname (need to change all hostname of file)
– Very easy to access to the images with the same address on every files

RELATIVE PATH:
– Very easy to move a project or to change the hostname without destroying image source in the website.
– Not possible to access to images from every files with the same address (Except if all files are in the same folder)


Exercise: because we need to train
– Change the relative path to an absolute path in the game/index.html
– Optimise this PATH:

A last thing!
Yep… vocabulary.
We need to learn if you want to communicate with professional!

Ok, it is written in the title.
What is URL?

Literally, Uniform Resource Locator… I help so much!

It is an address to say where the file is.
To find it physically, on the web, in the world or even on your PC.

Just remember, if an address indicate where the resource is, it is an URL.
SO, indeed, in our case, path is an URL, and we can talk about RELATIVE URL and ABSOLUTE URL.

Because you will heard a lot of different versions about what is what.
So I will create another tutorial to explain the difference between URL, URI and URN.

Even it is just about vocabulary, the most important point is to understand!

See you soon!
I have to give me the plan of my time machine, 10 years backward!
Kiss!