Can't link anything to HTML


#1

I can’t link any images attached to my atom folder and I can’t link CSS in HTML
I’m using Mac and I tried running the code in html preview, safari and chrome; it never worked
I decided to attach a link to an image because I couldn’t attach one from the same atom folder, but when it came to not being able to link css, it became a bigger problem
I’ll post the screenshots so it’s easier for you to find out what the problem might be


#2


#5
    body {
  background-color: black;
  color: white;
}

and

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="styles/index.css">
		<title>Home page</title>
	</head>
	<body>
		<h1>My homepage</h1>
		<img src="https://upload.wikimedia.org/wikipedia/commons/7/79/Tesla_circa_1890.jpeg" alt="">
	</body>
</html>

#6

here is the code if you wanna try out to see if it works


#7

This has nothing to do with Atom. The problem is that your HTML page is under practice/ and you have a relative path to the CSS file, so the browser is looking for practice/styles/index.css, which obviously doesn’t exist. With the current directory structure, you want to use ../styles/index.css. However, keep in mind that the behavior you see when you open an HTML file on your computer is not the same behavior you’ll see when you put it on a server. Because it’s the browser that looks up the CSS file, the link has to make sense from the perspective of the browser which means that it has to be able to resolve relative to your domain name into something that the server recognizes and serves as a CSS file.

In practice, this means that keeping your CSS files in a completely different location from your HTML files isn’t the best idea. A structure that has styles/ inside the folder containing index.html would translate better.


#8

thanks so much! now I practiced more and I understand why I made that mistake