Mengenal Atribut pada HTML

12 Jul 2019 08:10 2361 Hits 1 Comments Approved by Plimbi
Macam-macam atribut pada HTML dan contohnya.

Pada artikel kali ini saya akan membahas tentang Atribut pada HTML, artikel ini masih sama dengan artikel-artikel yang telah saya buat yaitu masih tentang HTML.

Atribut merupakan informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa warna untuk teks, besar kecilnya huruf dari teks, ukuran panjang atau lebar, serta dapat berupa penamaan sebuah class dan id. Atribut dalam satu tag

Dalam penulisannya, setiap atribut memiliki pasangan nama dan nilai
(value). Dan tulisan dengan name=”value”. Value diapit oleh tanda kutip satu(“) dan tanda kutip dua(“).

Cara penulisan atribut ini pun cukup mudah yaitu dengan cara menambahkan name dan value. Contoh:

Dari contoh diatas, kita telah mendeklarasikan name align dan value left, center, right. Namun perlu kita ingat bahwa penulisan atribut itu sendiri berada dalam tag pembuka.

Macam-macam Atribut

  1. Atribut Inti

Terdapat empat atribut penting yang sering digunakan dalam tag HTML, yaitu:

  • Atribut Id

Atribut Id berfungsi untuk mengidentifikasi keunikan dari setiap elemen yang ada dalam suatu halaman website. Maksudnya dalam sebuah halaman web hanya ada satu nama Id. Contoh:

Pada contoh diatas terdapat tag P dengan id=”satu”, nah nama Id satu itulah yang akan kita gunakan saat nanti kita membuat website dengan menggunakan CSS.

  • Atribut Class

Atribut class hampir sama dengan atribut Id, yang membedakannya karena atribut Id bersifat unik sedangkan atribut Class tidak demikian.

Dalam penggunaannya kita bisa menambahkan banyak Class dalam sebuah elemen HTML yang nantinya akan sangat berguna ketika kita menggunakan CSS. Contoh:

Pada contoh diatas kita telah menambahkan tiga class dalam satu tag HTML.

  • Atribut Title

Atribut Title ini biasanya digunakan untuk tooltips dari judul ataupun gambar dari sebuah elemen website. Atribut title ini berfungsi untuk menjelaskan lebiih detail. Contoh:

  • Atribut Style

Atribut style banyak digunakan untuk mengubah tampilan dasar dari elemen  HTML. Jadi dalam penggunaannya kita cukup menambahkan kode CSS didalam atribut style tersebuut. Contoh:

  1. Atribut Internasional

Terdapat dua atribut internasional yang khusus digunakan untuk tag HTML, yaitu:

  • Atribut Dir

Atribut Dir digunakan untuk mengindikasikan kepada browser bagaimana urutan penulisannya.

Values Keterangan
ltr Left to Right (dibaca dari kiri ke kanan)
rtl Right to Left (dibaca dari kanan ke kiri, digunakan untuk penulisan arab)

Contoh:

  • Atribut Lang

Atribut Lang digunakan utnuk mengindikasikan bahasa utama dari halaman website. Contoh:

  1. Atribut Bawaan

Berikut adalah beberapa atribut yang bisa kita gunakan, yaitu:

Atribut Pilihan Keterangan
Align Right, Left, Center Rata secara horizontal
Valign Top, Middle, Bottom Rata secara vertikal
BgColor Numeric, Hexidecimal, RGB values Memberi warna latar elemen
Background URL Memberikan background gambar elemen
Id User defined Nama khusus sebuah elemen untuk CSS
Class User defined Nama untuk pengklasifikasian CSS
Width Numeric Value Untuk ukuran lebar
Height Numeric Value Untuk ukuran tinggi
Title User defined Judul dari elemen “pop-up”
Href User defined Untuk menyisipkan alamat web pada sebuuah tulisan
Alt User defined Untuk memberikan gambaran singkat mengenai tampilan dalam content.

Macam-macam atribut inputan dalam HTML

  1. Atribut Value

Atribut value merupakan sebuah atribut yang berfungsi untuk menentukan nilai awal dari elemen input. Contoh:

  1. Atribut Readonly

Atribut Readonly berfungsi untuk menentukan nilai dari suatu input yang hanya bisa dibaca. Contoh:

  1. Atribut Disable

Atribut Disable berfungsi untuk menonaktifkan suatu kolom inputan atau tombol button. Contoh:

  1. Atribut Size

Atribut size digunakan untuk menentukan ukuran kolom inputan. Contoh:

  1. Atribut Maxlength

Atribut maxlength digunakan untuk menentukan panjang maksimum karakter dari kolom inputan. Contoh:

 

Tags

About The Author

Tineu Nursyifa 42
Ordinary

Comments

You need to be logged in to be able to post a comment. Click here to login
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel