How to set up a basic Html, css and javaScript project-CSS Tutorial-php.cn

How to set up a basic Html, css and javaScript project

DDD

Release： 2024-12-07 15:41:11

Original

420 people have browsed it

This tutorial is for those who want to go straight to the point and just setup a project and start coding.

Create a folder for your Html, css and Javascript files.

How to set up a basic Html, css and javaScript project

Create your files inside the folder you just created

How to set up a basic Html, css and javaScript project
while the way the files look may differ from PC to PC ensure the file description is the same as the image above.

Link the Css and JavaScript files to the Html file

When it comes to linking files it is crucial to take note of where each files are in the folder.In our case the files are all at the same level which would make linking straight forward.

The content of your html file should look something like this
`

 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
      </head>
      <body>

     </body>
 </html>

Copy after login

We are going to use 2 different tags to link the css and js file as they require a different kind of tag to link them.
to link the css file we use the Tag. we then use the rel and href attributes to indicate the relationship the link tag content has with the page and the location the css file is in.It looks like this.

The ink tag should be put in between the head tag.

as for the javascript file we use the script tag and the pass in the location of the javascript file in the src attribute. it looks like this.

note that the script tag can be placed inside both the head tag and body tag however for performance purposes it is advised to place the script tag at the bottom of the body tag that way it is parsed last.It can also be placed in the head tag with either the

"Async" or "Defer" attributes added to it to replicate a similar loading behaviour.

If you have followed the instruction above your the content of you html file should look like this.
`

 <!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" href="index.css" />
      </head>
      <body>
         <script src="index.js" ></script>
     </body>
 </html>

Copy after login

And now you have a very basic Html, css and javascript setup. if you have any questions or are stuck please leave your question in the comment section and i'll respond to them.

The above is the detailed content of How to set up a basic Html, css and javaScript project. For more information, please follow other related articles on the PHP Chinese website!