file paths:doc relative and absolute navigation

HTML
<article> <section> <h1>absolute:</h1> <p>absolute file path is used when navigating to or referreing to a document ouside the website.this is the best use-case for absolute paths.not specifiying the <code><b>HTTP</b></code> syntax in the path is a recommendation:</p> <textarea>href=<a href="http://www.google.com/">Google search engine</a>></textarea> </section> <section> <h1>document relative:</h1> <p> relative paths is a way to go if it is not the use-case above.two general rules that hold all the secret for navigating effectively inside a website: <ol> <li>navigating one folder deep in the file heirachy or directory-going on step deeper in the files map: <p>the syntax: <code>/folder-name</code> <code>/image/icons/ios-icons/apple.ico</code> will go through folders: images,icons,ios-icons inorder to refere to the file <code>apple.ico</code>. </p> </li> <li> navigating one folder up in the file heirachy or directory-going one step to the top(closer to the root folder) in the files map: <p>the syntax: ../ means a navigation of one folder up to the top.now we have two options depending on the files map: <ul> <li>if one step to the top gets the navigation to the designated file then file name would be chossed as follows: <p><code>../file-name.jpg</code></p></li> <li>if the file is not found yet in the current directory folder.one more step to the top is implemented as follows:<p><code>../../file-name.jpg</code></p></li> </ul></p> <aside>the basic idea is that the syntax <code><b>../</b></code> drives the navigation one step to the top.</aside> <aside>keep in mind that if i have reached a folder that has sub-folder that holds the designated file the syntax: <code><b>/folder-name.jpg</b></code> is used as follows: <p><code>../../images/icons/image-file.jpg</code></p> a combination of both rules. </aside> </li> </ol> </p> <textarea><a href="../styles/icons/file.ico"></a></textarea> </section> <section> <h1>References:</h1> <ul> <li><a href="https://helpx.adobe.com/dreamweaver/using/linking-navigation.html">adobe-about linking and navigation.</a></li> <li><a href="https://docs.worldsecuresystems.com/user-manual/site-design/Pages/understanding-the-difference-between-relative-and-absolute-paths">adobe-understanding the difference between relative and absolute links.</a></li> <li><a href="https://www.kirupa.com/html5/all_about_file_paths.htm">Kirupa-all about paths.</a></li> </ul> </section> </article>
CSS
textarea{ width:100%; box-sizing:border-box; } a{ text-decoration:none; }
JAVASCRIPT
Expand for more options Login