Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

1.  Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler; İLK ETİKET SON ETİKET AÇIKLAMA Tablonun başlangıç ve bitimini tanımlamada kullanırız.

Benzer bir sunumlar


... konulu sunumlar: "1.  Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler; İLK ETİKET SON ETİKET AÇIKLAMA Tablonun başlangıç ve bitimini tanımlamada kullanırız."— Sunum transkripti:

1 1

2  Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler; İLK ETİKET SON ETİKET AÇIKLAMA Tablonun başlangıç ve bitimini tanımlamada kullanırız. 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. Table Row: Tablo satırı oluşturmada kullanılır. Table Header: Tabloya başlık hücresi ekler. Başlık hücresi bold ve ortalı yazılır. Table Data: Tablonun satırına veri elemanı (hücre) eklemede kullanılır. 2

3 3

4  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: 4

5  Şimdi basit bir tablo yapmak için gerekli etiketleri öğrenelim. Öncelikle... etiketlerini yazıyoruz ve arasını doldurmaya başlıyoruz. etiketi ile satırları, etiketi ile de sütunları oluşturuyoruz. 5

6 hücre1 hücre2 6

7  Etiketi  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. CELLSPACINGHü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. 7

8  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. 8

9  ve Etiketleri  Tablo Başlığı (Table Header=TH) ve Tablo Verisi (Table Data=TD) etiketlerinin özellikleri; ÖZELLİK AÇIKLAMA ALIGNHücre içeriğinin yatay hizalamasını kontrol eder. VALIGNHücre içeriğinin dikey hizalamasını kontrol eder. NOWRAPKelime aralarında satır sonu kırmalarını pasif yapar. (Word Wrapping) ROWSPANBir hücrenin genişletileceği satır sayısını belirtir. Varsayılanı 1 dir. COLSPANBir hücrenin genişletileceği sütun sayısını belirtir. Varsayılanı 1 dir. WIDTHHücrenin pixel olarak genişliği HEIGHTHücrenin pixel olarak yüksekliği 9

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

11  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. 11

12  İ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. 12

13  Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı gövdeyi etiketleri arasına yazarız. etiketi ile ikinci bir açıklama vermek mümkündür.  Sütun başlıklarına gelince, her bir başlık etiketi ile belirtilir ve bunlar etiketinde olduğu gibi... arasına yazılır.  Tabloda satır ve sütunları belirten ve etiketleri... arasına alınır. 13

14 14

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

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

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

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

19  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. 19

20 20

21   bgcolor parametresi hücreyi renklendirmede kullanılır. 21

22  background parametresi ile hücreye grafik-artalan yerleştirebiliriz. 22

23  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. 23

24 24

25 25

26  align parametresi hücre içinde yatay hizalama yapar. 26

27  valign parametresi hücre içinde düşey hizalama yapar. 27

28   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 : 28

29  A ve B hücrelerini birleştirmek için A hücresine ait etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait B etiketini siliyoruz.  E F ve G hücrelerini birleştirmek için E hücresine ait etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait F, G etiketlerini siliyoruz. 29

30  Aynı şekilde E ve I hücrelerini birleştirmek için E hücresine ait etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait I etiketini siliyoruz.  C G ve K hücrelerini birleştirmek için C hücresine ait etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait G, K etiketlerini siliyoruz. 30

31  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. 31

32  Örnek: ◦ ◦ FIRAT ÜNİVERSİTESİ ◦ Web Sitemiz Hakkında ◦ ◦ Öğrenciler ◦ Üniversitemiz Elektronik ve Bilgisayar alanında deneyimli öğretmenler yetiştirmektedir. ◦ 32

33 ◦ ◦ Personel ◦ ◦ Bigisayar Sistemleri ◦ Elektronik ◦ Kontrol ve Telekom ◦ 33

34 ◦ ◦ Göner ◦ ◦ Bu WEB sayfası deneme amaçlı yapılmıştır. ◦ 34

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


"1.  Tablo oluşturmak için HTML de beş etiket vardır. Bu etiketler; İLK ETİKET SON ETİKET AÇIKLAMA Tablonun başlangıç ve bitimini tanımlamada kullanırız." indir ppt

Benzer bir sunumlar


Google Reklamları