ercani bilişim » Blog Archive » HTML’i anlamak(devam)

HTML’i anlamak(devam)

31-07-2008
ercani html notları

Evet yazımıza devam ediyoruz. Şimdi anlatacağım konu (TABLOLAR) html de elemanların sıralanması ve düzgün yerleştirilmesi için kullanılan bir metotdur. O yüzden html için çok önemlidir.Web tasarım aslında css sayesinde tablosuz sayfa modeline doğru gitmektedir. Ama bildiğimiz kadarıyla google bile hala sayfalarında tablo kullanıyor.
Evet tablolara şöyle bir giriş yapalım; Tablo <table></table> taglarıyla başlayıp biter. Bu taglar tek başına işe yaramaz. Yani bu tagların yazılmasının nedeni web tarayıcısının “tablo yaratılıyor öyle yorumla “ diye yorumlamasıdır. Bir tablo şüphesizki satır ve sütünlardan oluşur. Oyüzdenden <table> etiketine satır ve sütun tanımlamamız gerekir. Bunu yapmak için satırın başladığını ifade eden <tr></tr> tagları kullanılır. Satırın devamını sağlayan ve aslında içeriği taşıyan bloglar <td></td> taglarıdır. Bunu bir örnekle gösterelim.

<table border=”1″>
<tr>
<td>burası birinci sutundur.</td>
<td>burası ikinci sutundur.</td>
<td>burası üçüncü sutundur</td>
</tr>
</table>

Bu kodları htmlin gövdesi olan <body></body> taglarının arasına yazdığımızda şu sonucu elde ederiz.

burası birinci sutundur.

burası ikinci sutundur.

burası üçüncü sutundu

Yani anlıcağımız <tr> ler satır oluşturur <td> ler ise sutun. Bu çok karıştırılan bir meseledir. En iyi olarak şöyle bir resimle anlaya biliriz;

satır ve sütun
Burada <td> yerine en üst sütun olarak yani başlık için <th></th> kullananlarda var.
Toblunun içinde barındırdığı bir diğer özellik <caption></caption> dur. CAPTİON başlık için kullanılır. Örneğin üstteki örnekte birde başlık ekleyelim.

<table border=”1″>
<caption align=”center”>Burası tablomuzun başlığıdır.</caption>
<tr>
<td>burası birinci sutundur.</td>
<td>burası ikinci sutundur.</td>
<td>burası üçüncü sutundur</td>
</tr>
</table>

Bu kodun görünümü şu şekildedir.

Burası tablomuzun başlığıdır.
burası birinci sutundur.	burası ikinci sutundur.	burası üçüncü sutundur

Tabloların genel mantığı budur. Şimdi biraz içerik ekleme ve tablolarda biçimlendirmye göz atalım.
Gördüğünüz gibi tablomuzda çerçeveler(border) var. Kodları incelerseniz <table border=”1″> oduğunu görürsünüz. Yani çerçeve verme işini “border” üstlenir.Eğer değerini 0 verirseniz veya yazmazsanız çerçeveler görünmez. Borderin değerini arttırabilirsiniz isterseniz 10 yapıp bir deneyin.
Border konusu en iyi css le anlaşılabilir. CSS le border a renk genişlik sitil verebilirsiniz.
Tablolarımızın bir diğer özelliği satırların ve sütünların birleşebilmesidir. Bunun için COLSPAN ve ROWSPAN etiketlerini kullanırız. Colspan sütunları birleştirir.rowspan ise satırları birleştirmede kullanılır. Örneğin;

<table border=”1″ width=”75%”>
<caption align=”bottom”>Burası alt açıklamadır</caption>
<tr>
<td>1. sutun</td>
<td>2. sutun</td>
<td>3. sutun</td>
</tr>
<tr>
<td colspan=”2″>2 satır. 1.sutun burada colspan kullanıldı sütunlar birleşti</td>
<td>2. satır 3.sütun</td>
</tr>
<tr>
<td rowspan=”2″>3.satır 1.sütun burada rowspan kullanıldı. satırlar birleşti</td>
<td>3. satır 2. sütun</td>
<td>3. satır. 3. sütun</td>
</tr>
<tr>
<td colspan=”2″>buradada colspan sütunları birleştirdi</td>
</tr>
</table>

Bu kodun görünümü şu şekildedir.

Burası alt açıklamadır
1. sutun	2. sutun	3. sutun
2 satır. 1.sutun burada colspan kullanıldı sütunlar birleşti		2. satır 3.sütun
3.satır 1.sütun burada rowspan kullanıldı. satırlar birleşti	3. satır 2. sütun	3. satır. 3. sütun
	buradada colspan sütunları birleştirdi

