Membuat Website Sederhana untuk Belajar Warna dalam Bahasa Asing

Halo, Teman-Teman!

Kali ini kita akan membuat sebuah proyek website sederhana yang membantu kita belajar nama-nama warna dalam bahasa asing, contohnya bahasa Spanyol. Proyek ini memanfaatkan HTML dan CSS yang sudah kita pelajari sebelumnya. Harapannya, sambil belajar cara menata tampilan situs, kita juga bisa menambah kosakata bahasa Spanyol. Yuk, kita langsung mulai!

Membuat Website Sederhana untuk Belajar Warna dalam Bahasa Asing

Apa yang Akan Kita Buat?

Kita akan membuat sebuah website dengan daftar warna. Setiap warna akan ditampilkan dengan teks berwarna dan sebuah gambar kotak yang merepresentasikan warna tersebut. Sebagai contoh:

  • Kata “Rojo” akan tampil dengan teks berwarna merah dan dilengkapi kotak berwarna merah.
  • Kata “Azul” akan tampil dengan teks berwarna biru dan dilengkapi kotak berwarna biru.

Tujuan utama dari proyek ini adalah menciptakan tampilan web yang sederhana namun menarik, sekaligus berfungsi sebagai alat bantu untuk menghafal kosakata bahasa Spanyol terkait warna.

Persiapan dan Struktur Proyek

  1. Buat Folder Proyek
    Pertama, siapkan sebuah folder khusus untuk proyek ini. Di dalamnya, kita akan menyimpan dua file penting: index.html dan style.css. Pastikan kamu menempatkan keduanya dalam lokasi yang mudah diakses di komputer.

  2. Persiapkan File HTML (index.html)
    File inilah yang akan menjadi “kerangka” dari website kita. Di dalam file ini, kita membuat tag HTML dasar seperti <html>, <head>, dan <body>. Lalu, kita juga akan menambahkan:

    • <h1> untuk judul halaman, misalnya “Belajar Warna dalam Bahasa Spanyol”.
    • <h2> untuk menampilkan nama tiap warna.
    • <img> untuk menampilkan gambar kotak berwarna.

    Contohnya dapat dilihat di bawah ini:

    <!DOCTYPE html>
        <html lang="id">
        <head>
            <link rel="stylesheet" href="style.css">
            <title>Belajar Warna</title>
        </head>
        <body>
            <h1>Belajar Warna dalam Bahasa Spanyol</h1>
        
            <h2 id="red" class="color-title">Rojo</h2>
            <img src="red.jpg" alt="Kotak Merah">
        
            <h2 id="blue" class="color-title">Azul</h2>
            <img src="blue.jpg" alt="Kotak Biru">
        
            <!-- Kamu bisa menambahkan warna lainnya, misalnya Verde (hijau), Amarillo (kuning), dan seterusnya -->
        </body>
        </html>
        
  3. Buat File CSS (style.css)
    File CSS digunakan untuk mengatur tampilan atau desain halaman. Berikut beberapa langkah yang bisa kamu lakukan:

    • Pengaturan Latar Belakang Halaman
      Pastikan file CSS sudah tersambung dengan benar. Caranya, masukkan kode sederhana seperti di bawah ini di awal file style.css:

      body {
              background-color: lightgray;
          }
          

      Jika di browser latar belakang halaman berubah menjadi abu-abu, artinya file CSS sudah terhubung dengan baik.

    • Memberi Warna pada Teks
      Kita akan menggunakan ID Selector untuk mewarnai teks setiap nama warna. Contoh:

      #red {
              color: red;
          }
          
          #blue {
              color: blue;
          }
          
          /* Tambahkan ID untuk warna lain, misalnya #green untuk 'Verde' */
          

      Dengan cara ini, teks “Rojo” akan otomatis berwarna merah, sedangkan teks “Azul” akan otomatis berwarna biru.

    • Pengaturan Font-Weight
      Kita mungkin ingin membuat tampilan teks tidak terlalu tebal. Kamu bisa menggunakan Class Selector seperti berikut:

      .color-title {
              font-weight: normal;
          }
          

      Hasilnya, semua elemen <h2> yang memiliki class “color-title” akan memiliki ketebalan huruf yang lebih ringan.

    • Penyesuaian Ukuran Gambar
      Supaya tampilan gambar kotak warna terlihat seragam, atur lebar dan tinggi gambar menggunakan Element Selector:

      img {
              width: 200px;
              height: 200px;
              display: block;
              margin: 10px auto;
          }
          

      Dengan begitu, setiap kotak akan berukuran 200x200 piksel dan berada di tengah (dengan margin: 10px auto;).

