HTML iframe Etiketi | HTML Dersleri 11 başlıklı bu yazımda birlikte HTML de <iframe> etiketi ve bu etiket ile ilgili bazı özellikleri öğreneceğiz.
<iframe> etiketini çalıştığımız sayfa içerisinde, bu sayfadan farklı bir dokümanı yada web sitesini görüntülemek için kullanırız. Bu etikete örnek olarak kendi sitemi bu sayfa içerisine tekrar çağıracağım. Eklemek için aşağıdaki kodları kullanacağım;
<html> <head> <title>HTML Öğreniyorum</title> </head> <body> <iframe src="https://www.lokmandogan.com" width="100%" height="500" title="Lokman DOĞAN | Kafama Estikçe"></iframe> </body> </html>
Yukarıdaki kodlar ile çalıştığımız HTML dosyasını çalıştırdığımızda aşağıdaki gibi bir görüntü oluşur;
Bu örnekte web sitemin mobil cihazlarda yada küçük pencerelerde nasıl göründüğünü de görmüş olduk 🙂 Yukarıdaki kod bloğu ile birlikte hadi iframe etiketinin sözdizimi kurallarını inceleyelim.
HTML iframe Etiketi Sözdizimi Kuralları (Syntax)
HTML iframe kod satırı bir çerçeve belirtir ve bu çerçeve içerisine çalıştığımız html belgesinin dışındaki bir belgeyi gömmemizi sağlar. Temel anlamda sözdizimi aşağıdaki gibidir;
<iframe src="url" title="Açıklama"></iframe>
Yukarıdaki kod bloğunda src=”url” niteliğini kullandım. Bu nitelik çalıştığımız belgeye gömeceğimiz dış belgenin adresini içermelidir. Örneğin çalıştığımız html dosyasıyla (index.html olduğunu varsayalım), aynı dizin içerisinde bulunan bir başka dosyayı (herhangibir.html olduğunu varsayalım) gömmek için src niteliğini src=”herhangibir.html” şeklinde tanımlamalıyız.
HTML iframe Yükseklik ve Genişlik Ayarlama
Çerçevenin boyutlarını ayarlarken genişlik için “width”, yükseklik için “height” öznitelikleri kullanılır. Herhangi bir birim belirtilmediği sürece, width ve height öznitelikleri varsayılan olarak piksel biriminde ölçeklendirilir. İlk örneğimde kullanımımı incelerseniz width değerine 100% height değerine 500 yazmıştım. Burada genişliği % (yüzde) şeklinde birimlendirdiğim için bulunduğu blok genişliğinin tamamını (%100’ünü) kaplayacak şekilde ayarladım. Yükseklik özniteliğinde ise herhangi bir birim kullanmadım ve sadece 500 yazdım. Bu durumda varsayılan birim olarak piksel birimini atandı ve 500 piksel biriminde bir yüksekliğe sahip oldu.
Bu yükseklik ve genişlik özniteliklerini isteğimize göre ayarlamak için aşağıdaki gibi bir kod yazmamız gerekmektedir;
<iframe src="url" width="400" height="600" title="Açıklama"></iframe>
Yükseklik ve genişlik değerleri yukarıdaki şekilde yazılabildiği gibi, CSS kodları kullanılarak da belirlenebilir. Bunun için “style” özniteliği kullanılır ve değerler CSS kurallarına göre yazılır. Bu kullanım hakkında detaylı bilgiyi CSS Öğreniyorum konusunda daha detaylı olarak ele alacak ve daha iyi anlayacağız. Şimdilik sadece aşağıda örnek olsun diye kodu paylaşıyorum;
<iframe src="url" title="Açıklama" style="width:400px;height:600px"></iframe>
HTML iframe Kenarlık ve Kenarlığı Kaldırma
Yazının başında verdiğim örneği incelediğinizde kod kısmında herhangi bir “border” yani kenarlık tanımlaması yapmadım. Ancak görüntülendiğinde iframe çerçevesinin etrafında bir kenarlık (border) mevcuttu. Dikkatinizi çekmediyse, yukarı tekrar bakabilirsiniz. Bu örnekten de anlayacağınız gibi <iframe> kodlarında herhangi bir kenarlık özniteliği belirtmediğimiz takdirde varsayılan olarak bir kenarlık ataması sağlanmakta.
Peki bu kenarlığı (border) isteğimize göre özelleştirebilir miyiz? Tamamen kaldırabilir miyiz? Tabi ki yapabiliriz. Örneğimize geçelim o zaman;
<iframe src="https://www.lokmandogan.com" width="100%" height="500" style="border:none;" title="Lokman DOĞAN | Kafama Estikçe"></iframe>
Kodda gördüğünüz üzere yine CSS özelliklerini kullandık. style=”border:none;” şeklinde bir öznitelik tanımladık. Bakalım bu nasıl görünecek;
Evet kenarlığı kaldırmış olduk. Bir de bu kenarlığı özelleştirmeyi de örneklendirelim;
<iframe src="https://www.lokmandogan.com" width="100%" height="500" style="border:2px solid green;" title="Lokman DOĞAN | Kafama Estikçe"></iframe>
Yukarıdaki kodda border yani kenarlığa 2 piksellik bit boyut ve rengine de yeşil değerini verdik, şu şekilde bir görüntü elde ederiz;
Yeşil ve 2 piksel kalınlığında bir kenarlıkla birlikte görüntülendi. Şimdi iframe’in bir diğer özelliğini daha görelim.
HTML iframe’i Bir Bağlantıya Hedef Olarak Belirleme
Bir bağlantı/link için iframe hedef çerçeve olarak kullanılabilir. Linkte verdiğimiz adresi, linke tıklandığımızda, önceden belirlediğimiz iframe’in içerisinde gösterebiliriz. Hemen kafamız karışmadan bir örnek verelim;
<iframe src="https://www.lokmandogan.com" width="300" height="500" name="hedef_cerceve" title="Lokman DOĞAN | Kafama Estikçe"></iframe> <p><a href="https://www.lokmandogan.com/html-ogreniyorum/" target="hedef_cerceve">HTML Öğreniyorum sayfası</a></p>
Çerçevede ilk olarak web sitemin ana sayfası görüntülenecek. iframe çerçevesinin hemen altında HTML Öğreniyorum kategorisinin linki bulunacak ve bu linkin “target” özniteliğine bu iframe çerçevesi değer olarak atanmış olacak. HTML Görüntüler ve Linkler başlıklı yazımızda linkler ve target özniteliğini vermiş ve bu özniteliğe “_blank” değerini atayarak linkin farklı bir sekmede açılmasını sağlamıştık. Aynı mantıkla şimdiki örneğimizde ise linkin farklı sekmede/pencerede değil de sayfamızda yer alan iframe çerçevesinde açılmasını sağlamış olduk. Aşağıda nasıl göründüğüne bir bakalım;
Yukarıdaki HTML Öğreniyorum sayfası linkine tıkladığınızda çerçevede bu kategori sayfasının görüntülendiğini göreceksiniz.
HTML <iframe> etiketi ve özellikleri konumuzun da burada sonuna geldik. Bir sonraki dersimizde HTML5 ile gelen özellikleri temel bazda inceleyeceğiz. HTML Öğreniyorum serimizin Temel HTML bölümünü sonlandırmış olacağız. Bir sonraki dersimizde görüşmek üzere.
hi
Hi