Çerçeve Şekli
<table frame=box>
<html>
<table border=3 bordercolor="#000000" width=300 frame=box>
<thead>
<tr>
<th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr>
<td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr>
<td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody> </table></html>
<table frame=above>
<html>
<table border=3 bordercolor="#000000" width=300 frame=above>
<thead>
<tr>
<th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr>
<td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr>
<td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
</table>
</html>
<table frame=below>
<html>
<table border=3 bordercolor="#000000" width=300 frame=below>
<thead>
<tr>
<th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr>
<td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr>
<td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
</table> </html>
<table frame=hsides>
<html>
<table border=3 bordercolor="#000000" width=300 frame=hsides>
<thead>
<tr>
<th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr>
<td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr>
<td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
</table>
</html>
<table frame=vsides>
<html>
<table border=3 bordercolor="#000000" width=300 frame=vsides>
<thead>
<tr>
<th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr>
<td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr>
<td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
</table>
</html>
<table frame=lhs>
<html>
<table border=3 bordercolor="#000000" width=300 frame=lhs>
<thead>
<tr>
<th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr>
<td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr>
<td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
</table>
</html>
<table frame=rhs>
<html>
<table border=3 bordercolor="#000000" width=300 frame=rhs>
<thead>
<tr>
<th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr>
<td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr>
<td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
</table>
</html>
çerçevesiz <table frame=void>
<html>
<table border=3 bordercolor="#000000" width=300 frame=void>
<thead>
<tr>
<th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr>
<td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr>
<td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
</table>
</html>
bütün kurallar <table rules=all>
<html>
<table border=3 bordercolor="#000000" width=300 rules=all>
<colgroup><col align=center span=2> <colgroup align=right>
<thead>
<tr> <th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr> <td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr> <td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi
</td>
</tbody>
<tbody>
<tr><td colspan=2 align=right>Kişi Adedi: </td>
<td>2</td>
</tbody>
</table>
</html>
grup kuralları <table rules=groups>
<html>
<table border=3 bordercolor="#000000" width=300 rules=groups>
<colgroup><col align=center span=2> <colgroup align=right>
<thead>
<tr> <th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr> <td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr> <td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
<tbody>
<tr><td colspan=2 align=right>Kişi Adedi: </td> <td>2</td>
</tbody>
</table> </html>
Bütün sıralama kuralları <table rules=rows>
<html>
<table border=3 bordercolor="#000000" width=300 rules=rows>
<colgroup><col align=center span=2>
<colgroup align=right>
<thead>
<tr> <th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr> <td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr> <td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
<tbody>
<tr><td colspan=2 align=right>Kişi Adedi: </td>
<td>2</td>
</tbody>
</table>
</html>
Tablo Çerçevesi: Bir tablonun bütün sütun ve satırları içine alan en dış çerçevesinin kalınlığını belirlemek tasarımcının elindedir. Bunun için TABLE etiketi ile birlikte
BORDER=# (#, pixel cinsinden çerçeve kalınlığı) yazılır.
FRAME=# ile tablonun dış ve hücreler arası çerçeve çizgileri kontrol edilebilir.
# yerine VOID yazılarak bütün dış çerçeve kaldırılabilir.
ABOVE tablonun üst tarafına;
BELOW alt tarafına;
HSIDES alt ve üst taraflara;
LHS sol tarafa,
RHS sağ tarafa,
VSIDES sağ ve sol taraflara çerçeveye konulmasını sağlar.
RULES=# ile iç çerçeveleri kontrol edebilirsiniz.
# yerine NONE yazarak bütün iç çerçeverin kaldırılması sağlandığı gibi,
GROUPS yazarak sadece başlık ve gövde grupları arasına,
COLS yazarak sütunların arasında,
ROWS yazarak satırların arasına çerçevere konulabilir.
Bir tablonun hücreleri arasındaki boşluk
CELLSPACING=# olarak verilebilir.
# yerine piksel cinsinden boşluk ölçüsü yazılır.
Hücrelerin içindeki yazı veya grafik gibi unsurların hücrenin iç çizgisine ne kadar yaklaşacağı, hücre içi kenar boşluğu,
CELLPADDING=# ile verilebilir.
# yerine, piksel olarak değer verilir.
Tablolor Yardımıyla Sayfalara Resimler Eklemek
Tablolar yardımıyla resimleri düzgün ve sayfanın istenilen yerine yerleştirmek olasıdır. Konuyla ilgili kod aşağıda ve web sayfası görünümü ise Şekil-22.’de gösterilmiştir.
<html> <head> <title>My Gallery</title> </head>
<body text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000" bgcolor="#FFFFFF" background="bg024.jpg">
<center><h1>Benim Galerim</h1><br><br>
<table border="1" cellpadding="0" cellspacing="4" bgcolor="#C0C0C0">
<tr> <td><center><a href="image.html"><img src="resim8.jpg" alt="[Tıkla ve Resmi Büyük Gör]" border="0" width="120" height="120"></a></center></td>
<td><center><a href="image1.html"><img src="resim9.jpg" alt="[Tıkla ve Resmi Büyük Gör]" border="0" width="120" height="120"></a></center></td>
<td><center><a href="image2.html"><img src="resim10.jpg" alt="[Tıkla ve Resmi Büyük Gör]" border="0" width="120" height="120"></a></center></td>
</tr>
<tr> <td><center><a href="image3.html"><img src="resim11.jpg" alt="[Tıkla ve Resmi Büyük Gör]" border="0" width="120" height="120"></a></center></td>
<td><center><a href="image4.html"><img src="resim24.jpg" alt="[Tıkla ve Resmi Büyük Gör]" border="0" width="120" height="120"></a></center></td>
<td><center><a href="image5.html"><img src="america.gif" alt="[Tıkla ve Resmi Büyük Gör]" border="0" width="120" height="120"></a></center></td>
</tr> </table> </center><br><br>
<center>Sayfayı ben oluşturdum... <br><b><a href="file://e:/cemal.html">Ertuğrul Gökhan KAÇAN</a><b><center></body>
</html>
Şekil 22- Tablo yardımıyla resimlerin yerleşimi
Çerçeveler
Çerçeveler(frame), HTML'e sonradan eklenmiş bir özelliktir. Bu yüzden eski sürüm Tarayıcılar çerçeve kullanılmış bir sayfayı görüntüleyemezler.
(Microsoft Internet Explorer 3.0 ile Netscape Navigator 2.0 ve üstü sürümleri çerçeveleri destekler).
Çerçeve'ler sayfanın bir tarafı sabit kalırken, diğer tarafını, kullanıcının isteğine göre değiştirme imkanı verir Bunun anlamı ise kullanılacak çerçeve miktarı kadar HTML sayfası oluşturmak demektir.
Tarayıcı çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı verir.
Örnekte 3 adet html dosyası var.
Bunlardan
cerceveana.html dosyası çerçeve komutlarını içeriyor. Bu komutlar tarayıcıya görüntülenmekte olan pencereyi ikiye bölmesini, bir bölmeye
cerceve1.html dosyasını, diğer bölmeyede
cerceve2.html dosyasını görüntülemesini bildiriyor.
<body bgcolor="red"> tag’ı ile
cerceve1.html dosyası artalan rengi kırmızı,
<img src= ”resim1.jpg”> tag’ıyla da kedi resmi yerleştirilmiş,
cerceve2.html dosyasının artalanı ise mavi yapılmış, ve bir başka kedi resmi yerleştirilmiş, ayrıca kolaylık olması açısından dosyaların adları da yazılmış. Şekil-23’de görüldüğü gibi.
Şekil 23- Çerceve Görünümü
Cerceveana.html dosyası:
<html>
<head>
<title>Çerçeveler</title>
</head>
<frameset cols="*,*">
<frame name="sol" src="cerceve1.html">
<frame name="sag" src="cerceve2.html">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
cerceve1.html dosyası:
<html>
<head> </head>
<body bgcolor="red">
<font size="6" color="#ffffff">cerceve1.html</font>
<img src="resim11.jpg" width=200 height="200">
</body>
</html>
cerceve2.html dosyası:
<html>
<head> </head>
<body bgcolor="blue">
<font size="6" color="#ffffff">cerceve2.html</font>
<img src="resim10.jpg" width=200 height="200">
</body>
</html>
<frameset>...</frameset>
Çerçeve oluşturmada kullanılan tag
frameset,
cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde(pencereyi yatay böler) olacağını belirtiyor, buraya
row yazılırsa çerçeveler alt alta satırlar görünümünde(pencereyi dikey böler) açılacaktır.
cols="*,*" ifadesi ile açılacak çerçevelerin piksel cinsinden ebatları belirtilir.
örneğin
cols="150,500" gibi sayı yazılabilir.
cols="25%,75%" ile tarayıcı penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada (*) sembolü ile açılacak çerçevenin ebadı tarayıcıya bırakılır.
cols="150,*" ifadesi ilk pencerenin 150 pixel olacağını ikincinin ise ebadının tarayıcıya bırakıldığı gösterilir. Böylece açılacak çerçeve sayısı da belirtmiş olur.
cols=".." ifadesine iki değer (ya da asteriks) verilirse bu iki pencere aç anlamındadır, 4 değer 4 pencere açar.
frame name="..." src="..." etiketi çerçevelere, bağlantıların
Target kısmında kullanabilmek amacıyla isim (name) vermeyi sağlar.
src pencerede görüntülenecek html dosyasının yerini gösterir. Açılacak çerçeve sayısı kadar
frame name="..." src="..." tag’ı kullanılır.
<
frame src=”resim1.gif”>
<frame src=”cerceveuygula.html>
noframes eski sürüm tarayıcıların çerçeve tekniğini desteklemediklerinden, böyle eski bir tarayıcı ile sayfaya bakıldığında kullanıcının gerçekleştirilmesini istediği işlemlerin yerine getirilmesini sağlar.
body kısmını eski tarayıcılar görüntüleyebiliyor. Buraya örneğin ,sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj yazılabilir(tarayıcınız çerçeve tekniğini desteklemiyor, sayfayı lütfen başka bir tarayıcı ile inceleyiniz.), böylece ziyaretçinin artık yeni sürüm bir tarayıcı kullanması gerektiği hatırlatılabilir.
framset tag’ı HTML dosyasında
</head>...<body> tag’ları arasında kullanılır.
framset tag’ı ile kullanılabilecek parametreler aşğıda verilmiştir;
frameborder=".."
(yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler.
border="#"
#=(sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler
frame etiketi ile kullanabileceğimiz parametreler;
marginwidth=".." marginheight=".." (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler.
scrolling=".." (yes, no, auto) Kaydırma çubuklarının durumunu belirler.
noresize, pencere boyutlarının sabit olmasını sağlar.
Karmaşık çerçeveler
Tablolardaki hücreleri birleştirme gibi bir özellik çerçevelerde de yoktur. fakat aynı görünümü elde etmek mümkündür.
Bu etkiyi sağlamak için
framset tag’ı açıp kaynak dosyaların hepsini belirtmeden yeni bir
framset açılır, içiçe açılan bu tag’ların kaynak dosyalarını belirtip, tag’lar sonlandırılır.
Örnekler kodlarla birlikte aşağıda verilmiştir, çıktı Şekil-24’de görülmektedir;
<html>
<head></head>
<frameset cols="150,*">
<frame name="a" src="menu11.html">
<frameset rows="400,*">
<frame name="b" src="b.html">
<frame name="c" src="uygun.htm">
</frameset>
<body></body></html>
Şekil 24- Üçlü çerçeve görünümü
<frameset rows="*,*" cols="*,*">
<frame name="a" src="htm1.htm">
<frame name="b" src="htm2.htm">
<frame name="c" src="htm3.htm">
<frame name="d" src="htm4.htm">
</frameset>
Gösterişli Çerçeve
Frame Border <frame frameborder=#>
#=yes, no
<frameset rows=30%,*>
<frame src="Acol.html" frameborder=no>
<frameset cols=30%,*>
<frame src="Bcol.html" frameborder=no>
<frame src="Ccol.html" frameborder=no>
</frameset>
</frameset>
kenar <frame marginwidth=# marginheight=#>
<frameset cols=50%,50%>
<frame src="A.html">
<frame src="A.html"
marginwidth=50
marginheight=50>
</frameset>
yazışekli <frame scrolling=#> #=yes, no, auto
#=auto değeri varsayılan değerdir.
bordercolorlight="red" bordercolordark="blue">
</html>
</html>
<table border=2 bordercolor="#000000" width=300 height=150>
</tr>
align parametresi, resmin etrafındaki metnin ne şekilde hizalanacağını tanımlar. İlgili metnin bir satırının resmin üstünde, altında, ortasında, solunda veya sağında yerleşeceğini belirtir. Varsayılan değer none’dır.
</html>
