Bağlantılar ve resimler, web sayfalarınıza ekleyeceğiniz en yaygın kaynaklardan ikisidir, bu nedenle bunları nasıl doğru bir şekilde ele alacağınızı bilmek çok önemlidir.
Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.
İster resimler, ister dosyalar veya diğer web sayfaları olsun, her web sitesinin belirli kaynaklara başvurması gerekir. Diğer dosyalara nasıl bağlanacağına karar vermek, tarayıcıların onları doğru bir şekilde bulmasını sağlamak için son derece önemlidir.
Göreli veya mutlak bir URL kullanarak kaynaklara bağlantı verebilirsiniz. Bu, hem bir bilgisayardaki yerel dosyalar hem de web üzerinden erişilen protokol tabanlı URL'ler için geçerlidir.
Mutlak URL Yolu Nasıl Kullanılır?
Mutlak bir URL, belirli bir dosya konumuna giden tüm yolu içerir. Bunlara örnek olarak bilgisayarınızdaki dosyaların tam yolu verilebilir:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Başka bir örnek, internet üzerinden gönderilecek bir kaynağı tanımlamak için kullanabileceğiniz tam protokol URL'sini içerir. Genellikle bunlar "https" veya "http" ile başlar:
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
Mutlak URL, erişmeye çalıştığınız dosyayı veya kaynağı bulmak için gereken tüm bilgileri içerir. Harici bir siteye bağlanıyorsanız bu gereklidir.
- HTML'de basit bir web sitesi oluşturun adlı yeni bir klasör oluşturarak ve iki yeni dosya ekleyerek index.html Ve stiller.css.
- İçinde index.html, temel bir web sitesi oluşturmak için biraz HTML kodu ekleyin:
<!DOCTYPE html>
<html dili="tr">
<KAFA>
<başlık> İnternet sitem </title>
<meta karakter kümesi="UTF-8">
<meta adı="görüntü alanı" içerik="genişlik=cihaz genişliği, başlangıç ölçeği=1">
<bağlantı rel="stil sayfası" href="stiller.css" />
</head>
<vücut>
<div sınıfı="konteyner">
<h1> İnternet sitem </h1>
<P> Web siteme hoş geldiniz. </P>
</div>
</body>
</html> - İçinde stiller.css, web sayfasına biraz stil ekleyin.
vücut {
yazı tipi ailesi: Arial, Helvetica, sans-serif;
}.konteyner {
ekran: esnek;
esnek yön: sütun;
hizalama öğeleri: merkez;
}.mb28 {
kenar boşluğu: 28 piksel;
} - İçinde index.html, ekle kapsayıcı div içindeki etiketini ekleyin ve mutlak URL'yi Google'ın ana sitesine ekleyin ( https://www.google.com).
<bir href="https://www.google.com" sınıf="mb28">google.com</A> - Saklanan dosyanın tam mutlak yolunu kullanarak görüntülere çevrimiçi olarak da erişebilirsiniz. Eklediğinizden emin olmak için ek adımlar da atabilirsiniz. HTML'nize uyumlu resimler web sayfası.
<img kaynak="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&otomatik=biçim&uygun=kırpma&w=3870&q=80" alt="sevimli kuş fotoğrafı" sınıf="mb28" genişlik="900" yükseklik="600"> - Tıkla index.html Dosyayı bir tarayıcıda açmak ve harici konumundan alınan görüntüyü görüntülemek için.
- Web sitenizin kök klasöründen, görüntüleri depolamak için yeni bir klasör oluşturun. Görüntüler. Klasörün içine yeni bir resim ekleyin ve ona şöyle bir ad verin: CuteBird.jpg.
- Az önce eklediğiniz görüntü dosyasının mutlak yolunu belirleyin. Bunu, işletim sisteminizin dosya yöneticisi uygulamasının gezinme yolunda bularak yapabilirsiniz. Ayrıca dosya adını yolun sonuna eklemeniz gerekecektir. Örneğin, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- İçinde index.html, resim etiketinizi mutlak yolu işaret eden yeni bir resimle değiştirin. CuteBird.jpg Bilgisayarınızda depolanan dosya. Yerel bir dosya sistemi kaynağını belirtmek için file:// önekini eklemeyi unutmayın. Unix ve macOS'ta, önceki adımda tanımladığınız mutlak yolu ekleyebilirsiniz. Windows'ta ters eğik çizgileri eğik çizgilerle değiştirmeniz ve sürücü harfinden önce fazladan bir eğik çizgi eklemeniz gerekir, örneğin:
- Tıkla index.html Dosyayı bir tarayıcıda açmak ve bilgisayarınızda depolanan görüntüyü görüntülemek için.
Göreli URL Yolu Nasıl Kullanılır?
Göreceli bir URL, URL'nin veya yolun yalnızca bir kısmını depolar ve genellikle geçerli dosyanın veya bir web sitesinin bölümünün konumuna göredir.
Yukarıdaki örnekte, erişmek için Logo.ico itibaren index.html göreli bir URL kullanarak, "Images/Icons/Logo.ico" yolunu kullanırsınız. Diğer örnekler şunları içerir:
- Sayfalar/Bird1.html
- Resimler/CuteBird.jpg
- stiller.css
Aynı klasör yapısını başka bir bilgisayarda kullandığınızda, web sitesi yine de dosyayı alabilir. Web üzerinden yönlendirme yaparken, " gibi tam bağlantıyı kullanmak yerine https://example.com/about", bunun yerine göreli yönlendirmeyi kullanabilirsiniz:
- /about
- /contact
- /projects/local-clients
HTML web sayfanızın içinde bağlantılar veya referans resimler oluşturmak için göreli bir URL kullanabilirsiniz.
- Web sitesi dizininizin kök dizininde, adında yeni bir klasör oluşturun. Sayfalar.
- Yeni Sayfalar klasörünün içinde, adlı yeni bir dosya oluşturun. Bird1.html.
- doldur Bird1.html Sayfayı oluşturmak için HTML kodu ile.
<!DOCTYPE html>
<html dili="tr">
<KAFA>
<başlık> kuş 1 </title>
<meta karakter kümesi="UTF-8">
<meta adı="görüntü alanı" içerik="genişlik=cihaz genişliği, başlangıç ölçeği=1">
<bağlantı rel="stil sayfası" href="../styles.css" />
</head>
<vücut>
<div sınıfı="konteyner">
<h1> Kahve </h1>
<P> Kahve, oyun oynamayı seven tatlı bir kuştur! </P>
</div>
</body>
</html> - Kapsayıcı div'in içine bir resim etiketi ekleyin ve ilgili URL'ye bağlantı vermek için kullanın. CuteBird.jpg görüntü.
<img kaynak="../Resimler/CuteBird.jpg" alt="sevimli kuş fotoğrafı" sınıf="mb28" genişlik="900" yükseklik="700"> - İçinde index.html dosya, kapsayıcı div içindeki mevcut içeriği kaldırın. Tek ile değiştirin A açmak için göreli bir bağlantı kullanan etiket Bird1.html dosya.
<div sınıfı="konteyner">
<h1> İnternet sitem </h1>
<P> Web siteme hoş geldiniz. </P>
<bir href="Sayfalar/Bird1.html" sınıf="mb28">Kuş 1: Kahve</A>
</div> - Tıkla index.html bir tarayıcıda açmak için dosya ve gezinmek için yeni bağlantıya tıklayın Bird1.html.
Artık mutlak ve göreli URL'ler arasındaki farkı belirleyebilirsiniz. Artık kaynaklarınızın her zaman alındığından emin olmak için ekstra özen gösterebilirsiniz.
Ayrıca, kullanıcılarınızın erişebileceği tüm bağlantıların güvenli ve emniyetli olduğundan her zaman emin olmalısınız.