sovyan.comsovyan.com
html Komputer Pemrograman Web
Beranda / Pemrograman / Web / Atribut HTML | Tutorial HTML 5

Atribut HTML | Tutorial HTML 5

Oleh sopyan • November 2, 2023 • 4 Dilihat • 8 Menit membaca •
Di artikel kali ini kami akan membagikan tutorial mengenai atribut di HTML,
Apa itu atribut ? Contoh program atribut !? dan lain sebagainya. Berikut
adalah tutorialnya.

Atribut HTML

Apa itu atribut ? atribut HTML adalah sintaks kode yang digunakan untuk
menyediakan informasi tambahan dari sebuah elemen HTML.

Apa itu Atribut HTML ?

  • Semua elemen HTML dapat memiliki atribut.
  • Atribut digunakan untuk menyediakan informasi tambahan dari sebuah elemen.
  • Atribut selalu di tempatkan pada tag awal.
  • Atribut selalu digunakan berpasangan nama dan nilai, seperti : nama =
    “nilai”.

Atribut href

Atribut href digunakan untuk menunjuk URL halaman web yang akan dituju,
atribut ini digunakan bersama tag
<a>
:

Contoh Program 1 : Penggunaan atribut
href

<!DOCTYPE html>
<html>
  <body>
     <h2>Atribut
href</h2>
                
     <p>Tag a
digunakan untuk membuat link html, atribut href digunakan untuk menunjuk
alamat situs yang akan dituju</p>
                
     <a href=“https://www.filesop.com”>Kunjungi filesop.com</a>
  </body>
</html>

Hasil Program 1

Penjelasan Program 1

  • di baris 1,
    <!DOCTYPE html>
    artinya kita membuat dokumen HTML5.
  • Di baris 2 hingga baris 12,
    <html>…</html>
    artinya akar dari dokumen html.
  • Baris 4 hingga baris 10.
    <body>…</body>
    adalah bagian tubuh dokumen HTML yang akan ditampilkan di web browser.
  • Di baris 5, tag
    <h2>
    kita membuat sebuah judul.
  • Di baris 7, tag
    <p>
    kita membuat sebuah paragraf.
  • Di baris 9, tag
    <a>
    digunakan untuk membuat link dan atribut
    href
    digunakan untuk menunjuk alamat web yang akan dituju.

Atribut src

Atribut
src
digunakan untuk menunjuk tempat gambar disimpan, atribut ini digunakan pada
tag
<img>
yang digunakan untuk menampilkan gambar.
Ada 2 cara untuk menggunakan atribut
src
dalam menentukan URL, yaitu :
  1. Relative URL – Link ke gambar yang di hosting ke dalam situs web
    sendiri. dalam penulisan URL ini kita tidak perlu menyertakan nama domain.
    URL tersebut akan relatif pada halaman saat ini jika tidak menggunakan
    garis miring. Contoh :
    src=“filesop.jpg”, jika diawali dengan garis miring, maka URL tersebut akan berhubungan
    dengan domain. Contoh :
    src=“/gambar/filesop.jpg”.
  2. Absolute URL – Link ke gambar eksternal yang di hosting di situs
    web lain. Contoh :
    src=“https://www.filesop.com/gambar/filesop.jpg”.
Catatan : Gambar eksternal tidak bisa kita kontrol sepenuhnya karena
sewaktu-waktu bisa saja diubah atau dihapus. Kita mungkin saja bisa melanggar
undang-undang hak cipta karena gambar eksternal bisa saja dilindungi hak cipta
dan kita harus mendapatkan izin untuk menggunakan gambar sumber eksternal
tersebut.
Tips : Relative URL merupakan pilihan terbaik karena meskipun kita
mengubah domain, gambarnya tidak akan rusak.

Atribut width dan height

Atribut
width
dan
height
digunakan untuk menentukan lebar dan tinggi dari sebuah gambar (dalam ukuran
piksel), atribut ini digunakan bersama tag
<img>.

Contoh Program 2 : Atribut width dan height

<!DOCTYPE html>
<html>
        <body>
               
<h2>Atribut width dan height</h2>
                
                <p>Atribut width dan height adalah atribut dari tag img, digunakan untuk
mendefinisikan lebar dan tinggi dari sebuah gambar :
</p>
                
                <img
src=“filesop.jpg” width=“200” height=“300”>
        </body>
</html>

Hasil Program 2

Penjelasan Program 2

  • Di baris 9 kita menggunakan tag
    <img>
    untuk menampilkan gambar, atribut
    src
    untuk menunjuk tempat gambar disimpan, atribut
    width
    dan
    height
    digunakan untuk mengatur ukuran gambar, disini kita mengatur lebar 200
    piksel dan tinggi 300 piksel.

Atribut alt

