İnternet Programlama-I HTML-TABLOLAR. HTML TABLOLARI HTML DİLİNDE TABLO OLUŞTURMAK İÇİN TAGI KULLANILIR. İYİ BİLİNMESİ GEREKEN KONULARDAN BİRİDİR ÇÜNKÜ.

... konulu sunumlar: "İnternet Programlama-I HTML-TABLOLAR. HTML TABLOLARI HTML DİLİNDE TABLO OLUŞTURMAK İÇİN TAGI KULLANILIR. İYİ BİLİNMESİ GEREKEN KONULARDAN BİRİDİR ÇÜNKÜ."— Sunum transkripti:

1 İnternet Programlama-I HTML-TABLOLAR

2 HTML TABLOLARI HTML DİLİNDE TABLO OLUŞTURMAK İÇİN TAGI KULLANILIR. İYİ BİLİNMESİ GEREKEN KONULARDAN BİRİDİR ÇÜNKÜ SAYFA İÇİNDEKİ NESNELER TABLOLARLA DÜZENLENİR VE HİZALANIR.

3 TABLOLAR TAGIYLA SATIRLARA VE HER SATIR DA TAGIYLA SÜTUNLARA BÖLÜNÜR. BU İŞLEM SONUNDA OLUŞTURULAN HÜCRELERDE METİNLER, LİSTELER, RESİMLER, PARAGRAFLAR, FORMLAR VE BAŞKA DİĞER NESNELER DE OLABİLİR.

4 ... Bilgisayar Programlama.... Hücre 1

5 BORDER ÖZELLİĞİ ŞEKLİNE TABLONUN SINIRLARININ KALINLIĞI BELİRTİLİR.

6 TABLODA BAŞLIKLAR İSİM LMYO

7 TABLO ÖZELLİKLERİ LMYO LMYO align=”center”: Tabloyu ortalar. Bgcolor: Arkaplan rengi Cellpadding : Hücre içi boşluk Cellspacing : Hücreler arası boşluk Width : Tablo genişliği (piksel olarak) Height: Tablo yüksekliği (piksel olarak) Background : Arka plan resmi

8 BOŞ HÜCRELİ TABLOLAR BOŞ HÜCRELER ÇOĞU BROWSER'DA KÖTÜ BİR ŞEKİLDE KENARLARI OLMADAN GÖRÜNÜRLER. HÜCRE 1 HÜCRE 2 HÜCRE 3

9 BOŞ HÜCRELİ TABLOLAR BU SORUNDAN KURTULMAK İÇİN BOŞ HÜCRELERE ( ) KOYULUR VE BU ŞEKİLDE HÜCRE KENARLIKLARININ GÖRÜNMESİ SAĞLANIR. HÜCRE 1 HÜCRE 2 HÜCRE 3

10 HÜCRE İÇİ ÖZELLİKLER LMYO align : Hücre içi yazı hizalaması. tabloda kullandığımız tablonun sayfa içindeki konumuydu ama hücre için hücre içi yazıların hizalaması. Burada ortalandı. Valign : (vertical align) Hücre içindeki yazıların dikey hizalaması. Bgcolor: Tablodan bağımsız olarak arkaplan rengi Height: Tablo yüksekliği, burada iki hücrenin yüksekliği farklı yapılamaz. Width : Tablo genişliği, tablo genişliğine 300 demiştik, 200ünü soldaki hücreye ayırdık ve diğerine 100 kaldı. % kullanarak ta yapılabilirdi.

11 HÜCRE İÇİ ÖZELLİKLER LMYO LMYO LMYO Aynı satırdaki hücreleri birleştirmek için colspan parametresi kullanılır. Aynı sütundaki hücreleri birleştirmek için de rowspan parametresi kullanılır

12 Delphi Pascal XML Borland C HTML PHP Basic

13 Çerçeveler (Frame) Çerçeveler yardımı ile birden fazla HTML dosyasını aynı tarayıcı sayfasında gösterebilirsiniz. Bu sekilde oluşturulan herbir HTML dosyası frame adını alır ve tümü birbirinden bagımısızdır. Frame yapısının kötü tarafları fazla sayıda HTML dosyası ile uğrasmak zorunda kalmanız ve de bu durumun arama motorlarında bazı güçlüklere yol açabilmesidir.

14 etiketi etiketi sayfanın ne şekilde çerçevelendirileceğini belirler. Cols ve ya rows seklinde aldığı argümanlar ile sayfanın ne şekilde yerleşeceği belirlenir. etiketi ile de hangi bölümün hangi HTML dosyasından oluşacağı belirlenebilir. (dikey çerçevelerin genişliği)

15 FRAMESET Parametreleri 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. Sayfamıza framelerin dikey veya yatay yerleşmeleri için tagının "cols" ve "rows" elemanlarını kullanırız. cols="*,*,*" sayfanın dikey olarak hangi oranda bölüneceğini belirlemenizi sağlar. rows="*,*,*" sayfanın yatay olarak hangi oranda bölüneceğini belirlememizi sağlar.

16 FRAMESET Parametreleri Örneğin cols="180,450" 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="180,*" ifadesi ilk pencerenin 180 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. Not: Aynı tag'ı içinde hem "cols" hem de "rows" etiketleri kullanılmaz. Anca iç içe frameler yapılırsa kullanılabilir.

17 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. Not: Ç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.

18 Çerçeveler Kırmızı Sayfa A SAYFASI İlk once dört tane htm dosyası oluşturalım. Sırasıyla a.htm, b.htm, c.htm, d.htm olarak kaydedelim. Çerçeveler Mavi Sayfa B SAYFASI A.htmB.htm

19 Çerçeveler Yeşil Sayfa C SAYFASI İlk once dört tane htm dosyası oluşturalım. Sırasıyla a.htm, b.htm, c.htm, d.htm olarak kaydedelim. Çerçeveler Siyah Sayfa D SAYFASI C.htmD.htm

20 Örnek-1 Çerçeve Çalışma - 1

21 Örnek-2 Çerçeve Çalışma - 2

22 Örnek-3 Çerçeve Çalışma - 3

23 Örnek-4 Çerçeve Çalışma - 4

24 Frame a Frame b Frame c Frame d Yazın ve linkler.htm olarak kaydedin Yazın ve anasayfa.htm olarak kaydedin

25