✅ HTML File Paths Tutorials | Master Relative File Paths and Absolute File Paths

✅ This HTML file paths tutorials will teach you the required techniques and skills to correctly specify the relative file paths and absolute file paths.
💡 What is the relative file path? A relative file path means, the file path starts from the location of the file we are linking from and points to another file in the same folder or another folder. And the location of the pointed file is always relative to the location of the file we are linking from.
💡 Key things to remember when you specify the Relative File Path:
👉 ./ this means current folder, you can use this to specify the relative file path when the file we want to link to is in the same folder as the file we want to link from
👉 ./child/ this means go to the child folder from the current folder, you can use this to specify the relative file path when the file we want to link to is in the child folder of the current folder.
👉 ../ this means to go one level up from the current folder, you can use this to specify the relative file path when the file we want to link to is in the one level up parent folder of the current folder.
👉 ../../ this means go two levels up from the current folder, you can use this to specify the relative file path when the file we want to link to is in the two levels up parent folder of the current folder.
💡 What is the absolute file path? An absolute file path means, the file path always starts from the root element OR root folder and includes all the folder list, to locate the file.
💡 Key things to remember about Absolute File Path:
👉 Don't use the Absolute File Path, which starts from your computer's root folder like this: Because It only works on your own computer.
👉 You can of course feel free to use the Full URL Link to an external file from other web pages like this, but, make sure it is accessible.
😊 If you want to learn more about different HTML section headings H1, H2 which we used in this lecture's coding example, here is the link for that:
👉 • HTML H1 H2 | Visual Ex...
😊 If you want to learn more about the HR tag we used in this lecture's coding example, here is the link for that:
👉 • Hr Tag Example | Stop ...
😊 Here is the link for the HTML project for this picture:
👉 github.com/AihaitiAbudurehema...
😊Here is the link for how to find the absolute file path on mac:
👉macpaw.com/how-to/get-file-pa...
😊Here is the link for how to find the absolute file path on Linux:
👉www.informit.com/articles/art...
👉elearning.wsldp.com/pcmagazin....

[@consig1iere294]

This is probably the only video that explains this topic. Every other video just dances around the topic but never touches it.

[@ashimghoshfm]

Nobody taught as well as you this content. Your technic to understand the full meaning of how path exactly works, is now fully clear to me. Thanks a Ton, Dear Sir.

[@jefsonnelson202]

Hey man still here in 2023 this video is the best content out there on KZbin getting the job done of clarifying the practical run down of how this works from a practical standpoint. Great teaching technique and attention to detail, with amazing simplicity for the mind of a beginner or someone who is having a hard time letting this concept sink in.

[@brainrot34]

I wanted to get a deeper understanding of relative paths, and this definitely helped with that! Thank you for sharing your knowledge :)

[@spiritech7162]

hard to find such basic concept clearing tutorials, thanks a lot a big help for beginners.

[@BrightEyes24]

This is extremely helpful and the first time I’ve understood absolute and relative paths. Thank you.

[@kootkot]

You are very welcome and I am really happy that it was helpful 😊 Happy learning 👏

[@ali-pc7nv]

Not just best explanation of this subject, but!!! It is best one on the world ever exist!!!! Brilliant lesson

[@seifhamlaoui6529]

you are the best! , your explanation is very clear and different from many others on youtube

[@FINDROBLOX]

thank you so much man best way to explain it i moved my files around in folders to be more organized but did not know how to access them correctly but now i do so thank you

[@arunhazra484]

Thank you so so much. before this video I was struggling with this problem a lot. I used to copy all the files and paste in the sub directory to do the task. But you taught me an efficient way of doing it. Thanks again❤. Keep creating such amazing contents.👍🏻

[@asfandyar_ali]

This was a life saver. Thank you so much. Appreciated.

[@mawuenajoy9313]

Thanks🙏🙏 spent two days tryna understand this. You gained a subscriber ♥️♥️

[@bencielcabutin6815]

Great video! You have a passion in teaching. Thank you sir :) Subscribed!

[@alexpaulin5158]

this was exactly what i was looking for. thanks for this video. ill leave an abbo

[@krixh5253]

this person is smart he helped me finish my hw

[@darshilvshah]

Too good !! Hit the nail !!

[@cade9491]

Thank You so much, i hope you find what you are looking for just as i did from your video

[@alshere19]

The most helpful among all!!!!

[@365saifullara]