Di tag
<img>
terdapat juga atribut
alt, atribut
alt
digunakan untuk membuat teks alternatif pada sebuah gambar, teks ini akan
tampil jika gambar tidak dapat dimuat, baik itu karena koneksi yang lambat,
atau kesalahan pada sumber gambar atau pengguna sengaja tidak menampilkan
gambar.

Contoh Program 3 : Atribut alt

<!DOCTYPE html>
<html>
        <body>
                <h2>Atribut alt</h2>
                <p>Atribut alt akan tampil ketika gambar tidak termuat dan user dapat tahu
gambar apa yang sedang mereka lihat meskipun gambarnya tidak ada</p>
                
                <img
src=“filesop.jpg” alt=“gambar orang” width=“200” height=“300”>
                
        </body>
</html>

Hasil Program 3

Penjelasan Program 3

  • Di baris 7 kita menggunakan tag
    <img>
    untuk menampilkan gambar, atribut
    src
    untuk menunjuk tempat gambar disimpan, atribut
    alt
    digunakan untuk membuat teks alternatif
    “gambar orang”
    saat gambar gagal termuat, atribut
    width
    dan
    height
    digunakan untuk menentukan ukuran lebar 200 piksel dan tinggi 300 piksel.

Atribut style

Atribut
style
digunakan untuk menambahkan gaya ke suatu elemen, seperti ukuran, font, warna
dan lain sebagainya.

Contoh Program 4: Atribut style

<!DOCTYPE html>
<html>
        <body>
               
<h2>Atribut style</h2>
                <p>Atribut style digunakan untuk menambahkan gaya pada sebuah elemen,
seperti misalnya warna</p>
                
                <p
style=“color:green”>Teks ini berwarna hijau</p>
        </body>
</html>

Hasil Program 4

Penjelasan Program 4

  • Pada baris 8, tag
    <p>
    digunakan untuk membuat paragraf dan atribut
    style
    digunakan untuk membuat gaya pada elemen
    <p>, yang mana disini kita menggunakannya untuk membuat tulisan berwarna
    hijau.

Atribut lang

Atribut
lang
digunakan untuk mendeklarasikan bahasa yang digunakan oleh halaman web kita,
hal ini bertujuan untuk membantu browser dan mesin pencari mengenali bahasa
apa yang digunakan pada halaman web kita. Kita harus menggunakan atribut
lang
pada tag
<html>.
Pada contoh berikut kita menetapkan bahasa Indonesia sebagai bahasa pada
halaman web.

Contoh Program 5 : Atribut lang

<!DOCTYPE html>
<html lang=“in”>
<body>
   <p>Contoh program
atribut lang</p>
</body>
</html>
Baca juga: Panduan Lengkap HTML Form Attributes yang Wajib Lo Tahu! (Tutorial HTML Part 54)

Kita juga bisa menambahkan kode negara pada atribut
lang, 2 karakter pertama adalah bahasa halaman web, dan 2 karakter terakhir
adalah kode negara.
Contoh dibawah kita menetapkan Bahasa Indonesia dan Negara Indonesia untuk
halaman web.

Contoh Program 6 : Menentukan bahasa dan negara di atribut lang

<!DOCTYPE html>
<html lang=“in-ID“>
<body>
   <p>Contoh
program</p>
</body>
</html>

Atribut title

Untuk menambahkan informasi tambahan dari sebuah elemen kita dapat menggunakan
atribut
title.
Ketika kita mengarahkan mouse ke elemen maka nilai dari atribut
title
akan tampil sebagai tooltip.

Contoh Program 7 : Atribut title

<!DOCTYPE html>
<html>
        <body>
                <h2
title=“Ini header”>Atribut title</h2>
                
                <p
title=“Ini tooltip”>Untuk menampilkan nilai atribut
title sebagai tooltip, arahkan mouse ke paragraf ini</p>
        </body>
</html>

Hasil Program 7

Penjelasan Program 7

  • Pada baris 5, tag
    <h2>
    untuk membuat header kedua, dan atribut
    title
    kita gunakan untuk menampilkan tulisan
    “Ini header”
    ketika mouse berasa di elemen ini.
  • Pada baris 7, kita membuat paragraf dengan tag
    <p>, ketika mouse berada di atas elemen ini akan tampil tulisan
    “Ini tooltip”
    karena kita menggunakan atribut
    title.

Saran : Selalu Gunakan Huruf Kecil Untuk Atribut

Untuk penulisan atribut tidak ada ketentuan khusus menggunakan huruf kapital
atau huruf kecil. Contohnya
title
atau
TITLE, hal itu tidak jadi masalah dan tidak akan menimbulkan error.
Namun lebih direkomendasikan menggunakan huruf kecil dan untuk dokumen yang
lebih ketat seperti XHTML diharuskan menggunakan huruf kecil.

Saran : Nilai Atribut Disarankan Menggunakan Tanda Kutip

