YÜKLENİYOR...

HTML Dersleri

  • Anasayfa
  • noscript ve a etiketi HTML'de Sayfalar Arası Geçiş
noscript ve a etiketi HTML'de Sayfalar Arası Geçiş - html, html dersleri, noscript, noscript etiketi, javascript kodları çalışmadığında, javascript, a etiketi, a, html bağlantı, html sayfalar arası geçiş, html yeni sayfa, html yeni sekme, html siteye gitme, html yönlendirme, #06
Ahmet Aydın - 09/01/2021 - 39 Görüntülenme

noscript ve a etiketi HTML'de Sayfalar Arası Geçiş

Merhaba, bu makalede Sıfırdan HTML Derslerine devam ediyoruz ve HTML’de noscript etiketi ve web sitemizdeki sayfalar arası, dışarıdaki web sayfalarına ve sayfa içi bölümlere bağlantı kurmak için kullandığımız a etiketi yapılarını inceleyeceğiz. Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi unutmayınız.

noscript Etiketi

Web sayfasında Javascript kodlarının çalışmadığı durumlarda ziyaretçi veya kullanıcılara bilgilendirme yapmak için kullandığımız etikettir. noscript etiketi kullanımını örneklendirmek için script etiketini oluşturalım ve script etiketinin açma ve kapatma etiketlerinin arasında basit bir Javascript kodu yazalım.

Örnek: alert(“Merhaba”);

Yukarıda web sayfasına girildiğinde tarayıcı tarafından Merhaba mesajının verileceği Javascript kodunu yazdık.

Şimdi de noscript etiketini oluşturalım ve noscript etiketinin açma ve kapatma etiketlerinin arasında Javascript kodlarının çalışmadığı durumlarda ekrana yazdırmak istediğimiz bir ifade yazalım.

Örnek: Javascript kodları çalıştırılamadı!

HTML dosyamızda yaptığımız değişiklikleri kaydedelim ve HTML dosyamızı tarayıcıda açalım. Eğer her şey doğruysa tarayıcımız bizi alert fonksiyonun içerisinde yazmış olduğumuz mesaj ile karşılayacaktır.

Şimdi de noscript etiketini kontrol etmek için tarayıcımızda Javascript kodlarının çalışmasını engelleyelim. Bunun için Chrome tarayıcımda (diğerlerinde de deneyebilirsiniz) bu adımları uyguluyorum.

  • Tarayıcımın Ayarlar sayfasına gidiyorum.
  • Site Ayarları ifadesine tıklıyorum.
  • Javascript ifadesine tıklıyorum.
  • İzin Verildi (Önerilir) ifadesinin karşısındaki seçimi pasif hale getiriyorum.

Böylelikle tarayıcımızda Javascript kodlarının çalıştırılmasını engellemiş olduk.

Şimdi web sayfamızı yenileyerek değişiklikleri gözlemleyelim. Eğer her şey yolundaysa noscript etiketinin açma ve kapatma etiketlerinin arasında yazığımız ifadeyi tarayıcımızda gözlemleyebiliriz.

noscript etiketinin kullanımını gördükten sonra yine aynı ayarlar yoluyla Javascript kodlarının çalıştırılmasına izin verebilirsiniz.

a Etiketi

Makalemize başlarken a etiketi ile web sitemizdeki sayfalar arası, dışarıdaki web sayfalarına ve sayfa içi bölümlere bağlantı kurabildiğimizi söylemiştim. Şimdi bu farklı bağlantıları örneklendirelim.

Web Sitemizdeki Sayfalar Arası Bağlantı

HTML dosyamda body etiketinin açma ve kapatma etiketleri arasında nav etiketini oluşturuyorum. nav etiketini oluşturmak zorunda değilim ama HTML5 ile gelen bu bölümlendirme etiketini kullanmak istiyorum. Sizin de kullanmanızı öneriyorum. nav etiketinin açma ve kapatma etiketlerinin arasına geliyorum ve ilk a etiketini oluşturuyorum.

a etiketinin açma etiketine gelip a ifadesinden sonra bir boşluk bırakıyorum ve href = “” ifadesini oluşturuyorum.

href Niteliği

Bağlantı kurmak istediğim adresi href niteliğinin karşısındaki tırnak işaretleri arasına yazıyorum. İlk olarak web sitemde bulunan sayfalar arası bağlantıyı sağlamak için dosya adlarını veriyorum.

Örnek: href = “html06.html”

Yukarıdaki değer atamasını yaptıktan sonra aynı a etiketinin açma ve kapatma etiketleri arasında ziyaretçinin veya kullanıcının göreceği bağlantı metnini yazıyorum. Örneğin bu bağlantının benim anasayfam olduğunu varsayıyorum ve buraya Anasayfa yazıyorum. Ziyaretçi veya kullanıcı Anasayfa ifadesine tıkladığında href niteliği içerisinde vermiş olduğum bağlantıya yönlendirilecektir. Bu işlemi iki kez daha tekrarlayalım ve Hakkımda, İletişim bağlantıları için href niteliğine değer ataması gerçekleştirelim.

Örnek: href = “hakkimda.html”
Örnek: href = “iletisim.html”

Yukarıda iki tane daha a etiketi oluşturdum href niteliklerine değerlerini atadım. Burada benim HTML dosyam ile aynı dizinde bulundukları için sadece dosya adlarını yazmam yeterli oldu. Yine a etiketinin açma ve kapatma etiketleri arasında ziyaretçi veya kullanıcının göreceği bağlantı metinlerini yazalım.

