Html ile Web İşlemleri 25 - Sayfa İçi ve Diğer Bağlantılar
BAĞLANTI ELEMANLARI
4. Sayfa İçi Bağlantılar
Çapa olarak da adlandırılan sayfa içi bağlantı oluşturma, bir web sayfasında bağlantı verilen yere tıklandığında aynı sayfa içinde başka bir bölüme yönlendirilmeyi sağlar.
Uygulama
<a> etiketinin name özelliği ile sayfa içi bağlantılarını yönergeler doğrultusunda oluşturunuz.
2. Adım: <body> etiketi içine <nav> blokunu oluşturup sayfa içi bağlantılarını oluşturunuz.
<ul>
<li><a href="#Bolum1">HTML5</a>
<li><a href="#Bolum2">CSS</a>
<li><a href="#Bolum3”>JavaScript</a>
<li><a href="#Bolum4">ASP.Net Core</a>
</ul>
<p>Açıklama</br>………</br>………</br></p>
</nav>
3. Adım: <article> bloklarını kullanarak web sayfası içeriğini oluşturunuz.
<article>
<section>
<a name="Bolum1" >HTML5/a> <a href="#icindekiler">İçindekiler</a>
<p>Açıklama</br>………</br>………</br></p>
</section>
</article>
<article>
<section>
<a name="Bolum2">CSS Bölümü</a> <a href="#icindekiler">İçindekiler</a>
<p>Açıklama</br>………</br>………</br></p>
</section>
</article>
<article>
<section>
<a name="Bolum3">JavaScript Bölümü</a> <a href="#icindekiler">İçindekiler</
a>
<p>Açıklama</br>………</br>………</br></p>
</section>
</article>
<article>
<section>
<a name="Bolum4">ASP.Net Core Bölümü</a> <a href="#icindekiler">İçindekiler</
a>
<p>Açıklama</br>………</br>………</br></p>
</section>
</article>
5. Adım: <figure> ve <footer> blokunu oluşturup bir logo yerleştiriniz ve bağlantı oluşturunuz.
<img src="logo.png" alt="logom" />
<figcaption>
<a href="url">Benim Logom</a>, daha fazla bilgi için
</figcaption>
</figure>
<footer>
<h3 id="yazar">HTML5 Yazarı</h3>
</footer>
6. Adım: HTML belgesini kaydedip tarayıcıda görüntüleyiniz.
5. Diğer Bağlantı Çeşitleri
HTML belgesinde <a> etiketi kullanarak görüntü, e-posta, dosya vb. köprü bağlantıları da oluşturulabilir.
5.1. Görüntüyü Bağlantı Olarak Kullanma
Görüntü üzerinden köprü oluşturmak için aşağıdaki HTML kodu yazılır.
<img src="kopru.jpg">
</a>
5.2. E-posta Bağlantısı Oluşturma
E-posta bağlantısı oluşturmak için mailto ifadesi kullanılır. E-posta bağlantısı üzerinden e-posta göndermek için e-posta istemcisi, bilgisayarda kurulu ve ayarlanmış olmalıdır.
<a href="mailto:info@site.com.tr">e-posta gönder</a>
5.3. Dosya Bağlantısı Oluşturma
Tarayıcılar; HTML belgeleri gibi pdf, gif, jpg vb. dosya türlerini de görüntüleyebilir. Bu tür dosyaları barındıran bir sitede dosyaya ulaşmak için dosya yolları kullanılır. Bu dosya yollarına bağlantı tanımlanarak dosyaların indirilmesi sağlanır. Bağlantı oluşturulan HTML belgesi ile dosya aynı klasörde ise aşağıdaki HTML kodu yazılır.
<a href="dosya.pdf">Dosyayı İndir</a>
Bağlantı oluşturulan HTML belgesi ile dosya farklı bir sitede ise aşağıdaki HTML kodu yazılır.
<a href="http://www.eba.gov.tr/dosya.pdf">Dosyayı İndir</a>
Dosya bağlantıları, dosyayı sadece görüntülemek için veya indirme bağlantılarını kullanarak indirmek için kullanılır.
Uygulama
HTML bağlantıları oluşturma işlemini yönergeler doğrultusunda gerçekleştiriniz.
2. Adım: <body> etiketi içine aşağıdaki gibi bağlantı kodları oluşturunuz.
<a href="hakkimda.html">hakkımda</a>|
<a href="galeri.html">galeri</a> |
<a href="urunler.html">ürünler</a>|
<a href="iletisim.html">iletişim</a>|
<a href="mailto:mailadresim@benimwebsayfam.com.tr">Eposta Gönder</a>
4. Adım: “index.html” dosyasının kopyasını alıp “hakkimda.html” adında kaydediniz.
5. Adım: “index.html” dosyasının kopyasını alıp “galeri.html” adında kaydediniz.
6. Adım: “index.html” dosyasının kopyasını alıp “urunler.html” adında kaydediniz.
7. Adım: “index.html” dosyasının kopyasını alıp “iletisim.html” adında kaydediniz.
8. Adım: Oluşturduğunuz HTML belgelerine açıklayıcı bir başlık bloku ekleyiniz.
<h1> Bu ANASAYFA </h1>
Adım 9: “index.html” HTML belgesini tarayıcıda açınız ve bağlantıları test ediniz.
NOT: Bu adımları tekrar ederek farklı HTML sayfaları ve HTML bağlantıları oluşturabilirsiniz.
Hiç yorum yok