Resimlere bağlantı özelliği kazandırmak
Metinlere bağlantı vermeyi öğrendik, peki sayfadaki resimlere nasıl link vereceğiz? Bunun için resmi yerleştirmek için kullandığımız:
<img src="..." width="x" height="y"> etiketini
<a href>...</a> etiketinin arasına alıyoruz.
İşte örnek;
<a href="sayfa1.htm"><img src="resim.gif" border="0"></a>
resim.gif tıklanacak resmi,
sayfa1.htm resme tıklandığında açılacak sayfayı gösteriyor.
Border komutu ise resimde bağlantı özelliği olduğunu belirten çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder. Bu komutu değişik sayılarla deneyebilirsiniz.
Target parametresi
Son olarak bağlantının açılacağı pencereyi belirtmek için kullanılan
target parametresini öğrenelim. Kullanımı :
<a href="..." target="...">...</a>
target="_blank"Bağlantı yeni bir pencerede açılır.
target="_self"Bağlantı aynı pencere içerisinde açılır.
target="_top"Bağlantı aynı pencere içerisinde en üstten itibaren açılır.
target="_parent"Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
target="çerçeve adı"Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar
<table>...</table>Tablolar, sayfaları satırlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istediğimiz yerde durmasını sağlamak amaçlarıyla kullanabileceğimiz HTML'nin en önemli yapıtaşlarındandır. Sayfada gözüksün ya da gözükmesin tabloları bir iskelet gibi kullanabilir, böylece şu ana kadar öğrendiklerinizle yapamayacağınız gerçek düzenlemeyi yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayıncılık programının gösterdiği hassasiyeti göstermez, bir de browserların tablo etiketlerini yorumlamada gösterdiği farklılıklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor olduğu anlaşılır. Fakat burada konumuz bunu tartışmak değil tablolar konusunu işlemek.
İşte tablolar,
SonbaharKışİlkbaharYazEylülAralıkMartHaziranEkimOc akNisanTem muzKasımŞubatMayısAğustos
Tabloyu renklendirelim,
SonbaharKışİlkbaharYazEylülAralıkMartHaziranEkimOcakNisanTemmuzKasımŞubatMayısAğustos
Başka bir örnek (farklara dikkat ediniz)
ÖLÇÜLER BoyKilo1.Hakkı1.77802.Mustafa1.82753.Osman1.7583
Bu örneklerde de görüldüğü gibi tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz. Her sütun için de kendi başlığını oluşturmak mümkündür. Üstteki tablo başlığının altında veya tablonun sona erdiği satırdan sonraki satıra açıklama (thead/caption) koyabiliriz. Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:
Tablonun alt yazısı(caption)Tablo Başlığı (thead)Sütun Başlığı
#1Sütun Başlığı
#2Sütun Başlığı
#3Sütun Başlığı
#4hücrehücrehücrehücrehücrehücrehücrehücrehücrehüc re
Bu kadar örnek yeterli, şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle
<table>...</table> etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz.
<tr> etiketi ile satırları
<td> etiketi ile de sütunları oluşturuyoruz.
hücre<table border="1">
<tr>
<td>
hücre</td>
</tr>
</table>hücre1hücre2<table border="1">
<tr>
<td>
hücre1</td>
<td>
hücre2</td>
</tr>
</table>hücre1hücre2<table border="1">
<tr>
<td>
hücre1</td>
<tr>
</tr>
<td>
hücre2</td>
</tr>
</table>hücre1hücre2hücre3hücre4<table border="1">
<tr>
<td>
hücre1</td>
<td>
hücre2</td>
</tr>
<tr>
<td>
hücre3</td>
<td>
hücre4</td>
</tr>
</table>
Tabloda başlık ve gövde
Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı
<thead> gövdeyi
<tbody> etiketleri arasına yazarız.
<caption> etiketi ile ikinci bir açıklama vermek mümkündür.
Sütun başlıklarına gelince, her bir başlık
<th> etiketi ile belirtilir ve bunlar
<td> etiketinde olduğu gibi
<tr>...</tr> arasına yazılır.
Tabloda satır ve sütunları belirten
<tr> ve
<td> etiketleri
<tbody>...</tbody> arasına alınır.
Yukarıdaki örneklerden birisini değiştirerek bu anlattıklarımızı uygulayalım;
Tablo Başlığı (thead)alt-yazı (caption)1.Sütun2.Sütun3.Sütunhücre1hücre2hücre3hü cre4hücre5 hücre6hücre7hücre8hücre9
<table border="1">
<thead>
Tablo Başlığı (thead)</thead>
<caption align="bottom">
alt-yazı (caption)
<caption>
<tr>
<th>
1.Sütun</th>
<th>
2.Sütun</th>
<th>
3.Sütun</th>
</tr>
<tbody>
<tr>
<td>
hücre1</td>
<td>
hücre2</td>
<td>
hücre3</td>
</tr>
<tr>
<td>
hücre4</td>
<td>
hücre5</td>
<td>
hücre6</td>
</tr>
<tr>
<td>
hücre7</td>
<td>
hücre8</td>
<td>
hücre9</td>
</tr>
</tbody>
</table>
Parametreler
<table border="..." cellpadding="..." cellspacing="..." align="..." width="..." height="...">
border parametresi çerçevenin kalınlığını belirtir.
border=0 çerçevenin görünmemesini sağlar.
hücre<table border="0">
<tr>
<td>
hücre</td>
</tr>
</table>hücre<table border="2">
<tr>
<td>
hücre</td>
</tr>
</table>hücre<table border="4">
<tr>
<td>
hücre</td>
</tr>
</table>hücre<table border="6">
<tr>
<td>
hücre</td>
</tr>
</table>
cellpadding parametresi hücre içi marj değerini belirtir.
cellpadding=0 hücre içinde bulunan unsurun (metin/grafik) hücre çerçevesine bitişik olmasını sağlar.
hücre<table border="1" cellpadding="0">
<tr>
<td>
hücre</td>
</tr>
</table>hücre<table border="1" cellpadding="5">
<tr>
<td>
hücre</td>
</tr>
</table>hücre<table border="1" cellpadding="10">
<tr>
<td>
hücre</td>
</tr>
</table>
cellspacing parametresi hücreler arası marjı belirler.
hücre1hücre2<table border="1" cellspacing="1">
<tr>
<td>
hücre1</td>
</tr>
<tr>
<td>
hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" cellspacing="5">
<tr>
<td>
hücre1</td>
</tr>
<tr>
<td>
hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" cellspacing="10">
<tr>
<td>
hücre1</td>
</tr>
<tr>
<td>
hücre2</td>
</tr>
</table>
align parametresi tabloyu düşey hizalamada kullanılır,
align=left sola,
align=right sağa dayalı yapar,
align=center ortalar
hücre1hücre2<table border="1" align="left">
<tr>
<td>
hücre1</td>
</tr>
<tr>
<td>
hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" align="center">
<tr>
<td>
hücre1</td>
</tr>
<tr>
<td>
hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" align="right">
<tr>
<td>
hücre1</td>
</tr>
<tr>
<td>
hücre2</td>
</tr>
</table>
width ve
height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablonun değer verilmediğinde sahip olduğu normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz.
hücre1hücre2<table border="1" width="150" height="200">
<tr>
<td>
hücre1</td>
</tr>
<tr>
<td>
hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" width="80" height="80">
<tr>
<td>
hücre1</td>
</tr>
<tr>
<td>
hücre2</td>
</tr>
</table>hücre1hücre2<table border="1" width="5" height="5">
<tr>
<td>
hücre1</td>
</tr>
<tr>
<td>
hücre2</td>
</tr>
</table>
<td> etiketi için parametreler
<td bgcolor="..." background="..." width="..." height="..." align="..." valign="...">
bgcolor parametresi hücreyi renklendirmede kullanılır.
hücre1hücre2hücre3hücre4<table border="1" cellpadding="7"><tr> <td bgcolor="#ff0000">
hücre1</td></tr><tr> <td bgcolor="#00ff00">
hücre2</td></tr><tr> <td bgcolor="#0000ff">
hücre3</td></tr><tr> <td bgcolor="#ffff00">
hücre4</td></tr></table>
background parametresi ile hücreye grafik-artalan yerleştirebiliriz.
hücre1hücre2hücre3hücre4<table border="1" cellpadding="9"><tr> <td background="resim1.jpg">
hücre1</td></tr><tr> <td background="resim2.jpg">
hücre2</td></tr><tr> <td background="resim3.jpg">
hücre3</td></tr><tr> <td background="resim4.jpg">
hücre4</td></tr></table>
width ve
height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız
height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken,
width komutu ile her hücreyi değiştiremeyiz.En büyük
width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda
width değerini her hücre için değiştirebilirken en büyük
height değeri tüm satır için geçerli olacaktır.
hücre1hücre2hücre3hücre4<table border="1" cellpadding="7"> <tr><td width=120 height=20>
hücre1</td></tr> <tr><td width=120 height=40>
hücre2</td></tr> <tr><td width=120 height=60>
hücre3</td></tr> <tr><td width=120 height=80>
hücre4</td></tr></table>
hücre1hücre2hücre3hücre4<table border="1" cellpadding="7"> <tr> <td width=40 height=30>
hücre1</td> <td width=70 height=30>
hücre2</td> <td width=90 height=30>
hücre3</td> <td width=120 height=30>
hücre4</td> </tr></table>
align parametresi hücre içinde yatay hizalama yapar.
hücre1hücre2hücre3<table border="1" cellpadding="7"><tr><td width="100" align="left">
hücre1</td></tr><tr><td width="100" align="center">
hücre2</td></tr><tr><td width="100" align="right">
hücre3</td></tr></table>
valign parametresi hücre içinde düşey hizalama yapar.
hücre1hücre2hücre3<table border="1" cellpadding="7"><tr> <td height="80" valign="top">
hücre1</td></tr><tr> <td height="80" valign="middle">
hücre2</td></tr><tr> <td height="80" valign="bottom">
hücre3</td></tr></table>
Hücreleri Birleştirme
<td colspan=".." rowspan="..">Aynı satırdaki hücreleri birleştirmek için
colspan, aynı sütundaki hücreleri birleştirmek için de
rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait
<td>..</td> etiketini siliyoruz.
ABCDEFGHIJKL<table border="1" cellpadding="12"> <tr><td>
A</td><td>
B</td><td>
C</td><td>
D</td></tr> <tr><td>
E</td><td>
F</td><td>
G</td><td>
H</td></tr> <tr><td>
I</td><td>
J</td><td>
K</td><td>
L</td></tr></table>
Yukarıdaki tabloda;
A ve B hücrelerini birleştirmek için A hücresine ait
<td> etiketine
colspan=2 parametresini ekliyoruz ve B hücresine ait
<td>B</td> etiketini siliyoruz. E F ve G hücrelerini birleştirmek için E hücresine ait
<td> etiketine
colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait
<td>F</td>,
<td>G</td> etiketlerini siliyoruz.
ACDEHIJKL<table border="1" cellpadding="12"> <tr><td colspan="2">
A</td><td>
C</td><td>
D</td></tr> <tr><td colspan="3">
E</td><td>
H</td></tr> <tr><td>
I</td><td>
J</td><td>
K</td><td>
L</td></tr></table>
Aynı şekilde E ve I hücrelerini birleştirmek için E hücresine ait
<td> etiketine
rowspan=2 parametresini ekliyoruz ve I hücresine ait
<td>I</td> etiketini siliyoruz. C G ve K hücrelerini birleştirmek için C hücresine ait
<td> etiketine
rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait
<td>G</td> ,
<td>K</td> etiketlerini siliyoruz.
ABCDEFHJL<table border="1" cellpadding="12"> <tr><td>
A</td><td>
B</td> <td rowspan="3">
C</td><td>
D</td></tr> <tr><td rowspan="2">
E</td><td>
F</td><td>
H</td></tr> <tr><td>
J</td><td>
L</td></tr></table>