Atribut Pada HTML - Ayam Koding

Saat ini kita akan membahas tentang berbagai atribut HTML. Beberapa HTML tags dan kegunaannya seperti tag heading <h1>, <h2>, paragraf <p> dan tag lain. Kita dapat menggunakan bagian tersebut ke dalam form yang lebih simpel, dengan kebanyakan tag HTML mempunyai atribut.

Atribut pada HTML digunakan untuk mendefinisikan karakteristik dari sebuah elemen HTML dan ditempatkan ke dalam pembuka tag. Semua atribut dalam HTML dibagi menjadi 2 bagian: sebuah name dan sebuah value.

* name, adalah properti yang akan ditempatkan.
Contoh : paragraf elemen <p> akan memuat atribut dengan nama align, yang digunakan untuk meletakan posisi teks.

* value, merupakan nilai dari properti yang akan diatur dan selalu menggunakan tanda petik untuk pemakaian. Pada contoh berikut terdapat nilai dari align atribut seperti : left, center, dan right (untuk penempatan teks kiri, tengah, dan kanan).

Nama atribut dan nilai atribut menggunakan case-sensitive. Walaupun W3C menyarankan menggunakan lowercase atribut pada HTML4.

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Atribut Align</title>
    </head>
    <body>
        <p align="left">Teks berada di kiri</p>
        <p align="center">Teks berada di tengah</p>
        <p align="right">Teks berada di kanan</p>
    </body>
</html>

Hasilnya:

Tutorial Pemrograman HTML (Atribut)

Macam – Macam Core Atribut
Pada pemrograman HTML terdapat 4 core atribut yang biasa digunakan dalam elemen HTML (meskipun tidak semuanya) yakni id, title, class, style.

1. Atribut HTML (id)

atribut id dari tag html ini digunakan untuk mengidentifikasi beberapa elemen unik dari sebuah halaman HTML.

Contoh id atribut :

<p id="html">Ini kalimat menggunakan HTML bro</p>
<p id="css">Ini kalimat dengan (CSS) Cascading Style Sheet</p>

2. Atribut HTML (title)

atribut title atau judul diberikan untuk memberikan notifikasi judul pada sebuah elemen. Sintaks dari atribut title hampir sama dengan id atribut.

Contoh atribut title :

<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Atribut Title</title>
    </head>
    <body>
        <h3 title="Belajar HTML!">Contoh Tag Heading dengan Title</h3>
    </body>
</html>

Hasilnya:

Akan menghasilkan tulisan seperti diatas pada browser, cobalah untuk mengarahkan cursor mouse anda pada tulisan tersebut. Ketika mouse sampai di tulisan tersebut maka akan muncul sebuah pop-up dengan “Belajar HTML!” seperti dibawah.

3. Atribut HTML (class)

Atribut class digunakan untuk menghubungkan sebuah elemen dengan style sheet, dan menetapkan class dari elemen. Untuk lebih memahami atribut class ini alangkah baiknya untuk mempelajari CSS (Cascading Style Sheet) terlebih dulu.

Contoh atribut class:

class="namaClass1 namaClass2 namaClass3"

4. Atribut HTML (style)

Atribut style ini digunakan untuk menghubungkan elemen secara khusus ke CSS, didalam elemen. CSS ini digunakan untuk memberikan tampilan indah (kustomisasi) pada HTML.

Contoh atribut style:

<!DOCTYPE html>
<html>
    <head>
	<title>Contoh Style Atribut</title>
    </head>
     <body>
        <p style="font-family:Roboto; color:blue;">Ini sebuah teks berwarna biru... </p>
     </body>
</html>

Hasilnya:

Demikian tutorial mengenai atribut HTML yang perlu untuk anda pelajari dan dalami. Semoga bermanfaat dan terima kasih.