'HTML file does not work on web brower, what should I do? [closed]

//My HTML webpage cannot be displayed on browsers. It is just plain text. Please review my codes and see what is wrong. T.T I tried many ways and still cannot find what is wrong. I would appreciate it if anyone can review it. Thank you! I also tried using internet explorer, chrome . Both of them don't work. Is it because of my formatting?

<!DOCTYPE html>
<head>
  <style>
    header {
      text-align: center;
      background: url('https://i.imgur.com/2tQoKAI.jpeg');
      background-size: cover;
      color: white;
      font-weight: bold;
      text-shadow: 6px 2px 3px black;

    }
    a {
      color: white;
    }
    h1 {
      font-size: 70px;
    }
    img {
      margin: 40px 0px 0px 0px;
      border: 7px solid white;
      border-radius: 20px;
    }
    ul {
      padding: 10px;
      background: rgba(0,0,0,0.5);
    }
    li {
      display: inline;
      padding: 0px 10px 0px 10px;
    }
    article {
      max-width: 500px;
      padding: 20px;
      margin: 0 auto;
    }
    @media (max-width: 500px) {
      h1 {
        font-size: 36px;
        padding: 5px;
      }
      li {
        padding: 5px;
        display: block;
      }
    }
  </style>
</head>
<body>
  <header>
    <img src="https://i.imgur.com/GKTzyft.jpeg"
    width=200>
    <h1>Ben's Blog</h1>
    <ul>
      <li><a href="#">How am I Handsome</a></li>
      <li><a href="#">Meditation Music</a></li>
      <li><a href="#">My Beautiful Singing</a></li>
    </ul>
  </header>
    <article>
      <h2>I am Born Handsome</h2>
      <p>As a natural handsome guy. I am born to be handsome. The handsomeness genes are within me. However, I am not only handsome, I am also talented in singing.</p>
      <button>Like</button>
    </article>
    <article>
      <h2>Meditate Daily</h2>
      <p>Meditation can help me become even more handsome and...wise. I mediate five minutes everyday to reflect on my life and explore my inner self. It is amazing to be enlightened.</p>
      <button>Like</button>
    </article>
    <article>
      <h2>I sing like Justin Timberlake/ Justin Bieber</h2>
      <p>Many people think all I've got is my handsome look. They are wrong! I also got a beautiful voice that soothes everyone's heart!</p>
      <button>Like</button>
    </article>
  <script>
    $("button").on("click", function() {
      alert("Clicked!");
    });
  </script>
</body>
htmlcss


Solution 1:[1]

After <!DOCTYPE html>, one should open with the <html> tag and on the end of the file, close with </html>.

This should result in something like:

<!DOCTYPE html>
<html>   
    <head> 
        ... 
    </head>
    <body>
        ...
    </body>
</html>

Solution 2:[2]

<!DOCTYPE html>
<head>
  <style>
    header {
      text-align: center;
      background: url('https://i.imgur.com/2tQoKAI.jpeg');
      background-size: cover;
      color: white;
      font-weight: bold;
      text-shadow: 6px 2px 3px black;

    }
    a {
      color: white;
    }
    h1 {
      font-size: 70px;
    }
    img {
      margin: 40px 0px 0px 0px;
      border: 7px solid white;
      border-radius: 20px;
    }
    ul {
      padding: 10px;
      background: rgba(0,0,0,0.5);
    }
    li {
      display: inline;
      padding: 0px 10px 0px 10px;
    }
    article {
      max-width: 500px;
      padding: 20px;
      margin: 0 auto;
    }
    @media (max-width: 500px) {
      h1 {
        font-size: 36px;
        padding: 5px;
      }
      li {
        padding: 5px;
        display: block;
      }
    }
  </style>
</head>
<body>
  <header>
    <img src="https://i.imgur.com/GKTzyft.jpeg"
    width=200>
    <h1>Ben's Blog</h1>
    <ul>
      <li><a href="#">How am I Handsome</a></li>
      <li><a href="#">Meditation Music</a></li>
      <li><a href="#">My Beautiful Singing</a></li>
    </ul>
  </header>
    <article>
      <h2>I am Born Handsome</h2>
      <p>As a natural handsome guy. I am born to be handsome. The handsomeness genes are within me. However, I am not only handsome, I am also talented in singing.</p>
      <button>Like</button>
    </article>
    <article>
      <h2>Meditate Daily</h2>
      <p>Meditation can help me become even more handsome and...wise. I mediate five minutes everyday to reflect on my life and explore my inner self. It is amazing to be enlightened.</p>
      <button>Like</button>
    </article>
    <article>
      <h2>I sing like Justin Timberlake/ Justin Bieber</h2>
      <p>Many people think all I've got is my handsome look. They are wrong! I also got a beautiful voice that soothes everyone's heart!</p>
      <button>Like</button>
    </article>
  <script>
    $("button").on("click", function() {
      alert("Clicked!");
    });
  </script>
</body>
</html>

Solution 3:[3]

  • Import Jquery
  • Use $(document).ready(function(){});
  • Open <html> tag and close </html> (it's optional but you can use its a best prectice and usefull for seo friendly website)

<!DOCTYPE html>
<html>
    <head>
        <style>
            header {
              text-align: center;
              background: url('https://i.imgur.com/2tQoKAI.jpeg');
              background-size: cover;
              color: white;
              font-weight: bold;
              text-shadow: 6px 2px 3px black;

            }
            a {
              color: white;
            }
            h1 {
              font-size: 70px;
            }
            img {
              margin: 40px 0px 0px 0px;
              border: 7px solid white;
              border-radius: 20px;
            }
            ul {
              padding: 10px;
              background: rgba(0,0,0,0.5);
            }
            li {
              display: inline;
              padding: 0px 10px 0px 10px;
            }
            article {
              max-width: 500px;
              padding: 20px;
              margin: 0 auto;
            }
            @media (max-width: 500px) {
              h1 {
                font-size: 36px;
                padding: 5px;
              }
              li {
                padding: 5px;
                display: block;
              }
            }
        </style>
    </head>
    <body>
        <header>
            <img src="https://i.imgur.com/GKTzyft.jpeg"
            width=200>
            <h1>Ben's Blog</h1>
            <ul>
              <li><a href="#">How am I Handsome</a></li>
              <li><a href="#">Meditation Music</a></li>
              <li><a href="#">My Beautiful Singing</a></li>
            </ul>
        </header>
        <article>
          <h2>I am Born Handsome</h2>
          <p>As a natural handsome guy. I am born to be handsome. The handsomeness genes are within me. However, I am not only handsome, I am also talented in singing.</p>
          <button>Like</button>
        </article>
        <article>
          <h2>Meditate Daily</h2>
          <p>Meditation can help me become even more handsome and...wise. I mediate five minutes everyday to reflect on my life and explore my inner self. It is amazing to be enlightened.</p>
          <button>Like</button>
        </article>
        <article>
          <h2>I sing like Justin Timberlake/ Justin Bieber</h2>
          <p>Many people think all I've got is my handsome look. They are wrong! I also got a beautiful voice that soothes everyone's heart!</p>
          <button>Like</button>
        </article>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>  
            $(document).ready(function(){
                $("button").click(function(){
                    alert("Clicked!");
                });
            });
        </script>
    </body>
</html>

Solution 4:[4]

Add this Jquery CDN

Refer : https://releases.jquery.com/

I got below output

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 dwi rachmat putra
Solution 3
Solution 4 Akber Iqbal

Related Questions