HTML iframe kodu oluşturma, kullanımı örneği (HTML iframe code generate, usage example)

iframe kodu oluşturmamızın öncesinde “iframe” nedir öncelikle kelime anlamının neyi kastetdiğini anlayalım, “i” ifadesi “inline”(satır içi) kelimesinin kısaltması anlamında kullanılmış ve “frame” ise çerçeve anlanımdadır.
HTML’de “iframe” kodu kullanarak, sayfamızda boyutunu ayarlayabileceğimiz kendi çerçevemizi oluşturabiliriz. Bu çerçevenin içerisinde başka bir siteyi gösterebilir yada başka bir html sayfamızı sunarak sayfa içinde sayfa yapabiliriz.

Canlı olarak aşağıdaki kod bloğunun nasıl çalıştığını görmek isterseniz.
Kod bloğundaki kodları kopyalayıp bilgisayarınızda metin dosyasının içerisine yapıştırıp dosyanızın uzantısını .html yapın ve tarayıcınızda açın. İlk iframe kodu muzda site göreceksiniz, ikinci çerçevede ise .html dosyanızın bulunduğu dizinde “iframeSrc.html” oluşturup bunun içeriğini göreceksiniz, dosyası oluşturmaz iseniz iframe kodu nuzda hata ekranını göreceksinizdir.

iframe örnekleri kod bloğu

<!DOCTYPE html>
<html>
<head>
    <title>HTML iframe code usage example - HTML iframe kodu kullanımı örneği | www.yazilimcity.net</title>
 
    <meta charset="UTF-8"/>
</head>
<body>
 
    <!--iframe kodu bağlantımızı istersek internet sitelerinden bir adres vererek içinde bulunduğu "iframe" de açabiliriz-->
   <iframe id="yazilimCityNetIFrameId" src="http://www.yazilimcity.net" style="width: 600px; height: 400px; border-style:solid; border-width:5px;">
        iframe kodu bağlantımız buraya yüklenecek,
    </iframe>
 
    <!--iframe kodu bağlantımızı istersek yerel klasörlerimizden bir .html vererek içinde bulunduğu "iframe" de açabiliriz-->
    <iframe id="yazilimCityNetIFrameId" src="../../iframeSrc.html" style="width: 200px; height: 300px; border-style:solid; border-width:5px;">
        iframe kodu bağlantımız buraya yüklenecek,
    </iframe>

 
</body>
</html>
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

Leave a Reply


*