HTML Blank Screen

Development Support
1

Hi! I am making a HTML website but its just blank when I load it up?

Heres my code:

<!DOCTYPE html>
<html>
    <head>
        <div id="title">
        <title>test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./css/style.css">
        <link rel="icon" href="./img/logo.jpg">
<!--
            font awesome
        -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <title>test</title>
        <meta name="title" content="test">
        <meta name="description" content="test">
    </head>
</html>

Here is my style.css file:

u/import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
#title {
background-color: rgb(154, 52, 52);
}

And I do have have a photo in img named logo.jpg (the photos actually in it)

I have a folder named img, it only has logo.jpg

I have a folder named css, it only has style.css in it. The file is above ^^.

I have a folder named js, it only has script.js in it. Script.js is blank.

And then in the main folder (the folders name) we have index.html with the code above ^^.
image

Heres what I see when I load it up:

image
image1918×976 27 KB

I hope this makes sence!

2

It happens when to me too when I run it, looking for a fix…

3

It seems to be the <title> tag causing issues.

Something like this works:

<html>
    <head>
        <div id="title">
        <title>test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./css/style.css">
        <link rel="icon" href="./img/logo.jpg">
<!--
            font awesome
        -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" 
        <h1>test</h1> <! ––Changed to /h1 ––>
        <meta name="title" content="test">
        <meta name="description" content="test">
    </head>
</html>

The title tag is for giving the tab a title.

E.g:

image

Try use this template for your html folder:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Hi!</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  Hello world
  <script src="script.js"></script>
</body>
</html>
4

image
image1918×110 925 Bytes

It worked! How do I change it so the whole text isnt just red? I just want the text to be red.

5

Your css does that, remove it.

1 Like
6

This topic was automatically closed after 7 days. New replies are no longer allowed.