How do you combine html, css and JS and save it into one html file?

1

Basically I did the palindrome test and now I’d like to save it in an HTML file and send it to someone, the thing is I redid the whole thing again on microsoft visual studio code, and when I save it I get 3 different files, html, css and javescript.

is there anyway to combine all 3 into one html file so the webpage works?

1 Like
2

I suggest start using GitHub to share code with anyone.

Version control is very important part of software development life cycle.

2 Likes
3

You can put them all in the same file by using <style> and <script> elements, but it’s not a good practice.

1 Like
4

Maybe you can put all three files into a zip file and send them in an email that way?

5

I tried but when I open the HTML it has no CSS nor JS

6

write the styles somewhat like this:

<p style="color:blue;padding:5px;">
   some text ...
</p>

For the JS code you simply put it in the html file’s body, wrapped in a <script></script> tag. Somewhat like this:

<body>
   something
   <script>
      console.log(1);
   </script>
</body>
7

What do you mean by “when I save it I get 3 different files”?

For what you’re trying to do, it does make sense to have everything in one HTML file: that’s perfectly reasonable for the small things you’re building here.

But that’s up to you here: as @hateoas says, you just use <script> and <style> tags, which is why I’m asking the question above. VS Code is just a text editor, you edit some text and the text is in a file. How, when you’re saving it, do you end up with three files?

8

I mean, you have 1 html file, 1 css file and 1 JS file that you link to the html file. When I save I just get 3 different files. Is that not how it works? It’s my first time using a coding program so maybe I did it wrong?

9

What I mean is that the program you are using is a text editor: you open or create a file, call it whatever you want, and write/edit some text in it.

There are tools that can combine files. And the text editor you’re using has the concept of plugins, which add functionality to it.

But if you have three files, then when you edit and save each one, you still have three files. A text editor is just like the notepad program on windows (or, say, a notes app on your phone), with some extra bells and whistles that help when writing code (rather than arbitrary text).

So if you want one [HTML] file, you need to write one file. So you can just take your HTML, then copy the JS into a <script> tag, and the CSS into a <style> tag

11 
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Your CSS styles here */
    </style>
</head>
<body>
    <!-- Your HTML content here -->

    <script>
        // Your JavaScript code here
    </script>
</body>
</html>
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.