Ç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>
A | |
B | C |
<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.
Hiç yorum yok:
Yorum Gönder