Tutorial Dasar HTML: Tautan (Hyperlink) dan Gambar Pada HTML

Dalam tutorial ini, kita akan menjelaskan secara detail Tutorial Dasar HTML: Tautan (Hyperlink) dan Gambar Pada HTML dan bagaimana cara membuat tautan (hyperlink) antar halaman serta menyisipkan gambar pada halaman web menggunakan tag <a> dan <img> dalam HTML. Tautan dan gambar adalah elemen penting dalam pembangunan web, membantu pengguna berpindah antar halaman dan menambahkan elemen visual yang menarik. Sebelum ke praktek membuat tautan dan memasukkan gambar pada HTML, alangkah baiknya kita memahami terlebih dahulu apad itu tautan (hyperlink) dan gambar.

Membuat Tautan (Hyperlink)

Tautan atau hyperlink adalah elemen penting dalam pengembangan web yang memungkinkan pengguna berpindah dari satu halaman atau lokasi ke halaman atau lokasi lain. Dalam HTML, tautan dibuat menggunakan tag <a>, yang merupakan singkatan dari “anchor” atau “anker.” Mari kita jelaskan secara detail tentang tautan dalam HTML.

Struktur Dasar Tautan HTML

Tag <a> digunakan untuk membuat tautan dalam HTML. Tautan dapat mengarahkan pengguna ke halaman web lain, dokumen, gambar, atau sumber daya lainnya di internet. Berikut adalah struktur dasar dari tag <a>:

<a href="URL_tujuan">Teks Tautan</a>

1	<a href="URL_tujuan">Teks Tautan</a>

Keterangan:

href: merupakan Atribut yang menentukan URL tujuan tautan.
"URL_tujuan": merupakan Alamat URL lengkap atau relatif ke halaman atau sumber daya yang ingin ditautkan.
Teks Tautan: adalah Teks yang akan ditampilkan sebagai tautan di halaman web.

Jenis-Jenis Tautan

1. Tautan Eksternal

Tautan eksternal mengarahkan pengguna ke halaman atau sumber daya di luar halaman web Anda. Anda dapat menggunakan URL lengkap, seperti "https://www.tutupkurung.com"

<a href="https://www.tutupkurung.com">Kunjungi Blog Tutup Kurung</a>

1	<a href="https://www.tutupkurung.com">Kunjungi Blog Tutup Kurung</a>

2. Tautan Internal (Antar Halaman)

Tautan internal menghubungkan halaman-halaman di dalam situs web Anda. Pengguna akan dipindahkan ke halaman lain dalam situs Anda.

<a href="halaman2.html">Ke Halaman 2</a>

1	<a href="halaman2.html">Ke Halaman 2</a>

3. Tautan Email

Tautan email memungkinkan pengguna membuka aplikasi email mereka dengan alamat yang sudah ditentukan.

<a href="mailto:kruwell.edu@gmail.com">Kirim Email</a>

1	<a href="mailto:kruwell.edu@gmail.com">Kirim Email</a>

4. Tautan Telepon

Tautan telepon memungkinkan pengguna menghubungi nomor telepon secara langsung dari perangkat mobile.

<a href="tel:+1234567890">Hubungi Kami</a>

1	<a href="tel:+1234567890">Hubungi Kami</a>

Atribut Tambahan untuk Tautan

1. targetdigunakan untuk menentukan bagaimana halaman yang ditautkan akan dibuka.

_blank: dibuka di halaman baru/tab.
_self: dibuka dalam tab/halaman yang sama.
_parent: dibuka dalam bingkai parent (jika menggunakan iframe).
_top: dibuka dalam tab/halaman teratas.

2. title: digunakan untuk memberikan informasi tambahan ketika pengguna mengarahkan kursor ke tautan.

Contoh Laman web HTML dengan Tautan

Saya akan contohkan dengan membuat teks HTML yang saya simpan pada file latihan_html_003.html:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Tautan HTML</title>
</head>
<body>
    <h1>Tautan atau Hyperlink dalam HTML</h1>
    <p>Ini adalah <a href="https://www.tutupkurung.com" target="_blank">Tauran Eksternal</a>.</p>
    <p>Pindah ke <a href="latihan_html_002.html">Latihan 2</a> dalam web latihan ini.</p>
    <p>Kirimkan <a href="mailto:kruwell.edu@gmail.com">Kirim Email</a> kepada kami.</p>
    <p>Hubungi kami di <a href="tel:+1234567890">123-456-7890</a>.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Contoh Tautan HTML</title>

