Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
1
İNTERNET PROGRAMCILIĞI 1
Öğr. Gör. Canan ASLANYÜREK
2
TABLO İŞLEMLERİ <TABLE> Etiketi: En genel tablo etiketidir.
Tablonun başlangıç ve bitişi ile tabloya ait özellikleri belirler. Tablo ile ilgili tüm etiketleri içerisine alır. Align: Tabloyu yatay konumda hizalamak için kullanılır. Varsayılan değeri left dir. Left: Sola yaslı Right: Sağa yaslı Center: Ortalı
3
TABLO İŞLEMLERİ Border: Çerçevenin başlığını belirler. Sayısal değer alır. CellSpacing: Hücreler arası boşluğu belirler. 2 varsayılan değerdir. CellPadding: Hücre içeriğinin hücre sınırlarına olan uzaklğını belirler. Varsayılan değer 1 dir. Width/Height: Tablonun genişliğini ve yüksekliğini belirlemek için kullanılır. Sabit sayısal değer ve ya yüzde cinsinden değer alabilir.
4
TABLO İŞLEMLERİ Not: Genişliği ve yüksekliği piksel cinsinden tanımlanan tablolar sayfanın boyutları değişse de sabit kalırlar. Yüzde olarak tanımlanan tablolar sayfa boyutları ile değişirler. BgColor: Arkaplan rengini belirler. Background: Arkaplan resmini belirler. BorderColor: Çerçeve rengini belirler.
5
<TR> ETİKETİ Tabloya satır eklemek için kullanılır.
Her bir satır için bir kez kullanılması gerekir. Tablolar oluşturulurken önce satırlar sonra o satır içindeki sütunlar oluşturulur. Align: İçeriğin yatayda hizalanması için kullanılır. Left, right, center ve justify(iki yana yaslı) değerlerini alır.
6
<TR> ETİKETİ VAlign: Hücre içerisindeki metnin düşeydeki yerleşimini ayarlar. Top: Üstte Middle: Ortada Bottom: Altta BgColor: Arkaplan rengini belirler.
7
<TD> ETİKETİ Bir satır üzerinde sütunlar oluşturmak için kullanılır. Satır etiketleri arasında kullanılır. <TD> etiketleri arasında hücreye ait içerik bulunur. Align: İçeriğin yataydaki hizası için kullanılır. Left, right, center, justify değerlerini alabilir. Width/ Height: Sütunun genişliğini ve yüksekliğini ayarlamak için kullanılır.
8
<TD> ETİKETİ Valign: Düşeydeki konumunu ayarlar. Ortalı(Middle), üstte(top), altta(bottom) olabilir. BgColor: Arkaplan rengini belirler. Tablo oluştururken sırasıyla şu adımlar oluşturulur. Önce <tablo> etiketi ve gerekli parametreleri belirlenir. Her bir satır için <tr> </tr> etiket çifti kullanılır. Sütun sayısınca her bir satırda <td> </td> etiket çifti kullanılır. Tablo içeriği <td> </td> etiketleri arasına yazılır. </tablo> etiketi sonlandırılır.
9
UYGULAMA <html> <head> </head> <body>
<tablo border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>
10
UYGULAMA <html>
<head> <title> Tablolar</title> </head> <body> <table border="1" cellspacing="0" width="70%" bordercolor="red"> <tr> <td>Merhaba</td> </tr> <td> Dumansız</td> <td>Hava Sahası</td> </table> </body> </html>
11
<TH> ETİKETİ Tabloda özellikle sütunların başlangıcını başlık olarak belirlemek için kullanılır. Özellikleri <td> etiketi ile aynıdır. Hücrelerin içeriği başlık olarak kabul edilip kalın olarak gösterilir.
12
UYGULAMA <html> <head></head> <body>
<table border="1" cellpadding=0 cellspacing=0> <tr> <th>Asal</th> <th>Tek</th> <th>Çift</th> </tr> <td>13</td> <td>21</td> <td>24</td> </table> </body> </html>
13
HÜCRELERİ BİRLEŞTİRMEK
Hücreleri birleştirmek için <TD>etiketinin aşağıdaki özellikleri kullanılır. ColSpan: Aynı satırdaki hücreleri birleştirmek için kullanılır. Sütunları birleştirir. Sayısal değer alır. Bu değer birleştirilecek hücre sayısını gösterir. RowSpan: Aynı sütundaki hücreleri birleştirmek için kullanılır. Satırları birleştirir. Sayısal değer alır. Bu değer birleştirilecek hücre sayısını gösterir. Bu parametrelerin aldığı değer kadar alt etiketlerde <TD> etiketi kullanılmaz.
14
UYGULAMA <html> <head></head> <body>
<table border="1"> <tr> <td>1</td> <td rowspan=2>2</td> <td>3</td> </tr> <td>4</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </table> </body> </html>
15
UYGULAMA <html> <head></head> <body>
<table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <td colspan="2">4</td> <td>6</td> </tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html>
16
FRAMES(ÇERÇEVELER) Aynı tarayıcı penceresinde birbirinden bağımsız birden fazla sayfanın gösterimine imkan veren yapılardır. Bu yapıya en çok sayfanın bir kısmı sabit ve bir kısmı değişken olması gerektiğinde ihtiyaç duyulur. Kullanımı yaygın değildir.
17
<FRAMESET> ETİKETİ
Çerçeve grubunu oluşturmak için kullanılır. Table etiketi gibi çerçeve yapısının başlangıcını ve bitişini gösterir. Çerçeveler satır ve sütunlardan oluşur. Aldığı parametreler aşağıda verilmiştir. HTML5’te kullanımdan kaldırılmıştır. Cols ve ya rows seklinde aldığı argümanlar ile sayfanın ne şekilde yerleşeceği belirlenir. Cols: Sütunları belirler. Rows: Sayfayı satırlara bölmek için kullanılır.
18
<FRAMESET> ETİKETİ
Cols ve ya rows seklinde aldığı argümanlar ile sayfanın ne şekilde yerleşeceği belirlenir. <frame> etiketi ile de hangi bölümün hangi HTML dosyasından oluşacağı belirlenebilir. <frameset cols="25%,75%"> (dikey çerçevelerin genişliği)
19
<FRAMESET> ETİKETİ
Örneğin cols="150,350" gibi sayı yazılabilir, cols="45%,65%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada (*) sembolü ile açılacak çerçevenin ebadı browser'a bırakılır, cols="150,*" ifadesi ilk pencerenin 150 pixel olacağını * ise ikinci frame'in geri kalan boşluğun tümünü kaplayacağını belirtiyor. Bu şekilde açılacak çerçeve sayısını da belirtmiş olur. Aynı <frameset> tag'ı içinde hem "cols" hem de "rows" etiketleri kullanılmaz. Anca iç içe frameler yapılırsa kullanılabilir.
20
<FRAMESET> ETİKETİ
Frame kullanırken kullandığımız frame'e isim vermek için name elemanını ve frame'in bulunduğu yeri göstermek için de src elemanını kullanırız. frameborder=“...” (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler. border=“...” Çerçeveleri birbirinden ayıran çizgilerin kalınlığını belirler. (çerçeveler arası mesafeyi) bordercolor ; kullandığınız çerçevenin kenarlığına renk vermek için kullanılır.
21
<FRAMESET> ETİKETİ
Çerçevenizde kenarlık istemiyorsanız, border=”0” ve frameborder=”no” vermelisiniz. scrolling=".." (yes, no, auto) Kaydırma çubuklarının durumunu belirler. Noresize Pencere boyutlarının sabit olmasını sağlar.
22
KAYNAK Ebubekir Yaşar, Turgut Özseven, İnternet Programcılığı 1
Benzer bir sunumlar