Menambahkan Warna dan Variasi

Agar website ini makin seru, cobalah menambahkan warna lain. Misalnya:

  • Verde (Hijau)
  • Amarillo (Kuning)
  • Negro (Hitam)
  • Blanco (Putih)

Setelah menambahkan <h2> dan <img> untuk masing-masing warna di index.html, jangan lupa menambah ID baru di style.css, misalnya:

#green {
        color: green;
    }
    
    #yellow {
        color: yellow;
    }
    
    /* Dan seterusnya */
    

Hal ini akan membuat website semakin kaya dan membantu kita mengenali lebih banyak kosakata bahasa Spanyol.

Hasil Akhir

Setelah semua langkah diterapkan, website kita akan memiliki ciri-ciri sebagai berikut:

  1. Teks nama warna akan muncul dengan warna sesuai artinya.
  2. Font lebih ringan dan terkesan rapi.
  3. Gambar kotak untuk setiap warna akan berukuran seragam 200x200 piksel.

Melihat hasil akhirnya, kita bisa sekaligus belajar mengenali warna dan kosakata baru. Dengan terus menambahkan variasi warna, tampilan website akan semakin komprehensif dan edukatif.

Proyek sederhana ini memadukan keseruan belajar HTML dan CSS dengan mempelajari bahasa Spanyol. Kamu juga bisa mengaplikasikan konsep yang sama untuk bahasa lain, atau bahkan menambahkan fitur interaktif seperti kuis warna menggunakan JavaScript. Jangan lupa untuk terus bereksperimen dan menyesuaikan desain agar lebih menarik. Semoga proyek ini bermanfaat dan menambah semangat belajar kamu.

Selamat mencoba, dan kita akan berjumpa lagi di artikel seru selanjutnya!

Comments

Postingan Populer

Image

Superingan is a Blogger template designed with simplicity and functionality in mind, offering a clean and user-friendly platform for professional websites. This theme is perfect for various website types, including personal blogs, online magazines, news websites, and portfolios. Features: Responsive Design: Your website will look its best across all devices, from desktops and laptops to tablets and smartphones. Customizable Colors: Easily change the template's colors to match your branding or preferences. Custom Headers: Upload your own header image to add a personal touch to your website. Custom Menus: Create and manage your website's navigation menus with ease. Widget Areas: Add widgets to display additional content and features on your website's sidebar. Clean HTML & CSS Code: The template is built with clean and well-structured code, making it easy to learn and customize further. Superingan is an ideal choice for those seeking a professional website with a sim...

Image

Hitung Cicilan, Bunga, dan Total Biaya Pinjaman Bisnis dengan Praktis dan Akurat Jumlah Pinjaman (Rp) Suku Bunga Tahunan (%) Lama Pinjaman (Tahun) Pembayaran Tambahan per Bulan (Rp) Setel Ulang Hitung Halo teman-teman! Kalau kamu lagi cari tambahan modal buat mulai usaha atau ingin mengembangkan bisnis yang sudah berjalan, penting banget untuk tahu seberapa besar cicilan dan total biaya yang harus kamu siapkan. Jangan sampai asal ambil pinjaman tanpa perhitungan, ya! Nah, di sinilah Kalkulator Pinjaman Usaha Online jadi solusi praktis yang bisa bantu kamu. Kalkulator ini dirancang khusus buat pelaku usaha, UMKM, atau siapa pun yang ingin tahu rincian pinjaman usaha secara lengkap. Mulai dari cicilan bulanan, bunga tahunan, durasi pelunasan, sampai total pembayaran. Semua bisa kamu hitung otomatis hanya dengan beberapa input sederhana. Cara Menggun...

Image

Calculate Business Loan Payments, Interest, and Total Cost Easily and Accurately Loan Amount (USD) Annual Interest Rate (%) Loan Term (Years) Extra Monthly Payment (USD) Reset Calculate Hi everyone! If you're looking for extra capital to launch a startup or expand your existing business, it's important to know how much you'll need to repay—monthly and overall. Don’t commit to a loan without understanding the full picture. That’s where our Online Business Loan Calculator comes in handy. This tool is designed for business owners, entrepreneurs, or anyone seeking a full breakdown of a loan. It helps you calculate monthly payments, total interest, repayment period, and overall cost automatically with just a few simple inputs. How to Use the Business Loan Calculator Fill in the following fields based on your situation: Loan Amount (USD): Ent...