Dreamweaver'de Tablo ve Köprü Oluşturma
4. BAĞLANTI (KÖPRÜ) OLUŞTURMABir WEB sitesinde altı çizili olarak bir takım kelimeler görmüşüzdür. Bu altı çizili
kelimelerin üstüne gelince fare şekil değiştirip bir el şekline dönüşmektedir. Bunun anlamı kelimeye tıkladığınızda kelimeyle ilgili bir başka WEB sayfasına gideceğidir. HTML'nin bu görevini yerine getirmesini sağlayan etiket <a>’dir. Dokümanınızdan başka dokümana bağlantı yapabilmek için:
?????? Etiketi giriniz. (Kısaca ilk satıra <a> yazınız)
?????? Hangi dokümana geçiş yapmak istiyorsanız, ismini yazınız. HREF="dosyaismi"
?????? Bu dokümanı ekranda hangi isimle göstermek istediğinizi belirtiniz.
?????? Etiketi kapatınız. </a>
4.1. Sayfa İçi Bağlantı Oluşturma
Bir metin üzerinde belirli bölgelere ulaşmak için yine etiketler kullanılabilir. <a
href="#...">...</a>, <a name="....">...</a> komutlarını kullanarak sayfa içi (dahili) bağlantıları hazırlayabiliriz. Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun. Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konuya gitsin. Böyle bir sayfa hazırlamak için yapacağımız şeyler:
?????? "Tıklandığında" açılacak konuyu işaretlemek (<a name="....">...</a> ).
?????? Tarayıcıya, hazırlayacağımız menüye "tıklandığında" bu işaretli konuya
gitmesini bildirmek (<a href="#...">...</a> ).
4.2. Sayfa Dışı Bağlantı Oluşturma
WEB sayfalarının en önemli özelliklerinden birisi, kolayca başka sayfalara ve
dökümanlara geçiş yapılabilmesidir. Bunun için <a href >...</a> komutunu kullanırız. Bu komutlar arasına yazmış olduğunuz ifade mavi renkte ve altı çizili olarak ekrana gelir. İfadenin üzerine tıkladığınızda yazmış olduğunuz WEB adresine sizi yönlendirecektir. Ana sayfaya dönmek için buraya tıklayınız.
Bağlantının açılacağı pencereyi belirtmek için "target" parametresinide
kullanabiliriz.
<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.
4.3. E-Posta Adresine Bağlantı Oluşturma
Hazırlamış olduğunuz WEB sayfasında insanların istediğiniz bir mail adresine kolay bir şekilde ulaşabilmesini sağlayabilirsiniz.
Bunun için, <a href=”mailto…….”>….</a>
komutunu kullanabilirsiniz.
Verilen komutları yazdığımızda ekranda “e-posta göndermek için tıklayınız” ifadesi görünecektir. Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail’in send to (kime) kısmına verdiğimiz mail adresi otomatik olarak yazılacaktır.
5. TABLOLAR
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 istediğiniz düzenlemeyi yapabilirsiniz. Ekranda tablo gösterirken, o an kullanılan pencerenin büyüklüğüne ve tablo içindeki metnin genişliğine göre tablonun eni ve boyu değişebilir. Tablo, satır ve sütunlardan oluştuğu için her hücre ayrı ayrı tanımlanır. Her satır ve sütun, kendi içinde başka satır ve sütunları ihtiva edebilir ve diğer satır ve sütunlarla birleştirilebilir. Tablolara başlık, liste,
paragraf, form, figür ve her formatta metin konabilir.
5.1. <TABLE>
Tablolar <table> belirteci ile başlar.
<table>
……
</table>
5.1.1. TR
Tabloda satır oluşturmayı sağlar.
5.1.2. TD
Tabloda sütun oluşturmayı sağlar.
5.1.3. Border
Border parametresi hücrelerin ve tablonun etrafındaki çerçevenin kalınlığını
ayarlamak için kullanılır. border=0 çerçevenin görünmemesini sağlar.
5.1.4. TH
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 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.
...
<table border="1">
<thead>Ders Dağılımı</thead>
<caption align="bottom">
Tablo 1.1: Bölümlere göre dersler
<caption>
<tr>
<th>Bilgisayar</th>
<th>Elektronik</th>
<th>Elektrik</th>
</tr>
<tbody>
<tr>
<td>Web Tasarımı</td>
<td>Uydu Alıcısı</td>
<td>Çağırma Tes.</td>
</tr>
<tr>
<td>Programlama</td>
<td>İletişim Tek.</td>
<td>Dağıtım Panoları</td>
</tr>
</tbody>
</table>
...
5.1.5. Width
Tablonun pixel cinsinden genişliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul genişliği tablonuza otomatik olarak atayacaktır.
5.1.6. Height
Tablonun pixel cinsinden yüksekliğini belirler. Bu parametreyi kullanmazsanız, Web tarayıcınız hücre içeriklerini görüntüleyebileceği en makul yüksekliği tablonuza otomatik olarak atayacaktır.
5.1.7. Colspan
Aynı satırdaki hücreleri birleştirmek için colspan parametresi kullanılır.
5.1.8. Rowspan
Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi kullanılır.
5.1.9. Cellspacing
Tablonun.içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını, pixel cinsinden ayarlar.
5.1.10. Cellpadding
Cellpadding değişkenine verilebilecek herhangi bir sayı, tablonun sınırları ile tablo içeriği arasındaki mesafeyi ayarlar. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar.