Belajar HTML Part 5 – Atribut di HTML [Lengkap]

CoretanKode – Pada kesempatan kali ini admin akan melanjutkan kembali sesi Belajar HTML kita dan sekarang kita memasuki Part 5 dimana kita akan membahas tentang Atribut di HTML. Jadi secara singkat atribut adalah informasi tambahan yang diberikan ke sebuah elemen.

Artikel Menarik Lainnya :

Semuah elemen HTML bisa diberikan atribut tambahan, dimana setiap atribut tersebut merupakan sebuah informasi tambahan yang diberikan ke sebuah elemen. Sebuah atribut hanya boleh dituliskan pada tag pembuka agar dapat berjalan.

Atribut pasti mempunyai nama dan dilanjutkan nilainya yah contohnya saja atribut “alt=’CoretanKode’” nah jadi pemberian atribut juga harus jelas nama atribut dan nilai-nya juga harus sesuai.

Isi tampilkan

Mengenal Atribut SRC

Atribut src biasanya digunakan pada tag untuk melakukan embedding seperti menampilkan gambar, video atau audio. Atribut src merupakan atribut yang bertugas mengspesifikasikan lokasi file gambar,video atau audio yang ingin di embed.

Contoh implementasi dari atribut src dapat kalian lihat di bawah ini:

<img src=”coretankode_logo.png”>

Untuk value atau nilai dari atribut src dapat berupa link langsung ke sebuah file atau menggunakan relative url bila halaman HTML berada satu folder atau dalam satu hosting yang sama dengan file yang ingin di embed.

Contoh URL file link langsung : https://coretankode.com/logo.png

Contoh relative URL file : /logo.png

READ : 10 Aplikasi Jualan Pulsa Terbaik, Termurah dan Terpercaya

Mengenal Atribut HREF

Atribut HREF merupakan sebuah atribut yang digunakan pada tag <a> dimana HREF ini digunakan untuk meng-spesifikasikan URL tujuan dari sebuah link HTML yang dibuat.

Contoh implementasi-nya dapat kalian lihat dibawah ini:

<a href=”https://coretankode.com”>CoretanKode Blog</a>

Nilai dari atribut href adalah URL yang ingin menjadi tujuan dari sebuah link yang dibuat.

Mengenal Atribut Width dan Height

Selanjutnya materi belajar HTML ada atribut Width dan Height. Nah sesuai dengan nama-nya yakni Width dan Height kalian pasti sudah tahu atribut ini untuk apa bukan ?

Atribut Width dan Height digunakan untuk menentukan ukuran Lebar dan juga Tinggi dari sebuah objek yang ada pada sebuah dokumen HTML dan biasanya digunakan pada tag <img> untuk mengatur lebar dan tinggi dari gambar yang di embed.

Contoh Implementasi atribut-nya seperti ini :

<img src=”coretankode_com.jpg” width=”500″ height=”600″>

Nah dari contoh syntax diatas berarti gambar bernama coretankode_com.jpg akan dimuat kehalaman web dengan ukuran lebar sebesar 500pixels dan tinggi 600pixels.

Mengenal Atribut ALT

Atribut alt digunakan untuk memberikan informasi terhadap sebuah objek yang gagal dimuat. Contohnya bila kita terapkan atribut alt iini kedalam tag <img> maka apabila koneksi pengguna sedang low dan gagal melakukan loading gambar tersebut maka teks yang ada pada atribut alt yang akan muncul.

Contoh implentasi-nya seperti berikut ini :

<img src=”coretankodelogo.png” alt=”logo coretankode”>

Nah dari sintaks diatas bila kalian jalankan apabila jaringan kalian lambat atau gambar tersebut tidak ada maka yang akan muncul hanyalah teks alternatif yang kita tuliskan menggunakan atribut alt tersebut.

Mengenal Atribut Style

Masih belajar HTML nih, tapi sekarang kita akan berkenalan dengan atribut style dimana yah nanti bila kita sudah membahas CSS maka kita akan lebih intens menggunakan atribut yang satu ini.

READ : 7 Aplikasi Desain Mockup Website Terbaik

Atribut Style digunakan untuk memberikan gaya pada elemen yang kita buat di HTML seperti mengubah warna teks, mengubah warna background, font, ukuran dan masih banyak lagi lainnya.

Contoh implementasi sederhana-nya dapat kalian lihat dibawah ini:

<p style=”color:red;”>CoretanKode.com – We Code We Good </p>

Mengenal Atribut LANG

Kita semua tahu kalau search engine adalah sebuah mesin kan, maka dari itu kita membutuhkan atribut lang pada dokumen HTML yang kita buat agar mesin pencari seperti google dapat mengetahui Bahasa dari negara apa yang web kalian gunakan.

Atribut ini dipasang pada pada tag <html> agar terdeklarasikan dengan baik dan dapat dikenali mesin pencarian. Contoh implementasi dari atribut lang dapat kalian lihat dibawah ini :

<html lang=”id”>

Gunakan kode negara yah, contoh diatas admin menggunakan id untuk negara Indonesia. Kalian yang menggunakan Bahasa English dapat memberikan informasi lebih detail contohnya seperti dibawah ini :

<html lang=”en-US”>

Nah sintaks diatas mengartikan bahwa halaman html yang kalian buat menggunakan Bahasa English versi United States tuh. Admin sarankan kalian bisa spesifik dan memanfaatkan atribut lang ini dengan baik yah.

Mengenal Atribut Title

Atribut Title ini sangatlah penting apabila kalian sudah mulai membuat website yang bersifat dinamis maka akan terasa banget pentingnya sebuah atribut title ini. Tapi pada HTML kita biasanya akan menggunakan atribut ini sebagai Tooltip saja.

Tooltip maksudnya pada saat pointer mouse berada pada objek HTML yang memiliki atribut Title maka value dari atribut title akan muncul.

Contoh implementasi Atribut Title dapat kalian lihat dibawah ini :

<p title=”Coretan Tooltip”>Arahkan Mouse ke-sini.</p>

Nah coba deh kalian copy paste sintaks diatas dan jalankan 😀 .

READ : 6 Tips Membeli Domain dan Hosting Terbaik untuk Web

Rangkuman Materi Kali Ini

Di postingan belajar html kali ini kita sudah mengenal beberapa atribut yang terdapat pada Bahasa HTML ini, dan dapat kita rangkum sedikit seperti dibawah ini:

Atribut src digunakan pada tag yang bertujuan untuk melakukan embedding
Atribut href digunakan pada tag <a>
Atribut Width dan Height digunakan untuk mengatur ukuran objek
Atribut ALT digunakan untuk menyiapkan informasi alternatif pada sebuah objek
Atribut Style digunakan untuk memberikan Styling pada objek HTML yang dibangun
Atribut Lang digunakan untuk memberikan informasi Bahasa ke Search Engine
Atribut Title digunakan untuk memberikan pengenal atau tooltip pada sebuah objek
Atribut pada HTML sebenarnya ada masih banyak lagi tetapi beberapa yang admin bahas disini adalah yang penting-penting

Nah jadi itulah yang dapat admin sampaikan pada kesempatan kali ini semoga kalian bisa belajar HTML dan menjadi pro nantinya yah, Yok bisa sudah paham Part 5 ini mari kita lanjut ke Part 6 silahkan klik dibawah ini :

Bila belum membaca part sebelumnya silahkan klik dibawah ini:

Jadi itu saja yang dapat admin sampaikan pada part kali ini, sampai jumpa dipart berikutnya yah. Sekian dan Assalamualaikum Warahmatullahi Wabarakatu.

Originally posted 2021-11-11 17:21:41.