The CSS and Javascript files are failing to load

My web page is not displaying my CSS and JavaScript properly when I access it through a folder in the browser. Both files are located within multiple subfolders.

I have attempted to rename the files to troubleshoot the issue.

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
 <title>A basic webpage calculator</title>
</head>

<script src="calc.js"></script>

Answer №1

If you want to specify that the css and js files are located in the same directory or refer to the current directory, you can use ./ This is considered a relative path for the css and js files.

<html>
    <head>
         <link rel="stylesheet" type="text/css" href="./style.css">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
         <title>A simple calculator</title>
    </head>
    <body>

        <script src="./calc.js"></script>
    </body>
</html>

Answer №2

When it comes to integrating CSS and JavaScript files into your main HTML page, the first step is to locate where these files are stored. Identify which folders contain the specific CSS and JavaScript files you need. Set the path to these files from the current directory or initialize the path if they are in the same level as your working directory. If the files are located in a different directory level, navigate to that directory first before setting the path. Use './' to go back one level and '../' to go back two levels, if necessary. I hope this explanation helps you understand how to manage file paths effectively. Cheers!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Image Not Displayed on Page

I am facing an issue where I have a div class 'breadcam_bg' with an image url, but the image is not being displayed on the page even though the console detects the div. html <div class="bradcam_area breadcam_bg"> This div! & ...

Generating a new object from a TypeScript class using JavaScript

Currently, I am facing an issue while attempting to call a JavaScript class from TypeScript as the compiler (VS) seems to be having some trouble. The particular class in question is InfoBox, but unfortunately, I have not been able to locate a TypeScript d ...

Sharing NPM Scripts Via a Package to be Utilized by Project upon Installation

I have streamlined my linting setup by consolidating all configuration and related packages/plugins/presets (for prettier, stylelint, eslint, commitlint) into an npm package. This allows me to utilize the same setup across multiple projects, simply extendi ...

Incorporating Masonry-inspired images into a website's design section

I have been working on incorporating a masonry layout of images into my website, but I am facing alignment issues. The images are simply stacking on top of each other instead of creating the desired masonry effect. Are there any tips on how to create a mas ...

Blending conditional and non-conditional styles in VueJS

Is it possible to set a class in Vue based on the value of a parameter and conditionally add another class if that parameter meets a certain condition? Can these two functionalities be combined into one class assignment? <button :class="'btn btn-p ...

The ForbiddenError has struck again, this time wreaking havoc in the realms of Node.js, Express.js

I am currently adapting this GitHub sample application to utilize Express instead of KOA. However, I am encountering an Access Denied issue when the / route in Express attempts to load the index.html. What specific modifications are required in the code be ...

Fill in the missing keys, values, and data within the JSON object

My JSON data consists of various objects with unique dates and site names. The dataset contains distinct dates such as: 2019-10-01, 2019-10-02, 2019-10-03, 2019-10-04, 2019-10-05. Some dates might be missing for certain sites in the dataset. For example, o ...

Angular does not seem to support drop and drag events in fullCalendar

I am looking to enhance my fullCalendar by adding a drag and drop feature for the events. This feature will allow users to easily move events within the calendar to different days and times. Below is the HTML code I currently have: <p-fullCalendar deep ...

Customizing the color of cells in an HTML table within a JSON based on their status

Would you like to learn how to customize the color of cells in an HTML table based on the status of a college semester's course map? The table represents all the necessary courses for your major, with green indicating completed courses, yellow for cou ...

Exploring the world of HTML5 speed testing: getting started

Can anyone provide guidance on how to begin with an HTML5 bandwidth test? I am trying to replicate a flash-based version and any recommendations would be greatly appreciated. ...

What is the best way to incorporate the final paragraph into the foundational code?

I'm attempting to create my own version of the lyrics for 99 Bottles of Beer Here is how I've modified the last line: 1 bottle of beer on the wall, 1 bottle of beer. Take it down and pass it around, no more bottle of beer on the wall. How ...

Is it better to Vuex - manipulate store item twice, trigger new items, or perform transformations within components each time they are mounted?

I am considering performing two separate transformations on a single, large store item and then saving the results as two new store items. For instance: setEventsData: (state, data) => {...} // main huge master object // perform transformations on it an ...

Encapsulating the React Material-ui Datepicker and Timepicker OnChange event callback functionging

I'm new to React and currently incorporating Material-UI into my project for additional UI components. I've noticed some repetitive code that I'm finding difficult to refactor due to constraints within a Material-UI component's implemen ...

Using AJAX to update the value of a div by clicking within a PHP loop

I'm currently working on a php page where I want to dynamically change the content of a div when a specific link is clicked. The links are generated through a loop, and I need to pass multiple parameters via the URL. Since the divs are also created wi ...

How can I prevent tinymce from stripping out my <link> tag?

I'm having an issue with tinymce. dd<script id="kot-id" src="***insert link here***"></script><div id="kotcalculator"></div><link rel="stylesheet" href="***insert link here***" type="text/css" media="screen" /> It seems ...

Tips for sending a MySQL parameter

Hey there, I need some help with the trigger setup I have: CREATE TRIGGER `update` AFTER UPDATE ON `table 1` FOR EACH ROW INSERT INTO table 2 ( Id, Revision, Purpose, Change ) VALUES ( OLD.Id, OLD.Revision, OLD.Purpose, @purpose_change /* user variable ...

Troublesome Display of Badges in Bootstrap 5

My goal is to include a badge on a label, however all it does is change the text color to white <asp:Label CssClass="badge badge-pill badge-success" ID="Label1" runat="server" Text="Label"></asp:Label> ...

Tips on getting your card to stay at the top

Screenshot of webpage HTML (EJS): In the HTML file, look for the section after <%- include("navbar.ejs") -%> inside the body tag. The ".cardholder" contains "anime-card" templates (card.ejs). The first and last div within ".cardholder" are ...

The Jsoup function for sending data does not yield any results

Can someone assist me with sending data to a form in this format? <form id="money" action="" method="post"> <input id="user" type="text" placeholder="Username" maxlenght="10" name="user"></input> <div class="select"> <select id= ...

Creating a Star Rating system with jQuery using a dropdown menu for multiple selections

Recently, I came across a simple jQuery Star rating system that I want to implement on my website. I have been following the code from http://jsfiddle.net/, and it works perfectly for one star rating system. However, I have multiple star rating systems on ...