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@beehaw.orgEnglish
    4·
    2 days 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@lemmy.caOP
      2·
      2 days 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@lemmy.caOP
          2·
          2 days 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@beehaw.orgEnglish
            1·
            2 days 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

  • Hemuphone@lemmy.world
    41·
    2 days ago

    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.

    • tumbling4986@lemmy.caOP
      3·
      2 days ago

      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.

      • Hemuphone@lemmy.world
        21·
        2 days ago

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

        • Arthur Besse@lemmy.mlEnglish
          1·
          14 minutes ago

          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 to http://example.com/style.css.

          But from a file at http://example.com/foo/index.html the href="style.css" and href="./style.css" will both resolve to http://example.com/foo/style.css while href="/style.css" will continue to resolve to the file at the root (http://example.com/style.css).

  • thenextguy@sh.itjust.works
    21·
    2 days ago

    I’m no webdev, but I think neither / nor …/ should be there. The paths are relative to where you are currently.

    • tumbling4986@lemmy.caOP
      2·
      2 days ago

      Confusing… If neither / or nor .../ should be there then how to define the path. Or I just didn’t get what you mean?

      • thenextguy@sh.itjust.works
        3·
        2 days ago

        Paths don’t have to start with either of those. Just “styles/mystuff.css” is perfectly valid.

        If you start with / the server looks at whatever IT thinks the root folder is, which may not even be visible to your app or site. That’s not what you want most of the time.

        Even at the command prompt you can do “cd styles” without any / or … at all. Try it. If you really want you can probably use “./styles”, where the single dot means the current directory. But you really shouldn’t need it.