Problem referencing relative folder/file Path from HTML-CodePudding

I am struggling to reference my file to my html files using relative path. It would show a unstyled html page when opening in a browser or opening in Ed Workspace. However, everything works fine if I opened it via live server. My file/folder management is attached below and here is one of my html code. I think I have got the relative path correct but I have no idea why it wouldn't work in browsers.

...

<head>
    <link rel="stylesheet" href="/Index/Indexcss.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Work Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet"
    />
    <script src="/Library/jQuery.js"></script>
    <script src="/Index/indexjs.js"></script>
    <title>Outsidermm</title>
</head>

<body>
    <div >
        <p >Xujing</p>
        <p >MAO</p>
    </div>

    <img
        
        src="/Media/Logo/png/logo-no-background.png"
        alt="logo"
    />

    <a href="/Introduction/Introduction.html">
        <button  type="button">Explore</button>
    </a>
</body>

...

Folder Management

CodePudding user response：

try this:

<head>
    <link rel="stylesheet" href="Index/Indexcss.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Work Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet"
    />
    <script src="Library/jQuery.js"></script>
    <script src="Index/indexjs.js"></script>
    <title>Outsidermm</title>
</head>

<body>
    <div >
        <p >Xujing</p>
        <p >MAO</p>
    </div>

    <img
        
        src="Media/Logo/png/logo-no-background.png"
        alt="logo"
    />

    <a href="Introduction/Introduction.html">
        <button  type="button">Explore</button>
    </a>
</body>

CodePudding user response：

I suggest you using relative path, for example if your html file is the same folder with the css file:

<link rel="stylesheet" href="./index.css" />

if your css is different folder and the html in your root folder then you can try:

<link rel="stylesheet" href="./YourFolderCss/index.css" />

And if your html is within a folder but your css is different folder and parallel folder with the html folder, then you can try this:

<link rel="stylesheet" href="../YourFolderCss/index.css" />

you can deep dive about absolute path or relative path, also what the meaning behind the dot "." or the double dot ".."

CodePudding user response：

Everything is relative to each individual document.

Given your folder structure and location of the index file, here is how you would set it up:

<head>
<link rel="stylesheet" href="Indexcss.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Work Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet"
/>
<script src="../Library/jQuery.js"></script>
<script src="indexjs.js"></script>
<title>Outsidermm</title>
</head>

<body>
<div >
    <p >Xujing</p>
    <p >MAO</p>
</div>

<img
    
    src="../Media/Logo/png/logo-no-background.png"
    alt="logo"
/>

<a href="../Introduction/Introduction.html">
    <button  type="button">Explore</button>
</a>
</body>