Tutorial HTML : Memahami Link dan Anchor Tag HTML

Link dan Anchor Tag HTML

Anchor Tag HTML mendefinisikan hyperlink yang menautkan ke halaman lain di satu halaman. Dapat membuat hyperlink ke halaman web dan file apa pun, lokasi atau URL lainnya. “Href” menampilkan atribut paling penting dari tag HTML yang menautkan ke halaman yang dituju atau pun URL.

Atribut href dalam Anchor Tag HTML

Atribut href digunakan untuk menentukan alamat file yang akan ditambahkan. Dengan kata lain, halaman tujuan yang dituju.
Sintaks Anchor Tag HTML di bawah ini.

Read More
<a href = "……….."> Link Text </a>

Contoh

<a href="kedua.html">Klik untuk Halaman Kedua</a>

Kode

<html>
<body>
<a href="kedua.html">Klik untuk Halaman Kedua</a>
</body>
</html>

Output

Menentukan lokasi Tautan menggunakan atribut target

Jika kita ingin membuka link apapun di halaman lain, kita bisa menggunakan tag <a> . Halaman berikutnya akan terbuka dengan bantuan tautan ini.

Contoh

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

Klik <a href="https://sukamenak.com/" target="_blank" rel="noopener"> link-ini </a>untuk pergi ke beranda sukamenak

</body>
</html>

Output

Tampilan Anchor Tag HTML

Akan muncul dengan cara berikut:

  • Tautan yang belum dikunjungi ditampilkan dengan garis bawah dan biru.
  • Tautan yang dikunjungi ditampilkan digarisbawahi dan berwarna ungu.
  • Tautan aktif digarisbawahi dan berwarna merah.

HTML Image

HTML img tag digunakan untuk menampilkan foto di halaman web. Tag img HTML adalah tag kosong yang hanya berisi atribut. Tag penutup tidak termasuk dalam elemen gambar HTML.

Contoh

<!DOCTYPE>
<html>
<body>
<title>Halamanku</title>
<h2> Contoh HTML Image</h2>
<img src="Hai teman.png" alt="Hai teman"/>
</body>
</html>

Output

Atribut tag img HTML

Src dan alt adalah atribut utama dari tag img HTML. Semua atribut tag gambar HTML tercantum di bawah ini.

Src
Ini adalah atribut penting yang menjelaskan sumber atau arah gambar. Ini menginstruksikan pengguna bahwa di mana server akan mencari file. Lokasi gambar dapat berada di direktori yang sama atau di server yang berbeda.

Alt
Jika tidak dapat ditampilkan, ini menentukan teks opsional untuk gambar berfitur lengkap. Nilai dari atribut alt menggambarkan kata gambar. Atribut alt dianggap sebagai atribut SEO prospektif yang baik.

Width
Ini adalah atribut opsional yang digunakan untuk menentukan lebar gambar yang dapat ditampilkan. Saat ini, itu tidak disarankan. CSS harus diterapkan sebagai ganti atribut lebar.

Height
Tinggi bayangan adalah h3. Atribut height untuk HTML juga mendukung elemen iframs, images dan objects.

Penggunaan atribut tinggi dan lebar dengan tag img
Anda telah belajar cara menyisipkan gambar ke halaman web Anda. Kita dapat mengatur atribut tinggi dan lebar untuk mengubah spesifikasi (tinggi dan lebar) gambar.

Contoh

<!DOCTYPE html>
<html>
<head>
<title> tag Image </title>
</head>
<body>
<h2>contoh HTML image dengan tinggi dan lebar</h2>
<img src="https://static.sukamenak.com/htmlpages/images/hewan.jpg" height="180" width="300" alt="gambar hewan">
</body>
</html>

Output

Penggunaan alt dalam atribut

Atribut Alt dapat digunakan dengan tag. Jika gambar tidak dapat ditampilkan di browser, akan menampilkan teks alternatif. Contohnya atribut alt berikut:

Contoh

<!DOCTYPE html>
<html>
<head>
<title> tag Image </title>
</head>
<body>
<h2>contoh HTML image dengan tinggi dan lebar</h2>
<img src="hewan.png" height="180" width="300" alt="gambar hewan">
</body>
</html>

Output

Bagaimana cara mendapatkan gambar dari direktori/folder lain?

Untuk menyisipkan gambar di web Anda, Anda harus memiliki gambar di folder yang sama tempat Anda meletakkan file HTML. Tetapi jika gambar ada di direktori lain, Anda dapat mengakses gambar seperti ini:

Contoh

<img src="E:/images/hewan.png" height="180" width="300" alt="gambar hewan">

Related posts

Leave a Reply

Your email address will not be published.