İnternet Programlama-I
HTML-TABLOLAR
HTML TABLOLARI
• HTML DİLİNDE TABLO OLUŞTURMAK İÇİN
<TABLE> TAGI KULLANILIR.
• İYİ BİLİNMESİ GEREKEN KONULARDAN BİRİDİR
ÇÜNKÜ SAYFA İÇİNDEKİ NESNELER
TABLOLARLA DÜZENLENİR VE HİZALANIR.
<TABLE>
• TABLOLAR <TR> TAGIYLA SATIRLARA VE HER
SATIR DA <TD> 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.
<TABLE>...</TABLE>
<HTML>
<HEAD>
<title> Bilgisayar Programlama....</title>
</head>
<body>
<table border="1">
<tr>
<td>Hücre 1</td>
</tr>
</table>
</body>
</html>
BORDER ÖZELLİĞİ
• <TABLE BORDER=“1”>
• ŞEKLİNE TABLONUN SINIRLARININ KALINLIĞI
BELİRTİLİR.
TABLODA BAŞLIKLAR
<table border="1">
<tr>
<td>İSİM</td>
</tr>
<tr>
<td> LMYO </td>
</tr>
</table>
TABLO ÖZELLİKLERİ
<table align=”center” bgcolor=”#blue” cellpadding=”5″ cellspacing=”5″
width=”300″>
<tr>
<td>LMYO</td><td>LMYO</td>
</tr>
</table>
align=”center”
Bgcolor
Cellpadding
Cellspacing
Width
Height
Background
: Tabloyu ortalar.
: Arkaplan rengi
: Hücre içi boşluk
: Hücreler arası boşluk
: Tablo genişliği (piksel olarak)
: Tablo yüksekliği (piksel olarak)
: Arka plan resmi
BOŞ HÜCRELİ TABLOLAR
• BOŞ HÜCRELER ÇOĞU BROWSER'DA KÖTÜ BİR ŞEKİLDE
KENARLARI OLMADAN GÖRÜNÜRLER.
<TABLE BORDER="1" >
<TR>
<TD>HÜCRE 1</TD>
<TD>HÜCRE 2</TD>
</TR>
<TR>
<TD>HÜCRE 3</TD>
<TD></TD>
</TR>
</TABLE>
BOŞ HÜCRELİ TABLOLAR
• BU SORUNDAN KURTULMAK İÇİN BOŞ HÜCRELERE
(&nbsp;) KOYULUR VE BU ŞEKİLDE HÜCRE
KENARLIKLARININ GÖRÜNMESİ SAĞLANIR.
<TABLE BORDER="1" >
<TR>
<TD>HÜCRE 1</TD>
<TD>HÜCRE 2</TD>
</TR>
<TR>
<TD>HÜCRE 3</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
HÜCRE İÇİ ÖZELLİKLER
<table border="1" align="right" bgcolor= " " cellpadding="5" cellspacing="5"
width="300">
<tr>
<td align="right" bgcolor= "red" valign="top" height="100"
width="200">LMYO</td>
<td bgcolor="yellow" align="center" valign="bottom">LMYO</td>
</tr>
</table>
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.
HÜCRE İÇİ ÖZELLİKLER
<table border=”1″ >
<tr>
<td rowspan=”2″>LMYO</td> <td>LMYO</td>
</tr>
<tr>
<td>LMYO</td>
</tr>
</table>
<table border=”1″ >
<tr>
<td>LMYO</td>
<td>LMYO</td>
</tr>
<tr>
<td colspan=”2″>LMYO</td>
</tr>
</table>
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
<table border="1" >
<tr>
<td colspan="2">Delphi</td>
<td>Pascal</td>
</tr>
<tr>
<td>XML</td>
<td>Borland C</td>
<td rowspan="2">HTML</td></tr>
<tr>
<td>PHP</td>
<td>Basic</td></tr>
</table>
Ç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.
<frameset> etiketi
•
<frameset> 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.
• <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)
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
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
<frameset> 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.
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ı <frameset> tag'ı içinde hem "cols" hem de "rows"
etiketleri kullanılmaz. Anca iç içe frameler yapılırsa kullanılabilir.
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.
İlk once dört tane htm dosyası oluşturalım. Sırasıyla
a.htm, b.htm, c.htm, d.htm olarak kaydedelim.
A.htm
<html>
<head>
<title>Çerçeveler Kırmızı Sayfa</title>
</head>
<body bgcolor="#FF0000">
<div align="center">
<font color="#FFFFFF">A SAYFASI
</font>
</div>
</body>
</html>
B.htm
<html>
<head>
<title>Çerçeveler Mavi Sayfa</title>
</head>
<body bgcolor="#0000FF">
<div align="center">
<font color="#FFFFFF">B SAYFASI
</font>
</div>
</body>
</html>
İlk once dört tane htm dosyası oluşturalım. Sırasıyla a.htm, b.htm,
c.htm, d.htm olarak kaydedelim.
C.htm
<html>
<head>
<title>Çerçeveler Yeşil Sayfa</title>
</head>
<body bgcolor="#00FF00">
<div align="center">
<font color="#FFFFFF">C SAYFASI
</font>
</div>
</body>
</html>
D.htm
<html>
<head>
<title>Çerçeveler Siyah Sayfa</title>
</head>
<body bgcolor="#000000">
<div align="center">
<font color="#FFFFFF">D SAYFASI
</font>
</div>
</body>
</html>
Örnek-1
<html>
<head>
<title>Çerçeve Çalışma - 1</title>
</head>
<frameset rows="*,*" cols="*,*">
<frame name="kirmizi" src="a.htm">
<frame name="mavi" src="b.htm">
<frame name="yesil" src="c.htm">
<frame name="siyah" src="d.htm">
</frameset>
<body>
</body>
</html>
Örnek-2
<html>
<head>
<title>Çerçeve Çalışma - 2</title>
</head>
<frameset cols="150,*">
<frame name=" kirmizi" src="a.htm">
<frameset rows="100,*">
<frame name=" mavi" src="b.htm">
<frame name=" yesil" src="c.htm">
</frameset>
</frameset>
<body>
</body>
</html>
Örnek-3
<html>
<head>
<title>Çerçeve Çalışma - 3</title>
</head>
<frameset rows="50%,50%">
<frameset cols="*,*">
<frame name=" kirmizi" src="a.htm">
<frame name=" mavi" src="b.htm">
</frameset>
<frame name=" yesil" src="c.htm">
</frameset>
<body>
</body>
</html>
Örnek-4
<html>
<head>
<title>Çerçeve Çalışma - 4</title>
</head>
<frameset rows="*,*,*">
<frame name=" kirmizi" src="a.htm">
<frameset cols="*,*">
<frame name=" mavi" src="b.htm">
<frame name=" yesil" src="c.htm">
</frameset>
<frame name=" siyah " src="d.htm">
</frameset>
<body>
</body>
</html>
<a href ="a.htm" target ="showframe">Frame a</a><br>
<a href ="b.htm" target ="showframe">Frame b</a><br>
<a href ="c.htm" target ="showframe">Frame c</a><br>
<a href =“d.htm" target ="showframe">Frame d</a>
Yazın ve linkler.htm olarak kaydedin
<html>
<frameset cols="120,*">
<frame src= "linkler.htm">
<frame src="a.htm" name="showframe">
<frame src="b.htm" name="showframe">
<frame src="c.htm" name="showframe">
<frame src=“d.htm" name="showframe">
</frameset>
</html>
Yazın ve anasayfa.htm olarak kaydedin
Download

html