Dea Afrizal Watch on YouTube

SESI2 - HTML CSS JS (Implementasi Logika Sederhana)

2 min read 3 hours ago
Published on Nov 08, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial is designed to help beginners learn the basics of HTML, CSS, and JavaScript through the implementation of simple logic in web development. By following these steps, you will gain foundational knowledge to create a basic website from scratch and manipulate data using JavaScript.

Step 1: Setting Up the Project

  • Create a new folder on your computer for the project.
  • Inside the folder, create three files:
    • index.html for the HTML structure.
    • style.css for the CSS styles.
    • script.js for the JavaScript functionality.

Step 2: Writing the HTML Structure

  • Open index.html and set up the basic HTML template:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Simple Logic Implementation</title>
</head>
<body>
    <h1>Welcome to My Simple Website</h1>
    <button id="myButton">Click Me!</button>
    <p id="result"></p>
    <script src="script.js"></script>
</body>
</html>

Step 3: Adding CSS Styles

  • Open style.css and add some basic styles:
    body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

button {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
}

Step 4: Implementing JavaScript Logic

  • Open script.js and write the following code to add functionality to the button:
    document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('result').innerText = "Button has been clicked!";
});
  • This code adds an event listener to the button that changes the text of the paragraph when clicked.

Step 5: Testing Your Website

  • Open index.html in your web browser.
  • Click the button and observe the change in the text below it. This confirms that your JavaScript is working correctly.

Step 6: Exploring Further Enhancements

  • Consider adding more elements to your website:
    • Input fields for user data.
    • Additional buttons for more interactions.
    • Style enhancements to improve the visual appeal.

Conclusion

You have successfully created a basic web page using HTML, CSS, and JavaScript. This tutorial provided you with the foundational skills to build upon. As a next step, explore more advanced JavaScript concepts or enhance the functionality of your website by adding more interactive elements. Happy coding!

Table of Contents

Recent