HTML - how to import javascript and css to html file-CodePudding

I am quite new. How to import css file and javascript file, and what is a good file structure to learn when new to web dev?

CodePudding user response：

Here is the HTML squeleton using CSS and JS :

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<link rel="stylesheet" href="linktoyourstylesheet.css">
<script type="text/javascript" src="linktoyourscript.js"></script>
<body>
    Main Content Here
</body>
</html>

At the same level as my index file, I have an asset folder which includes JS ans CSS folders.

CodePudding user response：

Use this < link > for css and put it in the head tag of html is preferred, here href has the path and name of the css file:

<link rel="stylesheet" href="/file.css">

Use the < script > for javascript and put it in the bottom of body tag is preferred, here src has the path and name of the js file:

<script type="text/javascript" src="file.js"></script>

CodePudding user response：

Good file structure

As for the good file structure: include your JS and CSS files in an assets/ folder and/or in their own separate folders js/ and css/. Here's an example below:

index.html
otherpage.html
assets/
    js/
        main.js
        funcs.js
    css/
        global.css
        darkmode.css

To make it simpler, you could try

index.html
otherpage.html
js/
    main.js
    funcs.js
css/
    global.css
    darkmode.css

index.html
otherpage.html
assets/
    main.js
    funcs.js
    global.css
    darkmode.css

It's really up to you, based on how complex your project is. If you only have 3 files (HTML, CSS, and JS), you might not need any folder structuring at all. If you have 20... you should make sure everything is sorted out. You can also do this for images img/, fonts font/, and other things.

Including CSS

To include a CSS file into your HTML, insert the below in your head tag.

<link rel="stylesheet" href="./assets/css/global.css"/>

Also note that you need to change the href attribute to the actual file path to your CSS file.

Including JavaScript

For JavaScript, it's even simpler. Include this tag at the end of your body tag.

<script src="./assets/js/main.js"></script>

It's necessary to include both the start and end tags. Again, change the file path to your JS file.

CodePudding user response：

For css

 <link rel="stylesheet" href="/file.css">

For javascript

<script type="text/javascript" src="file.js"></script>

Full document

<!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 type="stylesheet" src="main.css"/>
  <title>Document</title>
</head>
<body>
<main>
</main>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

As for file structure. Learn about javascript and css modules after learning the basics. in src folder index.html cssFolder > Shared.css - all css that is shared cssFolder > Product > Product.css For the product related pages javascriptFolder > Shared.js - All javascript that is shared javascriptFolder > Product > Product.js for the product related pages PagesFolder > Product > Product.Html

Etc etc