Berikut Pengertian Atribut HTML dan Berbagai Fungsinya Yang Tidak Banyak Diketahui

October 25, 2018
oleh Edusoft Center

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 left, center, 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.

Value	Penjelasan
ltr	Left to Right (Dibaca dari kiri ke kanan)
rtl	Right 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:

Atribut	Pilihan	Fungsinya
`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`	Biasanya untuk lebar `table` dan `img`
`height`	`Numeric Value`	Biasanya digunakan untuk tinggi `table` dan `img`.
`title`	`User Defined`	Judul 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