TUTORIAL HTML5 - BAB 2 ATTRIBUTES

Belajar pemrograman
Tutorial dari w3schools.com
Bahasa pemrograman HTML5

BAB 2 – ATTRIBUTES

Attributes HTML

Setiap elemen html dapat memiliki atribut

Atribut berguna untuk memberikan informasi tambahan mengenai elemen html tersebut

Atribut selalu berada di awal tag

Atribut biasanya mempunyai nama/nilai, atau seperti nama=”nilai”

Atribut href

Untuk link html menggunakan tag <a>, ditambah atribut href untuk alamat linknya

Contoh


<!DOCTYPE html>

<html>

<body>

<h2>atribut href</h2>

<p> Untuk link html menggunakan tag a, ditambah atribut href untuk alamat linknya</p>

<a href=http://hariancooding.blogspot.com>ini linknya</a>

</body>

</html>

Atribut src

Untuk gambar pada html menggunakan tag <img>, dan untuk sumber gambar-nya yakni nama dari file tersebut menggunakan atribut src.

Contoh:


<!DOCTYPE html>

<html>

<body>

<h2>atribut src</h2>

<p> Untuk gambar pada html menggunakan tag img, dan untuk sumber gambar-nya yakni nama dari file tersebut menggunakan atribut src.</p>

<img src=”nama gambar.jpg” width=”500” height=”600”>

</body>

</html>

Atribut width dan height

Setiap menyisipkan gambar di html harus di set ukuran width/lebar dan height/tingginya, karena kalau tidak maka hasilnya gambar akan di keluarkan dalam ukuran aslinya.


<!DOCTYPE html>

<html>

<body>

<h2>atribut width dan height</h2>

<p> Setiap menyisipkan gambar di html harus di set ukuran width/lebar dan height/tingginya, karena kalau tidak maka hasilnya gambar akan di keluarkan dalam ukuran aslinya.</p>

<img src=”nama gambar.jpg” width=”500” height=”600”>

</body>

</html>

Dalam hal ini ukuran yang digunakan adalah pixel, jadi jika width=”500” itu sama artinya dengan lebarnya 500 pixel.

Atribut alt

Atribut alt dikhususkan untuk menjadi teks alternatif bila gambar kita gagal dimuat. Nilai dari atribut ini terbaca di screen pembaca.


<!DOCTYPE html>

<html>

<body>

<h2>atribut alt</h2>

<p> atribut alt harus sesuai dengan isi dari gambar tersebut, sehingga user yang tidak bisa melihat gambar dapat memahami maksud dari gambar itu melalui teks alternatif yang kita set. Lihat apa yang akan terjadi jika kita salah dalam menulisakan nama dari gambar tersebut</p>

<img src=”nama gambartypo.jpg” alt=”gambar hamster” width=”500” height=”600”>

</body>

</html>

Atribut style

Atribut style digunakan untuk menghias elemen seperti color, font, size, dan lainnya.


<!DOCTYPE html>

<html>

<body>

<h2>atribut style</h2>

<p> Atribut style digunakan untuk menghias elemen seperti color.</p>

<p style=”color:red”>seperti ini contohnya.</p>

</body>

</html>

Atribut lang

Untuk mengatur bahasa dalam skrip html, maka mengggunakan atribut lang dalam tag <html>, mendelarasian sangat penting untuk kenyamanan akses (dalam screen pembaca) dan mesin pencarian.


<!DOCTYPE html>

<html lang=”en-US”>

<body>

..........

</body>

</html>

Untuk suku kata pertama mendefinisikan bahasanya(en), dan jika ada beberapa dialek dapat menggunakan suku kedua (US).

Atribut title

Disini, atribut title ditambahkan pada tag <p>. Dan nilai nya akan di tampilkan sebagai tooltip ketika mouse kalian ketika berada di dalam paragaraf.


<!DOCTYPE html>

<html>

<body>

<h2 title=”ini judul”>atribut title</h2>

<p title=”ini pargraf”>jika mouse kalian berada di dalam paragraf maka title akan muncul sebagai tooltip</p>

</body>

</html>

HarianCooding