Konular

FRAME Tagı

Aynı pencere içinde birden fazla sayfa görünmesini istediğimiz zaman çerçeve (frame) kullanırız. Çerçeve tekniği, bir web sayfasını istenilen miktarda parçaya bölüp, bu sayfa üzerinde birkaç sayfa birden görüntülenmesine olanak verir. Bu tekniğin en çok kullanılan varyasyonu, sayfanın sol veya üst kısmından küçük bir alanı bölmek (yani sayfayı ikiye bölmek), bu küçük alana menü bilgilerini, diğer büyük alana ise sayfanın asıl içeri?ini yerleştirmektir

FRAME Tagı

Differences Between HTML and XHTML

 


 

Tips and Notes

Note: If you want to validate a page containing frames, be sure the DTD is set to "Frameset DTD". Read more about XHTML Validation.

Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags!


 

<html>
<frameset cols = "25%, 25%,*">
  <frame src ="venus.htm" />
  <frame src ="sun.htm" />
  <frame src ="mercur.htm" />
</frameset>
</html>

  FRAME Tagı
 


 

Optional Attributes

DTD indicates in which DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.

Attribute Value Description DTD
cols pixels
%
*
Defines the number and size of columns in a frameset F
rows pixels
%
*
Defines the number and size of rows in a frameset F

Standard Attributes

Only allowed in XHTML 1.0 Frameset DTD!!

id, class, title, style

www.dijitalders.comÖrnek:

<html>
<head>
<title>Cerceveler</title></head>
<frameset rows="*,*,*">
<frame src="1.html">
<frame src="2.html">
<frame src="3.html">
</frameset>
</html>

 



Örnek:
 

<html><head>
<title>Cerceveler</title></head>
<frameset cols="*,*,*">
<frame src="1.html">
<frame src="2.html">
<frame src="3.html">
</frameset>
</html>

 

Örneklerde gördüğünüz * miktar? e?it miktarda kaç tane çerçeve olaca??n? gösterir.<frameset> etiketinde kaç tane * belirttiysek o kadar <frame src=""> belirtmemiz gerekir.* yerine pixel cinsinden bir sayi ya da % cinsinden oran da belirtebiliriz.cols, sayfalar?n yanyana ç?kmasini, rows ise üstüste ç?kmas?n? sa?lar.www.dijitalders.com










 

Fakat ?unu da belirtmekte fayda var, birçok tasar?mc? estetik aç?s?ndan çerçevelere pek s?cak bakmaz; genelde üst üste tablolar kullanmay? tercih eder. Yine de pek s?k kullan?lmayan bu tekni?i akl?n?z?n bir yerinde tutun, belki faydal? olabilir...

Bir uyar?: Netscape 2.0 ve Explorer 3.0 alt? browser'lar, çerçeveleri tan?mazlar!

 

ÇERÇEVE TEKN???N?N GENEL MANTI?I

Çerçeve tekni?inde, ilk önce parent(ana) frame denilen bir sayfa olu?turmak gerekir. <Frameset>... </frameset> etiketlerinin parametreleri olan cols ve rows ifadeleri ile sayfay? dikey ve yatay olarak ne oranda bölmek istedi?imizi browser'a bildiririz.  Src parametresi ile ana çerçevenin bölümlerinde görüntülenecek sayfalar?n adreslerini bildirdikten sonra, geriye biraz önce adreslerini bildirdi?imiz sayfalar? uygun bir ?ekilde haz?rlamak kal?r. ?imdi bu biraz kar???k ifadeyi bir örnekle daha iyi anlayal?m,  sonra da <frameset>  etiketini inceleyelim. 

 Önce ana pencereyi haz?rlayal?m:

<html>< BR><head> 
<title>Çerçeveörne?i</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type
</head>
<frameset cols="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>
<noframes>
<body>
<h1>Browser'?n?z?n sürümü sayfam?z? görüntülemeye uygun degil, lütfen daha yeni bir sürüm
yükleyip tekrar deneyin!</h1>
</body>
</noframes>
</html>

 

Burada yapt???m?z ?ey ana sayfay? soldan 150 piksel geni?li?inde bölüp iki sayfa elde etmekten ibaret. Ayr?ca browser'a soldan ilk bölüme (150 px olan bölüm) 'menu.html', ikinci bölüme ise 'esas.html' sayfalar?n? yerle?tirmesini bildirdik. Burada dikkat edilmesi gereken nokta <frameset> etiketinin </head> ile <body> etiketleri aras?na yerle?tirilmesidir. <Noframes>...</noframes> etiketleri içinde yer alan bölüm ise çerçeveden anlamayan eski sürüm browser'lar içindir. ?imdi a?a??daki kodlardan ilkini 'menu.html', ikincisini ise 'esas.html'  ad?yla ana pencereyi kaydetti?iniz dizine kaydedin.

 

