HTML Attribute adalah suatu atribut untuk melengkapi informasi dari suatu elemen HTML
-
Semua elemen HTML dapat memiliki Attribute.
-
Attribute HtML memberikan informasi tambahan terhadap elemen HTML.
-
Attribute selalu berada diawal tag, seperti:
<a href="google.com">Google</a>
-
Attribute selalu berbapasangan dengan value/nilai, seperti:
href="google.com"
-
Value/Nilai dari attribute harus selalu dibungkus menggunakan double quote/petik dua (").
href
berfungsi untuk menentukan URL halaman yang ingin dituju.
<html>
<a href="github.com">Github Website</a>
</html>
src
berfungsi untuk menentukan lokasi gambar file yang ingin ditampilkan.
<html>
<img src="attribute.png" />
</html>
Ada dua cara untuk mendefinisikan URL di attribute src
-
Absolute URL - Memasukan gambar dari hosting eksternal/tidak dalam local, seperti:
<img src="https://avatars.githubusercontent.com/u/76999048?s=200&v=4" >
-
Relative URL
<img src="/src/images/avatar.png" >
width
dan height
berfungsi untuk menentukan lebar dan tinggi gambar dalam satuan piksel (px).
<img src="/src/images/avatar.png" width="32" height="32" />
alt
berfungsi untuk menggantikan gambar dengan tulisan, jika gambar tidak bisa ditampilkan dengan alasan tertentu.
<img src="/src/images/avatar.png" alt="avatar" />
style
berfungsi untuk menambahkan gaya/style pada elemen seperti color, font, size, dan lainnya.
<h1 style="color: green">Hello World</h1>
lang
berfungsi untuk mendeklarasikan bahasa yang digunakan dalam website, untuk membantu mesin pencari / browser.
<!DOCTYPE html>
<html lang="en">
<body>
Hello World
</body>
</html>
title
berfungsi sebagai penambah informasi dalam suatu elemen, yang jika dihover akan memunculkan tooltip
<span title="Komunitas untuk mengelola dan menulis kode">Bellshade</span>
class
berfungsi untuk menunjuk nama class dalam style sheet, dapat digunakan untuk mengakses dan memanipulasi elemen di Javascript.
<div class="kota">
<p>Jakarta terletak di pulau Jawa, Indonesia.</p>
</div>
id
berfungsi untuk menentukan id unik untuk elemen HTML, dapat digunakan untuk menunjuk deklarasi style tertentu dalam style sheet dan juga digunakan untuk mengakses dan memanipulasi elemen dengan id tertentu di Javascript.
<html>
<h1 id="judulSaya">Judul Saya</h1>
</html>
method
berfungsi untuk menentukan cara mengirim data formulir (data formulir dikirim ke halaman yang ditentukan dalam atribut action).
Form-data dapat dikirim sebagai variabel URL (dengan method="get"
) atau sebagai transaksi posting HTTP (dengan method="post").
Catatan tentang GET:
- Menambahkan data formulir ke dalam URL dalam pasangan nama/nilai
- Panjang URL dibatasi (sekitar 3000 karakter)
- Jangan pernah menggunakan
GET
untuk mengirim data sensitif! (akan terlihat di URL) - Berguna untuk pengiriman formulir di mana pengguna ingin menandai hasilnya
GET
lebih baik untuk data yang tidak aman, seperti string kueri di Google
<form action="/action_page.php" method="get">
Nama Depan: <input type="text" name="namaDepan" /><br />
Nama Belakang: <input type="text" name="namaBelakang" /><br />
<input type="submit" value="Submit" />
</form>
Catatan tentang POST:
- Menambahkan formulir-data di dalam isi permintaan HTTP (data tidak ditampilkan dalam URL)
- Tidak memiliki batasan ukuran
- Pengiriman formulir dengan
POST
tidak dapat di-bookmark
<form action="/action_page.php" method="post">
Nama: <input type="text" name="nama" /><br />
Password: <input type="text" name="password" /><br />
<input type="submit" value="Submit" />
</form>