I don’t know why my code doesn’t run. I start to wright the code on the file section without any folder, and it initially works. But after I create the folder and subfolder, I correct the code with the correct rout, for example “CSS/index.html” but it doesn’t work and there is the “not found” page. I try all the way but I don’t know why it doesn’t work, any ideas?
Hey, @SaraArnetoli welcome to the forums!
Can you please provide a link to the repl? This way it is easier for staff and members of the community to help you!
Also see this guide on how to share your code:
3 Likes
OK, so this is my index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No more Zara clothes</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<header>
<h1 class="title">No more Zara clothes</h1>
<nav>
<ul>
<li><a href="html/index.html">Home</a></li>
<li><a href="html/style-tips.html">Style Tips</a></li>
<li><a href="html/trends.html">Trends</a></li>
<li><a href="html/contacts.html">Contacts</a></li>
</ul>
</nav>
</header>
<section id="banner">
<div class="banner-content">
<h2>Explore the World of Style</h2>
<img src="Image/banner-image.jpg" alt="Banner Image">
<p>Discover unique and curated style tips for every occasion.</p>
<a href="html/style-tips.html" class="btn">Discover Style Tips</a>
</div>
</section>
<section id="recent-articles">
<h2>Latest Articles</h2>
<article>
<img src="Image/Abito1.jpg" alt="Article 1">
<h3>Wide or narrow? how to choose for each physicality</h3>
<p>We know that now with the heat choosing the right dress is increasingly difficult. There are those who want to enhance the curves and those who want to hide them. Here are some useful tips to enhance your body!</p>
<a href="#" class="btn">Read More</a>
</article>
<article>
<img src="Image/orange&pink.jpg" alt="Article 2">
<h3>Pink or Orange?</h3>
<p>Orange? no maybe pink looks better on me don't you think? Two colors that will be the protagonists of this summer, but how to understand which one stands out and which one doesn't?</p>
<a href="#" class="btn">Read More</a>
</article>
</section>
<footer>
<p>Subscribe to our newsletter for style updates</p>
<form class="newsletter-form">
<input type="email" placeholder="Your email address" required>
<button type="submit">Subscribe</button>
</form>
<nav>
<ul>
<li><a href="html/contacts.html">Contacts</a></li>
<li><a href="#">My Story</a></li>
<li><a href="#">Collaboration</a></li>
</ul>
</nav>
</footer>
</body>
</html>
And this is my CSS code:
body {
margin: 0;
padding: 0;
background-color: #ffffff; /* Sfondo bianco per il body */
color: #000000;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3 {
text-align: center;
font-family: 'Cursive', cursive;
}
h1.title {
font-size: 36px;
color: #dd4488;
margin-bottom: 20px;
}
/* Header Styles */
header {
background-color: #fdeaf6; /* Sfondo rosa chiaro per l'header */
padding: 20px;
margin-left: 0;
margin-right: 0; /* Margine sinistro e destro a 0 per l'header */
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #000000;
padding: 5px;
}
nav ul li a:hover {
color: #dd4488;
}
/* Home Styles */
#banner,
#recent-articles {
background-color: #ffffff;
padding: 20px;
margin-bottom: 40px;
}
/* Immagini centrali */
img {
display: block;
margin-left: auto;
margin-right: auto;
}
#banner p,
#recent-articles p {
text-align: left;
}
#banner .btn,
#recent-articles .btn {
background-color: #ffffff;
color: #dd4488;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
margin-top: 20px;
border-radius: 5px;
border: 2px solid #dd4488;
}
/* Style Tips Styles */
#style-tips,
#trends,
#contacts {
background-color: #ffffff;
padding: 20px;
margin-bottom: 40px;
}
#style-tips h3,
#trends h3,
article h3 {
font-family: Georgia, serif;
color: #dd4488;
text-align: left;
}
#style-tips p,
#trends p {
color: #000000;
}
#style-tips .btn,
#trends .btn {
background-color: #ffffff;
color: #dd4488;
padding: 10px 20px;
text-decoration: none;
display: inline-block;
margin-top: 20px;
border-radius: 5px;
border: 2px solid #dd4488;
}
/* Footer Styles */
footer {
background-color: #dd4488;
color: #fdeaf6;
padding: 20px;
text-align: center;
margin-left: 0;
margin-right: 0;
}
footer .newsletter-form input[type="email"],
footer .newsletter-form button {
padding: 10px;
border-radius: 5px;
}
footer .newsletter-form button {
background-color: #f9c2d6;
color: #dd4488;
border: none;
margin-left: 10px;
}
And this is how I create the folder, but all of these don’t work.
It’s the first time I create a web site like this, so can you help me? thank you!
1 Like
The way paths are written in HTML can be absolute or relative.
“With relative file paths, the files you intend to reference are located in the same folder of your website folder structure.”
And they start in two different ways:
-
They can start from the current directory:
If the path starts without a slash, it’s considered to be relative to the current document. For example, if you are in the https://www.replit.com/folder1/ directory, image.jpg refers to https://www.replit.com/folder1/image.jpg. -
They can start from the root directory:
If the path starts with a slash, it’s considered to be relative to the root of the website. For example, if you are in the https://www.replit.com/folder1/ directory, /image.jpg refers to https://www.replit.com/image.jpg.
Absolute paths are the full URL of what you are trying to access.
You can see more here: Understanding HTML File Paths & How to Use Them
You kinda look like to be using the relative path from the root directory. So you need to ensure that your paths in your HTML file are correct relative to the root directory.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No more Zara clothes</title>
<link rel="stylesheet" href="/CSS/style.css"> <!-- So here for example I changed from "CSS/style.css" to "/CSS/style.css"-->
</head>
<body>
<!-- ... -->
<nav>
<ul>
<li><a href="/HTML/index.html">Home</a></li> <!-- and then you make the same adjustment to all paths -->
<li><a href="/HTML/style-tips.html">Style Tips</a></li> <!-- changed here too -->
<li><a href="/HTML/trends.html">Trends</a></li> <!-- and here -->
<li><a href="/HTML/contacts.html">Contacts</a></li> <!-- here too -->
</ul>
</nav>
<!-- ... -->
<img src="/Image/banner-image.jpg" alt="Banner Image"> <!-- Remember, The key thing here is that each path starts with a /, which means that the path should start from the root directory. -->
<!-- ... -->
<img src="/Image/Abito1.jpg" alt="Article 1"> <!-- same here -->
<!-- ... -->
<img src="/Image/orange&pink.jpg" alt="Article 2"> <!-- here too -->
<!-- ... -->
</body>
</html>
Now in part works, because I bring the index.html file outside the folder. But there is a problem that persist: When I run the code it works, if I click on home button it works, then I click on the other buttons, and all of that works. but if I click then the home button, it says “page not found”. Why?
In the other codes in the html folder, I add in the index code the “Codice-Blog”, before CSS and html, to outline where to get the files, except for home being index outside the folder. What can I do?
I also correct the other codes, Style tips, contacts and trends, leaving only “index.html” in the href.
putting things in folders changes the url where the file is
I change the url in the code. But it doesn’t work. This is the index code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No more Zara clothes</title>
<link rel="stylesheet" href="Codice-Blog/CSS/style.css">
</head>
<body>
<header>
<h1 class="title">No more Zara clothes</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Codice-Blog/html/style-tips.html">Style Tips</a></li>
<li><a href="Codice-Blog/html/trends.html">Trends</a></li>
<li><a href="Codice-Blog/html/contacts.html">Contacts</a></li>
</ul>
</nav>
</header>
<section id="banner">
<div class="banner-content">
<h2>Explore the World of Style</h2>
<img src="Image/banner-image.jpg" alt="Banner Image">
<p>Discover unique and curated style tips for every occasion.</p>
<a href="Codice-Blog/html/style-tips.html" class="btn">Discover Style Tips</a>
</div>
</section>
<section id="recent-articles">
<h2>Latest Articles</h2>
<article>
<img src="Codice-Blog/Image/Abito1.jpg" alt="Article 1">
<h3>Wide or narrow? how to choose for each physicality</h3>
<p>We know that now with the heat choosing the right dress is increasingly difficult. There are those who want to
enhance the curves and those who want to hide them. Here are some useful tips to enhance your body!</p>
<a href="#" class="btn">Read More</a>
</article>
<article>
<img src="Codice-Blog/Image/orange&pink.jpg" alt="Article 2">
<h3>Pink or Orange?</h3>
<p>Orange? no maybe pink looks better on me don't you think? Two colors that will be the protagonists of this
summer, but how to understand which one stands out and which one doesn't?</p>
<a href="#" class="btn">Read More</a>
</article>
</section>
<footer>
<p>Subscribe to our newsletter for style updates</p>
<form class="newsletter-form">
<input type="email" placeholder="Your email address" required>
<button type="submit">Subscribe</button>
</form>
<nav>
<ul>
<li><a href="Codice-Blog/html/contacts.html">Contacts</a></li>
<li><a href="#">My Story</a></li>
<li><a href="#">Collaboration</a></li>
</ul>
</nav>
</footer>
</body>
</html>
And this is the style tips code:
<!-- style-tips.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Tips - No more Zara clothes</title>
<link rel="stylesheet" href="../CSS/style.css">
</head>
<body>
<header>
<h1 class="title">No more Zara clothes</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="../html/style-tips.html">Style Tips</a></li>
<li><a href="../html/trends.html">Trends</a></li>
<li><a href="../html/contacts.html">Contacts</a></li>
</ul>
</nav>
</header>
<section id="style-tips">
<h2>Explore the World of Style Tips</h2>
<section>
<h3>Come essere originali in un mondo tutto uguale</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus non purus tristique dapibus.</p>
<a href="#" class="btn">Read More</a>
</section>
<section>
<h3>Largo o stretto? Cosa scegliere per ogni fisicità</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus non purus tristique dapibus.</p>
<a href="#" class="btn">Read More</a>
</section>
<section>
<h3>Abito sexy o volgare? Come capire quale è più adatto a noi</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus non purus tristique dapibus.</p>
<a href="#" class="btn">Read More</a>
</section>
</section>
<footer>
<p>Subscribe to our newsletter for style updates</p>
<form class="newsletter-form">
<input type="email" placeholder="Your email address" required>
<button type="submit">Subscribe</button>
</form>
<nav>
<ul>
<li><a href="../html/contacts.html">Contacts</a></li>
<li><a href="#">My Story</a></li>
<li><a href="#">Collaboration</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Why the home button doesn’t work after that I click on the button style tips?
In your style-tips.html , the “Home” button link is <a href="index.html">Home</a> . This means the browser will look for index.html in the same directory as style-tips.html.
Since your style-tips.html is inside the “html” folder, it won’t work.
You can fix this by changing:
<a href="index.html">Home</a>
To:
<a href="../index.html">Home</a>
This is telling the browser to go up one directory (using ../ ) and then look for index.html .
1 Like