Tautan dan gambar adalah dua sumber paling umum yang akan Anda tambahkan ke halaman web Anda, jadi mengetahui cara menanganinya dengan benar adalah kuncinya.
Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi.
Setiap situs web perlu mereferensikan sumber daya tertentu, apakah 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 Mutlak
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 mencakup URL protokol lengkap, yang dapat Anda gunakan untuk mengidentifikasi sumber daya yang akan 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.
- Bangun situs web sederhana dalam HTML dengan membuat folder baru dan menambahkan dua file baru bernama index.html Dan style.css.
- Di dalam index.html, tambahkan beberapa kode HTML untuk membuat situs dasar:
<!DOCTYPE html>
<html bahasa="en">
<kepala>
<judul> Situs web saya </title>
<meta charset="UTF-8">
<nama meta="area pandang" konten="width=lebar-perangkat, skala awal=1">
<link rel="stylesheet" href="style.css" />
</head>
<tubuh>
<kelas div="wadah">
<h1> Situs web saya </h1>
<P> Selamat datang di situs web saya. </P>
</div>
</body>
</html> - Di dalam style.css, tambahkan beberapa gaya ke halaman web.
tubuh {
font-family: Arial, Helvetica, sans-serif;
}.wadah {
tampilan: fleksibel;
arah fleksibel: kolom;
menyelaraskan-item: tengah;
}.mb28 {
margin-bawah: 28px;
} - Di dalam index.html, tambahkan sebuah tag di dalam wadah div, dan tambahkan URL absolut ke situs utama Google ( https://www.google.com).
<a href="https://www.google.com" kelas="mb28">Google.com</A> - Anda juga dapat mengakses gambar secara online menggunakan jalur absolut lengkap ke file yang disimpan. Anda juga dapat mengambil langkah tambahan 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&otomatis=format&pas=pangkas&w=3870&q=80" alt="Foto burung lucu" kelas="mb28" lebar="900" tinggi ="600"> - Klik pada index.html file untuk membukanya di browser dan melihat gambar yang diambil dari lokasi eksternal.
- Dari folder root situs web Anda, buat folder baru untuk menyimpan gambar, bernama Gambar-gambar. Di dalam folder, tambahkan gambar baru dan beri nama, seperti CuteBird.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 di akhir jalur. Misalnya, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- Di dalam index.html, ganti tag gambar Anda dengan gambar baru yang menggunakan jalur absolut yang menunjuk ke CuteBird.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 kandar, misalnya:
- 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 masih 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:
- /about
- /contact
- /projects/local-clients
Anda dapat menggunakan URL relatif untuk membuat link atau mereferensikan gambar 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 bahasa="en">
<kepala>
<judul> Burung 1 </title>
<meta charset="UTF-8">
<nama meta="area pandang" konten="width=lebar-perangkat, skala awal=1">
<link rel="stylesheet" href="../styles.css" />
</head>
<tubuh>
<kelas div="wadah">
<h1> Kopi </h1>
<P> Kopi adalah burung manis yang suka bermain! </P>
</div>
</body>
</html> - Di dalam div penampung, tambahkan tag gambar, dan gunakan URL relatif untuk ditautkan ke CuteBird.jpg gambar.
<img src="../Images/CuteBird.jpg" alt="Foto burung lucu" kelas="mb28" lebar="900" tinggi ="700"> - Dalam index.html file, hapus konten yang ada di dalam wadah div. Ganti dengan satu A tag yang menggunakan tautan relatif untuk membuka Bird1.html mengajukan.
<kelas div="wadah">
<h1> Situs web saya </h1>
<P> Selamat datang di situs web saya. </P>
<a href="Halaman/Burung1.html" kelas="mb28">Burung 1: Kopi</A>
</div> - Klik pada index.html file untuk membukanya di browser, dan klik tautan baru untuk menavigasi Bird1.html.
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.