Sebenarnya tanda kutip tidak menjadi sebuah keharusan dalam standar HTML namun
dengan menggunakan tanda kutip kode jadi lebih mudah terbaca dan untuk dokumen
jenis XHTML diharuskan menggunakan tanda kutip.

Contoh Penulisan Atribut Yang Bagus

<a href=“https://www.filesop.com” >Kunjungi situs kami !</a>

Contoh Penulisan Atribut Yang Buruk

<a href=https://www.filesop.com>Kunjungi situs kami !</a>

Jika nilai atribut mengandung spasi, kita harus memberikan tanda kutip agar
hasilnya sesuai dengan keinginan kita.

Contoh Program 8 : Nilai Atribut Tanpa Tanda Kutip

<!DOCTYPE html>
<html>
        <body>
                <h2>Atribut title</h2>
                
                <p title
=Tentang filesop>Jika nilai atribut mangandung spasi, kita harus menggunakan tanda
kutip</p>
                
               
<p><b>Jika kita mengarahkan mouse ke atas paragraf di atas maka hanya kata
pertama saja yang akan muncul</b></p>
        </body>
</html>
Baca juga: Panduan Lengkap HTML Forms: Bikin Formulir Keren di Website! (Tutorial HTML Part 53)

Hasil Program 8

Penjelasan Program 8

  • Di baris 7 tag
    <p>
    digunakan untuk membuat paragraf, karena di atribut
    title
    kita membuat nilainya tanpa tanda petik maka huruf pertama saja yang akan
    muncul yaitu
    “Tentang”.

Tanda Kutip Tunggal Atau Ganda ?

Dalam HTML untuk nilai atribut, penggunaan tanda kutip ganda adalah hal yang
paling umum digunakan, namun dalam beberapa situasi ketika tanda kutip ganda
diperlukan untuk nilai atribut, kita bisa menggunakan tanda kutip tunggal.

Contoh Program 9 : Tanda Kutip Pada Nilai Atribut

<!DOCTYPE html>
<html>
        <body>
               
<h2>Tanda Kutip Tunggal dan Ganda</h2>
                
                <p
title=‘John “Pelor” Smith’>John dengan kutip ganda</p>
                <p
title=“John ‘Pelor’ Smith”>John dengan kutip tunggal</p>
        </body>
</html>

Hasil Program 9

Penjelasan Program 9

  • Di baris 6 kita membuat paragraf dengan tag
    <p>
    disini kita membuat akan tampil tulisan
    ‘John “Pelor” Smith’
    ketika mouse berada di elemen ini.
  • Di baris 7 kita membuat paragraf dengan tag
    <p>, dan jika mouse berada di elemen ini akan muncul tooltip
    “John ‘Pelor’ Smith”
    karena kita menggunakan atribut
    title.

Rangkuman Artikel Atribut HTML

  • Atribut dapat dimiliki semua elemen HTML.
  • Atribut
    href
    pada tag
    <a>
    digunakan untuk menunjuk alamat web yang akan dituju.
  • Atribut
    src
    pada tag
    <img>
    merupakan lokasi penyimpanan gambar yang akan ditampilkan.
  • Atribut
    width
    dan
    height
    pada tag
    <img>
    digunakan untuk menentukan ukuran lebar dan tinggi dari gambar.
  • Atribut
    alt
    pada tag
    <img>
    digunakan untuk membuat teks alternatif pada gambar.
  • Atribut
    style
    digunakan untuk menambahkan gaya pada elemen, seperti ukuran, jenis font,
    warna dan lain sebagainya.
  • Atribut
    lang
    pada tag
    <html>
    digunakan untuk menyatakan bahasa pada halaman web.
  • Atribut
    title
    digunakan untuk menambahkan informasi tambahan tentang suatu elemen.
Itulah tutorial mengenai atribut HTML, semoga artikel ini dapat membuat
kalian lebih memahami tentang atribut yang ada di HTML, sampai jumpa di
tutorial selanjutnya. Happy a nice day…

sopyan

Seorang blogger yang senang berbagi berbagai informasi dan tutorial.

Artikel Terkait

Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Populer

01

Tips Meningkatkan Kecepatan Website E-commerce untuk Hasil Penjualan yang Lebih Optimal

Oktober 8, 2024 • 58 Dilihat
02

Tutorial HTML part 1: Apa Itu HTML dan Kenapa Penting?

Januari 7, 2025 • 42 Dilihat
03

Strategi Ampuh untuk Launching Produk Baru: Gabungan Online dan Offline

Desember 28, 2024 • 41 Dilihat
04

HTML: Awal Perjalanan Lo di Dunia Coding yang Kece Abis! (Tutorial HTML part 1)

Januari 22, 2025 • 40 Dilihat
05

Cara Monetisasi Blog dengan Google AdSense: Panduan Lengkap untuk Pemula

Januari 10, 2025 • 38 Dilihat