HTML Link (Yönlendirme) İşlemleri - Eğitimler

Có thể bạn quan tâm

Websitesinde gezinme işlemlerini <a> yönlendirme etiketi ile gerçekleştiririz. Html yönlendirme işlemlerini sayfaiçi yönlendirme ve sayfadışı yönlendirme olmak üzere 2 aşamada anlatmaya çalışalım.

Sayfaiçi Yönlendirme

Bu tip yönlendirmede sayfa yenilenmeden ziyaretçi tek sayfa içerisinde hızlıca hareket ederek içeriğe ulaşabilmektedir. Genellikle mikrositeler ve makale sayfalarında kullanılan bir yönlendirme çeşididir. Bu konuyu anlatmaya geçmeden önce <a> etiketi içerinde kullanabileceğimiz parametreleri inceleyelim.

href : Yönlendirilecek hedef adresin veya konumun belirtildiği parametredir. Sayfaiçi yönlendirmede # karakteri konumun başına eklenir. Örneğin href=”#bolum1”

name : Sayfaiçi yönlendirmede yönlendirilecek konumu belirlemek amacıyla kullanılır. Örneğin name=”bolum1” gibi name değeri belirlenirken değişken tanımlama kuralları göz önünde bulundurulmalı en basiti Türkçe karakter, boşluk ve özel karakter kullanılmamalıdır.

target : Hedef sayfanın açılacağı yeri ifade eder _self (aynı tarayıcı penceresinde) ve _blank (yeni tarayıcı penceresinde) şeklinde değerler verileceği gibi iframe (çerçeve) sayfalama işlemlerinde iframe adı da yazılabilmektedir. Iframe sayfalama günümüzde neredeyse hiç kullanılmamaktadır.

Sayfaiçi Yönlendirme Uygulaması

SayfaiciYonlendirme adında bir klasör ve içerisine index.html adında bir dosya oluşturup html:5 (Emmet) yazıp onaylarak html, head ve body etiketlerinden oluşan ana taslağımızı oluşturalım ve sayfamızı içerik eklemeye hazır hale getirelim. Unutmayalım tüm içeriğimiz <body> etiketi içerisine ekliyoruz ve her sayfa için <title> etiketinin içeriğine bölüm başlığımız yazıyoruz. Bu işlemi standart hale getirelim.

Öncelikle senaryonumuzu belirleyelim. 5 bölümden oluşan C# Programlamada Veri Tipleri adında bir makale yayınladığımızı düşünelim. Bu makalenin tamamını tek bir html sayfasında yayınlayacağız. Kullanıcıya hareket kolaylığı oluşturmak için sayfamızın başında bölüm indekslerini oluşturalım ve bölüm başlıklarını burada listeleyelim.

Bu bölümde listeleme etiketini de anlatmak istedim. Çünkü liste ve link vazgeçilmez bir ikilidir. Genel olarak linkler listelerin içerisinde oluşturulmaktadır.

2 tür listeleme etiketi bulunmaktadır. <ul>(Sırasız Liste - ●, □, * vb.) ve <ol>(Sıralı Liste – 1,2,3…) biz genel olarak <ul> etiketini kullanacağız. Her iki ana listeleme etiketinde de her seçeneğin başına <li> (list item – liste nesnesi) alt etiketini yazmalıyız.

<h1>C# Programlamada Veri Tipleri</h1> <ul> <li><a href="#">string</a></li> <li><a href="#">int</a></li> <li><a href="#">double</a></li> <li><a href="#">bool</a></li> <li><a href="#">arraylist</a></li> </ul>

Index Listemizi oluşturduktan sonra bölümlerimizi hemen altına kodlayalım. Bölüm adlarını <h1> etiketi içerisinde oluşturup her bölümü 5 paragraftan oluşan otomatik lorem içeriği ekleyelim.

<h1>string</h1> <p>Lorem ipsum …</p> <p>Lorem ipsum …</p> <p>Lorem ipsum …</p> <p>Lorem ipsum …</p> <p>Lorem ipsum …</p>

Diğer başlıkları da size oluşturun de bu şekilde oluşturalım. Şimdi içerik bölümlerini isimlendirmeye başlayalım. <h1>string</h1> etiketinden hemen sonra <a name=”string”> etiketini ekleyelim ve aynı işlemi diğer bölümlerde de tekrarlayalım ve sayfa içi yönlendirme işlemini tamamlayalım. Bölüm indeksinde yer alan her linke tıkladığımızda o linkin içeriğine erişebiliyor olmamız gerekiyor.

Burada belirtmek istediğim bir nokta var. Ziyaretçiyi en altta yer alan arraylist başlığına gönderdikten sonra ziyaretçiyi tekrar listeye kolayca erişmesini sağlamanız gerekmektedir. Bu nedenle her bölümden sonra ziyaretçiyi hızlıca sayfanın en üst kısmına yönlendirebilmeniz gerekmektedir. Bu nedenle her bölüm sonuna

