Sayfa içeriği
ç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ılıyoruz.
url kelimesinin yerine içinde görüntülemek istediğimiz sayfanın yolunu ekliceksin.
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>
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ırız.
Bilgi
Genişlik yüzde olarak belirtilebilir.
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ğu hakkında endişelenmeyin çünkü CSS çalışırken onunla nasıl oynayacağını çok kolay öğ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ülüyoruz.
- <iframe src="https://www.k-html.com/2021/05/html-dile-genel-baks.html" width="400" height="400"></iframe>
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ülüyoruz.
- <iframe src="https://www.k-html.com/2021/05/html-dile-genel-baks.html" width="100%" height="400"></iframe>
iframe kodun özellikleri
<iframe> etiketinin birçok özelliği vardır fakat bunların çoğu artık html5'te kullanılmamaktadır ve son dil güncellemesinden sonra kaldırılmıştır, şimdi html5'te hala kullanılan özelliklerden bahsedeceğim.
- 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>
- 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>
- 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>
- 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.
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>
- 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çeveyeyerleş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>
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 verebilir, 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>
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ıklay, 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>
YouTube'dan 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ılır