HTML'de çerçeve kullanarak SEO. Iframe ve Frame - nedir ve Html'de çerçevelerin en iyi nasıl kullanılacağı
8.9K
eleman
çerçeveler
Nedir
Bir HTML sayfasına bir sayfa nasıl gömülür? Bunun için kullanmanız gerekir
Görüntülemek
Ekran bloğu.
Kod örneği
Güçlü ancak kullanımı kolay
Web tasarımının eski kötü günlerinde, birçok her geliştiricinin hayatını mahveden unsurlar. Neredeyse her zaman kötü bir tasarım yaklaşımı olmuştur. Neyse ki, eleman HTML5'te kullanımdan kaldırıldı. Fakat
Benzerlikler ve farklılıklar
Bu öğelerin her ikisi de ayrı bir HTML belgesi oluşturmanıza olanak tanır. Geçerli web sayfasının başvurduğu belgenin içeriğine bağlantı, src özniteliğinde belirtilir.
Arasındaki temel fark
Video açıkça bir HTML sayfasında ve bazılarında değil ayrı panel. öğe bu paradigmayı bozdu ve belgenin, her biri ayrı bir belge görüntüleyen birkaç küçük panele (çerçeveye) bölerek tarayıcı penceresi üzerinde denetim uygulamasına izin verdi. Aradaki diğer tüm farklılıklar bu temel farklılıktan kaynaklanmaktadır.
Bir gün çerçeveler kullanılarak oluşturulmuş eski bir siteyi güncelleme göreviyle karşı karşıya kalabilirsiniz. kullanmak isteyebilirsin ve bağımsız paneller ve alt pencerelerin aynı kabusunu yeniden yaratmak için sabit bir yerleşim genişliği. Ancak, bir bağlantıyı ayrı bir çerçevede açmak için hedef niteliğini kullanamazsınız. JavaScript çözümleri aramaya başlayabilirsiniz. Lütfen, bunu yapma.
Başarılı (ve korkunç) uygulama
Birkaç geçerli kullanım durumu vardır için HTML oluşturma sayfalar:
üçüncü taraf medya içeriğinin yerleştirilmesi;
platformlar arası bir belge aracılığıyla kendi medya içeriğinizi yerleştirmek;
gömme kodu örnekleri;
ödeme şekilleri olarak üçüncü taraf "applet'leri" yerleştirme.
Ve işte bazı korkunç kullanım örnekleri :
fotoğraf Galerisi;
forum veya sohbet
Bağımsız, zaten var olan HTML belgelerini geçerli belgeye gömmeniz gerekiyorsa, şunu kullanın: . Her şeyi sıfırdan oluşturuyorsanız, sayfa tasarımınızı birden çok ayrı belgeye bölmek için hiçbir neden yoktur. Özellikle bunlar aslında bağımsız içerik parçaları değilse.
iframe öznitelikleri
Özellik adı
Anlam
Açıklama
kum havuzu
İzin-aynı-menşeli Üst gezinmeye izin ver Formlara izin ver Komut dosyalarına izin ver
Çerçeveye yüklenen içerikle ilgili bir dizi kısıtlamayı belirtir. Daha önce sorulur html sayfası nasıl oluşturulur.
kaydırma
evet hayır otomatik
Çerçevede kaydırma gösterilip gösterilmeyeceğini belirler. HTML5'te kullanımdan kaldırıldı. Bunun yerine CSS kullanın.
İsim
Başlık
Çerçevenin adını belirtir.
hizala
sol sağ üst orta alt
Çerçevenin çevreleyen öğelere göre hizalamasını belirtir. Modası geçmiş. Bunun yerine CSS kullanın.
çerçeve sınırı
evet (veya 1) Hayır
Bir çerçevenin etrafındaki kenarlığın görüntülenmesini sağlamak için kullanılır. HTML5'te kullanımdan kaldırıldı. Bunun yerine CSS kullanın.
uzun uzun
URL
Çerçeve içeriğinin uzun bir açıklamasını içeren bir sayfanın URL'sini belirtmek için kullanılır. Modası geçmiş. Bunun yerine CSS kullanın.
kenar boşluğu
piksel
İçerikten çerçevenin sınırına kadar olan girintinin genişliğini kontrol etmek için kullanılır. Modası geçmiş. Bunun yerine CSS kullanın.
Bu yayın, makalenin bir çevirisidir " » samimi bir proje ekibi tarafından hazırlanmıştır
Çerçeveler, web tarayıcı pencerenizi, her biri ayrı bir HTML belgesi yükleyebilen birden çok bağımsız pencereye bölmenize izin veren HTML öğeleridir. Bu tür her pencerenin (çerçevenin) kendi kaydırma çubukları olabilir ve diğer bağımsız pencerelerden bağımsız olarak işlev görebilir veya tam tersi, içeriklerini yönetebilir. Bilginin kendisi başka bir pencerede bulunurken, bir pencerede kalıcı olarak bulunan bir menüyü düzenlemek için kullanılabilirler. Kullanıcılar istedikleri zaman menüye erişebilir ve başka bir menü öğesi seçmek için önceki sayfaya dönmeleri gerekmez. Çerçeveler, sayfanın geri kalanı çerçeve içinde kayarken tarayıcı penceresindeki resimleri veya diğer UI öğelerini "sabitlemenize" olanak tanır. Ancak, bu günlerde çerçevelerin modası geçmiş olarak kabul edildiğini ve profesyonel web yöneticileri projelerinde asla çerçeve kullanmadıkları için çerçeveli sitelerin artık eski püskü olarak kabul edildiğini belirtmekte fayda var. Çerçevelerle ilgili bir takım kötü şöhretli problemler vardır. Örneğin, içeriği içeren sayfalar diğer belgelere bağlantı vermediği için arama motorlarını karıştırırlar. dan ziyaretçi almak istiyorsanız arama motorları, çerçeveleri unutun. Kullanıcının beğendiği bir sayfa, tarayıcının yer imi bölümüne yerleştirilemez, çünkü çerçeveler bulunduğu sayfanın adresini gizler ve her zaman sadece web sitesinin adresini gösterir. Bu nedenle tarayıcıların geçmişi takip etmesinde problemler yaratırlar ve farklı ekran boyutlarına ve farklı ekran boyutlarına iyi adapte olamamışlardır. mobil cihazlar. Çerçeveli projelerin bulunmasına rağmen Dünya çapında Ağ Artan bir şekilde, çerçeveler tartışılmadan bir HTML çalışması eksik kalacaktır. Çerçeveler, dezavantajlarının yanı sıra, bu teknolojinin tavizsiz olarak atılmasına izin vermeyen bazı avantajlara da sahiptir.
Çerçeve oluşturma
Çerçeveli bir HTML belgesinin yapısı, normal bir HTML belgesinin biçimine çok benzer. Normal bir HTML belgesinde olduğu gibi, tüm kodlar eşleştirilmiş etiketler arasına yerleştirilir. ve , ve kapta başlıkları yer almaktadır. Çerçeveli bir belge ile normal bir HTML belgesi arasındaki temel fark, etiket yerine çerçeveli bir belgenin olmasıdır. çift etiketi uygulandı (İngiliz çerçeve kümesinden - bir çerçeve kümesi). Aşağıdaki örnek, çerçeveli bir HTML belgesinin yapısını gösterir:
Örnek: Çerçeveli Bir HTML Belgesinin Yapısı
Kendin dene "
çerçeve_top
çerçeve_sol
çerçeve_sağ
Çerçeveli belge
Yukarıdaki örnekte, sayfa her biri başlangıçta frame_top.html, frame_left.html ve frame_right.html HTML belgelerini yükleyen üç bölge içerir. Bir çerçeve, HTML belgelerine ek olarak grafikler de içerebilir. Bunu yapmak için, öznitelikte karşılık gelen görüntünün adresini belirtmelisiniz. kaynak, Örneğin src="resim.gif". Lütfen öğenin kapanış etiketi olmadan kullanılır. Konteynerin içinde sadece etiketler içerebilir veya etiketlerin kapsadığı başka bir çerçeve kümesi ve
. Etiket aşağıdaki niteliklere sahiptir:
satırlar- sayfanın satırlara bölünmesini açıklar:
cols- sayfanın sütunlara bölünmesini açıklar:
Böyle bir sayfalandırmadan kaynaklanan alanlar çerçeveler olacaktır. Bu özniteliklerin yokluğu, tüm tarayıcı penceresini kaplayacak tek bir çerçeve tanımlar.
Nitelik değerinde satırlar ve cols satır veya sütun sayısını değil, çerçevelerin genişlik ve yükseklik değerini belirtmek gerekir. Listedeki tüm değerler virgülle ayrılır. Boyutlar, mutlak birimler (piksel olarak) veya yüzde olarak belirtilebilir:
cols="%20, %80"- tarayıcı penceresi, öznitelik kullanılarak iki sütuna bölünmüştür cols, sol sütun tarayıcı penceresinin %20'sini ve sağ sütun %80'ini kaplar.
satırlar="100, *" tarayıcı penceresi, öznitelik kullanılarak iki yatay pencereye bölünür satırlar, üst kutu 100 piksel ve alt kutu kalan alanı kaplar, sembol tarafından verilen yıldızlar
görüldüğü gibi bu örnek, konteyner nitelik ile satırlar ilk önce iki yatay çerçeve oluşturur ve ikinci çerçeve için başka bir çerçeve değiştirilir özniteliği kullanarak alt yatay çerçeveyi iki sütuna bölen cols, sol sütun tarayıcı penceresinin %20'sini ve sağdaki %80'ini kaplar. Tarayıcı çerçeveleri desteklemiyorsa, etiketler arasındaki metin pencerede görüntülenecektir. ve . Etiketler arasındaki her şey ve , çerçeveleri destekleyen tarayıcılar tarafından yok sayılır. Bu nedenle, geliştiricinin çerçevelerin içeriğini başka yollarla çoğaltan bir kod yazması ve bu kodu bir kapsayıcıya yerleştirmesi gerekir. , ardından tüm kullanıcılar web sayfasını görebilir. Daha önce belirtildiği gibi, belgeye ayrı bir çerçeve eklemek için eşleştirilmemiş bir etiket kullanılır. . Bağlanmak kaynak verilen çerçeve içinde görüntülenecek belgeyi belirtir, örneğin: . öznitelik ise kaynak eksik, boş bir çerçeve görüntülenir.
Çerçeveler arasındaki kenarlıklar veya boşluk
Varsayılan olarak tarayıcı, çerçeveler arasında ziyaretçilerin çerçevenin boyutunu ayarlayabileceği gri ve genellikle üç boyutlu bir kenarlık görüntüler. Çerçeve kenarlığı, diğer çerçeve öğeleri gibi değiştirilebilir. Bunun için birkaç eleman özelliği vardır. , çerçeve kenarlıklarını özelleştirmenize olanak tanır. Sınır çizgisinin kalınlığı özniteliğe göre belirlenir. sınır. Varsayılan kenarlık kalınlığı değeri beştir. Bir çerçevenin kenarlığını gizlemek için, sınır genişliği değerini sıfıra ayarlamanız veya özniteliğe "hayır" veya "0" değerini atamanız gerekir. çerçeve sınırı. Bağlanmak çerçeve sınırı sadece iki zıt değer alabilir. öznitelik değeri ise çerçeve sınırı"evet" veya "1" olarak ayarlandığında çerçeve sınırı görüntülenecektir ve "0" veya "hayır" ise hayır. Öznitelik değerlerine dikkat edin çerçeve sınırı için farklılık farklı tarayıcılar. Bu sorunu çözmek için özniteliği iki kez kullanın çerçeve sınırı ve bazı tarayıcılar için özniteliği de eklemeniz gerekir. çerçeve aralığı"0" değeri ile:
Aşağıdaki örnekte, çerçeveler arasındaki sınırı kaldırıyoruz:
Örnek: Çerçeveler arasındaki kenarlığı kaldırma
Kendin dene "
çerçeve_sol
çerçeve_sağ
Kenarlıksız çerçeveler
Çerçeveler arasındaki sınırı kaldırırsanız, ziyaretçiler çerçeveyi tarayıcıda yeniden boyutlandıramaz. Özniteliği kullanarak kenarlıkları koruyarak çerçevenin yeniden boyutlandırılmasını da önleyebilirsiniz. noresize:
bir nitelik ile sınır rengiçerçevenin kenarlık rengini değiştirebilirsiniz, sadece bir kod veya uygun bir ayrılmış renk adı belirtmeniz yeterlidir. Aşağıda, yukarıda açıklanan çerçeve kenarlığı kontrol niteliklerini içeren bir html sayfası örneği verilmiştir: kenarlık rengi kırmızıdır, üst çerçeve yeniden boyutlandırılamaz:
Örnek: Çerçeve kenarlığı kontrolü
Kendin dene "
çerçeve_top
çerçeve_sol
çerçeve_sağ
Çerçeve kenarlığı kontrolü
Çerçevenin içinde görüntülenen sayfayı sınırlarına daha yakın konumlandırmak veya tam tersine daha uzağa taşımak istiyorsanız, nitelikleri değiştirin kenar boşluğu ve kenar boşluğu etiket . Bağlanmak kenar boşluğuçerçevenin içeriği ile üst ve alt sınırları arasındaki dolguyu tanımlar. Sözdizimi:
Bağlanmak kenar boşluğuçerçevenin içeriği ile sağ ve sol sınırları arasındaki dolguyu tanımlar. Sözdizimi:
Bu html dizesiörneğin, oluşturulan sayfayı çerçevenin kenarına yakın konumlandırır:
Sayfada istemediğiniz bir kaydırma çubuğu görüntüleniyorsa, özniteliği belirterek bu sorunu çözebilirsiniz. kaydırma="hayır" etiketinde . Ancak, çerçeve sayfanın tüm içeriğini gösterecek kadar büyük değilse, ziyaretçinin görüntülenen sayfayı kaydırmasının hiçbir yolu olmayacağını unutmayın.
Çerçeveler içindeki bağlantılar
Normal bir HTML belgesinde bir bağlantının izlenmesi şu şekilde gerçekleştirilir: bağlantıya tıklarsınız ve mevcut belge, mevcut veya yeni bir tarayıcı penceresinde yenisiyle değiştirilir. Çerçeveleri kullanırken, html belgelerini yükleme şeması normalden farklıdır ve ana fark, bir html belgesini başka bir çerçeveden bir çerçeveye yükleme yeteneğidir. Bir belgeyi belirli bir çerçeveye yüklemek için özniteliği kullanın. hedef etiket . Nitelik değeri olarak hedeföznitelik tarafından belirtilen belgenin yükleneceği çerçevenin adı kullanılır isim etiket . Çerçeve adının bir sayı veya Latin harfi ile başlaması gerektiğini de belirtmekte fayda var. Aşağıdaki isimler ayrılmış olarak kullanılır:
Harici bağlantılar için, hedef niteliğini _top veya _blank olarak ayarlamanız gerekir, böylece üçüncü taraf projeleri çerçevelerinizde görünmez, ancak tarayıcı penceresinin tamamını kaplar.
Aşağıdaki örnek, bir sayfanın üst çerçeveye yerleştirilen bir bağlantıdan sağ çerçeveye yüklendiği bir HTML belgesini göstermektedir. Sağ çerçevede açılacak olan belgenin bağlantısı:
Belgenin belirtilen çerçeveye yüklenebilmesi için konstrüksiyon kullanılır. hedef = "çerçeve_sağ", örnekte gösterildiği gibi:
Örnek: Başka bir çerçeveye bağlantı
Kendin dene "
Başka bir çerçeveye bağlantı
Tarayıcınız çerçeveleri göstermiyor
yüzen çerçeveler
eleman ("kayan çerçeve" İngilizce teriminin kısaltması), bir web sayfasının herhangi bir yerine ayrı bir HTML belgesi veya başka bir kaynak yerleştirmenize olanak tanır. Kayan (gömülü) bir çerçevenin içeriği, kaynağınızdan veya başka bir web sitesinden herhangi bir HTML sayfası olabilir. Zaten anladığınız gibi, eleman kullanılarak kayan çerçeveler oluşturulur. etiketinden farklı olarak etiketler arasına değil eklendi ve
, ve etiketler arasında ve
. öğede çerçeve ile aynı öznitelikleri kullanabilirsiniz özelliği hariç noresize- normal çerçevelerin aksine, satır içi çerçeveler ekranda yeniden boyutlandırılamaz:
Bağlanmak
Açıklama
kaynak
çerçevede görüntülenen sayfanın URL'sini belirtmek için kullanılır
yükseklik
kayan çerçeve penceresinin yüksekliğini piksel veya % olarak ayarlar
Genişlik
kayan çerçeve penceresinin genişliğini piksel veya % olarak ayarlar
isim
bağlantılarda erişilebilen çerçevenin adı
çerçeve sınırı
çerçeveler için kenarlığı ayarlar, 1 (kenarlık var) veya 0 (sınır yok) değerlerini alabilir ( HTML5'te desteklenmez)
kenar boşluğu
içerikten çerçevenin sınırına kadar sola ve sağa dolgu ( HTML5'te desteklenmez)
kenar boşluğu
içerikten çerçevenin sınırına kadar üst ve alt dolgu ( HTML5'te desteklenmez)
kaydırma
çerçeve için kaydırma çubuklarının türünü belirler ve evet (çubuklar vardır), hayır (çubuk yok) ve otomatik (gerektiğinde çubuklar görünür) değerlerini alır ( HTML5'te desteklenmez)
tam ekrana izin ver
çerçevenin tam ekran modunda olmasını sağlar
hspace
Çerçeveden çevreleyen içeriğe yatay dolgu
uzay
çerçeveden çevreleyen içeriğe dikey dolgu
hizalamak
çerçeve hizalamasını tanımlar
Aşağıdaki örnekte, kayan çerçeve boyutları piksel olarak ayarlanmıştır, ancak bunları % olarak da ayarlayabilirsiniz:
"Çerçeve" terimi bize şuradan geldi: İngilizcede. Tercüme edilmiş, bu kelime "çerçeve" anlamına gelir ve pencerenin ayrı bir alanıdır. Yapısı gereği böyle bir bölüm tamamen tamamlanmış bir HTML belgesidir.
Bireysel çerçeveler, tarayıcı pencerelerini yan yana yerleştirilmiş alanlara böler. Bu durumda, çerçevelerin her birinin içinde kendi tam teşekküllü sayfası yüklenir. Çerçeve teknolojisi hala birçok tartışmaya neden oluyor, ancak popülaritesinin zirvesinin çoktan geçtiği söylenmelidir. Bu teknoloji artık kullanımdan kaldırılmıştır ve normal çerçeveler artık HTML5'te desteklenmemektedir.
Teknolojinin tarihi
Bugün nihayet çerçeve teknolojisi ile çalışmaktan uzaklaşma kararının verildiğini söyleyebiliriz. https://www.w3.org/TR/html5-diff/#obsolete-elements sitesi, böyle bir yapı çerçevesi, çerçeve kümesi ve çerçeve yok oluşturmak için normal etiketlerin kullanımdan kaldırıldığını açıkça belirtir. Bir argüman olarak, böyle bir yapının kullanılmasının sitelerin kullanılabilirliğini ve ağdaki kullanılabilirliğini olumsuz yönde etkilediğine dair veriler verilmektedir.
Fakat modern teknolojiler IFRAME öğesini destekler. Kullanımı, sayfalardaki metin bloklarına çerçeve eklemenizi sağlar. Aynı zamanda, bu tür öğeler metnin kendisine göre hizalanma yeteneğine sahiptir. Önemli nokta: Satır içi çerçeveler prensip olarak yeniden boyutlandırılamaz. Yeniden boyutlandırma için karşılık gelen bir öznitelikten yoksundurlar.
Gelecekte, teknolojideki sıçramalar ve sınırlar olmadan, çerçevelerin sürekli kullanımı olası değildir. İnternet teknolojilerinin standartlaştırılmasında lider kuruluş olan W3C'nin, bu tür yapıların web sitesi geliştiricileri tarafından kullanılmaması gerektiğini açıkça belirttiğini hatırlamakta fayda var.
Yani, ilke olarak çerçeveler, yeni kaynaklar oluşturulurken sayfaların yapısı için kullanılmamalıdır. Ancak mevcut sitelerin desteklenmesi ve iyileştirilmesi ile teknolojinin özellikleri ve kullanımları hakkında bilgi sahibi olmak çok faydalı ve üretken olacaktır.
Çerçeve Avantajları
Çerçeve teknolojisinin avantajları arasında kullanım kolaylığı, yüksek hız, pencerenin belirli alanlarında bilgileri doğru bir şekilde konumlandırma yeteneği vardır.
Çerçevelerin kullanılması, site ile çalışma sürecinde iletilen trafik miktarında tasarruf sağlar. Sonuçta, başka bir bilgi bölümüne erişirken, genellikle sayfanın yalnızca bir bölümü güncellenir ve kodunun tamamı güncellenmez.
Bu yapı, kaynakların içeriğinde gezinmek için ilginç fırsatlar sunar. Gerçekten de, tarayıcı penceresinin içinde komşu çerçevelerde çeşitli bilgi bloklarını görüntüleyebilirsiniz. Kullanıcıların, bir çerçeve içinde arama yapmanın, böyle bir işlemi ayrı bir sayfada gerçekleştirmeye eşdeğer olduğunu bilmeleri önemlidir.
Siteyle çalışma sürecinde, diğer teknolojik çözümleri kullanarak uygulanması zor olan ayrı bir bölümün boyutunu dinamik olarak değiştirebilirsiniz.
Olası dezavantajlar
Çerçeveleri kullanan sitelerin çalışmasıyla ilgili sorunlar yavaş yavaş birikti, ancak bugün eşiğe ulaştılar. Ana dezavantajlar arasında:
Yetersiz kullanılabilirlik. Bugün, küçük ekran çözünürlüğüne sahip mobil cihaz ve tablet kullanıcılarının payı artıyor ve halihazırda masaüstü bilgisayarlar ve dizüstü bilgisayarlar. Ve burada çerçevelerin kullanımı, sayfaların üzerinde görüntülendiğinde uyarlanabilirliği ile ilgili ciddi sorunlar yaratır. çeşitli cihazlar. Bu sorunun şu anda pratik bir çözümü yoktur.
Çeşitli programlar için site erişilebilirliğinin bozulması. artan miktar ek programlar(örneğin, ekran okuyucular) bilgilerin çok daha kötü okunabilirliğini ortaya çıkarır.
Yanlış sayfa görüntüsü. Genellikle, böyle bir yapıya sahip sayfaların düzeni, tasarım açısından tarayıcılarda yanlış görünür. Ve bu teknolojinin özelliklerinden kaynaklanmaktadır. SEO açısından, sayfanın html düzeninde çerçevelerin kullanılması son derece istenmeyen bir durumdur.
Tüm yapı için tek bir adresin varlığı. Sonuç olarak, böyle bir sitenin iç sayfalarına yer işareti konamaz. Bu, kullanıcılar için rahatsızlığa yol açar.
Arama motorları tarafından hatalı indeksleme. Bir sayfanın oluşturulduğu birkaç tam teşekküllü belgenin sitesinde bulunması, arama motorlarının çalışmalarını önemli ölçüde karmaşıklaştırmaktadır. Bu, önemli indeksleme hatalarına yol açar. Sonuç olarak - konuların ve sayfa adreslerinin yanlış tanımlanması, indekslemeden kritik içeriğin kaybı.
Prestij dışı. Bu, ağdaki kaynaklar için oldukça sıra dışı bir dezavantajdır. Yine de, sitelerin çerçeveler üzerindeki yerleşiminin modası geçmiş olması gerçeğinin, bu tür kaynakların yazarlarının ve sahiplerinin geriye dönük olarak kabul edilmesine yol açtığı söylenmelidir. Ama bireysel istisnalar var. Sohbet barındıran modern siteler bile genellikle çerçeve kullanır.
Arama motorları tarafından indeksleme çerçeveleri
Arama motorlarından gelen bilgiler net bir şekilde bize çerçeveli sitelerin çok daha yavaş indekslendiğini söylüyor. Bu durumda, genellikle yapının kendisiyle ilgili hatalar meydana gelir. Gerçekten de, çerçevelerin her birinde tam teşekküllü bir İnternet sayfası görüntülenir. Ve sitenin sadece böyle bir kısmı indeksleme tabanına girebilir.
Bu tür indekslemenin olumsuz yanı, kullanıcının sayfanın içine gittiğinde genellikle menüyü ve diğer gezinme mekanizmalarını görmemesidir. Ve bu şaşırtıcı değil. Bu durumda çerçeveyi güncellemenin soruna bir çözüm olmadığını anlamalısınız. Sonuçta, tüm gezinme mekanizmaları başka bir kapsayıcıya yerleştirilir.
Diğer bir sorun da, kap yapısının ana sayfasının genellikle yalnızca başlığı, meta etiketlerin açıklamasını ve FRAMESET etiketini içermesidir. Ve bu mantıklı görünüyor - sonuçta, anlamlı içerik ayrı belgelere yerleştirilir. Site ziyaretçisinin sayfada çerçevede göreceği onlardır.
Ama burada arama robotu böyle bir sayfa neredeyse hiç dizine eklenmez. Ziyaretçiler için yararlı olan hiçbir içerik bulamıyor. Arama botları, gövde etiketinin içine yerleştirilen bilgileri almaya ve dizine eklemeye çalışacak şekilde yapılandırılır. Kullanıcı için yararlı içerik araması burada gerçekleşir. Ancak çerçeve sayfasında böyle bir etiket yok, yerine FRAMESET geliyor.
NOFRAMES kullanımı ile bu sorun kısmen çözülebilir. Ancak birçok sitede, ona erişirken, yalnızca tarayıcının çerçeveleri desteklemediği bilgisi verilir. Ve sayfayı görüntülemek için başka bir program kullanmanız gerekir.
Bu tür durumlar, siteye girdiklerinde menü ve görüntülenmesi gereken diğer bilgileri göremeyen kullanıcılar için bir çok sorun yaratır. Siteye çerçeve yerleştirilirse SEO açısından parametreleri azalır. Aynı zamanda, kullanıcı davranışı istatistikleri, kaynağın arama motorları arasındaki otoritesinin düştüğünü göstermektedir. Bu kesinlikle site trafiği üzerinde olumsuz bir etkiye sahiptir.
Arama motorları ve indeksleme botlarının iç içe ve çoklu çerçeve yapılarını işlemesi özellikle zordur. Her kapsayıcının ayrı bir belgenin tüm özelliklerine sahip olması, ancak tam gezinme ve diğer bilgileri içermemesi durumu daha da karmaşık hale getiriyor.
Sayfalarda doğru linkleri kullanarak arama motorlarının işini kolaylaştırabilirsiniz. Bu durumda, sayfanın her bir bölümünde bulunabilmeleri için tüm menü bağlantılarını çoğaltmak gerekir. Ancak bu, siteyi optimize etme ve siteyle ilgili bilgileri güncelleme çalışmalarını belirgin şekilde karmaşıklaştırır ve yavaşlatır.
Birçok optimize edicinin ve web yöneticisinin deneyimi, çerçevelerdeki sayfaların üst sıralarda yer almadığını da gösteriyor. Arama Sonuçları. Bu, indeksleme tabanına dahil olsalar bile olur.
Çerçevelerde web sitesi tanıtımının özellikleri
Bazı arama motorları, çerçeveli dosyaları yanlış veya çok yanlış bir şekilde indeksler. Sonuç olarak, dizin tabanı (olması gerektiği gibi) ana kaynakların adresleriyle değil, alt sitelere bağlantılarla doldurulur.
Siteleri çerçevelere dayalı olarak indeksleme sorunlarını en aza indirmek için, bunları tanımlarken özel etiketler ve parametreler kullanılır. Konteyner yapısının ana unsuru çerçeve kümesidir. yerine geçen o kaynak kodu standart gövde;. Yapıdaki her bir kap, bir çerçeve ile tanımlanır. Sayfa kodundaki numarası, görüntülendiğinde tarayıcı penceresinde görüntülenen ayrı bölümlerin sayısına karşılık gelir.
Bu etiketler yerleştirilmelidir ana sayfa ve ardından her birinin içindeki içeriği çoğaltın.
Bildiğimiz gibi, aynı tarayıcı görünümünde aynı anda iki HTML belgesi yükleyemiyoruz. Bu nedenle, tüm sayfalarda aynı gezinme menüsüne sahipsek, kullanıcı sitenin bir Web sayfasından diğerine her geçişinde tam olarak aynı kod parçasını indirecektir. Menünün kendisi küçük olsa bile, Rus kullanıcılarının sahip olduğu iletişim kanalları çok büyük olmadığından ve menünün yüklenmesi en az birkaç saniye sürebildiğinden, bu en uygun seçenek değildir. Değişmez site öğelerinin yeniden yüklemeye gerek kalmadan her zaman kullanıcının görünümünde kalmasını sağlayabilir miyiz? Olabilmek.
Tek bir görünümü, her biri tek bir HTML belgesi görüntüleyen birden çok dikdörtgen bölgeye bölecek bir belge oluşturabiliriz. Her biri aslında ayrı birer görüntü alanı olan bu dikdörtgen alanlara denir. çerçeveler.
Bu şekilde, sol ve/veya üst gezinme menüsünü görünüm alanında kalıcı olarak bırakabilir ve sitenin yalnızca gerekli olan kısmını yeniden yükleyebiliriz.
Herhangi bir görünüm alanı gibi, çerçeveler de, tamamen görüntülenebilir alana sığmıyorsa, kullanıcının çerçevenin tüm içeriğini görmesine izin veren kaydırma çubuklarına sahip olabilir. Web yöneticileri arasında sürekli tartışmalara neden olan çerçevelerin bu özelliğidir. Bazıları, değerli alanı kapladıkları ve kullanıcının dikkatini dağıttıkları için, bunun gibi kontrollerin ana görünümün iç alanında olmaması gerektiğini savunuyor. Bazıları, bu eksikliklerin, yavaş bağlantılar karşısında Web sayfalarını yeniden yüklemeyi kolaylaştırmak için ödenecek çok büyük bir bedel olmadığını iddia ediyor. Öyle ya da böyle, herkes kendi başına çerçeve kullanma olasılığına karar vermelidir.
HTML'de iki tür çerçeve vardır: normal ve "kayan". Sıradan çerçeveler kullanırsak, tüm görüntü portunu çerçevelere bölen bir belge oluşturulur ve belirli HTML belgeleri zaten bunlarda görüntülenir. Kayan bir çerçeve kullanırsak, herhangi bir özel numara olmadan normal bir HTML belgesine dahil edilebilir. Bu iki çerçeve türü arasındaki farkı bir örnekle göreceğiz.
etiketi kullanılarak çerçeveli bir belge oluşturulur. ve kapanış ikizi . Bu iki etiket içinde, tek tek çerçeveleri bildirmek için yapılar ve tarayıcı çerçeveleri tanımıyorsa tarayıcının görünüm alanında görüntülenen bilgiler bulunur. Bireysel çerçeveler, bir çift etiket kullanılarak oluşturulur ve . Ve tarayıcı çerçeveleri desteklemediğinde görüntülenen bilgiler, etiketi kullanılarak HTML belgesine gömülür. . Ama her şey yolunda.
etiketin temeli bakış açısını birkaç parçaya bölmektir. Bunu yapmak için, etiketin iki ana parametresi vardır: karelerin sayısını ve boyutunu dikey ve yatay olarak gösteren satırlar ve sütunlar. Bu dikdörtgen bir masa yapısı oluşturur. Daha detaylı bir bölme yapmamız gerekirse, örneğin pencerenin sol tarafında dikey olarak bir çerçeve ve pencerenin sağ tarafında yatay bir kenarlıkla birbirinden ayrılan iki çerçeve, o zaman iki etiket oluşturabiliriz. , biri diğerinin içinde. Ama yine de, etiket parametrelerini göz önünde bulundurun daha ayrıntılı olarak.
Parametre cols görünüm alanında yatay olarak çerçevelerin sayısını ve boyutunu belirtmek için kullanılır. Parametre değeri, çerçeve boyutlarının virgülle ayrılmış bir listesidir. Her zamanki gibi, boyutu belirtmek için mutlak ve çoklu değerlerin yanı sıra yüzdeleri de kullanabiliriz. Varsayılan değer %100'dür, yani ana görünüm alanı dikey olarak bölünmez.
Parametre satırlar görüntü alanında dikey olarak çerçevelerin sayısını ve boyutunu belirlemenizi sağlar.Ayar değerlerinin özellikleri cols parametresi ile tamamen örtüşür.
Ancak bir çerçeve yapısı ile HTML belgelerinin oluşturulmasının nasıl görüneceğine dair bir örneğe bakalım. Navigasyon menüsü için solda bir çerçeve ayırmamız gerektiğini ve kalan alanı Web sitesinin ana sayfalarından bilgileri görüntülemek için kullanmamız gerektiğini varsayalım. Bu durumda, viewport'u iki bölüme ayıracağız. Menü için yüz elli piksel genişliğinde bir kare seçeceğiz ve kalan alan ikinci kare tarafından işgal edilmelidir. Bu Web sayfası yapısı, Liste 1-31'de gösterilen kod kullanılarak uygulanır.
Liste 1.31
. 0peuMbi
Üzgünüz, tarayıcınız çerçeveleri desteklemiyor. En son yazılım sürümünü edininр>
HTML belgesinin koduna ve bu belgenin tarayıcı tarafından nasıl görüntülendiğine daha yakından bakalım. Öncelikle listede etiket olmamasına dikkat etmelisiniz. ve</vücut>. Bu etiketler, aradaki her şeyin görüntü kodu olduğunu söyler ve etiket
tarayıcıya bu belgenin yalnızca bir görünüm kırılım yapısı sağladığını bildirir.
etikette
tek parametre sütunlarını kullandık. Değeri, iki boyut tanımının bir listesiydi. Listeden, birincinin, yani sol çerçevenin yüz elli piksel genişliğe sahip olduğunu görebilirsiniz. İkinci kare için genişliği bir kata ayarladık. Daha sonra bu genişliğin hangi sayının katı olacağını belirtmediğimiz için çerçeve tüm boş alanı kapladı, istediğimiz buydu.
Pirinç. 1.30. 1.31 listesinde gösterilen dosyanın görüntülenmesinin sonucunu gösteren tarayıcı penceresi
Başlangıç ve bitiş etiketleri arasında iki etiket gönderdik .
Onlar hakkında kapsamlı ve ayrıntılı bir tartışma henüz gelmedi, ancak şimdilik kendimizi bu etiketlerin her bir çerçeveyi ayrı ayrı bildirdiği ve özelliklerini belirlediği gözlemiyle sınırlayacağız. Bizim durumumuzda, değeri bu çerçevede görüntülenecek HTML belgesinin URL'si olan yalnızca bir zorunlu src parametresi kullandık.
etiketini de kullandık. . Onunla kapanış çifti arasında çerçeve teknolojisini desteklemiyorsa tarayıcının görünüm alanında görüntülenecek mesajın HTML kodunu içerir. Şimdi, elbette, böyle bir tarayıcıyla tanışmak son derece zordur, etiket, metin tarayıcılarının eski zamanlarından beri HTML spesifikasyonunda kalmıştır, ancak yalnızca kullanıcılara nezaket nedenleriyle bile olsa kullanmaya değer.
Resimde (Şekil 1.30), görünümün aslında iki bölüme ayrıldığını ve her birinin daha önce oluşturduğumuz HTML dosyalarından birini görüntülediğini görebilirsiniz. Bu durumda, kullanıcı çerçeveleri bağımsız olarak yeniden boyutlandırabilir, çünkü aralarındaki kenarlık olarak da adlandırılır. ayırıcı, mobil. Kullanıcının fare imlecini üzerine getirmesi, ana fare düğmesine basması ve bırakmadan kenarlığı istenen konuma taşıması yeterlidir.
Çerçevelerin yerleştirilmesindeki tek kısıtlama, çerçeve kümesinin açık tablo yapısıdır. Peki ya görünümün ilk bölümündeki menünün iki kareye bölünmesini istiyorsak? Klasik yaklaşım buna izin vermez. Bu nedenle iç içe yapılar kullanılabilir.
Ana görünüm penceresinin, ikisi bir sütunda, biri diğerinin altında bulunan ve üçüncüsü kalan tüm boş alanı kaplayan üç kareye bölünmesini sağlamak için aşağıdaki kod parçacığını kullanmalısınız:
Bu örnek, bir bloğun nasıl başka bir aynı bloğun içine yerleştirdik. Ve elbette, etiketleri kullanmalısın . Bu arada, onları henüz ayrıntılı olarak düşünmedik. Bunu yapmanın zamanı geldi.
Etiket tek bir çerçevenin özelliklerini ayarlamak için tasarlanmıştır. Çerçevenin genişliği ve yüksekliği tasarımda ayarlandığından , özelliklerin geri kalanını ayarlamak bize kalır.
Parametre isim benzersiz bir çerçeve adı belirlemenizi sağlar. id parametresi ile karıştırılmamalıdır. name parametresiyle ayarladığımız ad, belgeyi üst çerçeveye değil, başka bir çerçeveye yüklemek gerektiğinde köprü etiketlerinde kullanılır.
Parametre kaynak, Bir önceki listeden de gördüğümüz gibi, istenen çerçevede görüntülenmesi gereken HTML belgesinin URL'sini ayarlamak için kullanılır.
Parametre çerçeve sınırı verilen çerçevenin kenarlığının görüntülenip görüntülenmeyeceğini belirtmek için kullanılır. Gerçek şu ki, görünür bir sınır oluşturmak gerekli olmaktan uzaktır. Bu parametrenin değeri ya sıfırdır ya da birdir. Birin varsayılan değeri, verilen çerçevenin görünür bir kenarlığa sahip olacağı anlamına gelir. Boş bir değer kullanıldığında çerçeve kenarlığı görünmez olacaktır.
Parametre kenar boşluğu verilen çerçevenin kenar boşluklarının genişliğini piksel olarak ayarlamanıza izin verir,
marginheght parametresi, verilen çerçeve için piksel cinsinden kenar boşluklarının dikey boyutunu ayarlamayı amaçlar.
Parametre noresize kullanıcının çerçevenin sınırlarını hareket ettirememesi, bu şekilde yeniden boyutlandırması gerekiyorsa kullanılmalıdır. Etikete dahil edersek , kullanıcı bu çerçeveyi yeniden boyutlandıramaz. Parametre değerler olmadan kullanılır.
Parametre kaydırma Web sayfasının kullanıcısının çerçevenin kaydırma çubuklarının görüntüsünü kontrol etmesine izin verir. Değer, önceden tanımlanmış üç anahtar kelimeden biridir. Varsayılan auto değeri, çerçevenin kaydırma çubuklarının yalnızca çerçevenin içeriği görüntüleme alanına tam olarak sığmadığında görüneceği anlamına gelir. Evet değeri, tarayıcıya, görüntüleme alanı ne kadar büyük olursa olsun ve çerçeve içeriğinin buna ne kadar eşit şekilde "uyacağından" bağımsız olarak, her zaman bu çerçeve için kaydırma çubuklarını görüntülemesini söyler. no değeri, tarayıcının çerçeveyi kaydırma çubukları olmadan görüntülemesine neden olur. Kaydırma çubukları en sinir bozucu kullanıcı bileşeni olsa da, bu değeri iyi bir sebep olmadan kullanmamalısınız. Sayfamızı yükleyen kullanıcı için hangi monitör çözünürlüğünün ayarlandığını ve tarayıcının görüntüleme penceresinin boyutunun ne olduğunu önceden bilmediğimizi bir kez daha tekrarlıyorum. Çerçevenin içeriğini tam olarak görüntülemek için yeterli alan yoksa ve kaydırma çubuğu yoksa, kullanıcı gizli bilgileri hiçbir şekilde göremeyecektir.
Şimdi etiket seçeneklerine baktık parametrenin küçük bir sınırlamasını açıklayan küçük bir ekleme yapılmalıdır. kaynak, isteğe bağlı etiketle yakından ilgili . Mesele şu ki, bu etiket ile son karşılığı arasında kullanıcının tarayıcısı çerçevelerin görüntülenmesini desteklemiyorsa görüntülenecek bazı içerikleri barındırıyoruz. Bu içerik elbette HTML etiketleri kullanılarak da yapılandırılabilir. Bu nedenle, burada "çapa" olarak da adlandırılan köprüler ve yer imleri kullanılabilir. Dolayısıyla, bu parçada böyle bir yer imi oluşturursak, bu yer iminin URL'sini herhangi bir çerçeve için src parametresinin değeri olarak yapamayız.
HTML belgesinin varsayılan olarak yükleneceği çerçeveyi de belirtebiliriz. Bildiğimiz gibi, köprü etiketi <а>
değeri, köprü tarafından gösterilen HTML belgesinin içeriğinin görüntüleneceği çerçevenin adı olan hedef parametreye sahiptir. Ancak bu parametreyi etikette kullanırsak , hatırladığımız gibi, HTML belgesinin başına yerleştirilir, ardından parametrede eksik bir URL'ye sahip tüm köprüler href, işaret ettikleri belgeleri tam olarak etikette adı belirtilen çerçeveye yerleştirecektir. .
Şimdiye kadar, etiketi ayrı olarak düşünmedik. . Ancak gerçek şu ki, bu etiketin ortak olanlar dışında herhangi bir benzersiz parametresi yok ve uygulama mekanizmasını önceki örneklerde görebiliyorduk. Bu nedenle, üzerinde uzun süre durmayacağız.
Şimdiye kadar, tarayıcının görüntü alanını tamamen ayrı bölgelere ayıran ve bunları kullanmak için özel bir yapıya sahip belgeler gerektiren normal çerçevelere baktık. Ancak, standart bir nesne olarak normal bir HTML belgesine basitçe eklenebilecek başka bir çerçeve türü daha vardır. En önemlisi, bu bir grafik görüntü eklemeye benzer. Böyle bir satır içi çerçeve eklemek için etiketini kullanın. Ancak, gömülü çerçeveler için grafik ve diğer nesneleri ekleme prosedürünün aksine, kapanış etiketini de kullanmalısınız. Normal bir HTML belgesine satır içi çerçeve ekleme örneğine bakalım ve bir tarayıcıda görüntülendiğinde bu belgenin nasıl göründüğünü görelim.
Liste 1.32
"http://www.w3.org/TR/html4/strict.dtd">
<р>Satır içi metin çerçeveр>
Listeden ve ekteki resimden (Şekil 1-31) görebileceğiniz gibi, satır içi çerçeveleri kullanma prosedürü hiçbir şekilde karmaşık değildir. Ancak listede, her zaman olduğu gibi, en basit varsayılan seçeneği kullandık ve sonuçta çerçeve, yerleşik olsa bile, doğal olarak parametreler kullanılarak ayarlanan oldukça kapsamlı bir görüntüleme özellikleri listesine sahip olmalıdır. Şimdi onları değerlendireceğiz.
Parametre isim bu satır içi çerçevenin adını belirlemenizi sağlar. Parametrenin değeri bir düz metin dizesidir. Bundan sonra, bu çerçeve köprülerde gösterilebilir. Böylece, gömülü çerçevenin içeriğini dinamik olarak değiştirme yeteneği elde ederiz.
Parametre kaynak satır içi çerçevenin içeriğini ayarlamak içindir. Parametrenin değeri, bu satır içi çerçeveye yüklenecek HTML belgesinin URL'sidir.
Parametre çerçeve sınırı, diğer birçok parametreyle birlikte, düzenli çerçevelerden açıkça miras alınır. Tıpkı orada olduğu gibi, tarayıcıya çerçevede bir kenarlık gösterilip gösterilmeyeceğini söyler. Değer olarak sıfır ve bir kullanılır. Birin varsayılan değeri, satır içi çerçevenin kenarlığının görüntülenmesi gerektiğini belirtir. Sıfır değeri, sınırı görünmez yapar.
parametreler kenar boşluğu ve kenar boşluğu sırasıyla satır içi çerçeve kenar boşluklarının genişliğini ve yüksekliğini ayarlayın. Parametre değerleri, boyutları piksel cinsinden ifade eden sayılardır.
Pirinç. 1.31. 1.32 listesinde gösterilen dosyanın görüntülenmesinin sonucunu gösteren tarayıcı penceresi
Parametre kaydırma satır içi çerçeve kaydırma çubuklarının görüntüsünü kontrol eder. Değer, önceden tanımlanmış üç anahtar kelimeden biridir. Varsayılan auto değeri, kaydırma çubuklarının yalnızca çerçevenin içeriği çerçevenin kendisinden daha büyük olduğunda görüneceği anlamına gelir. Evet değeri, kaydırma çubuklarının yine de görüntülenmesini sağlar ve by değeri, tarayıcının bu çerçeve için bu kaydırma çubuklarını görüntülemesini engeller.
Parametre hizalamak Web sayfasının içeriğinin geri kalanına göre satır içi çerçevenin dikey veya yatay hizalamasını ayarlamamızı sağlar. Olası değerler aynı isimli tag parametresi ile birebir aynıdır. bu yüzden onları tekrarlamaya gerek yok. Ve bu değerlerin eyleminin sonucu da bizim tarafımızdan daha önce değerlendirildi.
Parametre yükseklik bir satır içi çerçevenin dikey boyutunu açıkça ayarlamak için tasarlanmıştır. Bu parametrenin değeri olarak herhangi bir boyut ataması kullanılabilir.
Parametre Genişlik gömülü çerçevenin genişliğini ayarlamanıza olanak tanır. Değer piksel, kat veya yüzde olarak belirtilebilir.
Ve bu, çerçevelerle ilgili tartışmamızı sonlandırıyor. Çerçeveleri etkili bir şekilde kullanmak için onlar hakkında bilmemiz gereken her şeyi biliyoruz.
Merhaba, blog sitesinin sevgili okuyucuları. Bugün Html dilindeki çerçevelerden bahsedeceğiz. En baştan başlayacağımız, yani ne tür bir hayvan olduğu belli. Ayrıca hypertext işaretleme dilinin güncel versiyonunda ve .
Makalenin sonunda, Html kodunda satır içi çerçeve oluşturma sürecinin ve klasik yapılarının (zaten nadiren kullanılmaktadır) ayrıntılı bir açıklamasından sonra, bunlar üzerinde bir site oluşturmanın uygunluğuna değineceğiz ve ayrıca olası yolları tartışacağız. blogumun örneğini kullanarak bunları mevcut zaman diliminde kullanın.
Nedir ve Iframe'in Frame'den farkı nedir?
Bu ne? Yalnızca web sitelerinde değil, programlara yönelik herhangi bir uygulamada da kullanılabilecekleri, ancak bir web sayfasının veya uygulamanın penceresinin, her biri ayrı bir belgeyle yüklenen birkaç alana bölünmesiyle farklılık gösterdiği ortaya çıktı. Ayrıca bu çerçeve alanları birbirinden bağımsız davranır.
Muhtemelen, hemen hemen hepinizin karşılaştığı, kullanımlarının en belirgin örneği, bilgisayarınızda yüklü olan birçok programın sahip olduğu sözde yardım dosyalarıdır (yardımlar).
Soldaki pencereye yardım menüsü içeren dosya yüklenir ve sağdaki pencerede seçilen menü öğesine karşılık gelen belge görüntülenir. Böyle bir yapının, sağda yeni bir belge açarken menü ile dosyayı sol pencereye yeniden yüklememeye izin vermesi dikkat çekicidir. Bu tam olarak ne çerçeve kullanmanın ana avantajı html'de.
Aslında, bu öğelerin adı tam olarak bağımsız bir pencere olarak yorumlanmalıdır. Çerçevelerin yardımıyla, büyük bir pencereyi birkaç parçaya bölme olanağına sahibiz ve bu da ayrı bağımsız belgeler (sayfalar, metinler, resimler, videolar vb.) için alıcı görevi görebilir.
Köprü metni biçimlendirme dilinde bir çerçeve yapısı nasıl oluşturulur? Şu anda ana olan Html 4.01 standardından (sınıflandırmaya göre) bahsedersek, bunun için üç eleman kullanılır - Frame, Frameset ve Noframes.
Iframe - Html 5 standardında gömülü bir çerçeve
Html 5 standardı hakkında konuşursak (geleceğimiz, bazı öğeleri zaten birçok tarayıcı tarafından desteklenir), o zaman Çerçeve, Çerçeve Kümesi ve Çerçevesiz etiketlerin yanı sıra klasik çerçeve yapısı olmayacak, bunun yerine tek bir Iframe etiketi (yerleşik çerçeve) , başlangıçta bahsedeceğiz ve ardından tüm dikkatimizi şu anda kullanılan 4.01 sürümünden klasik şemaya çevireceğiz.
Iframe, aşağıda tartışılan klasikten farklı olarak, Body etiketinin Frameset etiketleriyle değiştirilmesini gerektirmez. Şunlar. bu etiket normal sayfalara, örneğin bir paragrafın içine veya başka herhangi bir yere eklenebilir. Özünde, bu öğe, daha önce incelediğimiz Img etiketine çok benzer.
Tam olarak bir satır içi öğe gibi davrandığından, değiştirilebilir içerikle satır içidir, ancak içinde görüntülenir yabancı harici içerik. Html dilinde bu tür yalnızca dört öğe vardır - Img, Iframe, Object ve Embed. Bu nedenle, kahramanımız, boyutu bu etiketin nitelikleri kullanılarak belirlenen alana yüklenecek harici bir dosyanın varlığını ima eder.
O. iframe, içine harici bir nesnenin (video gibi) yüklendiği bir dize öğesidir. Ve sayfaya yüklenmesi gereken bu dosyanın yolunu belirtmek için özel Src niteliği kullanılır. Ancak Img'den farklı olarak, Iframe öğesi eşleştirilmiştir, yani. ayrıca bir kapanış etiketi var:
Bu örnek, bir Iframe kullanan bir sayfada bir Youtube videosunun görüntüsünü gösterir. Dış dosyanın yükleneceği çerçevenin (pencerenin) alanını sınırlamak için öznitelikler sağlanmıştır. Genişlik ve yükseklik değerleri piksel cinsinden belirtilen:
Şunlar. bu etiket, içine bazı harici nesnelerin yüklendiği bir alan oluşturur (sitenizden mi yoksa başka bir kaynaktan mı olduğu önemli değildir). Alanın genişliği ve yüksekliği Genişlik ve Yükseklik kullanılarak ayarlanır ve bu nesnenin yolu Src özniteliğinde belirtilir.
Iframe öğesi, tüm bu öznitelikleri değiştirilen içeriğe sahip benzer satır içi etiketlerden (yukarıda bahsedilen Img gibi) devraldı. Eh, o da resimlerden nitelikler aldı hspace ve vspace, çerçevenin kenarlarındaki girintileri, onu saran metne ayarlamanıza olanak tanır.
Yerleşik çerçevenin hizalanmasının, Html - 'deki resimleri incelerken gördüğümüz gibi tam olarak aynı şekilde yapılması da önemlidir. Hala aynı hizala, ancak olası değerlere sahip Iframe etiketi için Bottom, Top, Middle, Left ve Right.
Ancak bu öğe, aşağıda çok, çok ayrıntılı olarak konuşacağımız klasik çerçeve yapısından Çerçeve etiketinden de birkaç özellik aldı. Bu nitelikler, değeri bir değer olarak kullanılabilecek Ad'ı içerir, böylece ihtiyacınız olan belge, bağlantıya tıkladığınızda bu çerçevenin penceresinde açılır (aşağıda daha fazlasını okuyun).
Ayrıca Iframe'de, Frameborder özelliği, yalnızca iki değeri olan Frame etiketinden taşındı - ya 0 (çerçevenin etrafındaki çerçeve görüntülenmez) veya 1 (çerçeve görünür). Varsayılan değer Frameborder=1'dir, bu yüzden onu kaldırmak için Frameborder="0" yazmanız gerekir:
Kaydırma özniteliği de Çerçeve'den bu öğeye taşınmıştır; bu öğe, çerçevedeki varsayılan Otomatik kaydırma çubukları değerine sahiptir ve içerik, görüntülenmesi amaçlanan pencereden daha büyük olduğunda gerektiği gibi görünecektir.
Marginwidth ve Marginheight nitelikleri de Frame öğesinden geldi. Aşağıda metinde ayrıntılı olarak tartışılacaklar, ancak kısaca - girintiyi çerçevenin kenarlarından içine yerleştirilen içeriğe genişlik ve yükseklik olarak ayarlamanıza izin veriyorlar.
Daha önce de belirttiğim gibi, Iframe kullanmanın açık bir örneği:
Iframe'i doğrudan web sayfasına ekleyerek, videonun çıktısını YouTube'dan alacaksınız. Bu öğenin, değiştirilebilir içeriğe sahip satır içi öğelerin ve aslında şimdi tartışılacak olan klasik çerçevelerin bir karışımı olduğu sonucuna varıyoruz.
Çerçeve ve Çerçeve Kümesi etiketlerine dayalı çerçeveler - yapıları
Bu nedenle, klasik bir çerçeve yapısı oluşturmak, normalde öğe tabanlı kabının yerini alan herhangi bir belgede bulunması gereken açılış ve kapanış Body etiketi yerine Html koduna yazdıklarınızla başlar. çerçeve seti.
Buradaki temel nokta, Body öğesinin bu durumda kullanılamamasıdır - Body (normal bir belge için) veya Frameset (bir belge çerçeve yapısı oluştururken):
Ana çerçeve içinde oluşturduğumuz her çerçeve ayrı bir eleman kullanılarak oluşturulur. çerçeve. Bu etiket tektir ve içinde bu pencereye yüklenmesi gereken belgenin yolunu belirledik.
Henüz değinmediğimiz üçüncü unsur ise Çerçevesiz. Eşleştirilmiştir ve kendi içinizde, tarayıcı tarafından işlenecek ve yalnızca aynı tarayıcı (veya diğer görüntüleme cihazı) çerçeveleri desteklemiyorsa web sayfasında görüntülenecek bir metin yazmanıza olanak tanır. Bu, örneğin mobil cihazlar için bir tarayıcı kullanırken olabilir.
Genellikle Noframe'ler, çerçeve yapısını işlemenin imkansızlığı ile mevcut durum hakkında bilgi eklemekle kalmaz, aynı zamanda onları kullanmadan çalışmaya devam edebileceğiniz diğer sayfalara gitme yeteneği de ekler. Onun hakkında başka bir şey söylemek zor, o yüzden devam edelim.
Gövde etiketi yerine kullanılan Çerçeve kümesi öğesinin, görünüm alanı için ayrılan tüm alanı kapladığı ve bu bölge içinde ayrı Çerçeve öğeleri kullanılarak çerçevelerin oluşturulacağı ortaya çıktı. Bu bağlamda, soru ortaya çıkıyor - görüş alanının ayrı pencereler arasında nasıl bölüneceği veya başka bir deyişle, her birinin boyutunun nasıl ayarlanacağı.
Bu, Frameset öğesine uygun nitelikler eklenerek yapılır. İki tane var - Sütunlar ve Satırlar. Sütunlar, büyük bir pencerenin dikey çerçevelere veya sütunlara bölünmesini ayarlar ve Satırlar, onu yatay pencerelere veya satırlara bölmenize olanak tanır.
Frameset ve Cols and Rows özniteliklerine dayalı bir yapı oluşturma
Html Frameset etiketinin Sütunları ve Satırları için değerler, virgülle ayrılmış sayılardır (boşluksuz). Bu sayılar, sonuç olarak elde etmek istediğimiz pencerelerin oranlarını belirler. Bu nedenle, Sütunlarda veya Satırlarda virgülle ayrılmış kaç sayı yazılacak, o kadar çok çerçevemiz var ve sonuç olmalı.
Örneğin, böyle bir gösterim kullanarak, genişlik olarak 2:5:3 oranlarına karşılık gelen üç dikey sütun elde edeceğiz.
Üç çerçeve için oranları belirlediğimiz için, ek nitelikler belirtmeden de olsa, açılış ve kapanış Frameset etiketi arasına üç Frame elemanı yazmamız gerekecek:
Sonuç olarak, üç boş pencereden oluşan çerçeve yapımız şöyle görünecektir:
Bu örnekte, pencerelerin (Çerçeve) boyutlarını, görünümün genişliğinden (Sütünler kullanılırken durum budur) veya yüksekliğinden (Satırlar) alınan yüzdeleri kullanarak ayarladık. Görünüm alanını değiştirdiğinizde, çerçeve boyutları arasındaki yüzde oranı korunacaktır. Ancak yüzdeler yerine, sadece anlam ifade edecek sayıları da kullanabilirsiniz. Burada da, anlamada hiçbir zorluk çıkmaması gerektiğini düşünüyorum.
Ancak, boyut tanımlamalarında oldukça sıra dışı bir seçenek de var. yıldız işareti "*". Ayrıca, yalnızca "*" veya önünde bir sayı olan bir yıldız işareti, örneğin "3*" olabilir. Yüzdelere çok benzeyen ve Çerçeve için alanı orantılı olarak böldüğümüz anlamına gelen zor bir şey.
Bir örneğe bakalım. Şimdi, Rows kullanarak görünümü yatay satırlara bölmeyi seçelim:
Bu giriş ne anlama geliyor? Dikey olarak bize sunulan tüm görüntü alanı üç satıra bölünecektir. İlk satırın yüksekliği 200 pikselde, ikincisi - 500'de alınacaktır, ancak üçüncü satır yükseklikte kalan tüm alanı kaplayacaktır, çünkü Boyut olarak "*" kullanılmıştır.
Dikkat çekici bir şekilde, "*" ve "1*" değerleri aynı anlama gelir - kalan tüm alanı bire böleriz ve bu bir parçayı bu çerçeveye veririz (yani, kalan tüm alan).
Ama "*" değerini orantısal olarak bölmek için bir sayı ile kullanırsanız ne olduğuna bakın:
Sizce bu durumda Çerçevenin boyutları ne olmalı? İkinci satırın kesinlikle 100 piksel yüksekliğe sahip olacağı açıktır. Ancak kalan yükseklik alanı üçüncü ve ilk satır arasında nasıl bölünecek?
Saymak oldukça basittir - ikiye (2 *) dört (4*) ekleyin ve bu paydaya bölün (okul müfredatındaki kesirleri hatırlayın) iki ve dört. Şunlar. çerçeveli ilk sütunun kalan alanın üçte birini, üçüncü sütunun üçte ikisini alacağını görüyoruz. Veya başka bir deyişle, üçüncüsü birincinin iki katı olacaktır:
Çerçeve pencerelerini tek bir öznitelikte boyutlandırmak için üç yöntemi de kullanabilirsiniz, örneğin:
Sonuç olarak, Çerçevenin ilk sütununu tüm kullanılabilir alanın yüzde onunda, ikincisini 100 pikselde alacağız ve kalan üçü, kalan alanın dört, üç ve dokuzuncu oranlarında bir genişliğe sahip olacaktır. Genişlik. İşte bu, her şey basit ve açık.
Ana pencereyi yalnızca yatay ve dikey çerçevelere değil, örneğin bunların kombinasyonlarına da bölmek istiyorsanız, Çerçeve kümesi öğelerinin iç içe yapısını sütunlar için ayrı ayrı ve satırlar için ayrı ayrı kullanabilirsiniz. Örneğin, aşağıdaki ekran görüntüsünde gösterilen yapıyı elde etmek için bu yapıyı kullanmak yeterlidir:
Şunlar. önce "frameset cols="20%,80%"" kullanarak mevcut tüm alanı dikey olarak iki sütuna böldük ve sağdaki sütunun içeriğini "frame" etiketiyle belirledik, ancak bunun için bir "frame" öğesi eklemek yerine sol sütunda yeni bir "frameset rows="10%,*"" açıyoruz.
Ve bunun yardımıyla, sağ sütunu, içeriği iki “frame” etiketi kullanılarak ayarlanan çerçeveli iki satıra böldük, ardından her iki “frameset” kapsayıcısını kapattık. Her şey basit ve mantıklı.
Çerçeve öğesinin Src özniteliğinde yolu belirtin
Ama hepimiz, çerçeve kümesi öğesi ve onun yardımıyla yapıyı oluşturup boyutlarını ayarladığımız Sütunlar ve Satırlar öznitelikleri hakkında konuştuk. Şimdi doğru belgelerin doğru çerçevelerde nasıl görüntüleneceğini ve pencereleri arasında nasıl etkileşim kurulacağını bulalım.
Peki oluşturduğumuz pencerelerin görünümünü nasıl kontrol edeceğiz? Bütün bunlar, Frame etiketinin niteliklerine gömülüdür. Bunlardan ilki bahsetmeye değer kaynak. Html koduna resim eklemeyi düşündüğümüzde Img etiketinde zaten karşılaşmıştık. Özü değişmedi ve yine de çerçeveye yüklenmesi gereken belgenin yolunu belirlemenize izin veriyor.
Src'deki belgenin yolu olarak belirtilebilir. Göreli yollar genellikle kendi kaynağınızda bulunan bir belge için kullanılır, ancak başka bir siteden bir belgeyi çerçeve penceresine yüklemek istediğinizde mutlak yollara ihtiyacınız olacaktır.
Src özniteliği istenen belgenin yolu ile belirtilmemişse, pencereye boş bir belge yüklenecektir. Şahsen, bir zamanlar blogum için benzer bir şey yaptım (ek bir gezinme öğesi olarak) ve aynı zamanda barındırma sunucusunda bunun için ayrı bir klasör oluşturdum ve oraya yalnızca çerçeve yapısına sahip bir Html dosyası yerleştirmedim (ki buna dizin adını verdim). .html), ancak tümü çeşitli belge pencerelerine ve ayrıca arka plan olarak kullanılan görüntü dosyalarına yüklenebilir.
Bu nedenle, Frame etiketinin Src özelliğinde göreli bağlantıları kullanmak benim için en kolayıydı:
Dikkat çekici bir şekilde, bu koddaki tüm bağlantıları göreceliden mutlak olana (https://site/navigator/joomla.html gibi) değiştirirseniz ve bu dosyayı bir tarayıcıda açarsanız, Frame'de belirtilen belgeler sunucumdan yüklenecek ve tarayıcınızda benzer bir resim göreceksiniz. Ve çerçeve yapısına sahip dosyanızın (index.html) nerede bulunacağı önemli değildir - bilgisayarınızda veya barındırmada.
Şekilde gösterilen örnekte, normal olan sol çerçeve penceresine belirli bir menüye sahip bir sayfa yüklenir. Ancak menünün nasıl oluşturulduğu önemli değil, bağlantılarından herhangi birine tıkladıktan sonra ne olduğu önemlidir.
Bunu yaparsanız, her şey olması gerektiği gibi olur - belge sağ alt pencerede açılır. Ancak bunun için küçük bir numara uygulamak zorunda kaldım, çünkü varsayılan sürümde belge pencerenin tüm boyutuna açıldı, çerçeve yapısını değiştirdi, çünkü soldaki ve üstteki gezinme menüsüne hiç ihtiyacım yoktu. çerçeveler kayboldu.
Çerçevedeki bir bağlantıdan belgeler nasıl açılır
Bu nedenle, hiper bağlantılardan bahsettiğimizde, “A” etiketinin Target=_blank gibi bir özelliğinden bahsettik. Ne için olduğunu hatırlıyor musun? Bağlantılı belgeyi yeni bir pencerede açmak için düzeltin. Varsayılan olarak, aynı pencerede açılmalıdır, bu, target="_self" ile eşdeğerdir.
Ama bu olasılıklar Hedef sınırlı değildir. Görünüşe göre buna değer katabilirsin çerçeve adı olarak daha önce Frame etiketinin özel Ad özelliğinde belirtilen . Ardından, bu bağlantıdaki belge, tüm alanını kaplayan aynı pencerede değil, belirttiğiniz Çerçevede açılacaktır. Temizlemek? Tam olarak değilse, şimdi örnek ayrıştırılırken netleşecektir.
Öyleyse, yukarıdaki şekilde gösterilen örneğimize geri dönelim. Sağ alt (büyük) çerçevede sol pencereden linkleri kullanarak sayfaları açmamız gerekiyor. Bu nedenle yapılacak ilk şey, bu büyük pencereye Frame etiketindeki Name özniteliğini kullanarak bir ad vermektir.
Yaptı ve ona "ktona" adını verdi. Artık sol pencerede menü olarak yüklenen dosyayı güvenle açabilir ve içindeki tüm A etiketlerine Target="ktona" niteliğini ekleyebilirsiniz:
Joomla ve VirtueMart bileşeninin ortaya çıkış tarihi
Elbette, bul ve değiştir aracını tüm köprülere yerleştirmek zor olmayacak, ancak kullanmak için harika bir fırsatımız varken neden gereksiz yere kodu indirelim? özel etiket Baz Aynı makalede, Hedef boş kullanmaktan bahsettiğimizde, köprüler hakkında daha önce bahsettiğimiz .
Açılış ve kapanış Head etiketlerinin arasına base target="ktona" koymak yeterlidir ve bu belgenin Html kodundaki tüm bağlantılar "ktona" adı verilen belirtilen çerçevede yeni sayfalar açacaktır:
Bu arada, bir zamanlar var olan aracımı örnek olarak ele alırsak, üst yatay pencereden gelen tüm bağlantıların sayfalarını sol menü olarak görev yapan sol dikey çerçevede açtığından da emin olmamız gerekir. Bunun için ne yapılması gerekiyor?
Öncelikle soldaki dikey çerçeveye bir isim vermemiz gerekiyor:
Ve üst pencereye (gor.html) yüklenen dosyaya, temel hedef = "gor" öğesini eklemeniz gerekir:
Her şey, şimdi her şeyi doğru yaptık. Üst çerçeveden bağlanan tüm belgeler sol pencerede açılır ve ondan gelen tüm bağlantılar, belgeleri orta ve en büyük Çerçevede açar. Bence her şey basit ve mantıklı.
Pencerelerin görünümünü özelleştirmek için çerçeve etiketi nitelikleri
Şimdi, çerçevelerin görünümünü özelleştirmek için Çerçeve etiketinde Kaynak ve Ad dışında hangi niteliklerin kullanılabileceğini görelim. İle başlayalım kaydırma. Bununla, çerçeve yapınızın her penceresi için kaydırma çubuklarının görüntüsünü ayrı ayrı özelleştirebiliriz.
Kaydırma varsayılan olarak Otomatik olarak ayarlanmıştır - tarayıcı çerçeveye yüklenen belgenin boyutuna göre kaydırma çubuğunun görüntülenip görüntülenmeyeceğini otomatik olarak belirleyecektir. Belge pencereye tam olarak sığmazsa, sonuna kadar görüntülemenizi sağlayan bir kaydırma çubuğu belirecektir.
Ayrıca, Kaydırma değerleri olarak Evet'i (belge tam olarak sığsa bile penceredeki kaydırma çubukları her zaman görüntülenecektir) ve Hayır'ı (belgenin bir parçası olsa bile kaydırma çubukları hiçbir zaman görünmez) kullanabilirsiniz. uygun değil).
Bir zamanlar var olan aracımda, varsayılan Otomatik'i kullandım ve çerçevelerdeki kaydırma çubukları gerektiği gibi göründü:
Çerçeve etiketinin aşağıdaki özelliği − noresize- bekardır (değeri yoktur). Bunu kaydettikten sonra, varsayılan olarak çerçevelerin kenarlığını fare ile sürükleyerek gerçekleştirilen boyutunu değiştirmeyi yasaklayacaksınız.
Mouse imlecini bordüre getirdiğinizde imlecin çift başlı bir oka dönüşeceğini göreceksiniz ve şimdi sol mouse tuşuna basarak bordürleri istediğiniz gibi hareket ettirebilirsiniz. Noresize bu iradeye bir yasak getirir (fare imlecini pencerelerin kenarına getirdiğinizde, artık çift başlı bir ok görmezsiniz).
Bir diğer görsel özellik ise çerçeve. Bununla, çerçeveler arasına çerçeve (bordür) çizilip çizilmeyeceğini belirleyebilirsiniz. Çerçeve sınırı yalnızca iki olası değere sahip olabilir - ya 0 (çerçeve çizmeyin) ya da 1 (kenarlık göster). Varsayılan, elbette, 1'dir.
Bir incelik var. Görünür kenarlığı kaldırmak istiyorsanız, aradaki görünür kenarlıkları kaldırmak istediğiniz çerçevelerin tüm Çerçeve etiketlerine Frameborder=0 eklemeniz gerekir.
Yine de Frame etiketinin birkaç özelliğini göz önünde bulundurmamız gerekiyor - kenar boşluğu genişliği ve kenar boşluğu yüksekliği, pencere kenarlıklarından içine yüklenen içeriğe genişlik (sol ve sağ) ve yükseklik (üst ve alt) olarak dolguyu ayarlayan (sayı, dolgu piksellerinin sayısı anlamına gelir):
Neden çerçeveler üzerine bir site yapamıyorsun?
Bir site oluştururken esasen kullanımlarına son veren klasik yapıların temel dezavantajı nedir bakalım. Bu çerçeve yapısına göre onun durumunu izlemek imkansız.
Karmaşık yapıların binlerce farklı durumu olabilir (farklı çerçeve pencerelerinde açılan belgelerin çeşitleri), ancak bu yapının URL adresi değişmez. Bundan dolayı olacak Tarayıcı yer imleri kullanılamıyor veya diğer kullanıcılara favori sayfalarınızın bağlantılarını gönderin. Niye ya?
Adres aynı kaldığından ve tarayıcı yer imlerinizden veya bir e-postadan açtığınızda, kaydetmek istediğiniz durumu değil, çerçeve yapısının başlangıç durumunu içeren bir sayfa alırsınız.
Tabii ki, bu sorun çözülebilir, ancak Html aracılığıyla değil, sunucu (örneğin, Php) veya istemci tarafı programlama dilleri (JavaScript) yardımıyla çözülebilir ve bu çözümler yüz çalışmayacaktır. yüzde. Bu tür çözümler aslında çerçeve yapısının Url adresine mevcut durumu hakkında ek veriler eklemenize izin verir, ancak bunu yapmak kolay değildir ve güvenilirlik mutlak olmayacaktır.
Bu, web siteleri oluşturmak için çerçeve kullanmanın ilk dezavantajıdır ve çok önemlidir, ancak başka bir büyük dezavantaj daha vardır. Arama motorları, elbette, onları indekslemeyi ve pencerelerine yüklenen bu belgelerin adreslerini onlardan çıkarmayı çoktan öğrendi. Sorun farklı.
Bir kullanıcı Yandex veya Google arama sonuçlarından bir çerçeve yapısı temelinde oluşturulmuş sitenize gittiğinde, yapının tamamı değil, yalnızca çerçevelerden birine yüklenen belge açılır. Ne hakkında konuştuğumu anlıyor musun?
Kullanıcı belgeyi görecek ve sitenizde gezinmeyi görmeyecek, çünkü diğer pencerelerde korunacaktır ve bunlar yalnızca tüm yapının bir parçası olarak yüklenir.
Sonuç olarak, çerçeveler üzerine kurulmuş bir site basitçe kullanılamaz hale gelir. Yine bu sorunun sunucu betiklerine dayalı çözümleri olsa da, tek tek belgelerin adreslerinden istenen durumdaki bir çerçeve yapısına bir yönlendirme gerçekleştirileceği zaman bu yine çok zordur ve her zaman güvenilir değildir.
Genel olarak, sonuç kesin olarak çıkarılabilir - çerçevelerde siteler oluşturmanıza gerek yok. Ancak öte yandan, çeşitli uygulamalar için yardım oluşturmak için sürekli olarak kullanılırlar ve başka bir yerde işe yarayabilirler.
Örneğin, "Gezgin" adını verdiğim (şimdi geçici olarak kaldırdım) ve blogum için bir tür genişletilmiş harici menü haline gelen bir çerçeve yapısı oluşturdum, bu bence kaynakla çalışmayı basitleştirmeli ve bu nedenle , geliştirenleri artık "saçmalıksız" olanlar sitenin tanıtımını çok ama çok güçlü bir şekilde etkiliyor.
Ancak, arama motorlarıyla ilgili herhangi bir sorundan kaçınmak için, tüm bu çerçeve yapısını ondan kapattım ve her ihtimale karşı, Rodots meta etiketini tüm Html dosyalarına indekslemelerini yasaklayarak ekledim:
JOOMLA
Ancak tüm bu kısıtlamalar yalnızca Çerçeve ve Çerçeve Kümesi etiketlerindeki yapılar için geçerlidir ve iframe etiketlerinde satır içi çerçeveler görünür kusurları yoktur ve bunları en azından YouTube'dan video eklemek için projelerinizde kullanmak oldukça olası ve hatta gereklidir.
Sana iyi şanslar! Yakında blog sayfaları sitesinde görüşürüz
ilgini çekebilir
Html kodunda açıklama yönergeleri ve Doctype, ayrıca blok ve satır içi öğeler (etiketler) kavramı Göm ve nesne - Web sayfalarında medya içeriğini (video, flash, ses) görüntülemek için HTML etiketleri Img - Bir resim eklemek (Src), metinle hizalamak ve sarmak (hizalamak) ve ayrıca bir arka plan (arka plan) ayarlamak için Html etiketi Html Köprü Metni Biçimlendirme Dili nedir ve W3C doğrulayıcısındaki tüm etiketlerin nasıl listeleneceğiSelect, Option, Textarea, Label, Fieldset, Legend - Açılır liste formunun ve metin alanının Html etiketleri Html kodundaki listeler - UL, OL, LI ve DL etiketleri Yazı Tipi (Yüz, Boyut ve Renk), Blok Alıntı ve Ön etiketleri - saf HTML'de (CSS kullanmadan) kullanımdan kaldırılmış metin biçimlendirme Html ve CSS kodunda renkler nasıl ayarlanır, tablolarda RGB gölgelerinin seçimi, Yandex sonuçları ve diğer programlar