</head>

<body>

<h1>Tautan atau Hyperlink dalam HTML</h1>

<p>Ini adalah <a href="https://www.tutupkurung.com" target="_blank">Tauran Eksternal</a>.</p>

<p>Pindah ke <a href="latihan_html_002.html">Latihan 2</a> dalam web latihan ini.</p>

<p>Kirimkan <a href="mailto:kruwell.edu@gmail.com">Kirim Email</a> kepada kami.</p>

<p>Hubungi kami di <a href="tel:+1234567890">123-456-7890</a>.</p>

</body>

</html>

Jika kita jalankan di browser, akan menghasilkan halaan web seperti pada gambar berikut ini.

Menyisipkan Gambar Pada HTML

Menyisipkan gambar pada halaman web adalah cara yang efektif untuk menyajikan konten visual kepada pengguna. Tag <img> dalam HTML digunakan untuk menyisipkan gambar atau media visual ke dalam halaman web. Ini adalah elemen penting yang memungkinkan Anda menampilkan konten grafis yang memperkaya tampilan halaman. Mari kita jelaskan secara detail tentang tag <img> dalam HTML.

Struktur Dasar Tag `<img>` HTML

Tag <img> tidak memiliki elemen penutup dan hanya memiliki atribut. Berikut adalah struktur dasar dari tag <img>:

<img src="URL_gambar" alt="Deskripsi Gambar" width="lebar" height="tinggi">

1	<img src="URL_gambar" alt="Deskripsi Gambar" width="lebar" height="tinggi">

Keterangan:

src: Atribut yang menunjukkan lokasi gambar atau sumber media.
"URL_gambar": Alamat URL lengkap atau relatif ke gambar yang ingin disisipkan.
alt: Atribut yang memberikan teks deskripsi alternatif untuk gambar.
"Deskripsi Gambar": Teks yang menjelaskan gambar untuk aksesibilitas atau jika gambar tidak dapat dimuat.
width dan height: Atribut opsional yang menentukan lebar dan tinggi gambar dalam piksel.

Berikut adalah cara menyisipkan gambar menggunakan tag <img>:

Simpan gambar yang ingin Anda gunakan dalam direktori yang sama dengan halaman HTML Anda. Misalnya, simpan gambar dengan nama gambar.jpg. Atau anda dapat membuat sub direktori didalam direktori induk web anda misal assets/img/gambar.jpg.
Buka halaman HTML (latihan_html_004.html) yang ingin Anda tambahkan gambar, dan gunakan tag <img> untuk menyisipkan gambar. Tentukan atribut src untuk menunjukkan lokasi gambar:

<!DOCTYPE html>
<html>
<head>
    <title>Menampilkan Gambar Pada HTML</title>
</head>
<body>
    <h1>Gambar Pada Halaman HTML</h1>
    <p>Ini adalah contoh gambar 1:</p>
    <img src="gambar1.jpg" width="250px" alt="Deskripsi Gambar 1">
    <p>Ini adalah contoh gambar 2:</p>
    <img src="assets/img/gambar2.jpg" width="250px" alt="Deskripsi Gambar 2">
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Menampilkan Gambar Pada HTML</title>

</head>

<body>

<h1>Gambar Pada Halaman HTML</h1>

<p>Ini adalah contoh gambar 1:</p>

<p>Ini adalah contoh gambar 2:</p>

</body>

</html>

Jika dijalankan pada browser, hasilnya akan tampil seperti terlihat di bawah ini:

Dalam contoh di atas, kami menggunakan tag <img> untuk menyisipkan gambar dan menjelaskan penggunaan atributnya. Dengan memahami konsep tag <img> dalam HTML, Anda dapat memperkaya tampilan halaman web dengan konten visual yang menarik.

Tutorial lengkap html dapat anda lihat pada Index Tutorial HTML: Tingkat Dasar Hingga Tingkat Lanjut.