<html>
<head>
 <title>menu</title>
 <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>


</head>
<body bgcolor="teal">
</body>
</html>

 

<html>
<head>
 <title>esas</title>
 <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>

</head>


<body bgcolor="Red"></body>

</body>
</html>

Son olarak tekrar ana sayfay? açt???n?zda (ismi önemli de?il, yeter ki di?er iki sayfa ile ayn? dizinde bulunsun!) sonuç böyle olacakt?r:

 

Art?k çerçevelerin mant???n? anlad???m?za göre bu tekni?in detaylar?n? inceleyelim...

 

 

<FRAMESET>  ve <FRAME> ETİKETLERİ

Aşağıda <frameset> etiketinin parametrelerini görüyorsunuz :

rows

Safayı enine bölmenizi sağlar

<frameset rows="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>

FRAME Tagı

cols

Sayfayı boyuna bölmenizi sağlar

<frameset cols="150,*">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>

FRAME Tagı

cols ve rows parametreleri piksel de?eri alabilecekleri gibi '%' cinsinden de de?er alabilirler, örne?in:
<frameset cols="%20,%80">
Daha önce kulland???m?z '*' ifadesi ile bölünecek alan?n geni?li?ini browser'a b?rakabiliriz:
<frameset cols="%20,*">
Son olarak sayfayı üçe veya daha fazlaya da bölebiliriz:
<frameset rows="150,200,100,*"> ifadesi ile ana pencereyi dörde böleriz.

frameborder

Ana sayfanın bölümleri arasında sınır çizgisi olup olmamasısını belirler. ('yes', 'no'; veya '1', '0' değerlerini alır)

<frameset cols="150,*" frameborder="1">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>

FRAME Tagı

border

Çerçeveler aras?ndaki s?n?r?n kal?nl???n? piksel cinsinden belirler.

<frameset cols="150,*" border="10">
<frame name="menu" src="menu.html">
<frame name="esas" src="esas.html">
</frameset>

FRAME Tagı

 

?imdi de <frame>; etiketinin parametreleri:

 

src

Bunu zaten biliyorsunuz, çerçeve içinde görüntülenecek sayfan?n yeri

marginwidth

Sayfan?n solundaki kenar bo?lu?unu belirtir

marginheight

Sayfan?n üstündeki kenar bo?lu?unu belirtir

noresize

'1' veya '0' de?erlerini al?r, '1' verilirse pencere boyutlar? sabitlenir.

scrolling

'yes', 'no', 'auto' de?erlerini al?r, kayd?rma çubuklar?n?n durumunu belirler.

 

11/3. FRAME UYGULAMALARI

FRAME Tagı

A?a??da baz? çerçeve örnekleri ve bu örneklerin kodlar? verilmi?tir: 

 

FRAME Tagı

<frameset  rows="150,*" cols="150,*" >
<frame name="kirmizi" src="kirmizi.html">
<frame name="yesil" src="yesil.html">
<frame name="sari" src="sari.html">
<frame name="siyah" src="siyah.html">
</frameset>

FRAME Tagı

<frameset  rows="150,*">
<frame name="kirmizi" src="kirmizi.html">
<frameset cols="30%,*">
<frame name="yesil" src="yesil.html">
<frame name="sari" src="sari.html">
</frameset>

FRAME Tagı

<frameset  rows="150,*">
<frameset cols="*,*">
<frame name="kirmizi" src="kirmizi.html">
<frame name="yesil" src="yesil.html">
</frameset>
<frame name="sari" src="sari.html">
</frameset>

FRAME Tagı

<frameset cols="150,*">
<frameset  rows="*,*,*">
<frame name="yesil" src="yesil.html">
<frame name="kirmizi" src="kirmizi.html">
<frame name="sari" src="sari.html">
</frameset>
<frame name="siyah" src="siyah.html">
</frameset>

