HTML Dersleri 13 – Iframe Kullanımı


Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde ID Kullanımı adlı yazımızda  HTML’de ID kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 12 – ID Kullanımı linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML Iframe konusuna gözatıp, HTML’de iframe kullanımını inceleyip , web sitelerimizin içine başka web sitelerini gömmeyi öğreneyeceğiz. 

Iframe Nedir ? Iframe etiketi HTML sayfamızda, herhangi bir web sitesini gömmemize yaramaktadır.Eski bir teknik olsa da, yinede bazı yerlerde kullanım ihtiyacı doğmaktadır. < iframe > etiketi ile bir Iframe tanımlanır. Aşağıda Iframe kullanımı örneği görmektesiniz ;

ÖRNEK KULLANIM

<iframe src="URL"></iframe>

Iframe etiketi içerisinde src parametresine görüntülemek istediğimiz URL (Web Adresi) yazmamız yeterlidir.

Iframe - Yükseklik ve Genişlik Ayarları

Iframe boyutunu belirlemek için height ve width parametreleri kullanılır.

Yükseklik ve Genişlik değerleri varsayılan olarak piksel cinsinden belirtilir, ancak bunlar yüzde cinsinden de ("% 80" gibi) olabilir.

<iframe src="https://www.google.com" height="200" width="300"></iframe>

Diğer bir seçenek ise Iframe yüksekliği ve genişliği ayarlamak için style parametresi ile CSS kullanabiliriz.

<iframe src="https://www.google.com" style="height:200px;width:300px;"></iframe>

Iframe - Border(Çerçeve) Kaldırma

Varsayılan olarak Iframe çerçeveli (border) olarak gelir. Bu çerçeve kalınlığını kaldırmak veya düzenlemek için CSS kullanmak gerekir.

Border(Çerçeve) Kaldırma

<iframe src="https://www.google.com" style="border:none;"></iframe>

Çerçeve kalınlığını kaldırmak için style parametresi içerisine border:none; kodunu yazmamız yeterlidir.

Tebrikler! Bu derste  HTML’de Iframe Kullanımını, Ifame kavramını , HTML'de Iframe Genişlik ve Yükseklik ayarlamalarını, HTML'de Iframe Çerçeve (Border) kaldırma kullanımını öğrendik.Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.

HTML Derslerinin onüçüncü kısmı olan dersimizde , HTML’de Iframe Kullanımı konusunu öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim HTML Dersleri
Kategori Web Programlama
Ders Adeti 19 Ders
Dil Türkçe
Güncelleme 12/2020
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla