HTML ders notları 2

Tarih: Friday, 2007-11-02, 6:35 AM | Mesaj # 1

Vazifesi: Removed

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"
target="_self"
target="_top" target="_parent"

target="çerçeve adı" Bağlantı yeni bir pencerede açılır.
Bağlantı aynı pencere içerisinde açılır.
Bağlantı aynı pencere içerisinde en üstten itibaren açılır.
Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur.
Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar.("Çerçeveler" konusunda ayrıntılı olarak değineceğiz.)

TABLOLAR(TABLE)
<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.

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ÜCRE1 HÜCRE2
<TABLE BORDER="1">
<TR>
<TD>HÜCRE1</TD>
<TD>HÜCRE2</TD>
</TR>
</TABLE>
HÜCRE1
HÜCRE2
<TABLE BORDER="1">
<TR>
<TD>HÜCRE1</TD>
<TR>
</TR>
<TD>HÜCRE2</TD>
</TR>
</TABLE>
HÜCRE1 HÜCRE2
HÜCRE3 HÜ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>

Parametreler
<TABLE BORDER=".." CELLPADING=".." CELLSPACING=".." ALIGN=".." WIDTH=".." HEIGHT="..">

Border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar

Cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.
hücre

Cellspacing parametresi hücreler arası marjı belirler.
hücre1
hücre2
<table border="1" cellspacing="1">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
hücre1
hücre2
<table border="1" cellspacing="5">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
hücre1
hü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ücre1
hücre2
<table border="1" align="left">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr></table>
hücre1
hücre2
<table border="1" align="center">
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr></table>
hücre1
hü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, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz.
hücre1
hücre2

<table border="1" width=150 height=200>
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
hücre1
hücre2

<table border="1" width=80 height=80>
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>
hücre1
hücre2

<table border="1" width=5 height=5>
<tr>
<td>hücre1</td>
</tr>
<tr>
<td>hücre2</td>
</tr>
</table>

<TD BGCOLOR=".." BACKGROUND=".." WIDTH=".." HEIGHT=".." ALIGN=".." VALIGN="..">
hücre1
hücre2
hücre3
hü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ücre1
hücre2
hücre3
hücre4
<table border="1" cellpadding="7">
<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>
Align parametresi hücre içinde yatay hizalama yapar.
hücre1
hücre2
hü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ücre1
hücre2
hü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.

A B C D
E F G H
I J K L

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.

A C D
E H
I J K L

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.
A B C D
E F H
J L

<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>
ÇERÇEVELER
Çerçeveler (frame), HTML'e sonradan eklenmiş bir özelliktir. Bu yüzden eski sürüm browser'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 frameleri destekliyor).

Ç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 (bu sayfalarda olduğu gibi). Bunun anlamı ise kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak demektir. Browser çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı verecektir.