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" />
How are you accessing the website? Are you using a web server like
miniserveor are you just opening the HTML files in a browser?Beginning a path with
/makes the path absolute for that origin. An origin is basically the URL's scheme, domain, subdomains, and port (sohttps://www.example.com/foo/barhas the originhttps://www.example.com/- ignore the trailing slash, Lemmy keeps adding it...). If your URL begins withfile://then absolute paths will likely be absolute to your filesystem, not relative to your project's directory.If you can, try serving the directory with something like miniserve and see if it works. It'll give you a better picture of what the website would look like if it were published for real. Otherwise, you can make the path relative to solve the problem without doing that.
Am opening the html files in a web browser by double clicking it.
Yeah, that makes sense. Thanks.
Is there any other way I can define the path so the update directly visible in the web browser? Or the only way to do it is by changing the file structure?
Removing the leading slash should make it relative to the file
Yes, by pointing multiple times to the parent directory, the issue is solved.
<link rel="stylesheet" href="../../styles/style.css" /><link rel="icon" type="image/png" href="../../images/favicon.png" />Usually when it’s hosted on a server it’s not this intricate and your first attempt would’ve worked, if you have Python installed you can see what it would look like by running
python3 -m http.serverfrom a terminal in the project folder