CODEWITHSUNDEEP
htmlfilepath
nubprog
nubprog

Reputation: 45

html image source meaning of /

relative file path explanation

in the above website, the following example is given to demonstrate relative file path for the image: <img src=”banana.jpg” and there is no / in front of banana because the "image is placed at the same directory where source file is"

in the html tutorial on youtube (1:13:01) that i'm learning from, the images are also placed at the same directory where source file is but a / is used in front of the image name. why was / used here?

Does it have to do with "root of the current web" as stated in the w3 html file path tutorial? If yes, what does "root of the current web" mean? i can't find any explanation that relates to html

enter image description here

Upvotes: 0

Views: 1728

Answers (2)

Ali Vojdanian
Ali Vojdanian

Reputation: 2111

The explanation is available at Difference between links with forwards slashes and relative links

It is going to be easier to understand the concept if the image is located in another folder rather than the main root. For instance, a folder named as "img"

So in your example, <img src=”img/banana.jpg”> indicates that

This would start in the same folder as the current HTML file, then in the img folder, then for the file itself.

<img src=”/img/banana.jpg”> indicates that

This would look at the root of the site's hosting, then find an img folder, then for the file itself.

<img src=”../img/banana.jpg”> indicates that

This would start in the same folder as the current HTML file, then go "back" one folder into the parent folder, then look for a img folder, then for the file itself.

Upvotes: 0

willy
willy

Reputation: 263

A File Path is a concept used in HTML to define the path of the file into the respective website’s folder structure.

It’s an important thing to know the path of files which are going to include in web pages.

Examples In html here is a syntax to include image files in webpages

keep in mind that the img tag is used to insert images as followsand to insert image file in a web page its source must be known.

  <img src ="path" alt ="some text here">
  /*
    alt attribute is used to specify an alternate text for an image, if the image cannot be displayed 

path describe the location of the image file in a website folder. 
    */

Different ways to specify file paths are

<img src=”img_name.jpg”>: 
//It specify that our image is located in the same folder as the current page.

<img src="images/image_name.jpg"> 
//It specify that our image is located in the images folder in the current folder.

<img src="/images/image_name.jpg">
//It specify that our image is located in the images folder at the root of the current web.

<img src="../image_name.jpg"> 
//It specify that our image is located in the folder one level up from the current folder.

enter image description here

In the above example, the public_html folder is the root directory of the website and the index.html file is executed when someone navigates to the homepage of the site (www.example.com).

Hops you' have get an idea

Upvotes: 2

Related Questions