Örnek: Hakkımda
Örnek: İletişim

Bu bağlantılar arasındaki geçişleri kontrol etmek için hakkimda.html ve iletisim.html dosyalarını oluşturmayı ve nav etiketi ile oluşturduğumuz bu yapıyı tüm sayfalara kopyalamayı unutmayınız. Oluşturduğunuz dosyalarda body etiketinin açma ve kapatma etiketleri arasına sayfaları ayırt edici ifadeler yazabilirsiniz.

Tüm bu işlemleri yaptıktan sonra dosyalarımızı kaydediyoruz ve herhangi bir dosyayı tarayıcıda açtığımızda a etiketinin açma ve kapatma etiketleri arasındaki bağlantı metinlerinin bizi karşıladığını gözlemleyebiliriz. Mavi, altı çizili bir şekilde bu ifadeler gelecektir. Bu ifadelerden herhangi birine tıkladığımızda o bağlantının href niteliğine atadığımız dosyaya yönlendirileceğiz. Böylelikle web sitemizde bulunan sayfalar arası geçiş işlemini tamamlıyoruz.

Web Sitemizden Dışarıdaki Bir Web Sayfasına Bağlantı

Bunun için yukarıdaki aynı yapıyı oluşturuyoruz. Tek fark href niteliğine verdiğimiz değer oluyor.

Örnek href = “https://www.google.com”

Dışarıdaki bir web sayfasının tam adresini href niteliğine değer olarak verdim. Yine a etiketinin açma ve kapatma etiketleri arasında bu bağlantının ziyaretçi veya kullanıcıya gösterilecek metnini yazıyoruz.

Örnek: Google

Bu değişikliklerden sonra dosyamızı kaydedip tarayıcıda dosyamızı açtığımızda veya yenilediğimizde a etiketinin açma ve kapatma etiketleri arasındaki (örnekte Google) bağlantı metninin yine mavi ve altı çizili bir şekilde oluşturulduğunu gözlemleyebiliriz. Bu bağlantıya tıkladığımızda href niteliği içerisinde verdiğimiz adrese yönlendirileceğiz.

Örneği uyguladıysanız ilgili web sayfasının bizim web sayfamızın üzerine açıldığını gözlemlemişsinizdir. Biz bu gibi durumlarda kendi web sayfamızın kalmasını dışarıdaki web sayfasının ayrı bir sekmede açılmasını isteyebiliriz. Bunun için target niteliğini kullanıyoruz.

target Niteliği

Tanımladığımız bağlantılarda, bağlantının nerede açılacağını belirttiğimiz niteliktir. Varsayılan olarak _self değerine sahiptir. Bu değer bağlantı kurulan web sayfasının aktif web sayfasının yerine açılmasını sağlar. Biz bağlantının yeni bir sekmede açılmasını istiyorsak bunun için _blank değerini target niteliğine atamalıyız.

Örnek: href = “https://www.google.com” target = “_blank”

Yukarıdaki düzenlemeyi ilgili dosyada yapıp dosyamızı kaydettikten sonra tarayıcımızda web sayfamızı yenileyerek değişiklikleri kontrol edelim. Şimdi aynı bağlantıya tıkladığımızda bizim web sayfamızın durduğunu ve tıkladığımız bağlantıdaki web sayfasının yeni bir sekmede açıldığını gözlemleyebiliriz.

Sayfa İçi Bölüme Bağlantı

Web sitesinin menüsünde bulunan bağlantılara tıkladığınızda farklı bir sayfa yerine aynı sayfada scrollun ilgili bölüme yönlendirildiğini görmüşsünüzdür. Genellikle Tek Sayfa (Single Page) tasarımlarda bu kullanımı görebilmekteyiz. Bu işlemi gerçekleştirmek için a etiketinin yapısı yine aynı şekilde olacaktır. Tek fark ilgili bölüme bir id tanımlamak ve a etiketinin href niteliğine bu id değerini vermektir.

Örnek: id = “hakkimda”
Örnek: href = “#hakkimda”

Yukarıdaki örnekte a etiketinin href niteliğine yönlendirilmek istediğim bölümün id değerini atadım. Bağlantıda id değerinin belirtilmesi için diyez (#) işaretini kullanıyoruz. İlgili bağlantıya tıkladığımda href niteliği içerisinde belirttiğim id değerine sahip bölüme scroll yardımı ile yönlendirileceğiz. Bu yönlendirmeyi test etmek için değişiklikleri kaydettiğinizden, sayfa içeriğinizin dolu olduğundan yani scrollun hareket alanının olduğundan emin olunuz.

Bu makalede Sıfırdan HTML Derslerine devam ettik ve HTML’de noscript etiketi ve web sitemizdeki sayfalar arası, dışarıdaki web sayfalarına ve sayfa içi bölümlere bağlantı kurmak için kullandığımız a etiketi yapılarını inceledik.

Bu bilgileri ders videosunu izleyerek ve ders dosyalarını indirip inceleyerek pekiştirebileceğinizi hatırlatmak istiyorum. Ahmet Aydın Youtube Kanalı’na abone olabilir ve burada olmayan paylaşımlardan da faydalanabilirsiniz. Umarım yararlı bir yazı olmuştur. Bir sonraki makalede görüşebilmek dileğiyle kodla kalın, hoşça kalın...