HTML'deki çerçeveler, tarayıcı penceresini her biri farklı bir HTML belgesi yükleyebilen ve görüntüleyebilen birden çok bölüme ayırmanın bir yoludur. Bu yazıda HTML'deki çerçevelerin pratik örneklerini göreceğiz.

CSS gibi daha modern ve esnek tekniklerin benimsenmesi nedeniyle son yıllarda kullanımı azalmış olsa da JavaScript, bazı web sitelerinde, özellikle 1990'larda ve 1990'ların başında oluşturulanlarda hala bulunabilir. 2000 yılı.

Çerçeveler veya çerçeveler HTML'de nasıl çalışır?

Çerçeveler iki öğeden oluşur:

1. çerçeve kümesi: eleman tarayıcı penceresini, her biri kendi HTML belgesini yükleyebilen dikdörtgen bölümlere ayırmak için kullanılır.

2. çerçeveler: eleman içinde kullanılır ayrı bölümlerin her birini tanımlamak için. Ve çerçeve kümesi içinde yüklü olan başka bir belgeyi çağırmak için gönderir.

   instagram story viewer

• şununla takip et: iFrame Örnekleri

HTML'de Çerçeveler Nasıl Yapılır?

Çerçeveli bir HTML belgesi oluşturmak için çok basit iki adımı izleyin:

1. Öğeyi kullanarak çerçevelerin yapısını tanımlayan bir HTML belgesi oluşturun. Örneğin:

Dosya 1: çerçeve kümesi.html

2. Çerçevelere yüklenecek bir veya daha fazla HTML belgesi oluşturun.

Dosya 2: frame1.html

Bu Çerçeve 1

Dosya 3: çerçeve2.html

Bu Çerçeve 2

HTML'deki çerçeve nitelikleri

En önemli element özelliklerinden bazıları bunlar:

• kaydırma: Bu özellik, çerçevedeki kaydırma çubuklarının görünümünü kontrol etmek için kullanılır. "otomatik", "evet" veya "hayır" değerlerine sahip olabilir.

• normal boyut: Bu öznitelik, kullanıcının çerçeveyi yeniden boyutlandırmasını önlemek için kullanılır.

• tatlı patates: Bu öznitelik, çerçeveye, bağlantılarda ve betiklerde çerçeveye başvurmak için yararlı olabilecek bir ad vermek için kullanılır.

• kaynak: Bu öznitelik, çerçeveye yüklenecek HTML belgesinin URL'sini belirtmek için kullanılır.

• çerçeve kenarlığı: Bu nitelik, çerçevelerin kenarlıklarının olup olmayacağını belirtir. Olası değerler "1" (kenarlıkları göstermek için) veya "0"dır (kenarlık göstermemek için). Örneğin, .

• sınır: Bu nitelik, çerçeveler arasındaki sınırın genişliğini piksel cinsinden tanımlar. Örneğin, çerçeveler arasında 5 piksellik bir kenarlık oluşturacaktır.

• çerçeve aralığı: Bu özellik şuna benzer: sınır. Ayrıca piksel cinsinden çerçeveler arasındaki boşluğu tanımlar. Örneğin, çerçeveler arasında 10 piksellik bir boşluk ayarlayacaktır.

• sınır rengi: Bu özellik, çerçevelerin kenarlık rengini değiştirmenizi sağlar. Herhangi bir geçerli renk belirtilebilir. Örneğin, çerçevelerin kenarlığını kırmızı yapacaktır.

Kullanım örneği:

Belirli bir çerçeveye nasıl bağlanır

Niteliği kullanarak bir bağlantıyı belirli bir çerçevede açık hale getirebiliriz. hedef etikette. Değeri hedef çerçeve adıyla aynı olmalıdır (tatlı patates özniteliği ). Örneğin:

menu.html'de
Sayfa 1
Sayfa 2

Bu durumda menü çerçevesindeki "Sayfa 1" veya "Sayfa 2" bağlantılarına tıklandığında ilgili sayfa "içerik" çerçevesine yüklenecektir.

çerçeveler nasıl kırılır

Bir bağlantının çerçeve kümesinin dışında bir sayfa açmasını istiyorsanız (yani tüm çerçeve kümesini değiştirin), özel değeri kullanabilirsiniz. _tepe öznitelik için hedef. Örneğin:

menu.html'de
çerçevelerin dışına çıkmak

"Çerçevelerden Çık"ı tıkladığınızda, tarayıcı çerçeve kümesini değiştirerek tam pencerede "pageOutofFrames.html" dosyasını yükleyecektir.

Ekranı çerçevelerle iki sütuna bölme örneği

Bu örnek, ekranı eşit boyutta iki sütuna böler. Her sütun farklı bir HTML sayfası yükler.

Çerçevelerle gezinme kenar çubuğu oluşturma örneği

Bu örnek, ekranın %25'ini kaplayan ve gezinme için kullanılan bir kenar çubuğu oluşturur. Ekranın geri kalanı ana içeriği görüntülemek için kullanılır.

Ekranı satırlara ve sütunlara bölme örneği

Bu daha karmaşık örnek, ekranı dört eşit parçaya böler. Her bölüm farklı bir HTML sayfası yükler.

HTML çerçeveleriyle üst gezinme örneği

Arka arkaya iki kare tanımlayan bir dosya oluşturun. Tanımladığı iki dosya şunlardır: biri gezinme (pencere genişliğinin %20'sini kaplar) ve diğeri ana içerik (pencere genişliğinin geri kalanını kaplar) içindir.

Ardından, "navigation.html" ve "content.html" dosyalarını oluşturmanız gerekir. Örneğin, "navigation.html" şöyle görünebilir:

Sayfa 1

Sayfa 2

Sayfa 3


Ve "content.html" şöyle bir şey olabilir:

Web sitemize hoşgeldiniz!

Gezinmede seçilen sayfanın içeriği buraya gidecektir.

Bu durumda "navigation.html" içindeki bir bağlantıya tıkladığınızda ilgili sayfa "içerik" çerçevesine yüklenir.