Tautan dan gambar adalah dua sumber daya paling umum yang akan Anda tambahkan ke halaman web Anda, jadi mengetahui cara mengatasinya dengan benar adalah kuncinya.
Setiap situs web perlu merujuk sumber daya tertentu, baik itu gambar, file, atau halaman web lainnya. Memutuskan bagaimana menautkan ke file lain sangat penting untuk memastikan bahwa browser menemukannya dengan benar.
Anda dapat menautkan ke sumber daya menggunakan URL relatif atau absolut. Ini berlaku untuk file lokal di komputer dan URL berbasis protokol yang diakses melalui web.
Cara Menggunakan Jalur URL Absolut
URL absolut berisi seluruh jalur ke lokasi file tertentu. Contohnya termasuk path lengkap ke file di komputer Anda:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Contoh lain termasuk URL protokol lengkap, yang dapat Anda gunakan untuk mengidentifikasi sumber daya untuk dikirim melalui internet. Paling umum, ini dimulai dengan “https” atau “http”:
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
URL absolut berisi semua informasi yang diperlukan untuk menemukan file atau sumber daya yang Anda coba akses. Ini diperlukan jika Anda menautkan ke situs eksternal.
- Buat situs web sederhana dalam HTML dengan membuat folder baru dan menambahkan dua file baru bernama index.html dan style.css.
- Di index.htmltambahkan beberapa kode HTML untuk membuat situs web dasar:
<!DOCTYPE html>
<html lang="en">
<head>
<title> My Website </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h1> My Website </h1>
<p> Welcome to my website. </p>
</div>
</body>
</html> - Di style.csstambahkan beberapa gaya ke halaman web.
body {
font-family: Arial, Helvetica, sans-serif;
}.container {
display: flex;
flex-direction: column;
align-items: center;
}.mb28 {
margin-bottom: 28px;
} - Di index.htmltambahkan tag di dalam div penampung, dan tambahkan URL absolut ke situs utama Google (https://www.google.com).
<a href="https://www.google.com" class="mb28">Google.com</a> - Anda juga dapat mengakses gambar secara online menggunakan jalur absolut penuh ke file yang disimpan. Anda juga dapat mengambil langkah ekstra untuk memastikan bahwa Anda telah menambahkan gambar responsif ke HTML Anda halaman web.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3870&q=80" alt="Cute bird photo" class="mb28" width="900" height="600"> - Klik pada index.html file untuk membukanya di browser dan melihat gambar yang diambil dari lokasi eksternalnya.
- Dari folder root situs web Anda, buat folder baru untuk menyimpan gambar, yang disebut Gambar-gambar. Di dalam folder, tambahkan gambar baru dan beri nama, seperti LucuBurung.jpg.
- Identifikasi jalur absolut ke file gambar yang baru saja Anda tambahkan. Anda dapat melakukannya dengan menemukannya di jalur navigasi aplikasi pengelola file sistem operasi Anda. Anda juga perlu menambahkan nama file ke akhir jalur. Misalnya, “C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg”
- Di index.htmlganti tag gambar Anda dengan gambar baru yang menggunakan jalur absolut yang menunjuk ke LucuBurung.jpg file yang tersimpan di komputer Anda. Ingatlah untuk menambahkan awalan file:// untuk menunjukkan sumber daya sistem file lokal. Di Unix dan macOS, Anda kemudian dapat menambahkan jalur absolut yang Anda identifikasi di langkah sebelumnya. Di Windows, Anda harus mengganti garis miring terbalik dengan garis miring ke depan dan menambahkan garis miring tambahan sebelum huruf drive, misalnya:
<img src="file:///C:/Users/Sharl/Desktop/Website/Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">
- Klik pada index.html file untuk membukanya di browser dan melihat gambar yang disimpan di komputer Anda.
Cara Menggunakan Jalur URL Relatif
URL relatif hanya menyimpan sebagian dari URL atau jalur, dan biasanya relatif terhadap lokasi file atau bagian situs web saat ini.
Dalam contoh di atas, untuk mengakses logo.ico dari index.html menggunakan URL relatif, Anda akan menggunakan jalur “Gambar/Ikon/Logo.ico”. Contoh lain termasuk:
- Halaman/Burung1.html
- Images/CuteBird.jpg
- style.css
Saat Anda menggunakan struktur folder yang sama di komputer lain, situs web akan tetap dapat mengambil file tersebut. Saat merutekan melalui web, alih-alih menggunakan tautan lengkap seperti “https://example.com/about”, Anda dapat menggunakan perutean relatif sebagai gantinya:
- /tentang
- /kontak
- /proyek/klien-lokal
Anda dapat menggunakan URL relatif untuk membuat tautan atau gambar referensi di dalam halaman web HTML Anda.
- Di dalam root direktori situs web Anda, buat folder baru bernama halaman.
- Di dalam folder Halaman baru, buat file baru bernama Bird1.html.
- Mendiami Bird1.html dengan kode HTML untuk membuat halaman.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bird 1 </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<div class="container">
<h1> Coffee </h1>
<p> Coffee is a sweet bird who loves to game! </p>
</div>
</body>
</html> - Di dalam div penampung, tambahkan tag gambar, dan gunakan URL relatif untuk menautkan ke LucuBurung.jpg gambar.
<img src="../Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700"> - Dalam index.html file, hapus konten yang ada di dalam wadah div. Ganti dengan satu sebuah tag yang menggunakan tautan relatif untuk membuka Bird1.html mengajukan.
<div class="container">
<h1> My Website </h1>
<p> Welcome to my website. </p>
<a href="Pages/Bird1.html" class="mb28">Bird 1: Coffee</a>
</div> - Klik pada index.html file untuk membukanya di browser, dan klik tautan baru untuk menavigasi ke Bird1.html.
Mengakses File Menggunakan Tautan URL Absolut atau Relatif
Sekarang Anda dapat menentukan perbedaan antara URL absolut dan relatif. Anda sekarang dapat lebih berhati-hati untuk memastikan sumber daya Anda selalu diambil.
Anda juga harus selalu memastikan bahwa semua tautan yang dapat diakses pengguna Anda aman dan terlindungi.
