Am trying to learn web development by creating a website my own instead learning every single theory written on a textbook.
Currently am trying to link a stylesheet and favicon on my root folder into the file called debian.html and debian-post-install.html. But it's not working and I don't know why.
code used inside both html files head section are,
<link rel="stylesheet" href="/styles/style.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
To point to the root directory files or directories we use / in html instead of ../ right? Then why it's not working.
Also I need advice on how bad is my html file structuring and what changes recommended.
Solution
<link rel="stylesheet" href="../../styles/style.css" />
<link rel="icon" type="image/png" href="../../images/favicon.png" />
This seems like the least efficient way possible to solve a problem, but here we are. I'm too lazy to actually test/research this, so this is only my best guess.
HTML links are pretty much always relative. You cannot think of it like linux filesystem where / would be root. Here, ../ would likely work much better for you. Should be quick to test a few combinations.
About the html file structuring, I think it truly does not matter. There isn't a very widely used ruleset for this. No modern web application is built using raw html files, as most are single-page applications built on top of react/vue/etc. But for learning html/css/etc basics, this is probably a good way to start to understand what the browser actually will see.
In stack overflow i saw,
/= root of the current drive,./= current directory,../= parent of the current directory.What exactly is this
.../?Btw, I solved it by writing the path like this,
<link rel="stylesheet" href="../../styles/style.css" /><link rel="icon" type="image/png" href="../../images/favicon.png" />Thank you for taking time to answer me.
/ being root directory does not apply to the web browser.
.../ means nothing, as its not defined. Results may vary based on interpreter, but nothing useful.
On href, I think all 3: style.css, /style.css, ./style.css point to the same place.
no, they do not. (click for details)
those three do not always resolve to the same thing: the first and last are relative, while the second is absolute.
from a file at
http://example.com/index.html, all three would resolve tohttp://example.com/style.css.But from a file at
http://example.com/foo/index.htmlthehref="style.css"andhref="./style.css"will both resolve tohttp://example.com/foo/style.csswhilehref="/style.css"will continue to resolve to the file at the root (http://example.com/style.css).Interesting! TIL.