Çerçevelerle çalışmaya ba?lamadan önce bilmeniz gereken önemli bir nokta:
Hatırlarsanız bağlantılar konusunda <a> etiketinin target isimli bir parametresi oldu?undan ve bu parametrenin 'Çerçevead?' de?erini alabilece?inden bahsetmi?tik. Bu parametre bize ba?lant?n?n belirtti?i adresdeki sayfan?n ad?n? verdi?imiz çerçeve içinde açılmas?n? sa?lar. Örne?in bu sayfadaki ikinci örne?i ele alal?m:
'?stiyoruz ki sayfan?n ye?il bölümü sayfam?z?n menüsü olsun. Ziyaretçi buradaki ba?lant?lara t?klayarak sitenin di?er sayfalar?na ula?s?n, ama bu di?er sayfalar sar? bölümde görüntülensin.' 
??te a?a??daki kod bunu sa?lar:

<a href="www.sayfaAdi.comsecenek1.html  target="sari">Bu link saril bölümde görüntülenecek!</a>

Gördü?ünüz gibi çerçevelere verdi?imiz isimler (name) bu noktada önem kazan?yorlar

 

 www.dijitalders.com

 

 

Ana Çerçeve  <html>
<head>
      <title>Cerceveler</title>
</head>
<frameset rows="*,*" frameborder="1" >

          <frameset cols="30%,*,*" frameborder="1" >
                       <frame src="cerceve1.html" />
                       <frame src="cerceve2.html" name="aramamotoru" />
                       <frame src="cerceve3.html" name="mail" />
          </frameset>

<frame src="cerceve4.html" />
</frameset>
</html>
Çerçeve 1 <html>
<head></head>

<body>
                 <table>
                             <tr><td><a href="http://www.google.com" target="aramamotoru">Google</a></td></tr>
                             <tr><td><a href="http://www.yahoo.com" target="aramamotoru">Yahoo</a></td></tr>
                             <tr><td><a href="http://www.altavista.com" target="aramamotoru">AltaVista</a></td></tr>
                  </table>
                  <hr />
                  <table>
                          <tr><td><a href="http://www.gmail.com" target="mail">Gmail</a></td></tr>
                          <tr><td><a href="http://www.mail.yahoo.com" target="mail">Yahoo Mail</a></td></tr>
                 </table>

</body>
</html>
Çerçeve 2 <html>
<head></head>
      <body background="Wallpaper0027.jpg"></body>
</html>
Çerçeve 3 <html>
<head></head>
    <body background="wallpaper3_b.jpg"></body>
</html>
Çerçeve 4 <html>
<head></head>
      <body background="Wallpaper0027.jpg"></body>
</html>
www.dijitalders.com

 

 www.dijitalders.com

FRAME Tagı

 

<html>
<head>
<title>Çerçevelerim</title>
</head>

<frameset rows="10%, *" frameborder="1" border="50">

<frame name="ust" src="ust.htm" />
<frame name="alt" src="alt.htm" />

</frameset>

</html>

 

 www.dijitalders.com

Kaynak

Yorumunuzu Ekleyin
FRAME Tagı Yorumları +1 Yorum
  • YakinKampus
    1
    YakinKampus
    Selamlar,



    Yararlı bilgiler için teşekkür ederim, frame etiketini arıyordum :

    www.yakinkampus.com
    14 Kasım 2012 11:42:29, Çarşamba

Html Tag Listesi

Bazı html tagları hakkında açıklamalı referans listesi

49,522 Okunma Henüz yorum yapılmamış 04/07/2007 20:15:59 29/05/2014 20:16:20

IMG Tagı Nasıl Kullanılır?

Eger Web sayfalarini gezerken grafik destekleyen bir tarayıcı kullaniyorsaniz, ekranda resimlerin, arkaplanlarin ve hatta animasyonlarin oldugunu farketmissinizdir.Bu resimler genellikle X Bitmap (XBM) , GIF, veya JPG formatli olurlar ve dosyaya görsel bir çekicilik katarlar.Buna ragmen ayni ekranda çok miktarda resim kullanmaktan sakinmalidir, çünkü bu durumda resimler kullaniciya daha geç bir sürede ulasir

48,546 Okunma Henüz yorum yapılmamış 04/07/2007 14:45:54 07/03/2015 14:56:36

Web Site Tasarımında DIV Kullanımı

Bugün artık tüm web tasarımlarında site temel çatısı olarak DIV tagı kullanılmaktadır. Bunun nedeni DIV tagının parçalı yüklenebilmesi -ki bu sayede yüklenme hızı artar- ve ölçeklendirmesinin (özellikle cep telefonları ekranları için) kolay olmasıdır.

