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

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.

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>

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:

Teks nama warna akan muncul dengan warna sesuai artinya.
Font lebih ringan dan terkesan rapi.
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!