HTML Iframe

Sayfa içeriği

› Çerçeveler nedir
› Sayfaya bir iframe eklemek
› Iframe boyutunu belirtmek
› Iframe kodun özellikleri
› Iframe'e başlık eklemek
› Iframe içinde bir bağlantı açmak
› Sayfada bir YouTube videosu görüntülemek

Çerçeveler nedir

Çerçeve (iframe), başka bir sayfadaki içeriğin görüntülendiği sayfada bir yer tahsis etmek anlamına gelir.

Başka bir anlamda, bir çerçeve, bir HTML sayfasının içeriğini başka bir HTML sayfasının içinde görüntülemeni yardımcı olur.

Kısacası çerçeve kavramı, bir sayfanın içine bir sayfa eklemektir.

Seni bir örnek vereceğim, diyelim ki bir siteni var ve siteyi bir sayfasına YouTube'dan bir video yerleştirme gerekiyor, sayfanın içine başka bir sayfa yerleştirme için buna çerçeveler denir.

Sayfaya bir iframe eklemek

Genellikle sayfada bir çerçeve görüntülemek için <iframe> etiketini <iframe src="url"></iframe> olarak kullanıyoruz.

url Kelimesinin yerine içinde görüntülemek istediğimiz sayfanın yolunu eklemeliyiz.

Aşağıdaki örnekte, <iframe> etiketini kullanarak sayfaya bir çerçeve ekledim ve içinde HTML öğren web sitesinde ana sayfayı görüntüledim.

<iframe src="https://www.k-html.com"></iframe>

kod dene

Iframe boyutunu belirtmek

Sayfada gösterdiğimiz çerçeve, önceki örnekte gördüğün gibi boyutu kendini belirtmediğin sürece çok küçük bir alanında görüntüleniyor.

Genellikle çerçeve boyutu CSS kodu ile belirlenir, çünkü bunu yapmanın kolay ve daha iyi yollarını sağlar, ancak HTML çalıştığımız için çerçeve boyutunu belirlemek için HTML tarafından sağlanan özelliklere odaklanacağız:

width: Görüntülenecek çerçevenin genişliğini piksel olarak belirtmek için kullanılıyor.
height: Görüntülenecek çerçevenin uzunluğunu piksel olarak belirtmek için kullanılıyor.

Bilgi:

Genişlik yüzde olarak belirtilebilirsin. Mesela, çerçevenin genişliğini tüm sayfanın genişliğine eşit olacak şekilde %100 yapabilirsin.

Uzunluğu %100'e ayarlarsan, herhangi bir fark görmezsin çünkü çalışması için temel sayfa uzunluğunu %100'e ayarlamanı gerekir.
Çerçeve uzunluğuyla uğraşma çünkü CSS öğrenirken onunla nasıl oynayacağını kolayca öğreneceksin.

Aşağıdaki örnekte, kursumuz'da ilk dersin içeriğinin görüntüleneceği 400 piksel genişliğinde ve 400 piksel yüksekliğinde olduğunu belirten bir çerçeve görüntüledim.

<iframe src="https://www.k-html.com/2021/05/html-dile-genel-baks.html" width="400" height="400"></iframe>

kod dene

Aşağıdaki örnekte, sayfada ilk dersinin görüntüleneceği, genişliğinin %100 ve uzunluğunun 400 piksel olduğunu belirten bir çerçeve görüntüledim.

<iframe src="https://www.k-html.com/2021/05/html-dile-genel-baks.html" width="100%" height="400"></iframe>

kod dene

Iframe kodun özellikleri

height: <iframe> için yüksekliği ayarlarmak için kullanılıyor.

Aşağıdaki örnekte, kodun yüksekliğini belirtmek için height özeliğini kullandım.
```
<iframe src="https://www.k-html.com/2021/05/html-dile-genel-baks.html" height="500"></iframe>
```
kod dene

width: <iframe> için genişliği ayarlar.
Aşağıdaki örnekte, kodun genişliğini belirtmek için width özelliği kullandım.
```
<iframe src="https://www.k-html.com/2021/05/html-dile-genel-baks.html" width="500"></iframe>
```
kod dene

src: <iframe>'e dahil edilecek sitenin veya sayfanın yolunu belirtmek için kullanılıyor.
Bu örnekte src özelliğini ekledim ve gördüğün gibi şu ana kadar eklenen tüm kodlarda src özellik kullanılmış.
```
<iframe src="https://www.k-html.com/2021/05/html-dile-genel-baks.html"></iframe>
```
kod dene

