Skip to content

HTMLAttributes.md

Latest commit

 

History

History
86 lines (66 loc) · 2.13 KB

HTMLAttributes.md

File metadata and controls

86 lines (66 loc) · 2.13 KB
Raw

HTML Attribute

Apa Itu HtML Attribute ?

HTML Attribute adalah suatu atribut untuk melengkapi informasi dari suatu elemen HTML

  • Semua elemen HTML dapat memiliki Attribute.
  • Attribute HtML memberikan informasi tambahan terhadap elemen HTML.
  • Attribute selalu berada diawal tag, seperti: <a href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fgithub.com%2Fweakhuman%2FHTML-CSS%2Fblob%2Fmain%2FHTML%2FHTMLAttributes%2Fgoogle.com&mode=full">Google</a>
  • Attribute selalu berbapasangan dengan value/nilai, seperti: href="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fgithub.com%2Fweakhuman%2FHTML-CSS%2Fblob%2Fmain%2FHTML%2FHTMLAttributes%2Fgoogle.com&mode=full"
  • Value/Nilai dari attribute harus selalu dibungkus menggunakan double quote/petik dua (").

Contoh Penerapan Attribute Pada HTML

href Attribute

href berfungsi untuk menentukan URL halaman yang ingin dituju.

<html>
  <a href="Github.com">Github Website</a>
</html>

src Attribute

src berfungsi untuk menentukan lokasi gambar file yang ingin ditampilkan.

<html>
  <img src="attribute.png" >
</html>

Ada dua cara untuk mendefinisikan URL di attribute src

  1. Absolute URL - Memasukan gambar dari hosting eksternal/tidak dalam local, seperti:

<img src="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F76999048%3Fs%3D200%26amp%3Bv%3D4&mode=full" > 2. Relative URL

<img src="/api/v1/web-embed/proxy?proxyUrl=https%3A%2F%2Fgithub.com%2Fsrc%2Fimages%2Favatar.png&mode=full" >

width & height Attribute

width dan height berfungsi untuk menentukan lebar dan tinggi gambar dalam satuan piksel (px).

<html>
  <img src="/src/images/avatar.png" width="32" height="32">
</html>

alt Attribute

alt berfungsi untuk menggantikan gambar dengan tulisan, jika gambar tidak bisa ditampilkan dengan alasan tertentu.

<html>
  <img src="/src/images/avatar.png" alt="avatar">
</html>

style Attribute

style berfungsi untuk menambahkan gaya/style pada elemen seperti color, font, size, dan lainnya.

<html>
  <h1 style="color:green;">Hello World</h1>
</html>

lang Attribute

lang berfungsi untuk mendeklarasikan bahasa yang digunakan dalam website, untuk membantu mesin pencari / browser.

<!DOCTYPE html>
<html lang="en">
<body>
  Hello World
</body>
</html>

title Attribute

title berfungsi sebagai penambah informasi dalam suatu elemen, yang jika dihover akan memunculkan tooltip

<html>
  <p title="Komunitas untuk mengelola dan menulis kode">Bellshade</p>
</html>