Cara Membuat Web Dinamis dengan HTML dan CSS

Cara Membuat Web Dinamis dengan HTML dan CSS – Sobat Tekno, apakah kamu tahu bahwa web dinamis dapat disebut sebagai jenis web yang kaya akan informasi? Setiap halaman informasi yang dibangun dalam web dinamis dapat ditambahkan, dihapus, dan diubah setiap saat tanpa perlu mengubah struktur kode di dalamnya. Berbeda dengan web statis yang sangat terbatas dalam pemanfaatannya.

Apa Itu Web Dinamis?

Web dinamis merupakan sistem website yang dibangun menggunakan bahasa pemrograman yang mendukung pengembangan web seperti PHP, Javascript, Java, dan Python. Sedangkan untuk struktur halaman, masih tetap menggunakan bahasa markah HTML dan CSS.

Sekilas, web dinamis memiliki fitur penyimpanan data yang dikenal dengan database. Fungsi database ini sangat penting, Sobat, karena berperan menyimpan semua data atau informasi dalam website tersebut. Terdapat banyak jenis database yang biasa digunakan, seperti PostgreSQL, Oracle, dan MySQL.

Khususnya di Indonesia, saya melihat masih banyak pengembang yang menggunakan bahasa pemrograman PHP. Terdapat berbagai framework yang berkembang dengan pesat, memudahkan para developer dalam mengembangkan web dari skala kecil hingga besar.

Cara Membuat Web Dinamis dengan HTML, CSS, dan JavaScript

Membuat website dinamis melibatkan penggunaan HTML untuk struktur dan konten, serta CSS untuk desain. Meskipun HTML dan CSS tidak secara langsung mendukung logika dinamis, Anda dapat mengintegrasikan JavaScript untuk menambahkan interaksi dan dinamika pada halaman web Anda.

Berikut adalah langkah-langkah untuk membuat website dinamis sederhana yang sudah TeknoTask ringkas menggunakan HTML, CSS, dan JavaScript:

1. Persiapkan Struktur Folder dan File

  1. Buat Folder Proyek: Buka manajer file Anda dan buat folder baru untuk proyek, misalnya “Belajar Website Dinamis”.
  2. Buat File HTML: Di dalam folder proyek, buat file HTML baru, misalnya “index.html”.
  3. Buat File CSS: Buat file CSS baru, misalnya “style.css”, di dalam folder yang sama.
  4. Buat File JavaScript: Buat file JavaScript, misalnya “script.js”.
  5. Tambahkan Gambar dan Logo: Buat folder logo dan produk lalu letakkan kedua folder tersebut di dalam folder proyek. Unduh logo disini, dan untuk gambar produk unduh disini.

2. Buat Struktur HTML Web Dinamis

Buka file “index.html” menggunakan Sublime Text dan tambahkan struktur HTML untuk mulai membuat kerangka web dinamis, untuk kodenya bisa Anda salin dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <title>Belajar Website Dinamis</title>
</head>
<body>

    <header>
        <div class="logo">
            <img src="logo/logo teknotask.png" alt="Logo">
        </div>
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Tentang Kami</a></li>
                <li><a href="#">Produk</a></li>
                <li><a href="#">Layanan</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
    </header>


    <section id="content">
        <h2>Selamat datang di Bisnis.IN</h2>
        <p>Informasi Konten Bermanfaat dan Produk yang Berkualitas</p>

        <!-- Artikel 1 -->
        <article>
            <h3>5 Tips Meningkatkan Produktivitas Kerja dari Rumah</h3>
            <p>
                Saat bekerja dari rumah, produktivitas bisa menjadi tantangan. Berikut adalah beberapa tips untuk meningkatkan efisiensi kerja Anda.
            </p>
        </article>

        <!-- Artikel 2 -->
        <article>
            <h3>Rahasia Sukses Bisnis Online: Pemasaran Digital</h3>
            <p>
                Pelajari strategi pemasaran digital yang efektif untuk meningkatkan visibilitas bisnis Anda di dunia online.
            </p>
        </article>

        <!-- Artikel 3 -->
        <article>
            <h3>Pentingnya Keamanan Data dalam Era Digital</h3>
            <p>
                Dalam era digital yang terus berkembang, keamanan data menjadi krusial. Simak mengapa Anda perlu melindungi informasi penting Anda.
            </p>
        </article>

  <!-- Produk/Jasa -->
        <div class="products">
            <div class="product">
                <img src="Produk/Produk1.webp" alt="Produk 1">
                <h3>Produk 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="label discount">Diskon 10%</span>
            </div>

            <div class="product">
                <img src="Produk/Produk2.webp" alt="Produk 2">
                <h3>Produk 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="label best-seller">Best Seller</span>
            </div>

            <div class="product">
                <img src="Produk/Produk3.webp" alt="Produk 3">
                <h3>Produk 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="label sold-out">Habis Terjual</span>
            </div>
        </div>
    </section>


    <footer>
        <p>© 2024 Bisnis.IN. All rights reserved.</p>
    </footer>