name: <iframe> için bir adı belirtir ve arama motorları için faydalı kalır.
name özelliği, bir Javascript'teki öğeye başvurmak için veya bir <a> veya <form> öğesinin hedef özelliğin değeri veya bir <input> veya <button> öğesinin form target özelliği olarak kullanılabilir.
Iframe içinde bir bağlantı açmak bölümünde bu özellik hakkında daha fazla açıklayacağım.

Aşağıdaki örnekte, name özelliğinin bir örneğini ekledim.
```
<iframe src="https://www.k-html.com" name="iframe-1"></iframe>
<a href="https://www.k-html.com/2021/05/html-dile-genel-baks.html" target="iframe-1">html dile genel bakış</a>
```
kod dene

sandbox: <iframe> kodu içindeki içerik için ekstra bir dizi kısıtlamayı etkinleştirir.
Bu özellik biraz ileri düzeyde olduğu için şimdi açıklamayacağım ileride nasıl kullanılacağını öğreneceksin.

Iframe'e başlık eklemek

Çerçeveye koyduğumuz başlık sayfada görüntülenmek için tasarlanmamıştır yani sayfada kullanıcının önünde görüntülenmez.

Peki, o zaman bu özellik neden kullanılıyor?
Çerçeveye koyduğumuz başlığın önemi, eğer kullanıcı körse ve sayfanın içeriğini okumak için ekran okuyucuya kullanıyorsa, okuyucu Çerçeveye yerleştirilen başlığı okuyacaktır, böylece kullanıcı sayfada bir çerçeve var olduğu bilecektir.

Çerçeve için bir başlık eklemek için <iframe> etiketine title özelliğini ekle ve başlığı buna <iframe title="metin"> gibi bir değer olarak iletebilirsin.

Aşağıdaki örnekte, sayfaya eklediğim çerçeve için, çerçeve boyutunu ve içeriğinin görüntüleneceği sayfanın bağlantısını belirterek bir başlık eklediğim.

<iframe src="https://k-html.com" width="100%" height="400" title="k-html.com üzerinden html dili öğrenmeyi başla"></iframe>

kod dene

Iframe içinde bir bağlantı açmak

Sayfaya yerleştirilen bağlantıyı aynı sayfaya yerleştirilmiş bir çerçeve içinde açmak istiyorsan, çerçeveye name özelliğini ekle buna bir ad verebilirsin, ardından kendi belirlediğin adı bağlantıdaki target özelliğine geçirebilirsin.

Aşağıdaki örnekte, sayfaya yerleştirilen bir çerçeve içine tıklandığında atıfta bulunduğu sayfayı açacak bir bağlantı ekledim.

<a href="https://k-html.com/2021/05/html-dile-genel-baks.html" target="k-iframe">html dile genel bakış aç</a>
<iframe name="k-iframe"></iframe>

kod dene

Sayfada bir YouTube videosu görüntülemek

YouTube'da bulduğun herhangi bir videoyu, herhangi bir kod yazmanıza gerek kalmadan sayfa içinde kolayca görüntüleyebilirsin, çünkü YouTube seni "Embed" ya da göm adında bir seçenek veriyor.
Üzerine tıkladığında, seni videoyu görüntüleyen bir çerçeve kodu verecektir.

Bilgi: Gömme seçeneğini bulmak için videonun altında bulduğun Paylaş düğmesine tıklayarak, seni görünecektir.
Ardından sayfaya ekleyeceğin kodu seni vermesi için üzerine tıkla.

Aşağıdaki örnekte, bir YouTube videosu için Embed butonuna tıkladıktan sonra aldığımız bir kodu ekledim.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/vIPJASal9U0"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard−write; encrypted−media; gyroscope; picture−in−picture"
 allowfullscreen>
</iframe>

kod dene

YouTube'den alacağın bu kodu not et ve kendini yazmayacaksın ve içindeki özelliklerin çoğunun ne yaptığını bilmeni gerekir, allow özelliği'ye videoya otomatik oynatma gibi özellikler eklendi, anlatılmamış olan gelişmiş özellikleri kullanıldı ileride nasıl kullanacağını öğreneceksin..
allowfullscreen özelliği, videoyu tam ekran boyutunda görüntülemek için kullanıldı.

önceki ders sonraki ders