44,928 Okunma 2 Yorum 02/01/2014 19:28:21 08/03/2015 16:25:03

HTML5 Form Yapısı ve Form Elemanları

HTML'in bir metin şekillendirme aracı olduğunu söylemiştik.Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar.Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz.Formlar .etiketleri arasına yazılırlar.Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım

43,976 Okunma Henüz yorum yapılmamış 06/07/2007 00:41:58 31/12/2015 00:52:19

UL OL DL Tagları

Dökümanların göze hoş görünmelerini sağlamak amacıyla listeler yaygın olarak kullanılır. HTML, pek çok liste çeşidi destekler. Bunlar, düz listeler, numaralı listeler, tanımlı listeler ve içiçe listelerdir.

41,530 Okunma Henüz yorum yapılmamış 04/07/2007 15:22:49 02/07/2019 15:19:14

Meta Tag Nedir?

Meta imlerini ne kadar iyi ve ziyaretçinin umduğuna göre yazarsanız arama motorlarında bulunmanız o kadar kolay olur.Unutmayın ki sitenizi ziyaretçi arayacaktır. Onun gibi düşünmelisiniz

41,026 Okunma Henüz yorum yapılmamış 17/11/2007 01:33:29 22/12/2015 23:06:42

XHTML Nedir?

XHTML kısaltmasının açılımı İngilizce'de eXtensible Hyper Text Markup Language yani dilimizde ki karşılığı ise "Geliştirilebilir Büyütülmüş Metin İşaretleme Dili"dir

32,656 Okunma 2 Yorum 10/07/2007 21:07:41 27/03/2019 00:51:00

BODY Tagı Nasıl Kullanılır?

Html belgesinin tüm içeriğinin yer aldığı bölümdür. Bu bölümde yer alan içeriğin tümü tarayıcıda görüntülenir.

32,045 Okunma 1 Yorum 02/07/2007 14:43:07 12/05/2014 14:43:16

A Tagı Nasıl Kullanılır?

HTML'nin en büyük özelliklerinden birisi, tek sayfa ile sınırlı kalmamasıdır.

31,573 Okunma Henüz yorum yapılmamış 05/07/2007 14:56:13 12/05/2014 14:56:12

HEAD Tagı Nasıl Kullanılır?

Hazırlayacağımız sayfa ile ilgili bilgilerin bulunduğu sayfa başlığı (title), link özellikleri, siteyi tarayıcıya ve arama motorlarına tanıtmak amacıyla kullanılan Meta etiketlerinin bulunduğu bölümdür.

28,950 Okunma Henüz yorum yapılmamış 26/11/2012 19:54:51 20/12/2015 15:45:41

Html Nedir? Ve Html Tag'leri

Gelişen browser teknolojileri sayesinde, html içine yazılar dışında resim, ses, video, java, javascript, vbscript gibi dillerle yazılmış programlar, ya da diğer nesneler de gömülebilir. Bu sayede bir html dökümanı düzenlenmiş, mizampajı yapılmış bir metin dosyası olmaktan çıkıp tam anlamıyla bir multimedia ortamı olmaya da hizmet edebilir. Örneğin, browser'a özel olarak yazılan gerekli plug-in'ler (~eklentiler) sistemde varsa, html'le online bir gazete, bir slide-show, şirket-içi yazılımların çalışabildiği bir platform yaratabilirsiniz.

27,967 Okunma Henüz yorum yapılmamış 02/07/2007 13:41:57 06/03/2015 17:21:43

DOCTYPE Tagı

Genel bir bilgi vermek gerekirse; web sayfalarınızın tarayıcı tarafından nasıl yorumlanacağını başka bir değişle nasıl görüntüleneceğini ve bu görüntüleme işlemi sırasında hangi standart ve tanımlamaları (DTD: Document Type Definitions / Doküman türü tanımlamaları) kullanacağını belirten ve (X)HTML dokümanlarının en üst kısmında yer alan ifadelerdir.

25,874 Okunma Henüz yorum yapılmamış 05/07/2007 11:06:46 17/10/2012 11:52:03

Table Tagı Nasıl Kullanılır?

Web sayfamıza tablo eklemek için kullandığımız etikettir. Tablolar profesyonel web sayfalarının ayrılmaz öğelerindendir. Web üzerinde kullanılan tüm tablolar satırlar ve bu satırların içerisindeki sütunlardan oluşur. Bu etiket ile birlikte kullanılan kodlar aşağıdadır.

