56 lines
1.9 KiB
Markdown
56 lines
1.9 KiB
Markdown
[English](Home) · [Dansk](Home-da) · **Bahasa Malaysia**
|
|
|
|
# Colour Vocab
|
|
|
|
Laman kad imbas satu halaman untuk belajar warna dalam bahasa Sepanyol,
|
|
dibina dengan HTML dan CSS sahaja.
|
|
|
|
|
|
|
|
## Kosa kata
|
|
|
|
| Sepanyol | English | Dansk | Bahasa Malaysia |
|
|
| --- | --- | --- | --- |
|
|
| Rojo | red | rød | merah |
|
|
| Azul | blue | blå | biru |
|
|
| Anaranjado | orange | orange | oren |
|
|
| Verde | green | grøn | hijau |
|
|
| Amarillo | yellow | gul | kuning |
|
|
|
|
## Cara menjalankan
|
|
|
|
Buka `src/index.html` dalam mana-mana pelayar. Tiada apa-apa untuk dipasang.
|
|
|
|
## Cara ia berfungsi
|
|
|
|
`index.html` memaut helaian gaya luaran, `style.css`. Peraturan latihan ini
|
|
ialah semua perubahan dibuat dalam CSS dan tiada dalam HTML.
|
|
|
|
1. **Pautkan helaian gaya.** `<link rel="stylesheet" href="./style.css" />`.
|
|
Untuk menguji pautan, tetapkan sementara `body { background-color: pink; }`
|
|
dan semak bahawa halaman berubah.
|
|
2. **Warnakan setiap tajuk mengikut maksudnya.** Setiap tajuk mempunyai `id`
|
|
(`red`, `blue`, `orange`, `green`, `yellow`), jadi `#red { color: red; }`
|
|
hanya menggayakan *Rojo*. `id` ialah petunjuk jika anda tidak tahu
|
|
perkataan Sepanyolnya.
|
|
3. **Jadikan tajuk berat biasa.** Semua tajuk berkongsi kelas `color-title`,
|
|
jadi satu peraturan meliputi semuanya: `.color-title { font-weight: normal; }`.
|
|
4. **Saiz imej.** `img { height: 200px; width: 200px; }` menjadikan setiap
|
|
petak warna sama saiz.
|
|
|
|
Pratonton selepas setiap langkah supaya kesilapan dikesan semasa masih kecil.
|
|
|
|
### Nota tentang kuning
|
|
|
|
`yellow` biasa sukar dibaca pada latar putih, jadi *Amarillo* menggunakan
|
|
`#d4a900`.
|
|
|
|
## Tangkapan skrin
|
|
|
|
Tangkapan skrin diambil dengan Chrome headless dalam tetingkap lebar 480 px:
|
|
|
|
```bash
|
|
chrome --headless=new --hide-scrollbars --window-size=480,1490 \
|
|
--screenshot=docs/wiki/images/colour-vocab.png file:///laluan/ke/src/index.html
|
|
```
|