Sayfa içeriği
çerçeveler nedir
Çerçeve (frame), 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ülemenize yardımcı olur.
Kısacası çerçeve kavramı, bir sayfanın içine bir sayfa eklemektir.
Size bir örnek vereceğim, diyelim ki bir siteniz var ve sitenizin bir sayfasına YouTube'dan bir video gömmeniz gerekiyor, sayfanın içine başka bir sayfa gömmek 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ıyor.
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üz gibi boyutu kendiniz belirtmediğiniz sürece çok küçük bir alanında görüntüleniyor.
Genellikle çerçeve boyutu CSS kodu tarafından 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 yapabilirsiniz.
Uzunluğu %100'e ayarlarsanız, herhangi bir fark görmezsiniz çünkü çalışması için temel sayfa uzunluğunu %100'e ayarlamanız gerekir.
Çerçeve uzunluğu hakkında endişelenmeyin çünkü CSS çalışırken onunla nasıl oynayacağınızı çok kolay öğreneceksiniz.
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 dersin 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üz 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 ekleyin ve başlığı buna <iframe title"metin"> gibi bir değer olarak iletin.
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ız, çerçeveye name özelliğini ekleyip buna bir ad verebilir, ardından kendi belirlediğiniz adı bağlantıdaki target özelliğine geçirebilirsiniz.
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ğunuz herhangi bir videoyu, herhangi bir kod yazmanıza gerek kalmadan sayfa içinde kolayca görüntüleyebilirsiniz, çünkü YouTube size "Embed" ya da göm adında bir seçenek veriyor.
Üzerine tıkladığınızda, size videoyu görüntüleyen bir çerçeve kodu verecektir.
Bilgi: Gömme seçeneğini bulmak için videonun altında bulduğunuz Paylaş düğmesine tıklayın, size görünecektir.
Ardından sayfaya ekleyeceğiniz kodu size vermesi için üzerine tıklayın.
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ız bu kodu not edin ve kendiniz yazmayacaksınız ve içindeki özelliklerin çoğunun ne yaptığını bilmeniz gerekir, allow özelliği'ye videoya otomatik oynatma gibi özellikler eklendi, anlatılmamış olan gelişmiş özellikleri kullanıldı ileride nasıl kullanacağınızı öğreneceksiniz.. allowfullscreen özelliği, videoyu tam ekran boyutunda görüntülemek için kullanılır