HTML Kodları ile Frame Ekleme: Kapsamlı Bir Kılavuz
Giriş
Frame’ler, bir web sayfasını bölümlere ayırmanıza ve her bölümü bağımsız olarak yüklemenize olanak tanıyan HTML öğeleridir. Bu, kullanıcıların bir web sayfasının farklı bölümlerinde gezinirken tüm sayfanın yeniden yüklenmesini beklemek zorunda kalmamalarını sağlar.
Frame Öğesi
Bir frame oluşturmak için <frame> öğesini kullanırsınız. Bu öğe aşağıdaki özniteliklere sahiptir:
- src: Çerçeveye yüklenecek web sayfasının URL’sini belirtir.
- name: Çerçeveye bir ad verir. Bu ad, çerçeveye JavaScript veya CSS aracılığıyla erişmek için kullanılır.
- scrolling: Çerçevenin kaydırma çubuklarına sahip olup olmayacağını belirtir.
- noresize: Çerçevenin yeniden boyutlandırılabilir olup olmayacağını belirtir.
- marginwidth: Çerçevenin sol ve sağ kenar boşluklarını piksel cinsinden belirtir.
- marginheight: Çerçevenin üst ve alt kenar boşluklarını piksel cinsinden belirtir.
Örnek:
html
<frame src="header.html" name="header" scrolling="no" noresize>
Bu kod, “header.html” adlı bir web sayfasını “header” adlı bir çerçeveye yükler. Çerçeve kaydırma çubuklarına sahip olmayacak ve yeniden boyutlandırılamayacaktır.
Frame Set Öğesi
Birden fazla çerçeve oluşturmak için <frameset> öğesini kullanırsınız. Bu öğe, çerçevelerin nasıl düzenleneceğini belirten rows ve cols özniteliklerine sahiptir.
- rows: Çerçevelerin satır olarak nasıl düzenleneceğini belirtir. Örneğin, “20%, 80%” değeri, çerçeve setini %20 yüksekliğinde üst çerçeve ve %80 yüksekliğinde alt çerçeve olacak şekilde böler.
- cols: Çerçevelerin sütun olarak nasıl düzenleneceğini belirtir. Örneğin, “50%, 50%” değeri, çerçeve setini %50 genişliğinde sol çerçeve ve %50 genişliğinde sağ çerçeve olacak şekilde böler.
Örnek:
html
<frameset rows="20%, 80%">
<frame src="header.html" name="header">
<frame src="content.html" name="content">
</frameset>
Bu kod, %20 yüksekliğinde üst çerçeve ve %80 yüksekliğinde alt çerçeve olacak şekilde iki satırlı bir çerçeve seti oluşturur. Üst çerçeveye “header.html” ve alt çerçeveye “content.html” yüklenir.
Frame’lere Erişme
JavaScript veya CSS kullanarak frame’lere erişebilirsiniz. Frame’lere erişmek için window.frames nesnesini kullanırsınız. Bu nesne, çerçeve setindeki tüm çerçeveleri içeren bir dizi içerir.
Örnek:
“`javascript
// “content” adlı çerçeveye erişme
var contentFrame = window.frames[“content”];
// “content” çerçevesindeki bir öğeye erişme
var contentElement = contentFrame.document.getElementById(“myElement”);
“`
Faydalı Siteler ve Dosyalar
Sonuç
Frame’ler, web sayfalarını bölümlere ayırmak ve kullanıcı deneyimini geliştirmek için güçlü bir araçtır. Bu kılavuzu takip ederek, HTML kodları kullanarak kolayca frame’ler oluşturabilir ve bunlara erişebilirsiniz.