very well explained and you provided unique information about file paths and the video editing is absolutely brilliant

[@gengen-vx8li]

Thank you so much! You really help me.👌

[@Patrick-rp8gi]

The best of all!

[@amodhashachiko4955]

Thank you very much. It is very clear and helpful.

[@malcolmpiassa1126]

Thank you so much!

[@ediagbonyaaiyudubie1097]

thanks for the video, it was very helpful!

[@aadya8181]

Definitely the best explanation.

[@SadiqKhan-rf4oy]

Thank you so much sir. Very Helpful!

[@jamalmustafa1193]

Man you are a life savor

[@samarpreetsingh5318]

Fantastic explanation!

[@SachinSharma-st4hk]

Thanks for the wonderful explanation.

[@arnavtripathiyo]

Awesome video!

[@baskarj9419]

Thank you sir, i understand very well. Great explanation.

[@lahirujeewantha5208]

This is a 1 million dollar vedio.. One of th most worth vedio I have ever seen.. You are just explaining A-Z in file paths.. It is very useful to begineers like us who doesn't have any sort of knowledge ragarding file paths.. Thank you 1 million times.. You are a genius in this vedio.. Wooh! Bcz actually this is a golden point in HTML. Anyone who doesn't have a clear understanding on this become trapped in HTML he can't move any further in html.

[@kootkot]

Thank you 🙏🙏🙏🙏🙏 much and have a wonderful week ☺️

[@nusratarif6519]

very very very very very very very very very very helpful! thankyou

[@emotionsmusic9506]

thanks you ...thanks you ...thanks you... you save my life ..

[@christianbaidoo1016]

Thanks, helped me understand this

[@earthlygamer7142]

Thank you so much this was extremely useful vedio you have cleared the concept of links

[@mirzashahnawaz2984]

Thank You Sir. God Bless

[@user-yk8ox6me1c]

Thanks you a lot.!!!It does me a geat favour!!!

[@digitalsparrow_8599]

Very well explained kootkot👏🏻

[@shayaniwijethunga783]

Thank you so much for explaining everything so clearly. Extremely helpful video ❤❤❤❤❤❤

[@kootkot]

You are very welcome 🙏 and happy learning ✅

[@kumar7163]

Thanks for explaining clearly

[@ashapatel7306]

Thank you thank you thank you so much....

[@maitreyamoharil4299]

Explained very well sir...Good practical examples !😇

[@anurajms]

great explanation. thank you

[@hamdan1955]

Suwun cak,video ne bermanfaat

[@jhonbhai8943]

Thanks for your help ☺️

[@SaumyaSharma007]

Awesome Content 🙂💯👍 Long live Sir.... Love from India 🇮🇳💪

[@ethanwong8809]

Best till now.

[@markelofid3529]

Thanks, very helpful

[@bhaktibhosale3427]

Thank you so much sir Very helpful video💫👍

[@AfnanHudli]

Nice being Developer everyone should know this .....

[@ondrejjelinek4445]

Thank youuuuuu! Very cleverly made and well explained (Y)

[@kootkot]

You are very welcome 🤗 And happy learning ☺️

[@dubble_dee]

Thank you so much

[@TN-kg2lv]

beautiful explanation

[@Yuniac]

Really nice and helpful video thank you

[@cutieboyize]

Thank you sir

[@burgasdragonheirsilentgods]

Again great video !

[@kootkot]

Million thanks 🙏 and really happy that it was helpful 😊

[@simantasaha8974]

Good content.

[@jefsonnelson202]

Thanks!

[@kootkot]

Thank you so much 😊 and you really made my day 👍💪☺️

[@OfoeNelson]

I think you should add that everything is relative to the html file in 'I am' folder :) It's second nature to you so you missed it and also one dot '.' means from current folder you go down in folders and two dots '..' means one level up because it's a bit confusing when you start by saying one dot means from current folder so it kind of establish the notion that one dot represents a folder which is not the case.

[@phaneendrakumar658]

could u say how everything is relative to ' i am ' folder. .

[@apuPankaj]

thanks for this super informative video sir.

[@user-xm5ix5pz2p]

THANKS

[@oqant0424]

great explanation

[@marvelousdele8949]

nice. welldone

[@jurisamk]

thanks, nice and clear

[@kootkot]

You are very welcome and I am very glad that you liked it!😊

[@ahlemmeziane3181]

thanks🤩

[@danieljsadananda2163]