Yukarıdaki tabloya bakarsak sanırım satır ve sütun birleştirmeyi öğrenmiş sayılırız.
Bir tablonun genişliği WİDTH yüksekliği ise HEİGHT özelliğiyle verilir. Yukarıdaki örnekte width değerine % cinsinden değer verdik. Bu değer tabloyu tarayıcı penceresine göre %75 olarak ayarla demektir. İstersek widht ve height değerlerine PX(piksel) cinsinden değerlerde verebiliriz.
Bir diğer tabloyu konumlandıran özellik ALİGN özellğidir. Align tabloyu konumlandırmaya yarar. aldığı değerler center, right, left dir.center ortalamak için kullanılır, left sola daya demektir, right sağa daya anlamındadır.
Şimdi bir tabloya içerik ekleyelim ve tablonun zemin renklerini değitirmeyi gösterelim.
Bir tabloya içerik eklemek için <td></td> taglarının arasını kullanırız. Buraya istediğiniz içeriği(multimedia , metin, resim) yerleştirebilirsiniz.Yani daha önce anlatılan <p> paragraf ve metin biçimlendirme özellikleri <td></td> arasında rahatlıkla kullanılabilir. Peki resim eklersek nasıl yapacaz bu işi?
İşte bunun için kullanılan tagımız <img> etiketir. Genel olarak tanımlama şu şekildedir.
<img src=”http://www.ercani.com/ornekresim.jpg” width=”20px” height=”50px”>
SRC : src özelliği resmin nerden çekilmesini belirtir. Tarayıcı ordaki yolu izleyip resmi görüntüler.
width ve height artık bildiğimiz gibi yükseklik ve genişlik değerleridir.
İşte bu şekilde <td><img src=”http://www.ercani.com/ornekresim.jpg” width=”20px” height=”50px”></td> komutunu verirsek tarayıcı o sütun içine belirtilen yoldaki resmi atar. örneğin;

Tablolarda satır ve sütunların zemin rengi bgcolor özelliğiyle verilir. Örneğin;
<td bgcolor=”#00ccff”>burası mavi zeminli bir sütundur</td>

burası mavi zeminli bir sütundur

renk değeri olarak daha önce verdiğim ingilizce kelimeleride girebilirsiniz.
tablolarda vereceğim son özellik hücre içi ve dışı boşluk diye adlandırılılan cellspacing ve cellpadding tir.

Bir tablonun hücreleri arasındaki mesafe CELLSPACING olarak verilebilir Hücrelerin içindeki yazı veya grafik gibi unsurların hücrenin iç çizgisine ne kadar yaklaşacağı, ya da başka bir deyişle, hücre içi marj, CELLPADDING ile verilebilir.
aldıkları değerler % ve PX(piksel) cinsinden olabilir.örneğin;
<table border=”1″ cellspacing=5 cellpadding=5 ″> gibi. Bu özelliği değişik denmelerle görebilirsiniz.
Şimdi bir diğer konu olan A etiketi yani anchor değinmek istiyorum. Bu etiket htmlin diğer sayflar arasındaki link denilen geçişi şağlar. Bir resme ve bir metne rahatlıkla link verebilirsiniz. Üzerine tıkladığında şu sayfaya git demektir bu.önce bilmemiz gereken özelliklerini verip sonra örnekle anlayalım.
<a href=”URL” target=”değer”>bu metin bir linktir.</a>

HREF=”url”: URL, (Uniform Recourse Locator) Internet’te adres demektir. Bu adres, kendi sabit diskinizde bir klasör (ve alt-klasörler) içindeki bir dosyanın adı olabilir yada http://www.ercani.com gibi bir HTTP adreside verilebilir. Aynı şekilde internette çevirim içi bir dosyanında bağlantısı verilebilir.Örneğin;
<a href=”http://www.ercani.com/download/bilisim.rar”>buradan dosyayı indirebilirsiniz</a> gibi.
TARGET=”pencere”: Burada açılacak yeni sayfanın nasıl bir açılma eğilimi göstereceği tanımlanır. Aldığı değerler;

_blank: açılacak sayfa yeni bir pencerede açılır.

_parent: Alınacak unsur, o anda açık sayfayı oluşturmuş bir ana sayfa varsa, onun yerine konulur.

_self: Alınacak sayfa mevcut sayfanın bulunduğu tarayıcı perceresine konulur.

_top: Alınacak sayfa mevcut pencereye en üstten itibaren konulur.
HTML de kullanılan diğer bazı etiketleride değinip yazımı bitirmek istiyorum.,
Kayan yazı oluşturmak:marquee

<marquee>bu yazı kayan bir yazıdır</marquee>
<marquee direction=right>bu yazı sağdan sola kayan bir yazıdır</marquee>
<marquee direction=right bgcolor=#ff33ff scrolldelay=1 witdh=200px >buda kayan bir yazıdır ama zemin rengi vardır</marquee>
Burada kayan yazımıza zemin rengi verdik. scrolldelay kayma hızını belirler sayı arttıkça hız düşer .
PRE tagı <pre>:pre notepad gibi bir editörde taglar arasına ne yazarsanız aynısını taraıcıda gösterir. Örneğin;
<pre>
kitap adı—-nisan– mayıs
—— +++ —-++—-
asp +++ 50 ++ 50
photoshop++100++ 200
</pre>
Burada ne yazdıysak tarayıcı penceresinde aynısı görünür. İsterseniz deneyebilirsiniz.
EMBED: Html sayfasına müzik eklemek için kullanılır.
<embed autostart=true hidden=true src=”adres”>
autostart= sayfanın açıldığındaki müziğin başlayıp başlamaması gerektiğini belirtir. true başlatır. false başlatmaz.
hidden: müzik kontrol düğmelerinin gizli veya görünür olduğunu belirtir. True görünür. false görünmez.