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;
}
