5. Interaction HTML, CSS and Java Script

Let's take a simple example of how HTML, CSS, and JavaScript work together to create a web page!

HTML Code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Welcome to my web page!</h1>
    <p>This is a paragraph of text.</p>
    <img src="image.jpg" alt="An image">
    <button id="myButton">Click me!</button>

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

Here, we have an HTML file that includes a link to an external CSS file and a script file. We have added a heading, a paragraph of text, an image, and a button to the body of our page.

CSS Code:


h1 {
  color: blue;
  font-size: 32px;
}

p {
  color: green;
  font-size: 16px;
}

img {
  width: 50%;
}

button {
  background-color: red;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

In our CSS file, we have defined some styles for our HTML elements. We have set the color and font size of our heading (h1) and paragraph text (p), the width of our image (img), and the background color, text color, padding, border, and border radius of our button.

JavaScript Code:


const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
  alert('You clicked the button!');
});

Finally, in our JavaScript file, we have added some functionality to our button. We have selected our button element using its ID and added an event listener to it. When the button is clicked, it will display an alert box with a message.

So, when we view our HTML file in a web browser, we will see our heading, paragraph of text, image, and button styled according to our CSS rules. When we click the button, the JavaScript code will execute, and an alert box will appear on the screen.

Overall, this is a simple example of how HTML, CSS, and JavaScript work together to create a web page with content, styling, and interactivity.

Previous4. JavaScript NextIDE - Visual Studio Code