HTML - Rujukan Atribut
Selamat datang, bakat pemaju web masa depan! Hari ini, kita akan melihat dunia yang menarik atribut HTML. Sebagai guru komputer tetangga yang ramah, saya di sini untuk memandu anda dalam perjalanan ini. Jadi, pasang helm maya anda, dan mari kita jelajah!
Jenis Atribut HTML
Atribut HTML adalah seperti kekuatan khas yang kita berikan kepada elemen HTML kita. Mereka menyediakan informasi tambahan tentang elemen dan boleh mengubah tingkah laku mereka. Ada dua jenis utama atribut:
- Atribut Tempatan
- Atribut Global
Mari kita pecahkan ini dan lihat bagaimana mereka melakukan sihir mereka!
Atribut Tempatan
Atribut tempatan adalah khusus untuk elemen HTML tertentu. Mereka seperti kekuatan super yang diperbuat khusus yang hanya elemen tertentu boleh gunakan. Mari kita lihat beberapa atribut tempatan biasa:
1. src (sumber)
Atribut src digunakan dengan elemen seperti <img>, <audio>, dan <video> untuk menentukan sumber media.
<img src="cute-puppy.jpg" alt="Anak anjing yang comel">Dalam contoh ini, src memberitahu pelayar di mana untuk mencari fail imej.
2. href (rujukan hiperteks)
Atribut href digunakan terutamanya dengan elemen <a> (anchor) untuk membuat pautan.
<a href="https://www.example.com">Lawati Example.com</a>Di sini, href menentukan URL yang pautan itu hendak membawa anda kepadanya apabila diklik.
3. type
Atribut type digunakan dengan pelbagai elemen untuk menentukan jenis kandungan.
<input type="text" name="username">
<input type="password" name="password">Dalam contoh ini, type memberitahu pelayar jenis input yang dijangkakan.
4. value
Atribut value kerap digunakan dengan elemen borang untuk menetapkan nilai default.
<input type="text" name="city" value="New York">Ini mengisi ruang input dengan "New York".
Atribut Global
Atribut global adalah seperti kekuatan super universal yang boleh digunakan pada mana-mana elemen HTML. Mereka seperti pisau Switzerland di dunia HTML! Mari kita jelajah beberapa atribut global yang paling biasa digunakan:
1. class
Atribut class digunakan untuk menentukan satu atau lebih nama kelas untuk elemen. Ini sangat berguna untuk penyesuaian gaya CSS atau manipulasi dengan JavaScript.
<p class="highlight important">Ini adalah paragraf penting.</p>2. id
Atribut id menyediakan pengenalpastian unik untuk elemen. Ia seperti memberikan setiap elemen tag nama khas.
<div id="header">Selamat datang ke laman web saya!</div>Ingat, nilai id mestilah unik dalam dokumen!
3. style
Atribut style membolehkan anda menambah gaya inline CSS ke elemen.
<p style="color: biru; font-size: 16px;">Teks ini biru dan tinggi 16 piksel.</p>Walaupun biasanya lebih baik untuk menggunakan fail CSS terpisah, gaya inline boleh membantu untuk penyesuaian cepat.
4. title
Atribut title menyediakan informasi tambahan tentang elemen, biasanya dipaparkan sebagai tooltip apabila pengguna mengggerakkan tetikus di atas elemen.
<abbr title="HyperText Markup Language">HTML</abbr>Cuba mengggerakkan tetikus anda ke atas "HTML" di pelayar - anda sepatutnya melihat bentuk penuh muncul!
5. lang
Atribut lang menentukan bahasa kandungan elemen.
<p lang="fr">Bonjour, monde!</p>Ini membantu pembaca skrin dan enjin carian memahami bahasa yang digunakan.
Sekarang, mari kita susun jadual rujukan praktis ini:
| Atribut | Jenis | Keterangan | Contoh |
|---|---|---|---|
| src | Tempatan | Menentukan sumber kandungan terbenam | <img src="image.jpg"> |
| href | Tempatan | Menentukan URL sumber terpaut | <a href="https://www.example.com">Pautan</a> |
| type | Tempatan | Menentukan jenis elemen | <input type="text"> |
| value | Tempatan | Menentukan nilai elemen | <input type="text" value="Default"> |
| class | Global | Menentukan satu atau lebih nama kelas untuk elemen | <p class="highlight">Teks berhighlight</p> |
| id | Global | Menentukan pengenalpastian unik untuk elemen | <div id="header">Kandungan header</div> |
| style | Global | Menentukan gaya inline CSS untuk elemen | <p style="color: merah;">Teks merah</p> |
| title | Global | Menentukan informasi tambahan tentang elemen | <abbr title="World Health Organization">WHO</abbr> |
| lang | Global | Menentukan bahasa kandungan elemen | <p lang="es">Hola Mundo</p> |
Ingat, bakat pemaju muda, atribut adalah apa yang memberikan rasa dan fungsi kepada elemen HTML anda. Mereka adalah saus rahsia yang mengubah halaman web biasa menjadi karya interaktif yang indah!
Sekiranya anda teruskan perjalanan anda dalam pemaju web, anda akanjumpa banyak atribut lagi. Jangan takut untuk mencuba mereka - itu adalah bagaimana kita belajar dan tumbuh sebagai pemaju. Dan siapa tahu? Mungkin suatu hari anda akan mencipta atribut baru sendiri!
Terus kod, terus belajar, dan maya atribut diiringi anda!
Credits: Image by storyset