<a href=”#top”>Yukarı</a>

etiketini ekleyelim. #top HTML içerisinde hazır bir yapıdır.

Sayfadışı Yönlendirme

Bu yönlendirme türü bir websitesinde o sitede yer alan sayfalararası gezinmeyi, başka websitelerine yönledirmeyi, mail ve tel yönlendirme işlemlerini içermektedir. Burada kullanacağımız etiket ve parametrelerini sayfaiçi yönlendirme bölümünde anlattık hemen uygulama aşamasına geçelim.

Sayfadışı Yönlendirme Uygulaması

SayfadisiYonlendirme adında bir klasör ve içerisine index.html adında bir dosya oluşturup html:5 (Emmet) yazıp onaylarak html, head ve body etiketlerinden oluşan ana taslağımızı oluşturalım ve sayfamızı içerik eklemeye hazır hale getirelim. Unutmayalım tüm içeriğimiz <body> etiketi içerisine ekliyoruz ve her sayfa için <title> etiketinin içeriğine bölüm başlığımız yazıyoruz. Bu işlemi standart hale getirelim.

Öncelikle senaryonumuzu belirleyelim. Ana Sayfa (index.html), Hakkımızda (hakkimizda.html) ve İletişim (iletisim.html) adında 3 sayfadan oluşan bir websitesi oluşturalım ve iletişim bölümünde email, telefon ve iframe uygulamalarını da gerçekleştirelim. Ayrıca resim ekleyip resme tıklandığında yönlendirme aktivitesini gerçekleştirelim.

Öncelikle websitemizin navigasyon yani menü kısmını oluşturalım. Aynı zamanda yavaş yavaş CSS konusuna da giriş yapmaya başlayalım.

<ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="hakkimizda.html">Hakkımızda</a></li> <li><a href="iletisim.html">İletişim</a></li> </ul>

Yazdığımız kodun görüntüsü yukarıdaki gibi olacaktır. Pek şık görünmüyor J Hadi CSS ile şekillendirelim.

Öncelikle <head> etiketinin içerisine sayfa için CSS yazabilmek için <style> etiketi ekleyelim. Aşağıdaki şekilde <ul> <li> ve <a> etiketlerine stil tanımlaması yapalım ve sayfamızın son şeklini görüntüleyelim. Bundan sonraki süreçte görüntüleme için artık live server kullanacağız.

<body> içerisinde <ul> etiket sonrasında <h1> etiketine Ana Sayfa yazısı ekleyelim altına da <p> etiketi içerisine lorem*10 uzun bir otomatik metin oluşturalım.

index.html dosyasını çoğaltalım VS Code kısmında dosyayı seçip CTRL+C ile kopyalayıp CTRL+V ile yapıştırıp yeni oluşan dosya adını ismini hakkimizda.html olarak düzenleyelim. Aynı işlemi iletisim.html için de tekrarlayalım. Artık 3 adet dosyamız bulunmaktadır.

hakkimizda.html dosyasını açıp düzenleyelim. <h1> etiketi içerisindeki Ana Sayfa yazısını Hakkımızda olarak güncelleyelim. Dosyayı kaydedelim.

Aynı işlemi iletişim.html dosyasında yapıp <h1> içeriğini İletişim olarak güncelleyelim.

3 sayfadan oluşan websitemizde sayfalar arasında geçiş yapabiliyoruz. Hangi sayfanın aktif olduğunu menüden anlamak için <style> etiketi içerisine bir sınıf tanımlamamız gerekmektedir. Onu bir sonraki dersimizde uygulayacağız.

iletisim.html dosyasını açalım mail yönlendirme, telefon yönlendirme ve iframe ekleme işlemlerini yapalım. iletisim.html içerisine lorem paragrafını silip aşağıdaki kodu yazalım.

<a href=”mailto:info@codeks.org”>info@codeks.org</a><br> <a hef=”tel:+905321645027”>+90 532 164 50 27</a>

Bu şekilde çok şık görünmedi dilerseniz email ve telefon icon resimlerini siteye ekleyelim. İnternetten indirebilirsiniz.

Websitemizde resim kullanmak için tüm resimleri bir yerde toplamalıyız. Genel olarak html dosyalarımızla aynı dizin içerisinde images adında bir dizin oluşturmayı tercih ederiz.

Html’de resim görüntülemek için <img> etiketini kullanabiliriz. images klasörü içerisindeki email.png resim dosyasını çağırmak için <img> etiketini <img src=”images/email.png” width=”16”> şekilde düzenleriz. iletisim.html içeriğini aşağıdaki şekilde düzenleyelim.

<img src="images/email.png" width="16"> <a href=”mailto:info@codeks.org”>info@codeks.org</a> <br> <img src="images/phone.png" width="16"> <a hef=”tel:+905321645027”>+90 532 164 50 27</a>