Belajar Html : Mempelajari Atribut Html

Belajar Html : Mempelajari Atribut html

Seperti yang sudah kita pelajari diawal, html memiliki 3 komponen penting. Yakni :

1. Tag
2. Elemen 
3. Dan atribut 

Kita sudah membahas Tag dan Elemen, kini saatnya kita mempelajari komponen yang terakhir, yakni Atribut.

Definisi Atribut

Atribut adalah komponen tambahan yang diberikan untuk elemen. Atribut berfungsi sebagai informasi tambahan yang lebih spesifik untuk elemen html. 

Aturan penulisan Atribut 

Sebenarnya aturan penulisan atribut html, mirip dengan aturan penulisan Tag pada Html, yang membedakannya hanya penggunaan tanda petik dan spasi

1. Penggunaan tanda petik 

Tanda petik merupakan hal yang patut kamu perhatian saat menulis atribut html, pasalnya sebagian besar atribut html mewajibkan adanya tanda petik!.

Contoh penulisan yang benar 

<!-- contoh penulisan yang benar ☑️ -->
<img src="gambar.jpg">

Contoh penulisan yang salah 

<!-- contoh penulisan yang salah ❎ -->
<img src=gambar.jpg >

2. Penggunaan spasi

Selain penggunaan tanda petik, penggunaan spasi juga harus kamu perhatikan saat menulis atribut html. 

Apabila atribut yang kamu tulis memiliki lebih dari satu nama, maka penulisannya menggunakan tanda min ("-") bukan spasi kosongan.

Contoh penulisan yang benar 

<!-- contoh penulisan yang benar ☑️ -->
<img data-src="gambar.jpg" />

Contoh penulisan yang salah 

<!-- contoh penulisan yang salah ❎ -->
<img data src="gambar.jpg" />

Keterangan :

data-src merupakan sebuah atribut yang memiliki 2 nama, jadi penulisannya harus menggunakan tanda min ("-"). Bukan spasi kosongan.

Selain pengunaan spasi untuk nama atribut yang harus diperhatikan. Penggunaan spasi juga digunakan untuk memisahkan atribut satu dengan atribut lainya.

Contoh penulisan yang benar 

<!-- contoh penulisan yang benar ☑️ -->
<img src="gambar.jpg" width="10%" height="20%" />

Contoh penulisan yang salah 

<!-- contoh penulisan yang salah ❎ -->
<img src="gambar.jpg"width="10%"height="20%" />

Keterangan :

Atribut width dan atribut height harus dipisahkan menggunakan spasi kosongan.

Penulisan Atribut Html

Penulisan atribut harus berada didalam elemen html (didalam tag pembuka). Atribut didalam html harus diapit menggunakan tanda petik dua ("...") ,maupun tanda petik tunggal ('...').

Elemen html dapat digunakan untuk menampung lebih dari satu elemen, artinya kamu dapat memasukan lebih dari satu atribut kedalam saru elemen. 

Contoh penulisan atribut html :

Berikut ini adalah contoh penulisan atribut html 

1. Penulisan atribut tunggal

See the Pen Untitled by Agata_desu (@Agata_desu) on CodePen.

Silahkan klik result untuk melihat hasil program.

Keterangan :

Pada elemen diatas, @Agata membuat perintah html yang bertugas untuk mengarahkan orang untuk pergi ke blog ini  (tanaka-agata.blogspot.com).

Dari elemen diatas dapat dilihat bahwa hanya terdapat 1 Tag pembuka (<a href ... >) dan 1 Tag penutup (</a>). Sedangkan https://tanaka-agata.blogspot.com merupakan atribut.

Oh ya..., untuk mempermudah pemahaman mu tentang pembahasan Html, mulai sekarang @Agata akan menggunakan Codepen embed, jadi kamu akan langsung dapat melihat Output html yang @Agata tulis.

Informasi tambahan 

Tag <a> pada Tag pembuka merupakan Tag yang tidak dapat berdiri sendiri sehingga harus digabungkan dengan href.

2. Penulisan atribut dobel atau lebih 

See the Pen Untitled by Agata_desu (@Agata_desu) on CodePen.

Silahkan klik result untuk melihat hasil program.

Keterangan:

Itu merupakan syntax untuk menampilkan gambar. Dalam perintah tersebut terdapat 3 atribut, yakni gambar.jpg, 10%, dan 20%.

Ketiga atribut saling keterkaitan. gambar.jpg merupakan file name gambar, sedangkan width="100%" merupakan ukuran gambar (panjangnya 100 persen dari ukuran layar), sedangkan height="20%" juga merupakan ukuran gambar (lebarnya 20 persen ukuran layar) 

Beberapa atribut html yang paling sering digunakan

Berikut ini adalah beberapa syntax atribut html yang paling sering digunakan.

Simbol	Keterangan
title	memberikan informasi tambahan pada atribut
id	Memberikan sebuah nama id pada elemen
class	memberikan nama class pada elemen
hidden	menyembunyikan suatu elemen
translate	menentukan, suatu elemen apakah memiliki opsi translate atau tidak
dir	menentukan arah text
style	menberikan input tambahan berupa kode css

Okeh,  sekian pembahasan mengenai Atribut html. Apabila ada kesalahan atau kekurangan dalam penyampaian mohon dimaafkan serta dikoreksi dikolom komentar.

Arigatou gozaimasu (｡’▽’｡)♡

Baca Juga