Önemli uyarı
Bu site yapım aşamasındadır ve henüz bitmemiştir.
Daha fazla yardım siteler eklenecek ve mevcut olanlar tamamlanacak, tüm dili kapsayan daha fazla ders eklenecek ve değiştirilecektir.
Sitede veya bir derste fikirlerini belirtmek gibi farklı şekillerde bana yardımcı olabilirsin ve bu beni çok mutlu edecektir.
Sitede reklam göstermediğimi bilerek, daha iyi bir site oluşturmak yardımcı olması için reklam engelleyiciyi kapatabilirsin.
reklam engelleyiciyi kapatmak, sitenin istatistiklerini yükseltmeme yardımcı oluyor.
anlayışınız için teşekkür ederim.
adblock photo
Ara
  • Temel Bilgileri
  • HTML Dile Genel Bakış
  • HTML Editörler
  • HTML Temelleri
  • Paragraf Koordinasyon
  • HTML Paragrafları
  • HTML Başlıklar
  • HTML Metin Biçimlendirme
  • HTML Metin Düzenleme
  • HTML Alıntılar
  • HTML Kod biçimlendirme
  • HTML Bağlantılar
  • Listeler ve Tablolar
  • HTML Tablolar
  • HTML Sıralamalı listeler
  • HTML Sırasız Listeler
  • HTML Açıklama listeleri
  • Medya ve Dahili Sayfalar
  • HTML Dosya Yolları
  • HTML Resimler
  • HTML Videolar
  • HTML Sesleri
  • HTML Iframe
  • Form oluşturma
  • HTML Formlar
  • HTML Form Öğeleri Adresleme
  • HTML Form Giriş Alanları
  • HTML Formda Normal Düğmeler
  • Diğer dersler
  • Database - Veritabanları
  • HTML5 Nedir?
  • ens

K-kudo

HTML öğren

Menü

  • Ana Sayfa
  • Kod Editor
  • Kod Dönüştürücü
  • Color Picker
  • Yardım
  • Araştırma

HTML Iframe

önceki ders sonraki ders
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ı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>
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ı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>
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ülüyoruz.

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

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>
    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.

    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ç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>
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 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>
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ı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>
kod dene

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

önceki ders sonraki ders

Kullanım Koşulları ve Gizlilik Politikası © 2021-2022 HTML öğren.