HTML iframe Kullanımı – Web Tasarım & Programlama
HTML DERSLERİ

HTML iframe Kullanımı

<iframe> HTML Etiketi ne işe yarar?

<iframe>, bağımsız bir HTML belgesini geçerli belgeye yerleştiren bir satır içi çerçeve oluşturur.

Örnek Kod:

Çıktı:

Güçlü, ancak kötüye kullanımı kolaydır

Web sitesi tasarımının eski günlerinde, etrafta sarkan ve herkesin gününü mahvedecek birçok <frame> öğesi vardı. Neredeyse her zaman tasarıma kötü bir yaklaşımdı. Neyse ki, <frame> öğesi HTML5’te kullanımdan kaldırıldı, ancak <iframe> veya “satır içi çerçeve” hala kullanılabilir durumda. Aynı zamanda itiraz edilmeli miydi? Sadece bundan kaçınmak en iyisi midir? Bu elemanın bizim  için bazı geçerli kullanım alanları var olması mı kaldırılmasını engelledi bilmiyorum, ancak  yaygın olan bazı tuzaklardan kaçınmak için ne olduğunu ve nasıl çalıştığını gerçekten anlamalısınız.

<iframe> ve <frame> birbirine benzerlikleri ve farklılıkları

Her iki öğe de bağımsız bir HTML belgesini temsil eder. Belgenin içeriği, her bir öğenin src niteliğinde referanslıdır, bu nedenle aslında geçerli belgeden referans alınan tamamen bağımsız bir kaynaktır.

<iframe> ve <frame> arasındaki temel fark, <iframe> içeriği, geçerli belgenin bir parçası olan bir öğenin içinde görüntülenir. Örneğin, bu gömülü YouTube videosunu göz önünde bulundurun:

 

Video, başka bir yerdeki ayrı bir panelde değil, sayfada açıkça görüntüleniyor. <frame> öğesi bu paradigmayı bozar ve belgenin tarayıcı penceresi üzerinde kontrolü ele geçirmesini sağlar ve her biri farklı bir belge görüntüleyen birkaç küçük panele (çerçeve) ayırır. (Çok kötüydü.) <frames> ve <iframe>> arasındaki diğer tüm farklar bu temel farktan kaynaklanıyor.

<frame> kullanımını burada gösteremiyorum fakat özetle bir sayfa içinde bir birinden bağımsız (kısmen) sayfalar topluluğu olarak düşünebilirsiniz.

<iframe> için iyi (ve korkunç) kullanımlar

<iframe> için bazı meşru kullanımlar vardır ve 1990’lardaki korkunç tasarım modellerini taklit etmek bunlardan biri değildir.

Doğru kullanım şekillerinden bazıları:

  • Üçüncü taraf medyayı yerleştirme
  • Kendi medyanızı bir belgeye özgü şekilde gömme
  • Gömme kod örnekleri (bunu sitede yapıyoruz)
  • Üçüncü taraf “uygulamaları” ödeme şekilleri gibi yerleştirmek

Ve <iframe> için bazı korkunç kullanımlar:

  • Fotoğraf Galerisi
  • Forum

Temel olarak

Bağımsız bir HTML belgesini mevcut belgeye gömmeniz gerekirse, bir <iframe> kullanın. Hepsini sıfırdan oluşturuyorsanız, özellikle aslında bağımsız içerik parçaları değilse, sayfa tasarımını birkaç bağımsız belgeye bölmek için hiçbir neden yoktur.

 

<IFRAME> içinde kullanılan nitelikler(Attributes)

Attribute Değer Tanım
align left
right
top
middle
bottom
HTML5 Desteği yok
frameborder 1
0
HTML5 Desteği yok
height pixels <iframe> yüksekliğini belirtir
longdesc URL HTML5 Desteği yok
marginheight pixels HTML5 Desteği yok
marginwidth pixels HTML5 Desteği yok
name text <iframe> ismini belirtir.
sandbox allow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
Bir <iframe> içindeki içerik için ekstra bir kısıtlama kümesi sağlar
scrolling yes
no
auto
HTML5 Desteği yok
src URL <iframe> içine gömülecek belgenin adresini belirtir.
srcdoc HTML_code <iframe> ‘de gösterilecek sayfanın HTML içeriğini belirtir.
width pixels Bir <iframe> genişliğini belirtir

 

 

Yorum yap

Sayfamızı YouTube'da da takip etmek ister misiniz?
Holler Box