Question 296836 in Html Question posted in
Some basic documentation can be found here.

HTML pages not working, unable to go to other pages from homepage

I am on cs50’s week 8 pset, homepage, and I have to create a simple webpage to introduce myself. One of the requirements is to make multiple pages, and I have done that, however the links to go to other pages don’t work. I have included images and code below, but in short, when I click on the links to other pages, my website produces an error message that says "(link of page) cannot be found."

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <title>My Webpage</title>
    </head>
    <body>
        <main class = "container p-3">
            <h1>Hello, my name is <span id = "name">Kaley</span></h1>
            <h3>Get to know me in this webpage!</h3>
            <!--image here maybe-->
            <h3 class = "about">About Me</h3>
            <ul>
                <li>7987 years old</li>
                <li>Japanese/Korean</li>
                <li>Sadly allergic to some sushi</li>
            </ul>

            <h4 class = "about">These are the schools I've been to</h4>
            <table cellpadding="10">
                <tr>
                    <th>Country</th>
                    <th>School</th>
                </tr>
                <tr>
                    <td>Singapore</td>
                    <td>asdas</td>
                </tr>
                <tr>
                    <td>Japan</td>
                    <td>Iasdasd</td>
                    <td>asdasd</td>
                </tr>
                <tr>
                    <td>Korea</td>
                    <td>asasd</td>
                </tr>
            </table>

            <h5 class = "about">Click on one of these to get to know more about me!</h5>
            <a href = "index.html">Intro</a>
            <a href = "hobbies.html">Hobbies</a>
            <a href = "extracurriculars.html">Extracurriculars</a>
            <a href = "favourites.html">Favourites</a>

        </main>
    </body>
    <script src = "script.js"></script>
</html>

This is my code for index.html, I think I’m using the anchor link and href wrong, but I can’t figure it out.

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
        <link href="styles.css" rel="stylesheet">
        <title>My Webpage</title>
    </head>
    <body>
        <main class = "container p-5">
            <h1>These are my hobbies!</h1>
            <h3 class = "hob">I love...</h3>
            <ul>
                <li>Watching movies and shows</li>
                <li>Reading</li>
                <li>Playing the piano</li>
                <li>Sleeping</li>
            </ul>

            <h5 class = "about">Click on one of these to get to know more about me!</h5>
            <a href = "index.html">Intro</a>
            <a href = "hobbies.html">Hobbies</a>
            <a href = "extracurriculars.html">Extracurriculars</a>
            <a href = "favourites.html">Favourites</a>
            
        </main>
    </body>
</html>

This is the code for one of my pages, hobbies.

This is the error message:
enter image description here

My initial page, the one where titles Index of / is had the links to visit all pages of my websites. When I click index.html, it takes me to my initial homepage, the first code I mentioned, but clicking on any other .html pages just downloads my that page. Ex, clicking on hobbies.html downloads hobbies.html, but doesn’t open it. In my github codespace, my other .html files are translucent in my dierctory, I don’t know what that means, but I’m probably wrongly assuming that my other .html files don’t exist in my codespace and website? I’m not really sure, I’m just not able to navigate between my .html pages.

Tags:

2

Answers


  1. 0

    Try the following items:

    1. Do you prepared any files other than index.html ?
    2. Do you placed any other .html files in the directory where index.html is located ?
    3. Do you checked whether the name of the file you want to display is the same as the destination of the href link?
    Login or Signup to reply.
  2. 0

    try to add forward slash / at the beginning of the href like :
    href = "/main.html"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search