Belajar HTML Dasar : Atribut HTML

0
3239

Kita telah melihat beberapa tag HTML dan penggunaannya seperti tag heading <h1>, <h2>, tag paragraf <p> dan tag lainnya.

Sejauh ini kita masih menggunakan tag dalam bentuk yang paling sederhana, tetapi sebagian besar tag HTML juga dapat memiliki atribut, yang merupakan  tambahan sedikit informasi.

Atribut digunakan untuk mendefinisikan karakteristik elemen HTML dan ditempatkan di dalam elemen tag pembuka.

Semua atribut terdiri dari dua bagian, yaitu nama dan nilai:

  • Nama adalah properti yang ingin Anda tetapkan. Misalnya, elemen paragraf <p> contoh attribut align, digunakan untuk mengatur rataan dari paragraph, apakah Anda ingin tulisan rata kiri, tengah atau kanan.
  • Nilai adalah apa yang Anda inginkan dari nilai properti yang akan ditetapkan. Nilai ini selalu dimasukkan dalam tanda kutip. Contoh di bawah ini menunjukkan tiga nilai dari atribut align: left, center dan right.

Nama atribut dan nilai atribut bersifat case-insensitive (tidak dipengaruhi huruf besar atau kecil). Namun, World Wide Web Consortium (W3C) merekomendasikan atribut / nilai atribut ditulis menggunakan huruf kecil dalam rekomendasi HTML 4 mereka.

Contoh :

<! DOCTYPE html>
<html>
    <head>
        <title>Contoh Penggunaan Atribut Align </ title>
    </head>

    <body>
        <p align = "left"> Ini adalah tulisan rata kiri</p> 
        <p align = "center"> Ini adalah tulisan rata tengah</p> 
        <p align = "right"> Ini adalah tulisan rata kanan</p> 
    </body>

</html>

Code ini akan menampilkan hasil  sebagai berikut :

Ini adalah tulisan rata kiri

Ini adalah tulisan rata tengah

Ini adalah tulisan rata kanan

Atribut Inti

Empat atribut inti yang dapat digunakan pada sebagian besar elemen HTML (meskipun tidak semua) adalah:

  • Id
  • Title
  • Class
  • Style

Atribut Id

Atribut id dari tag HTML dapat digunakan untuk mengidentifikasi secara unik setiap elemen di dalam halaman HTML. Ada dua alasan utama mengapa Anda mungkin ingin menggunakan atribut id pada elemen:

  • Jika sebuah elemen membawa atribut id sebagai pengidentifikasi unik, adalah mungkin untuk mengidentifikasi hanya elemen dan isinya.
  • Jika Anda memiliki dua elemen dengan nama yang sama dalam halaman Web (atau style sheet/), Anda dapat menggunakan atribut id untuk membedakan antara elemen yang memiliki nama yang sama.

Kita akan membahas style sheet pada tutorial terpisah. Untuk saat ini, mari kita gunakan atribut id untuk membedakan antara dua elemen paragraf seperti yang ditunjukkan di bawah ini.

Contoh :

<p id = “html”>Paragraf ini menjelaskan apa itu HTML </ p>

<p id = “css”> Paragraf ini menjelaskan apa itu Cascading Style Sheet </ p>

Atribut title

Atribut judul memberikan judul yang disarankan untuk sebuah elemen. Sintaks ini berguna untuk memberikan “judul” pada elemen mirip seperti atribut id:

Perilaku atribut ini akan bergantung pada elemen yang membawanya, meskipun sering ditampilkan sebagai tooltip (keterangan) ketika kursor muncul di atas elemen atau saat elemen sedang dimuat.

Contoh :

<! DOCTYPE html>
<html>
    <head>
        <title> Contoh Pengunaan Atribut title </ title>
    </head>

        <body>  
            <h3 title = "Halo HTML!"> Contoh Tag Judul Heading </h3>
        </body>

</html>

Code ini akan menampilkan hasil sebagai berikut :

Contoh Tag Judul Heading

