“HTML Iframes Etiketi: Anlatım ve Kod Örnekleri”

Web geliştirme dünyasında, içerikleri bir sayfadan diğerine entegre etmek için birçok araç bulunmaktadır. Bu araçlardan biri de HTML <iframe> etiketidir. İframe, başka bir HTML belgesini içinde barındırabilen ve gömülebilen bir yapıdır. Bu yazıda, HTML Iframe etiketini detaylı bir şekilde anlatacağım ve kullanımına dair kod örnekleri sunacağım.

Iframe Nedir?

HTML <iframe> (Inline Frame) etiketi, bir sayfa içinde başka bir sayfayı göstermek için kullanılır. Bu, özellikle farklı kaynaklardan içerik almak veya harici bir sayfayı entegre etmek için kullanışlıdır. Iframe, sayfanın içinde bir pencere oluşturarak, bu pencere içinde başka bir HTML belgesini görüntüler.

Iframe Kullanımı

Ifame etiketi, aşağıdaki gibi bir yapıya sahiptir:

&lt;iframe src="url" width="width" height="height" title="description"&gt;&lt;/iframe&gt;

src: Gömülecek içeriğin URL’sini belirtir.
width: Iframe genişliğini belirtir.
height: Iframe yüksekliğini belirtir.
title: Iframe’in içeriğinin açıklamasını belirtir (isteğe bağlı).

Örnek Kodlar

1. Harici Sayfayı Gömme:

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;HTML Iframe Örneği&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h2&gt;Harici Sayfayı Gömme&lt;/h2&gt;
 &lt;iframe src="https://www.example.com" width="800" height="600" title="Harici Sayfa"&gt;&lt;/iframe&gt;
&lt;/body&gt;
&lt;/html&gt;

2. Video Gömme:

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;HTML Iframe Örneği&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h2&gt;Video Gömme&lt;/h2&gt;
&lt;iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" title="YouTube Video"&gt;&lt;/iframe&gt;
&lt;/body&gt;
&lt;/html&gt;

3. İframe ile İçerik Gömme:

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;HTML Iframe Örneği&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h2&gt;İçerik Gömme&lt;/h2&gt;
 &lt;iframe srcdoc="&lt;p&gt;Merhaba, bu iframe ile gömülen içeriktir.&lt;/p&gt;" width="400" height="300" title="Gömülü İçerik"&gt;&lt;/iframe&gt;
&lt;/body&gt;
&lt;/html&gt;

Bu örnekler, HTML <iframe> etiketinin farklı kullanım senaryolarını göstermektedir. Iframe, çeşitli içerikleri gömmek ve entegre etmek için güçlü bir araçtır.