HTML 3 Mengenal Elemen dan Atribut

Assalamu'alaikum Warahmatullaahi Wabarakaatuh

Artikel ini merupakan seri ketiga dari Seri Belajar HTML. Untuk membaca artikel sebelumnya silahkan kunjungi Belajar HTML Part 2 - Dasar Heading, Paragraf, Link, dan Gambar.
Dalam HTML, kita harus mengenal dua hal yang disebut elemen dan atribut. Apa itu elemen dan atribut?

A. ELEMEN
  1. Sebuah dokumen HTML dibangun dari gabungan elemen-elemen.
  2. Sebuah elemen terdiri dari tag pembuka, konten, dan tag penutup
  3. Untuk lebih mudah memahaminya, simak gambar berikut :

    Elemen
    Sumber : www.w3schools.com
  4. Satu bagian HTML yang diawali oleh tag pembuka dan tag penutup itulah yang disebut dengan elemen.
Elemen Kosong/Empty Elements
  1. Selain elemen yang terdiri dari tag pembuka, konten, dan penutup, ada pula yang disebut dengan elemen kosong
  2. Elemen kosong adalah elemen yang tidak memiliki konten.
  3. Sebagai contoh adalah elemen <br> untuk membuat baris baru, <img> untuk menyisipkan gambar, dll.
  4. Sebuah Elemen kosong bisa diakhiri pada awal tag. contoh untuk mengakhiri tag <br>, kita tidak perlu menulis <br></br>, tapi cukup dengan <br />
B. ATRIBUT
  • Sebuah elemen bisa memiliki atribut.
  • Atribut menyatakan informasi dari sebuah elemen.
  • Deklarasi atribut disimpan pada tag pembuka.
  • Atribut terdiri dari nama atribut(name) dan nilai atribut(value)
Berikut struktur penyisipan atribut dalam sebuah elemen :

<namatag namaatribut(name)="nilaiatribut(value)">konten</namatag>

Contoh Penggunaan Atribut :
  • Atribut lang pada elemen html : <html lang="id-ID"> menyatakan bahasa yang digunakan pada konten-konten kita. hal ini bermanfaat dalam penerjemahan konten oleh browser serta dalam Optimalisasi Search Engine.
  • Atribut title pada elemen paragraf : <p title="contoh atribut">Paragraf</p> tag title ini bermanfaat untuk menampilkan informasi sebuah elemen ketika elemen tersebut disorot oleh mouse.
  • Atribut pengaturan ukuran, Contoh : <img src="batman.jpg" width="200px" height="100px" /> berarti gambar batman.jpg kita beri ukuran lebar 200 pixel dan tinggi 100 pixel
  • Atribut alt dalam elemen img. Contoh : <img src="batman.jpg" width="200px" height="100px" alt="batman" /> dengan atribut alt, jika sebuah gambar tidak bisa dimunculkan karena suatu kesalahan, maka tampilan akan diganti oleh nilai atribut(value) yang dideklarasikan dalam atribut alt. Dalam contoh ini, jika browser tidak bisa memunculkan gambar batman.jpg, maka sebagai gantinya, gambar akan diganti dengan tulisan batman.
Ada banyak atribut yang perlu kita ketahui. Berikut beberapa contoh atribut :
  • alt : Memilih teks alternatif dari sebuah gambar jika gagal ditampilkan
  • disabled : Menentukan apakah sebuah elemen diaktifkan atau dinon-aktifkan
  • href : Atribut yang menyatakan referensi alamat yang dituju oleh sebuah tautan
  • id : Menunjukkan id unik dari sebuah elemen
  • src : Menunjukkan sumber dari sebuah media, contoh : lokasi sebuah gambar, dll
Demikian Tutorial HTML untuk kali ini, semoga bermanfaat. Lebih jelasnya Anda bisa melihat tutorial versi video di bawah. Terima kasih dan Wassalamu'alaikum Warahmatullaahi Wabarakaatuh

Advertisement

0 komentar:

Post a Comment

Terima kasih atas kunjungannya, semoga artikel ini bermanfaat. Silahkan berikan komentar Anda.

 
Top