I have done all of my html code, but for some reason it's just showing a blank page-CodePudding

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat with ur friends!</title>

    <!-- Boostrap links-->
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <!-- font-family: 'Montserrat', sans-serif; basic -->
    <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&display=swap"rel="stylesheet">

    <!-- font-family: 'Open Sans', sans-serif; header -->
    <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=Open Sans&display=swap" rel="stylesheet">

    <!-- Font awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        
    <!-- Firebase links -->
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>

    <link rel = "stylesheet" href = "../css/chat.css">
    </head>
    <body>
        <h2 id = "title"></h2>
        <canvas width = "800" height = "800" id = "myCanvas"></canvas>

        <div style = "display: flex;">
            <label>Width:</label>
            <input type = "number" id = "width" placeholder="Type in the width" class = "form-control">
            <div id = "color">
                <button id = "red" class = "square"></button>
                <button id = "blue" class = "square"></button>
                <button id = "green" class = "square"></button>
                <button id = "black" class = "square"></button>
                <button id = "pink" class = "square"></button>
                <button id = "orange" class = "square"></button>
                <button id = "yellow" class = "square"></button>
                <button id = "purple" class = "square"></button>
            </div>
            
        </div>

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

This is the code but it is showing me a blank page can someone please help me I am trying to fix this problem but nothing is working please can someone explain. My live reload on visual studio shows the same result, I have not done any Java script or css in this file.

CodePudding user response：

Apparently, you don't have any "content" in your page. Only the #width input. I mean, you've created all your HTML links, tags, ids, classes... But you have any content in those tags.

In fact, if I preview your HTML code, the only content that I see is the #width input at the bottom of the page. Your width input field that I can see at the bottom of the page

Solution:

For example, try to add some text to the h2 tag. You can replace your <h2 id = "title"></h2> with <h2 id = "title">Some sample text!</h2> and you should be able to start seeing content on your page.

CodePudding user response：

Might be of help, I've noticed on line 10 and 17 the following are not active:

 <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"rel="stylesheet">

Just add the space properly and providing you also have the other files on the server this should work. If it doesn't render properly after this find the other files and link their sources back.