Atribut di HTML mendefinisikan properti-properti dari suatu elemen html, yaitu terdiri dari nama dan nilai. Fungsi dari atribut ini adalah untuk memodifikasi tag HTML yang dideklarasikan. Penulisan atribut berada di dalam tag pembuka setelah penulisan tag itu sendiri, Setiap tag bisa jadi mempunyai beberapa atribut. Dan satu atribut bisa jadi digunakan oleh beberapa tag. Formula penulisan atribut pada tag adalah sebagai berikut :
- Satu atribut dalam satu tag
<tag atribut="nilai">...</tag> - Beberapa atribut dalam satu tag
<tag atribut1="nilai" atribut2="nilai" atribut3="nilai">...</tag> - Satu atribut dalam beberapa tag
<tag1 atribut="nilai">...</tag1>
<tag2 atribut="nilai">...</tag1> - Beberapa atribut dalam beberapa tag
<tag1 atribut1="nilai" atribut2="nilai">...<tag1>
<tag2 atribut1="nilai" atribut2="nilai">...<tag2>
Dalam satu tag sebenarnya mempunyai beberapa atribut miliknya sendiri. Tetapi ada beberapa atribut yang sama yang bisa dipakai di tag lain. Begitu juga sebaliknya, ada beberapa atribut yang tidak bisa dipakai oleh atribut lain. Daftar atribut sederhana yang sering dipakai adalah sebagai berikut :
No | Tag | Atribut | Keterangan Atribut |
1 | <body> | bgcolor text background link alink vlink topmargin leftmargin marginheight marginwidth | Mengatur warna halaman Mengatur warna teks di dalam body Memberikan background gambar di halaman Mengatur warna link Mengatur warna link yang sedang aktif Mengatur warna link yang sudah dikunjungi Mengatur besar margin atas halaman Mengatur besar margin kiri halaman Mengatur berapa persen tinggi margin halaman Mnegatur berapa persen lebar margin halaman |
2 | <p> | align | Mengatur rata paragraf |
3 | <font> | color size align face | Mengatur warna font Mengatur ukuran font Mengatur rata font Mengatur jenis font |
4 | <a> | href name target | Membuat link ke URL tertentu Menetapkan nama anchor Menetapkan dimana halaman akan dibuka |
5 | <img> | src alt border height width | Menetapkan URL dari gambar Menetapkan alternatif teks pada gambar Mengatur ketebalan border disekeliling gambar Mengatur ukuran tinggi gambar Mengatur ukuran lebar gambar |
Note : Penulisan atribut harus sesuai dengan pasangan tag nya masing-masing.
Saya akan memberikan beberapa contoh penggunaan atribut-atribut di atas. Saya menggunakan aplikasi Adobe Dream Weaver CS6 untuk memudahkan dalam belajar. Silahkan sobat download dan instal terlebih dahulu jika belum punya. Atau jika sobat ingin menggunakan Notepad atau Notepad+ juga tidak masalah.
Misal, kita ingin membuat sebuah halaman dengan warna backgroundnya biru muda dan teks di dalamnya berwarna merah. Bagaimana menulis scriptnya ?
<html>
<head>
<title>Latihan1</title>
</head>
<body bgcolor="#0099FF" text="#FF0000">
Belajat HTML sangat menyenangkan
</body>
</html>
Keterangan :
Nilai dari atribut bgcolor dan text adalah nilai hexadecimal dari warna. Silahkan sobat mencari nilai hexadecimal dari warna yang diinginkan. Silahkan sobat bisa cek nilai hexadecimal dari berbagai warna di SINI. Sebenarnya ada cara lain dalam memasukkan nilai warna dalam atribut color, yaitu dengan menulis bahasa inggris dari warna tersebut. Misalnya red, blue, green, yellow, black, white, purple, dan lain-lain.
Hasil dari contoh di atas adalah sebagai berikut :
Contoh selanjutnya, kita ingin membuat sebuah halaman dengan background putih (default). Besar margin atas adalah 20px dan besar margin kiri adalah 20px. Kemudian kita akan membuat sebuah link ke suatu URL dengan warna link yang aktif adalah biru dan warna link yang sudah dikunjungi adalah ungu. Kemudian format font dari teks yang ditulis adalah jenis verdana, warna hitam (default), ukuran h2, dan rata kiri (default). Dibawah teks, kita akan menyisipkan sebuah gambar dengan boder 1, tinggi 400 dan lebar 300.
Bagaimana cara membuat script dengan kondisi di atas ?
<html>
<head>
<title>Latihan2</title>
</head>
<body topmargin="20px" leftmargin="20px" alink="blue" vlink= "purple">
<h2><font face="verdana">
Salah satu sosial media terpopuler adalah <a href= "www.facebook.com">Facebook</a><br>
Selain facebook, ada juga <a href="www.twitter.com">Twitter</a>
</font></h2>
<p>
<img src="facebook.jpg" border="1" height="150" width="200">
</p>
</body>
</html>
Keterangan :
Untuk URL gambar, sobat bisa mengisi langsung nama dan ekstensinya dengan syarat gambar tersebut harus berada di dalam satu directory/folder dimana file html yang sobat buat. Jika gambar berada di luar folder, silahkan sobat membuat URLnya dengan cara misalnya "Photos/SosMed/facebook.jpg".
Hasil dari contoh di atas adalah sebagai berikut :
Note :
Pada link Twitter masih berwarna biru karena script tersebut belum di jalankan di web browser dan belum dikunjungi. Jadi link tersebut masih kategori link aktif, setelah dikunjungi maka link tersebut akan berubah menjadi warna ungu.
Demikian materi tentang Kumpulan Atirbut HTML di Pemrograman Web Dasar. Sobat bisa latihan sendiri dengan atribut-atribut lain yang belum saya gunakan pada contoh di atas. Dan coba untuk memberikan nilai lain dalam atribut tersebutl. Silahkan sobat menuliskan komentar di bawah jika ada materi yang kurang dipahami. Terimakasih :)
bagus buat refernsi saya nih, kebetulan mau fokus belajar HTML
ReplyDeletemakasih gan udah share :)
Wah semangat ya gan belajarnya, saya akan berusaha share materi lebih lanjut lagi gan. Terimakasih atas kunjungannya
ReplyDelete