Fantastic

[@mdnurullah9882]

wow very nice. important video subject and very nice standard voice. not speedy talk. thank you bro subscribed done. from bangladesh

[@kootkot]

Hello Hasan, thank you so much for the positive feedback and subscription, and I am really glad and appreciate that! Good luck and happy learning!😊

[@lionorlopez8802]

thank you

[@PlayRiteProductions]

Great video!

[@kootkot]

I am really Glad you enjoyed it👍

[@abrahamdunn61]

Awesome

[@joydevmaity1194]

Really helpful. Thank you very much......

[@kootkot]

You are very welcome and happy learning 👍

[@mansisaxena1170]

Thanks u for this video sir really needed this one 😊

[@kootkot]

You are very welcome 🤗 and happy learning!

[@julienv2164]

thank you sir because of you i have solved a big problem

[@kootkot]

You are very welcome and I am very glad that it was helpful ☺️

[@mehrdad1068]

Very understandable،Like a mother's song🙏🌳💚

[@raselrahmanrocky]

helpfully

[@VarunSharma-xd8xd]

awesome

[@ravidvann6456]

Nice video

[@adesportgist1179]

Nice

[@tolvajakos]

this is great explanation and presentation. one tip to further improve: move your cursor out of the way, it always stays exactly where the most important thing is to be seen, blocking view. i know, you can guess it, but it does not help when somebody is trying to understand the very thing your are explaining.

[@kootkot]

Hello Ákos 👋 thank you so much for your feedback and useful tips 🙏👍👌 And happy learning 💪

[@javascript9920]

Amazing video ❤️❤️

[@kootkot]

Thank you so much and I am really glad that it was helpful 😊

[@spoiler3537]

Great 🤩

[@kootkot]

Thank you! Cheers!😊

[@jacoprz8899]

If the image is outside the "file_path example" folder, can I use anything to make the image appear in the browser?

[@kootkot]

Hello @jacoprz8899, this depends, for example if you are on your local machine or local pc, you have an index html file inside file_path_example folder, and you have one image just outside your file_path_example folder, the path from your index html file to image file looks like this: ../image.png, two dots mean go out from your file_path_example. Here is the whole file structure: Some folder -image.png -file_path_example folder -index.html But when you are not on your local machine, your project, in this case file-path-example folder is already on your remote server, relative path to files start from the project folder as the base path so if we write the path like we did in the local machine it is not going to work, so we should only use absolute path to the image, that is why we should always keep our image inside project folder if we want to use relative path ☺️ I hope this clarifies your question, if not please feel free to let me know and am happy to discuss more ☺️ Have a great weekend and good luck 🍀

[@TomThumb-p9w]

Hello, the video talks about using a relative path, maybe you can help. This code in html did NOT work in android (works in windows). Trying to do 2 things. 1. SIMPLY linking 2 html pages together is not working (both files in same folder). (page2) 2. Linking a pic did not work (in a subfolder). () Can this be made for any android tablet/phone, any year, any brower? (Do I use a shared space?) Do you have an email? (Cant find anyone that knows how to link 2 html pages in android??!!!) Thanks.

[@RaffaelloLorenzusSayde]

Why do all my file paths have (Archive Root Directory) written on them?

[@Husain567]

best

[@aysharahman8516]

You explained so easily thanks for this easy explanation. But can you help me about this file path? location:"C:\my-recipes ecipes\pasta.html" I want to link it from index.html which is location:"C:\my recipes\index.html" I used ../ but it showed a index page with parent directory & pasta.html page but can't go directly to the page!! If you can help me it would mean so much.

[@aniketvitalkar4435]

@kootkot Sir,,, my html file folder on desktop and my vdo folder in Download folder... and i'm given proper file link ... bt my vdo is not working ...

[@aniketvitalkar4435]

and same problem with img

[@kootkot]

Hello Aniket Vitalkar, good question! Here I created step by step instructions, both in written format as comments in the index.html file and also in the video format, it is the Instructions.mp4 file. Download the example folder from this link: github.com/AihaitiAbudureheman/html-file-path-example I hope this would help, and please feel free to let me know if you need any further help with this issue! Note: One more thing I want to mention is that normally it is a good idea to put all of your media files such as images, videos, etc, to the folder where your HTML file is located, so that you can easily link them just with a relative file path.

[@lathifashaik5521]

Hello sir great video very helpful but if the images are in other directory it's(../)is not working please help me out

