HTML Bağlantılar ve Iframe

HTML Dersleri #6 Bağlantılar ve Iframe

HTML Bağlantılar ve Iframe

Ders 6: Bağlantılar ve Iframe

Merhaba;

Bu dersimizde HTML dosyalarında sürekli kullanacağımız bağlantılar ve iframe konusuna değineceğiz. İnternet mecrasında girdiğimiz her site her sayfa bir takım bağlantılar içeriyor. Bağlantılara tıklayarak interneti kullanıyoruz. Peki bağlantı için nasıl bir etiket kullanırız, parametreleri nedir? İşte bu derste derinlemesine bu konudan ve genelde sitemizde eklenecek videoların dahil edildiği iframe yani gömme kodlarından ve bağlantılarla nasıl çalıştığından bahsedeceğiz. Şimdi hazırsanız yine HTML kodlar üzerinden anlatmaya devam ediyorum.

Bağlantı Etiketi ve Parametreleri

[code language=”html”]

<!DOCTYPE html>
<html lang="tr-TR">
<head>

<title>hiercelik.net | Ders #6</title>
<meta charset="utf-8">
</head>
<body>

<h1>Ders #6</h1>

<h2>Ders 5’in devamı</h2>

Sitemizden başka bir siteye ya da sayfaya bağlantı vermek için <a>a</a> etiketini kullanırız.

Örneğin;

Bu bağlantının href paramatresine Google’ın bağlantısını ekledik.
Ve Google metnine tıklar tıklamaz Google anasayfasına götürecek. <a href="https://www.google.com.tr">Google</a>.

Bağlantı etiketlerine herhangi bir stil tanımlaması yapılmadı ise tıklanmadan önce mavi daha önce ziyaret edildiyse mor ve o anda aktifse kırmızı renginde gözükür.

Birde bağlantıların aynı sayfada açılmasından ziyade farklı pencere ve şekillerde açılmasını istersek ne kullanırız?

Bu durumda imdadımıza target parametresi yetişir. Target parametresi 5 değer alabilir.

<h3>Target Parametresinin Aldığı Değerler</h3>

<ul>

<ol>_blank</ol>

<ol>_self</ol>

<ol>_top</ol>

<ol>_parent</ol>

<ol>Çerçeve ismi</ol>

</ul>

şeklindedir.

<h4>_blank</h4>

Bu değeri herhangi bir bağlantı etiketine eklersek tıkladığımız bağlantıyı yeni bir tarayıcı sekmesinde açar.

<strong>Not! _new değeride aynı işlemi yapabilir fakat etkin kullanıma geçilmediği için bazı tarayıcılarda çalışmama problemi olabilir. Siz _blank ile devam edin.</strong>

Örneğin;
<a href="https://www.google.com.tr" target="_blank">Bu bağlantıya tıklayınca Google yeni sekmede açılacak. Dene ve gör. :)</a>

Bu değeri çok sık kullanacağız. Örneğin sitemizdeki giriş kısmını ya da sosyal medya bağlantılarını bu şekilde yapabiliriz.

<h4>_self</h4>

Bu değeri bilmenize gerek yok. Çünkü varsayılandır. Eklensede eklenmesede aynı sekmeden hadef adrese gider.

Örneğin;
<a href="https://www.google.com.tr" target="_self">Bu bağlantıya tıklayınca Google aynı sayfada açılacak.</a>

_self değerini duyunca yabancı kalmayın diye bahsettim. Kullanmayın o yüzden.

<h4>_top</h4>

Bu değeri çerçeveli sitelerde kullanırız. Artık frame yani çerçeve kullanılarak site yapma devri kapandı. O yüzden bu etiketide zannımca asla kullanmayacaksınız..

Kısaca çerçeveli bir yapıda bu bağlantıya tıklayınca aynı sekmede hedef adresi yükler. Çerçeve kullanımından çıkmak gerektiğinde bu kullanılır.

<h4>_parent</h4>

Bu değerde aynı şekilde çerçeveli yapılarda kullanılır ve tıklandığında ana çerçevede hedef adresi açar.

(6 senedir web ile uğraşıyorum ve _top, _self, _parent değerlerini hiç kullanmadım.*)

<h4>Çerçeve ismi</h4>

Bu değeri belki kullanabilirsiniz. Hedef çerçevenin adını değer kısmına yazarsanız bağlantıyı o çerçeve içinde açacaktır.

Örneğin;
<a href="https://www.google.com.tr" target="cerceve_ismi">Bu bağlantıya tıklayınca cerceve_ismi adlı çerçevede hedefi görüntüleyecektir..</a>

<h3>Eposta bağlantısı Verme</h3>

Bir eposta adresine bağlantı vermek istersek bunu;

<a href="mailto:[email protected]">[email protected] adresine eposta yolla</a>

şeklinde yaparız. Tıklandığında mobil ya da masaüstünde varsayılan eposta uygulamasını açacak ya da hangi uygulamayı açacağını sormak için bir uyarı penceresi açacaktır.

</body>
</html>

[/code]

Iframe Etiketi ve Parametreleri

Iframe kodlarına daha önce rastlamışsınızdır. Sitenize Youtube videosu eklerken ya da bir haber yayını yapan hazır kodlar iframe etiketleri içerisindedir.

[code language=”html”]

<!DOCTYPE html>
<html lang="tr-TR">
<head>

<title>hiercelik.net | Ders #6</title>
<meta charset="utf-8">
</head>
<body>

<h1>Ders #6</h1>

<h2>Ders 5’in devamı</h2>

Iframe etiketi arasına eklenecek kodlar genelde farklı sitelerden çekilen bileşenleri ya da tam siteyi sayfamızda görüntüler.

Örneğin YouTube’dan bir videonun gömme kodunu ekleyelim.

<iframe width="560" height="315" src="https://www.youtube.com/embed/BZQW6OYDQe4" allowfullscreen></iframe>

iframe etiketleri parametresi width height src ve sandbox değerleridir.

width: Eklenen çerçevenin genişliğini piksel cinsinden belirtmeye yarar.

height: Eklenen çerçevenin yüksekliğini piksel cinsinden belirtmeye yarar.

src: bileşenin çekileceği adresi belirtir.

sandbox değerleri ise iframe içindeki bileşenin neler yapmasına izin verileceğini belirtir. Sırasıyla

<ul>

<li>allowfullscreen : bileşenin tam ekran yapılabilmesine izin verir.</li>

<li>allow-forms : bileşen içerisinden form göndermeye izin verir.</li>

<li>allow-pointer-lock : bileşenin imleç kilitleme ve takibine izin verir.</li>

<li>allow-popups : yeni bir pencerede açılacak sayfa ve uyarılara izin verir.</li>

<li>allow-same-origin : Aynı kaynaktan içeriklere izin verir.</li>

<li>allow-scripts : JavaScript gibi kodların çalışmasına izin verir.</li>

<li>allow-top-navigation : Çerçeve içinde gezmek için üst düzey menülere izin verir.</li>

</ul>

Sandbox iframe ile gerçekleşecek işlemleri kontrol altına almak için eklenmiş bir fonksiyondur.
Yukarıdaki örnekteki gibi değerleri boşluk bırakarak peşpeşe yazabilirsiniz.

<ul></ul>

</body>
</html>

[/code]

Ders esnasında oluşturduğumuz bağlantılar dosyasını buraya, iframe dosyasını buraya tıklayarak indirebilirsiniz.

Bu dersimizide burada sonlandıralım. Mutlu kodlamalar…

Önceki Ders  – 

İlginizi çekebilir...