</body>
</html>

3. Tambahkan CSS pada Web Dinamis

Buka file “style.css” dan tambahkan style CSS untuk membuat tampilan web dinamis yang dibuat menjadi lebih menarik, kode CSSnya bisa Anda salin dibawah ini..

<style type="text/css">
    body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
}

header {
    background-color: pink;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo img {
    width: 230px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

nav a:hover {
    color: #ffcc00;
}

#content {
    padding: 40px 20px;
    text-align: center;
}

article {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

article h3 {
    padding: 10px;
    color: #333;
}

article p {
    padding: 0 10px 10px 10px;
    color: #555;
}

.products {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20px;
}

.product {
    position: relative; /* Menjadikan posisi relatif untuk label */
    width: 30%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.product .label {
    background-color: #ffcc00;
    color: #333;
    padding: 5px;
    border-radius: 4px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
}

.product img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-bottom: 2px solid #ddd;
}

.product h3, .product p {
    padding: 10px;
    color: #333;
}

.label {
    background-color: #ffcc00;
    color: #333;
    padding: 5px;
    border-radius: 4px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

</style>

4. Tambahkan Kode JavaScript

Buka file “script.js” dan tambahkan kode JavaScript untuk memberikan fungsi pada web dinamis, untuk kode JavaScriptnya bisa Anda salin dibawah ini.

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

document.addEventListener("DOMContentLoaded", function () {
    const contentSection = document.getElementById("content");

    // Fungsi untuk mengubah warna latar belakang secara acak
    function changeBackgroundColor() {
        const randomColor = getRandomColor();
        contentSection.style.backgroundColor = randomColor;
    }

    // Fungsi untuk mendapatkan warna acak
    function getRandomColor() {
        const letters = "0123456789ABCDEF";
        let color = "#";
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    // Event listener untuk mengubah warna latar belakang saat klik
    contentSection.addEventListener("click", changeBackgroundColor);
});

</script>

5. Jalankan Kode

Buka pada bagian index.html lalu klik kanan pada halaman sublime text, pilih buka di browser, seperti gambar dibawah ini.

Artikel Terkait:   Cara Membuat Website Gratis dengan HTML

6. Tampilkan Website

Website dinamis telah selesai dibuat. Sesuaikan konten dan desain sesuai preferensi Anda, dan tambahkan logika dinamis sesuai kebutuhan di file “script.js”. Untuk kode JavaScript tersebut berfungi untuk mengubah warna backgroud web bermacam-macam dengan cara klik latar websitenya

Akhir Kata

Demikianlah panduan tentang langkah-langkah membuat web dinamis dengan mudah dan cepat. Membangun website dinamis bukanlah hal yang sulit, namun memang perlu pemahaman yang lebih. Semoga panduan ini membawa inspirasi dan kemudahan dalam membuat aset website secara dinamis. Selamat mencoba!