[@kootkot]

Hello Lathifa, could you please share your relative HTML codes and your folder structure, so that I can check and find out what is going on!

[@lathifashaik5521]

@@kootkot can you provide your mail? Or any other alternatives

[@Nearbylighthouse]

from 2024 Thank you

[@gowthamrishvan3961]

Bro index.html file should be present inside your grandparents folder right but u have saved it inside child folder why???? And also clear me whether it can be saved in any folder if we want

[@kootkot]

Hello Growtham Rishvan, really sorry about this late response! Regarding your question, yes you are right, generally, when we have an HTML project, we put the index.html file inside the root folder, or sometimes it is called a project folder. And there are also some cases that we can put the index.html file inside the folder in the project folder or root folder. But while I created this tutorial, I specifically placed the index.html file inside the folder, just for demonstration purposes. So, I am really sorry if that confused you! Thank you so much for your feedback and happy learning!😊

[@rm9994]

Thanks. But how do we know what the current folder is?

[@kootkot]

You are very welcome 😊 And the current folder is the parent folder of the file you currently working on! For example, if you are on the index.html file and you want to specify file path in this file, the current folder is the parent folder of this index.html file! And if you are on style.css file, and you want to specify file path to this style.css, in this case, again the parent folder of this style.css file is the current folder! I hope this might help you clarify what current folder is, if not just let me know I will send you some examples with explanations! Have a great day and have fun with coding 😊

[@rm9994]

@@kootkot thanks. Yes can you send some examples please!

[@kootkot]

Hello, here I created one simple project folder, the project folder name is current-folder-example. Please download it and open all the files one by one, in every file you can see a line of comment saying which is the current folder when you are on that file! Go to this link and click the green code button with download icon: github.com/AihaitiAbudureheman/current-folder-example/tree/main Good luck with your learning and please feel free to ask if you have any questions!😊

[@pallapusatishkumar9268]

What if the images on brothers of evry level?

[@kootkot]

Hi 👋 very good question, currently am outside traveling, will be back home within few days, I will create an example for you about brothers when I back home 🏡 Happy learning ☺️

[@muhammadsultan4598]

Sir plz explain it vd easy way example

[@yourlocalphysco]

why is your vscode not dark themed😔

[@milosleng1175]

great bruh, but produce more content. but high level quality content bruh..btw my img is not displaying with absolute file path :/

[@kootkot]

Hello Miloš Leng, Thanks for the helpful feedback! And I will try to do more and better quality content! Regarding to your question, I have several questions: 1.Are you on a mac or windows? 2.Could you share the starting part and ending part of your absolute file path if applicable, something like this: C:\Users\baghr\.....your-file-name.png/jpg/jpeg? 3.By which method you got the absolute file path, by using visual studio COPY PATH method or right clicking the file and from its location properties? 4.If you are getting the absolute file path by right clicking the file and from its location properties you need to append the file name with the correct extensions because location property only have the path until the current folder, and the full absolute file path on windows looks like this: C:\Users\baghr\OneDrive\Documents\kootkot-channel\Example\check.png And in the following cases your image might not display also: 1.If you are using localhost, it might not be able to load your image using the absolute file path, mainly because of the security reason 2.If your image file in a folder or drive that you don't have the access right, it might also cause the issue! And I strongly encourage you to use relative file path by moving the image file to your project folder in which your html file and other project file exist! Okay, so thanks again for your feedback and advice and looking forward to hearing from you!

[@muhammadsultan4598]

And also html.link vd css

[@saishinde2247]

Sir please help me I am not able to give the proper path 🥺

[@kootkot]

Hello Sai Shinde, how may I help you? Please describe your problem!

[@kuldeepsharan6458]

10:47 not working

[@kootkot]

Hello Kuldeep Kumar, are you using live server which starts with localhost or 127.0.0.1/, in case you are using live server, the absolute file path which starts from your systems root folder does not work! The other thing to notice is that please check your file permissions! Here is how you check it(on Windows), right click your image or file, click properties, click the securities tab, under the security tab please make sure all the check marks are checked on the Allow panel, here is the screenshot of the Security tab, notice the blue marks on the screenshot! If they are not check you also not be able to access it! github.com/AihaitiAbudureheman/html-file-path-example/blob/main/dice_image_file_properties.PNG Thanks for checking out my channel and please let me know how it goes! Good luck and happy learning!

[@nysunra]

Sigh.