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" />

  • TehPers ( TehPers@beehaw.org ) English
    4·
    1 day ago

    How are you accessing the website? Are you using a web server like miniserve or 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 (so https://www.example.com/foo/bar has the origin https://www.example.com/ - ignore the trailing slash, Lemmy keeps adding it…). If your URL begins with file:// 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.

    • tumbling4986 ( Crumpled6273@lemmy.ca ) OP
      2·
      1 day ago

      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?

        • tumbling4986 ( Crumpled6273@lemmy.ca ) OP
          2·
          1 day ago

          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" />

          • Gamma ( GammaGames@beehaw.org ) English
            2·
            1 day ago

            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.server from a terminal in the project folder