HTML file not displaying browser - html

lately I've been having a problem, where I try to open my html file in any browser but it doesn't display and it's stuck in a state of loading, i've tried opening another html file and putting the same code but it doesn't display. I suspect it's a problem with the code:
<!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">
<link rel="stylesheet" type="text/css" href="learn.css" />
<script src="learn.js"></script>
<link rel="icon" href="data:image/png;base64,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">
<title>Jordan Jana</title>
</head>
<body id="b0dy">
<nav class="crumble">
<ol class="crumb">
<button class="butt" style="color: #64ffda;">
<a style="text-decoration: none" href="me.html">About me</a>
</button>
</ol>
</nav class="nav">
<p id="potsu">
Hi, I'm
</p>
<br>
<div id="para"><p>Jordan</p>
</div>
<div id="surname"><p>Jana</p></div>
<div id="me"><p>I love making stuff(online not in real life)<br>
I'm currently learning Web Development and a bit of bash on the side.<br>
I also have a Github,Twitter,
and discord(senpai-kun#3773) where I'm most active and you're more likely to reach me</p></div>
<div id="and"><p>And</p></div>
</body>
</html>
I've tried changing browsers and changing some of the code but the problem persists


I Checked your code in multiple browsers it is working fine, Try to refresh the webpage by CTRL+F5. if issue still persists then there is an issue with your javascript.
and also don't use classes on endings of tags like you did with
</nav class="nav">

Related

Why local images/links don't work on HTML on VS Code?

I'm currently having problems with linking things on VS Code. I created a folder for a project and put all files really organized inside, linked everything right and still get nothing.
Folder with all the files
The code is this one:
<!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">
<link rel="stylesheet" href="/spider-verse/assets/css/home-page-styles.css">
<script src="/assets/scripts/card-hover-animation.js"></script>
<title>Spider-Man | Multiverse</title>
</head>
<body>
<nav class="s-menu">
<ul>
<li class="s-menu__item">
Homepage
</li>
<li class="s-menu__item">
Tobey Maguire
</li>
<li class="s-menu__item s-menu__icon">
<img src="/spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
</li>
<li class="s-menu__item">
Tom Holland
</li>
<li class="s-menu__item">
Andrew Garfield
</li>
</ul>
</nav>
And the CSS is huge but a preview is This, that you can see by the breadcrumbs that it's in the right folder. And I still get this page instead of something like this..
I've also tried extremely simple codes like this HTML:
<!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">
<link rel="stylesheet" href="/test/style.css">
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
</body>
</html>
with this CSS:
h1 {
font-style: italic;
color: violet;
text-align: center;
}
p {
color: gray;
font-stretch: expanded;
}
And if I link it as a style.css file, I get no stylization. And the problem is not with CSS because if I put like this:
<!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">
<style>
h1 {
font-style: italic;
color: violet;
text-align: center;
}
p {
color: gray;
font-stretch: expanded;
}
</style>
<title>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
</body>
</html>
It works perfectly. AND if I link an external link like this:
<!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>Document</title>
</head>
<body>
<h1>H1</h1>
<p>Lorem ipsum</p>
<img src="https://br.web.img3.acsta.net/newsv7/21/12/09/15/32/4725744.jpg" alt="">
</body>
</html>
It also works. (the external link, the internal still nothing).
I've looked for this problem everywhere but didn't find a solution and tried some answers like this one, this one and adding the dot before the direction (like ./folder/file.css instead of /folder/file.css) and I even reinstalled VS Code but it didn't work :(
Please help!

Based on your directory structure, in your link and image references, you don't need to provide a more "full" path, you can reference it correctly using a relative path, stepping into the next folder lower in the directory using a dot and a slash ./, like this:
<img src="./images/icons/spider.svg" alt="Spider-Man Multiverse">
If you must use a more "absolute" path, then you have to step out upwards from the current directory using 2 dotted ellipsis and a slash ../ as many times as needed depending on how deep the folder goes like this:
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
But the first approach is the more understandable one.
In the same manner, the link and script files should be referenced this way:
<link rel="stylesheet" href="./css/home-page-styles.css">
<script src="./scripts/card-hover-animation.js"></script>
As with the image tag, if you wish to use a more full path then, the link and script files should be referenced this way:
<link rel="stylesheet" href="../spider-verse/assets/css/home-page-styles.css">
<script src="../spider-verse/assets/scripts/card-hover-animation.js"></script>

As this answer states you must use ../ before picking any images and on vs code you don't need to write the whole file name just use ../ and it will show you all folder and file in that particular folder. you just need to pick it.
or the simple solution to this problem is that just copy the image in the same folder as the main html file is and just write the image name vs code will identify it, just pick it from there.
<li class="s-menu__item s-menu__icon">
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
</li>

According to your shared screenshot i assume your index.html is in the same directory like your images folder. Then this will work localy.
<img src="images/icons/spider.svg" alt="Spider-Man Multiverse">

How to open a local file in html?

Hi i started learning html a say or two ago and i was just messing around with some features when i thought of making a website which stored my school stuff in a arranged manner then i wanted to make a button that opens a local file but i just couldn't make it happen but i tried searching it on web but nothing worked for me
here is the code
<!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>E</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>body{background-image: url(x.jpg);
background-size: cover;}
</style> <div id="red">
<button><a src="C:\Users\laksh\Mywebsite\jkoj.html">jkoj</a></button>
</div>
</body>
</html>

don't use src attribute in a tag, use href in place of src

external CSS and HTML not linking

I'm just starting out with HTML and CSS and I can't figure out why my CSS won't link to my HTML template.
Index.html and style.css are in the same folder currently, and the css works fine when it's internal. Am I missing something obvious?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
header
<div class="header-right">
<a class="active" href="#home">Home</a>
Contact
About
test
</div>
</div>
{% block content %}{% endblock %}
<h5>footer</h5>
</body>
</html>
Edit: the problem seems to be some sort of compatibility issue. In safari a selected my own style sheet in preferences and it worked properly (I couldn't figure out how to do it in chrome). This doesn't seem like a permanent solution though?

you can try with putting the path of the file by using "./path" and see if it works also check whether your webserver takes your css files as text as you have given type as text/css.

Bootstrap CDN is not working when I use CDN instead of hosting remotely by using the downloaded .css file

CDN fails to load as the styles don't show when I view in the browser. Please look into it and let me know what the issue is as I am having a hard time debugging. I am almost giving up and about to become a celibate. PLEASE HELP!!!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</body>
</html>

I can't see any issue in loading CDN bootstrap file. It is working for me. Please check your browser settings.

it works fine with the Bootstrap 4.1.3 stylesheet. It is better to add the 2 meta's in the head. Documentation on https://getbootstrap.com/docs/4.1/getting-started/introduction/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

Why this small HTML example renders so small on my phone?

I'm having trouble figuring out why the site I'm making is rendering so small on the mobile. In order to figure out why, I've managed to replicate the problem with this very short html:
<html>
<body>
<div style="font-size: 14px">
No look behind the back catch
</div>
</body>
</html>
You can see the live version of that HTML here. This is how that example is rendered on my iPhone. This is how the same phrase ("No look behind the back catch") is rendered with the same font-size, except in a different site, Reddit. Why is my HTML rendered so small on mobile phones?

You need to add a viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This goes in the head of the document:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div style="font-size: 14px">
No look behind the back catch
</div>
</body>
</html>