İLERİ HTML.

... konulu sunumlar: "İLERİ HTML."— Sunum transkripti:

1 İLERİ HTML

2 Tablolar Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler; İLK ETİKET SON AÇIKLAMA <TABLE> </TABLE> Tablonun başlangıç ve bitimini tanımlamada kullanırız. <CAPTION> </CAPTION> Tablonun altına ya da üstüne başlık metni eklemede kullanılır. Bunun için Align özelliğine top ya da bottom değeri atanır. <TR> </TR> Table Row: Tablo satırı oluşturmada kullanılır. <TH> </TH> Table Header: Tabloya başlık hücresi ekler. Başlık hücresi bold ve ortalı yazılır. <TD> </TD> Table Data: Tablonun satırına veri elemanı (hücre) eklemede kullanılır.

3 Tablolar

4 Tablolar Tablolar satır ve sütunlardan oluşur. Tabloya genel bir başlık atayabiliriz (thead). Her sütun için de kendi başlığını oluşturmak mümkündür. Tablonun sona erdiği satırdan sonraki satıra açıklama koyabiliriz (caption). Ayrıca tablo hücrelerini yanındaki veya altındaki hücrelerle birleştirebiliriz:

5 Tablolar Ş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.

6 Tablolar <table border=“1”> <tr> <td>hücre1</td> </tr> <tr> <td>hücre2</td> </tr> </table>

7 Tablolar <TABLE> Etiketi
<TABLE> etiketi kullanmak zorunda olmadığımız birkaç özelliğe sahiptir. ÖZELLİK AÇIKLAMA ALIGN Tablonun sayfadaki hizalamasını kontrol eder. Left, center veya right olabilir. Varsayılanı left tir. WIDTH Tablonun genişliğini sabit olarak belirteceksek bu özelliğe pixel olarak bir sayı, sayfanın yüzdesi büyüklüğünde olmasını istiyorsak yüzdeli bir sayı yazılır. (WIDTH=”100” ya da WIDTH=”100%”) BORDER Border yani çerçeve büyüklüğü pixel olarak bildirilir. “0” verilirse çerçevesizdir. CELLSPACING Hücreler arasındaki çerçevenin kalınlığını belirtir. Varsayılan olarak 1 dir. CELLPADDING Hücre çerçevesi ile içeriği arasındaki mesafeyi pixel olarak belirler. Varsayılanı 1 pixeldir.

8 Tablolar <TR> Etiketi
TR etiketi iki tane özelliğe sahiptir. Bunlar; ÖZELLİK AÇIKLAMA ALIGN Satırdaki hücrelerin içeriğinin yatay hizalamasını kontrol eder. left, right, center olabilir. VALIGN Satırdaki hücrelerin içeriğinin dikey hizalamasını kontrol eder. top, middle, bottom olabilir.

9 Tablolar <TH> ve <TD> Etiketleri
Tablo Başlığı (Table Header=TH) ve Tablo Verisi (Table Data=TD) etiketlerinin özellikleri; ÖZELLİK AÇIKLAMA ALIGN Hücre içeriğinin yatay hizalamasını kontrol eder. VALIGN Hücre içeriğinin dikey hizalamasını kontrol eder. NOWRAP Kelime aralarında satır sonu kırmalarını pasif yapar. (Word Wrapping) ROWSPAN Bir hücrenin genişletileceği satır sayısını belirtir. Varsayılanı 1 dir. COLSPAN Bir hücrenin genişletileceği sütun sayısını belirtir. Varsayılanı 1 dir. WIDTH Hücrenin pixel olarak genişliği HEIGHT Hücrenin pixel olarak yüksekliği

10 Kural… Önce satırlar, daha sonra içerisine sütunlar (datalar) ekliyoruz…