25,542 Okunma 1 Yorum 05/07/2007 14:46:47 10/03/2015 10:45:13

Genel HTML Tagları

Etiket, HTML dosyas?nda kullan?lan komutlara verilen add?r.HTML içinde kullan?lan tüm etiketler ??ile biter.Ayr?ca etiketin yorum aral??? da ?? kal?b? ile bitirilir.A?a??da etiket kullan?m?na k?sa bir örnek

22,617 Okunma Henüz yorum yapılmamış 04/07/2007 11:53:30 06/03/2015 17:21:28

IFRAME Tagı

Bir web sayfasının içersine daha çok başka bir sitenin içeriğini aktarmak için kullandığımız bir yol

22,516 Okunma Henüz yorum yapılmamış 05/07/2007 02:54:09

FORM Tagı

Form tagı parametreleri

22,009 Okunma Henüz yorum yapılmamış 06/07/2007 02:04:13 16/05/2015 20:06:41

DOCTYPE Tagı Nasıl Kullanılır?

HTML sayfasının nasıl bir HTML versiyonu ile yazıldığını web tarayıcısına bildirmek DOCTYPE tagının görevidir.

21,847 Okunma Henüz yorum yapılmamış 26/11/2012 14:54:25 12/05/2014 14:54:43

HTML nedir?

Html (Hypertext Markup Language), web sayfaları hazırlamak için kullanılan bir dildir.

21,388 Okunma Henüz yorum yapılmamış 10/10/2012 20:26:08 29/05/2014 21:38:56

Meta Tag nedir?

Meta tag’lar HTML kodunuzun HEAD bölümüne yerleştirilmiş bilgi etiketleridir. Arama motorlarına site ve içeriği hakkında bilgi sunar. Her ne kadar günümüzdeki arama motorlarının çoğu meta tag’lardaki bilgileri dikkate almayıp site içeriğini kendi tekniklerine göre indeksleseler de hala bu tag’lardan bazılarına kısmi destek verebiliyorlar. Arama motorlarının özellikleri için buraya bakabilirsiniz. Sitenizin bu arama motorlarınca doğru bir şekilde gösterimi için bazı Meta tag’ları kullanmakta fayda var. Burada sıklıkla kullanılan meta tag’ları açıklamaya ve onları site kodu içerisine nasıl yerleştirebileceğinizi açıklamaya çalışacağım

21,178 Okunma Henüz yorum yapılmamış 05/09/2007 03:38:58

HTML Editörleri

HTML kodu yazarken hata yapmamak ve kodları daha düzgün görmek için HTML editörleri kullanırız. Aynı zamanda bu editörler kodları yazarken kodun alabileceği değerler hakkındada ön bilgi verir.

21,041 Okunma Henüz yorum yapılmamış 08/10/2012 09:21:06 08/10/2012 09:35:05

xml xhtml html hakkında

Xml Html arasındaki fark

20,516 Okunma Henüz yorum yapılmamış 15/11/2007 02:02:18 15/05/2014 02:02:30

HR Tag

etiketi sayfaya yatay çizgi çizmek için kullanılan etikettir. Bu etiket diğer etiketlerden farklı olarak kapatılmaz. Size, width ve align parametreleri mevcuttur.

20,165 Okunma Henüz yorum yapılmamış 03/12/2012 11:13:48 03/12/2012 11:17:37

DIV Tagı Nedir?

Web sitelerinin iskeletleri DIV tagı kullanarak oluşturulur. Ayrıca web sitesindeki nesnelerin yerleri DIV tagı ile belirlenir.

18,179 Okunma Henüz yorum yapılmamış 16/12/2013 19:55:52 08/03/2015 15:32:04

BR Tag

Bir alt satıra geçmek için kullanılır.

17,897 Okunma Henüz yorum yapılmamış 03/12/2012 09:35:47 03/12/2012 09:35:55

P Tag

Paragraf oluşturmak için kullanılan etikettir. Kullanıldığı yerde yazıyı kesip bir satır boşluk bırakarak, metne satır başından devam edilmesini sağlar.

17,706 Okunma Henüz yorum yapılmamış 03/12/2012 10:34:56 05/12/2012 01:50:50

U Tag

İstenilen metni Altı çizili (underline) olarak yazmak için kullanılır.

16,982 Okunma Henüz yorum yapılmamış 03/12/2012 09:37:57 03/12/2012 09:38:20

Yükleniyor...