#5: Attributes

Written by: Audrey Boren



ISI BAB

  1. Semua elemen HTML bisa memiliki atribut

  2. Atribut href dalam atribut <a>

  3. Atribut src dalam atribut <img>

  4. Atribut width & height dalam atribut <img>

  5. Atribut alt dalam tag <img>

  6. Atribut style

  7. Atribut lang dalam tag <html>

  8. Atribut title



APA ITU ATRIBUT HTML?

Atribut html adalah kata khusus yang digunakan didalam tag pembuka untuk mengendalikan sikap elemen. Atribut html adalah pengubah jenis elemen HTML. Atribut memodifikasi kegunaan default dari sebuah tipe elemen atau menyediakan fungsionalitas untuk tipe elemen tertentu yang tidak dapat berfungsi dengan benar tanpanya.



FUNGSI :

Atribut HTML digunakan untuk memberikan informasi tambahan tentang elemen HTML



CIRI ATRIBUT HTML :

  • Semua elemen HTML bisa memiliki atribut

  • Atribut memberikan informasi tambahan tentang elemen

  • Atribut selalu ditentukan di tag awal

  • Atribut biasanya datang dalam pasangan nilai / nama seperti : name = “value”

  • Ditulis dalam tag awal elemen, setelah nama elemen


MACAM ATRIBUT:

Atribut biasanya diklasifikasikan sebagai:

  1. Atribut wajib (required attributes)

  2. Atribut opsional (optional attributes)

  3. Atribut standar ( standard attributes)

  4. Atribut acara (event attributes)

  • Pada umumnya atribut wajib dan opsional untuk memodifikasikan elemen HTML tertentu.

  • Atribut standar dapat diterapkan pada sebagian besar elemen HTML.

  • Atribut acara ditambahkan dalam html versi 4, menyediakan elemen unruk menentukan skrip yang akan dijalankan dalam keadaan tertentu


CONTOH ATRIBUT WAJIB DAN OPSIONAL:

Digunakan 1 elemen:

  • <body> : alink, background, link, text, vlink

  • <input> : checked , maxlength


Digunakan 2 elemen:

  • <a> dan <link> : href , rel , rev

  • <frameset> dan <textarea> : cols, rows


Digunakan beberapa elemen:

  • Bgcolor : <body>, <table>, <td>, <th>, <bgcolor>

  • Src : <frame>, <iframe>, <img>, <input>, <script>

  • Alt : <applet>, <area>, <img>, <input>


Contoh atribut acara (event attribute) :

  • Onclick

  • Ondblclick

  • Ondrag

  • Onmousemove

  • Onwaiting



1. Atribut href


Tag <a> mendefinisikan hyperlink, jika tidak disertai atribut href, tag <a> bukan hyperlink Atribut href menentukan URL halaman yang dituju link.


Tips: Bisa juga menggunakan href=”#top” atau href=”#” untuk menyambungkan link yang ada dibagian atas halaman saat ini.


Value yang memungkinkan:

  • URL penuh – mengarah ke situs web lain

  • URL relatif – menunjukan ke file dalam situs web. Seperti href = “default.html”

  • Link ke elemen dengan id tertentu didalam halaman. Seperti href = “#section2

  • Protocol lain seperti https: //, ftp: //, mailto:, file :, dll …)

  • Sebuah skrip. Seperti href = “javascript : alert (‘halo’);”)


Contoh :

  1. Untuk menambahkan foto sebagai link:

  2. Untuk mencantumkan link pada alamat email

  3. untuk mencantumkan link pada nomor telepon

  4. untuk mencantumkan link ke bagian lain pada halaman yang sama

  5. untuk mencantumkan link pada javascript



2. Atribut src


Tag <img> digunakan untuk melampirkan gambar di halaman HTML. Atribut src menentukan jalur ke gambar yang akan ditampilkan.


<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">


Definisi: perlu menggunakan atribut src untuk melampirkan URL gambar yang akan dicantumkan.


Ada 2 jalan untuk melampirkan URL dalam atribut src:


1. Absolute URL (URL mutlak)

Menghubunggkan ke gambar eksternal yang dihosting di situs web lain.

src=”https : //www.w3schools.com/images/img_cat.jpg”

note : gambar eksternal mungkin memiliki hak cipta. Jika tidak mendapatkan izin untuk menggunakannya, mungkin dapat melanggar undang-undang hak cipt. Selain itu, tidak dapat mengkontrol gambar eksternal: itu bisa tiba tiba dihapus atau diubah.


2. Relative URL (URL relatif)

Tautan ke gambar yang dihosting didalam situs web. Di sini, URL tidak menyertakan nama domain.


Jika url dimulai tanpa garis miring, itu akan menjadi relative terhadap halaman saat ini.

Contoh : src = “img_cat.jpg”


Jika url dimulai dengan garis miring, itu akan menjadi relative terhadap domain.

Contoh: src = “/ images / “img_cat.jpg”


Tips : cara terbaik adalah menggunakan URL relatif. Mereka tida akan jurusak jika mengubah domain.


Catatan: ikon link rusak dan teks alt akan ditampikan jika browser tidak dapat menemukan gambar.




3. Atribut width dan height


Tag <img> juga harus berisi atribut lebar dan tinggi, yang akan menentukan lebar dan tinggi gambar (dalam pixels)


<img scr=”img_cat.jpg” width=”500” height=”600”>



4. Atribut alt


Atribut alt yang diperlukan untuk tag <img> menentukan teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan karena alasan tertentu. Hal ini bisa terjadi karena koneksi yang lambat, atau kesalan pada atribut src atau jika pengguna menggunakan screen reader (pembaca layar)


<img src=”img_cat.jpg” alt=”a sleeping cat”>



5. Atribut style


Atribut style digunakan untuk menambah gaya pada elemen, seperti warna, font, ukuran dll.


<p style=”color:red;”> this is a red paragraph </p>



6. Atribut lang


Menyertakan atribut lang didalam tag <html> adalah hal yang wajib, untuk menyatakan Bahasa halaman web. Fungsinya untuk membantu mesin pencari dan browser .


Contoh berikut cara mengatur Bahasa inggris sebagai Bahasa halaman:

<!DOCTYPE html>

<html lang=”en”>

<body>

….

</body>

</html>



Kode negara juga dapat di tambahkan ke kode Bahasa di atribut lang, 2 karakter pertama untuk menentukan Bahasa halaman HTML, dan 2 karakter terakhir untuk menentukan negara.


<!DOCTYPE html>

<html lang=”en-us”>

<body>

….

</body>

</html>


Untuk kode Bahasa Indonesia lang=”id”



8 views0 comments

Recent Posts

See All