Sekarang coba arahkan kursor ke kalimat “Contoh Tag Judul Heading” di atas, Anda akan melihat bahwa judul apa pun yang Anda gunakan dalam kode title Anda keluar sebagai keterangan pada kursor.

Atribut class

Atribut class digunakan untuk mengaitkan elemenHTML dengan style sheet, dan menentukan class elemen.

Anda akan mempelajari lebih lanjut tentang penggunaan atribut class ketika Anda mempelajari Cascading Style Sheet (CSS).

Jadi untuk sekarang sambil lewat saja dulu.

Nilai atribut juga dapat berupa daftar nama class yang dipisahkan dengan spasi. Sebagai contoh:

class = “className1 className2 className3”

Atribut style

Atribut style memungkinkan Anda untuk menentukan aturan Cascading Style Sheet (CSS) dalam elemen.

<! DOCTYPE html>
<html>
    <head>
        <title> Atribut style </title>
    </head>

    <body>
        <h3 title = "Halo HTML!"> Contoh teks ... </ p>
    </body>

</html>

Code ini akan menampilkan hasil sebagai berikut

Contoh teks …

Oke, pada saat ini kita belum belajar CSS, jadi mari kita belajar sambil lewat saja. Yang penting  Anda perlu memahami apa itu atribut HTML dan bagaimana mereka dapat digunakan saat memformat sebuha konten.

Atribut internationalization

Ada tiga atribut internasionalisasi, yang tersedia untuk sebagian besar (meskipun tidak semua) elemen XHTML.

Atribut dir

Atribut dir berguna untuk memberitahu browser arah penulisan teks. Atribut dir memilki 2 nilai seperti yang Anda lihat dalam tabel berikut:

Value

Arti

ltr Left to right/Kiri ke kanan (nilai default)
rtl Right to left/Kanan ke kiri (untuk bahasa seperti Ibrani ata Arab yang dibaca dari kanan ke kiri)

Contoh :

<! DOCTYPE html>
<html dir = "rtl">
    <head>
        <title> Arah Tampilan </title>
    </head>

        <body>
            Beginilah cara IE 5 menerjemahkan teks dari arah kanan ke kiri.
        </body>

</html>

Ketika atribut dir digunakan dalam tag <html>, itu menentukan bagaimana teks akan ditampilkan dalam seluruh dokumen. Ketika digunakan dalam tag lain, itu menampilkan arah teks hanya untuk konten dari tag tersebut.

Atribut lang

Atribut lang berfungsi untuk menunjukkan bahasa utama yang digunakan dalam dokumen.

Nilai-nilai atribut lang adalah kode bahasa standar dua karakter ISO-639. Periksa Kode Bahasa HTML: ISO 639 untuk daftar lengkap kode bahasa.

Contoh :

<! DOCTYPE html>
<html lang = "en">
    <head>
        <title> Halaman Bahasa Inggris </title>
    </head>

    <body>
        This page is using English Language
    </body>

</html>

Atribut xml: lang

Atribut xml: lang adalah pengganti XHTML untuk atribut lang. Nilai atribut thexml: lang harus berupa kode negara ISO-639 seperti yang disebutkan di bagian sebelumnya.

Atribut Generik

Berikut adalah tabel dari beberapa atribut lain yang dapat digunakan dengan banyak tag HTML.

Attribute Options Fungsi
Align right, left, center Mengatur perataan teks
Valign top, middle, bottom Mengatur perataan tag secara vertical dalam elemen HTML
Bgcolor Numeric, hexadecimal, nilai RGB Mengatur warna latar belakang dalam sebuah elemen
Background URL Mengatur gambar alatar belakang dala sebuah elemen
Id Diatur pengguna Memberi nama pada sebuah elemen untuk digunakan dengan CSS
Class Diatur pengguna Mengklasifikasikan elemen untuk penggunaan CSS
Width Nilai numeric Menentukan lebar dari table, gambar atau sel pada table
Height Nilai numeric Menentukan tinggi dari table, gabar atau sel pada table
title Diatur pengguna Memberi “informasi” judul pada elemen

Kita akan melihat contoh terkait setelah melanjutkan untuk mempelajari tag HTML lainnya.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.