11 Kenarlıkların ve Genişliğin Eklenmesi
Tablo genişliği önemli bir konudur ve özen gerektirir. Çünkü, bir tablonun genişliği, o tablonun tarayıcıyla etkileşimini ve bilgisayar ekranının boyut ayarlarını belirler. Tüm tarayıcılar, platformlar ve bilgisayar tasarımları için uygun maksimum görüntü alanı 585x295 pikseldir. Genişlikler piksel birimiyle kodlarken daha büyük herhangi bir değer, 640x480 çözünürlüğüne ayarlanmış ekranlarda bir yatay kaydırma çubuğunun belirmesine neden olur. Bundan kaçınmak gerekir.

12 Kenarlıkların ve Genişliğin Eklenmesi
İstatistikler, %75’lik en büyük yüzde dilimini oluşturan ziyaretçilerin 800x600 çözünürlüğünü kullandığı unutulmamalıdır. Pikseller yerine yüzdeleri kullanan tablolar (dinamik tablo tasarımı) kullanmak çözünürlük ile ilgili problemlerden kaçınmak için akılcı bir yoldur.

13 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.

14 Tablolar

15 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.

16 Parametreler 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.

17 Parametreler cellspacing parametresi hücreler arası marjı belirler.

18 Parametreler align parametresi tabloyu hizalamada kullanılır .
align=left sola, align=right sağa dayalı yapar, align=center ortalar .

19 Parametreler width ve height parametreleri tabloda en ve boy uzunluğunu belirtir. Dikkat : 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.

20 Parametreler

21 <td> etiketi için parametreler
<td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> bgcolor parametresi hücreyi renklendirmede kullanılır.

22 <td> etiketi için parametreler
background parametresi ile hücreye grafik-artalan yerleştirebiliriz.

23 <td> etiketi için parametreler
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.

24 <td> etiketi için parametreler

25 <td> etiketi için parametreler

26 <td> etiketi için parametreler
align parametresi hücre içinde yatay hizalama yapar.

27 <td> etiketi için parametreler
valign parametresi hücre içinde düşey hizalama yapar.

28 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. Aşağıdaki gibi bir tablo yapımız olsun :

29 Hücreleri Birleştirme
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.

30 Hücreleri Birleştirme
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.

31 Sayfa Biçimlendirmede Tablo Kullanımı
HTML ’in en büyük avantajlarından biri de ekstra boşlukları ve carriage return (satır kırma, paragraf, sekme vs.)karakterleri kaldırarak sayfayı otomatik olarak biçimlendirmesidir. Maalesef bu durum aynı zamanda en büyük problemdir. Sayfanın şeklini ayarlarken metinleri istediğimiz yerlere konumlandıramayız. Neyse ki bunun için tabloları kullanabiliriz.

32 Sayfa Biçimlendirmede Tablo Kullanımı
Örnek: <HTML> <BODY background="bg2.gif"> <TABLE border="0"> <TR> <TD width="10“> <img border="0" src="amblem.jpg"></TD> <TD> <H1>FIRAT ÜNİVERSİTESİ </H1> </TD> <TD><FONT size="2"><A href="hakkinda.htm">Web Sitemiz Hakkında</A></FONT></TD> </TR> <TD width="10"><A href="ogrenciler.htm">Öğrenciler</A></TD> <TD colspan="2">Üniversitemiz Elektronik ve Bilgisayar alanında deneyimli öğretmenler yetiştirmektedir.</TD>

33 Sayfa Biçimlendirmede Tablo Kullanımı
<TR> <TD><A href="personel.htm">Personel</A></TD> <TD colspan="2“> <UL> <LI>Bigisayar Sistemleri</LI> <LI>Elektronik</LI> <LI>Kontrol ve Telekom</LI> </UL> </TD> </TR>

34 Sayfa Biçimlendirmede Tablo Kullanımı
<TR> <TD><A Göner </A> </TD> </TR> <TD></TD> <TD><FONT size="2">Bu WEB sayfası deneme amaçlı yapılmıştır.</FONT></TD> </TABLE> </BODY> </HTML>

35 Sayfa Biçimlendirmede Tablo Kullanımı
Yukarıdaki gibi bir sayfayı oluşturmanın bir başka yöntemi ise frame (çerçeve) kullanmaktır.