Blog

Home  /  blog  /  Berikut Pengertian Atribut HTML dan Berbagai Fungsinya Yang Tidak Banyak Diketahui

Berikut Pengertian Atribut HTML dan Berbagai Fungsinya Yang Tidak Banyak Diketahui

Kali ini kita akan memahami apa yang dimaksud dengan atribut html.

Nah atribut sendiri maksudnya adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text.

Cara penulisannya pun cukup menambahkan name dan value:


<!DOCTYPE html>
<html>

   <head>
      <title>Tata Letak Tulisan</title>
   </head>

   <body>
      <p align="left">Tulisan dengan format rata kiri</p>
      <p align="center">Tulisan dengan format rata tengah</p>
      <p align="right">Tulisan dengan format rata kanan</p>
   </body>

</html>

Dalam contoh diatas, kita mendeklarasikan name align dan value leftcenter, atau right.

Penulisan atribut berada dalam tag pembuka.

#1 Atribut Inti

Ada empat atribut penting yang sering digunakan dalam tag HTML:

  • Id
  • Class
  • Title
  • Style

Pertama – Atribut Id berfungsi untuk mengidentifikasi keunikan dari setiap elemen yang ada dalam satu halaman web. Artinya dalam sebuah halaman hanya akan ada satu nama Id.

Nah nantinya atribut Id akan kita gunakan saat bermain dengan css.

Berikut adalah contoh penulisan atribut Id:


<!DOCTYPE html>
<html>

   <head>
      <title>Tulisan</title>
   </head>

   <body>
      <p id="pertama">Ini adalah tulisan pertama</p>
      <p id="kedua">Ini adalah tulisan kedua</p>
   </body>

</html>

Kedua – Atribut title ini biasanya digunakan untuk tooltips dari judul ataupun gambar dari sebuah elemen website. Berfungsi untuk menjelaskan lebih detail.

Berikut adalah contoh penggunaan atribut title:


<!DOCTYPE html>
<html>

   <head>
      <title>Selamat Datang di Kodedasar.com</title>
   </head>

   <body>
      <h3 title="Hai nama saya Damas Amirul Karim">Damas Amirul Karim</h3>
   </body>

</html>

Untuk percobaan, silahkan sorotkan kursor tepat diatas judul Damas Amirul Karim.

Ketiga – Atribut style banyak digunakan untuk mengubah tampilan dasar dari elemen html.

Jadi disini kita bisa menambahkan kode css didalam atribut style.

Perhatikan contoh penggunaan atribut style berikut:


<!DOCTYPE html>
<html>

   <head>
      <title>Atribut Style</title>
   </head>

   <body>
      <p style="font-family:arial; color:#FF0000;">Contoh tulisan...</p>
   </body>

</html>

Keempat – Atribut class hampir sama dengan atribut Id namun yang membedakannya adalah:

Atribut Id bersifat unik sedangkan class tidak demikian.

Anda bisa menambahkan banyak class di dalam sebuah elemen html.

Nantinya akan sangat berguna saat kita mempelajari css.


<!DOCTYPE html>
<html>

   <head>
      <title>Atribut Class</title>
   </head>

   <body>
      <p class="satu dua tiga">Contoh tulisan dengan class...</p>
   </body>

</html>

Pada contoh diatas saya menambahkan tiga buah class dalam sebuah tag html.

#2 Atribut Internasional

Ada dua atribut Internasional khusus untuk tag HTML antara lain:

  • dir
  • lang

Atribut Dir digunakan untuk mengindikasikan kepada browser bagaimana urutan penulisannya.

ValuePenjelasan
ltrLeft to Right (Dibaca dari kiri ke kanan)
rtlRight to Left (untuk tulisan arab – mulai dari kanan ke kiri)

Berikut contoh penggunaan tag dir:


<!DOCTYPE html>
<html dir="rtl">

   <head>
      <title>Arah Membaca</title>
   </head>

   <body>
      Inilah cara IE 5 membaca tulisan dari kanan ke kiri.
   </body>

</html>

Atribut Lang digunakan untuk mengidikasikan bahasa utama dari halaman website.

Berikut cara penulisan tag lang:


<!DOCTYPE html>
<html lang="id">

   <head>
      <title>Halaman Bahasa Indonesia</title>
   </head>

   <body>
      Halaman ini menggunakan bahasa indonesia.
   </body>

</html>

#3 Tambahan: Atribut Bawaan

Berikut adalah beberapa atribut yang secara umum bisa anda gunakan:

AtributPilihanFungsinya
alignrightleftcenterRata secara horizontal
valigntopmiddlebottomRata secara vertikal
bgcolornumeric, hexidecimal, RGB valuesMemberi warna latar elemen
backgroundURLMemberikan background gambar elemen.
idUser DefinedNama khusus sebuah elemen untuk CSS
classUser DefinedNama untuk pengklasifikasian CSS
widthNumeric ValueBiasanya untuk lebar table dan img
heightNumeric ValueBiasanya digunakan untuk tinggi table dan img.
titleUser DefinedJudul dari elemen “Pop-up”

Demikianlah penjelasan mengenai atribut pada HTML. Semoga Berhasil Sobat….

 

Di Edusoft Center Juga Ada Kursus HTML & CSS lo … www.edusoftcenter.com

Info Selengkapnya Bisa
Office : 0271 745 2187
No XL : 08180 4542 586 (WA & Telegram Ada)
No Simpati : 082 22922 2121

atau

Bisa Langsung Registrasi Online lewat Formulir Online:
www.edusoftcenter.com

Leave a Reply

Your email address will not be published.Required fields are marked*