¯leri HTML

Transkript

¯leri HTML
23
leri HTML
Özel Karakterler
HTML metin içerisine özel karakterleri yazmak için aadaki format kullanlr.
xxx ISO karakter kodu olmak üzere;
&#xxx;
eklindedir. Örnein copyright sembolü için “©” yazlr.
Buna ilaveten HTML çok sk kullanlan baz özel karakterler için aadaki gibi
ksa yola sahiptir.
 
"
<
>
&
©
<!-<!-<!-<!-<!-<!--
non-breaking space ( ) -->
quote character (“) -->
less-then charakter (<) -->
greater-then charakter (>) -->
ampersand charakter (&) -->
copyright symbold charakter (©) -->
Tablo Oluturma
Tablooluturmak için HTML de be etiket vardr. Bu etiketler;
LK
ETKET
SON
ETKET
AÇIKLAMA
<TABLE>
</TABLE>
<CAPTION>
</CAPTION>
<TR>
</TR>
<TH>
</TH>
<TD>
</TD>
Tablonun balangç ve bitimini tanmlamada kullanrz.
Tablonun altna ya da üstüne balk metni eklemede
kullanlr. Bunun için Align özelliine top ya da bottom
deeri atanr.
Table Row: Tablo satr oluturmada kullanlr.
Table Header: Tabloya balk hücresi ekler. Balk
hücresi bold ve ortal yazlr.
Table Data: Tablonun satrna veri eleman (hücre)
eklemede kullanlr.
Örnek: 017_table1.htm
Aadaki html etiketleri 6 satr ve 3 sütundan oluan tablo oluturur.
<HTML>
<HEAD>
<TITLE>Ürünler Sayfas</TITLE>
<META
http-equiv="Content-Type"
charset=windows-1254">
</HEAD>
<BODY background="bg.jpg" text="#FFFFFF">
<TABLE border="2">
<CAPTION>
<B>Kampanya Ürünlerimiz</B>
</CAPTION>
<TR>
<TH>Ürünler</TH>
<TH>Açklama</TH>
content="text/html;
24
<TH>Fiyat</TH>
</TR>
<TR>
<TD>17&#8220; LG (Goldstar) Monitör</TD>
<TD>Pein Fiyatna 5 taksit</TD>
<TD>$300</TD>
</TR>
<TR>
<TD>HP Dijital Fotoraf Makineleri</TD>
<TD>Dijital sözlük hediyeli</TD>
<TD>$200</TD>
</TR>
<TR>
<TD>Sony Hi8 Kamera</TD>
<TD>Kampanyada son 10 gün</TD>
<TD>$700</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Not: Tablo içerisinde istediiniz formatlama etiketlerini kullanabilirsiniz.
<TABLE> Etiketi
<TABLE> etiketi kullanmak zorunda olmadmz birkaç özellie sahiptir.
ÖZELLK
ALIGN
WIDTH
BORDER
CELLSPACING
CELLPADDING
AÇIKLAMA
Tablonun sayfadaki hizalamasn kontrol eder. Left, center veya
right olabilir. Varsaylan left tir.
Tablonun geniliini sabit olarak belirteceksek bu özellie pixel
olarak bir say, sayfann yüzdesi büyüklüünde olmasn istiyorsak
yüzdeli bir say yazlr. (WIDTH=”100” ya da WIDTH=”100%”)
Border yani çerçeve büyüklüü pixel olarak bildirilir. “0” verilirse
çerçevesizdir.
Hücreler arasndaki çerçevenin kalnln belirtir. Varsaylan olarak
1 dir.
Hücre çerçevesi ile içerii arasndaki mesafeyi pixel olarak belirler.
Varsaylan 1 pixeldir.
Örnek: 018_table2.htm
Yukardaki örnekteki <TABLE> etiketini aadaki gibi deitirelim.
<TABLE border="2" width="80%" cellspacing="10">
Yukardaki gibi CELLSPACING deeri BORDER dan daha büyükse. Browser
BORDER’ CELLSPACING’e uydurur.
<TR> Etiketi
TR etiketi iki tane özellie sahiptir. Bunlar;
ÖZELLK
ALIGN
VALIGN
AÇIKLAMA
Satrdaki hücrelerin içeriinin yatay hizalamasn kontrol eder.
left, right, center olabilir.
Satrdaki hücrelerin içeriinin dikey hizalamasn kontrol eder.
25
top, middle, bottom olabilir.
<TH> ve <TD> Etiketleri
Tablo Bal (Table Header=TH) ve Tablo Verisi (Table Data=TD)
etiketlerinin özellikleri;
ÖZELLK
ALIGN
VALIGN
NOWRAP
ROWSPAN
COLSPAN
WIDTH
HEIGHT
AÇIKLAMA
Hücre içeriinin yatay hizalamasn kontrol eder.
Hücre içeriinin dikey hizalamasn kontrol eder.
Kelime aralarnda satr sonu krmalarn pasif yapar. (Word
Wrapping)
Bir hücrenin geniletilecei satr saysn belirtir. Varsaylan 1 dir.
Bir hücrenin geniletilecei sütun saysn belirtir. Varsaylan 1
dir.
Hücrenin pixel olarak genilii
Hücrenin pixel olarak yükseklii
Örnek: 019_table3.htm
<HTML>
<HEAD>
<TITLE>Ürünler Sayfas</TITLE>
<META
http-equiv="Content-Type"
content="text/html;
charset=windows-1254">
</HEAD>
<BODY background="bg.jpg" text="#FFFFFF">
<TABLE align="center" border="2" width="80%">
<CAPTION>
<B>Fiyat Listesi</B>
</CAPTION>
<TR>
<TH rowspan="2" width="50%">Ürünler</TH>
<TH colspan="2">Fiyat</TH>
</TR>
<TR>
<TH width="15%">Toptan</TH>
<TH width="15%">Perakende</TH>
</TR>
<TR>
<TD>HP Dijital Fotoraf Makineleri</TD>
<TD align="center"><I>$500</I></TD>
<TD align="center">$600</TD>
</TR>
<TR>
<TD>Goldstar (LG) 17&quot; Monitör</TD>
<TD align="center"><I>$250</I></TD>
<TD><CENTER>$300</CENTER></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Sayfa Biçimlendirmede Tablo Kullanm
HTML ’in en büyük avantajlarndan biri de ekstra boluklar ve carriage return
(satr krma, paragraf, sekme vs.)karakterleri kaldrarak sayfay otomatik
26
olarak biçimlendirmesidir. Maalesef bu durum ayn zamanda en büyük
problemdir. Sayfann eklini ayarlarken metinleri istediimiz yerlere
konumlandramayz. Neyse ki bunun için tablolar kullanabiliriz.
Örnek: 020_home.htm
<HTML>
<HEAD>
<TITLE>Karasu MYO Ana Sayfa</TITLE>
</HEAD>
<BODY background="bg2.gif">
<TABLE border="0">
<TR>
<TD width="10"><IMG src="amblem.gif" alt="SAU Logo"></TD>
<TD>
<H1>Sakarya Üniversitesi Karasu Meslek Yüksekokulu</H1>
</TD>
<TD><FONT size="2"><A href="hakkinda.htm">
Web Sitemiz Hakknda</A></FONT>
</TD>
</TR>
<TR>
<TD width="10"><A href="ogrenciler.htm">Örenciler</A></TD>
<TD colspan="2">Yükesek okulumuzda Bilgisayar Teknolojisi ve
Programlama, Turizm ve Otel letmecilii ve Muhasebe Programlar
bulunmaktadr.</TD>
</TR>
<TR>
<TD><A href="okulumuz.htm">Okulumuz</A></TD>
<TD colspan="2"> <FONT size="5" color="#FF0000"> Karasu
</FONT> </TD>
</TR>
<TR>
<TD><A href="personel.htm">Personel</A></TD>
<TD colspan="2">
<UL>
<LI>Oteller ve Pansiyonlar</LI>
<LI>Tarihi Yerler</LI>
<LI>Deniz ve Kum</LI>
</UL>
</TD>
</TR>
<TR>
<TD><A href="mailto:[email protected]"> E-Mail Göner </A>
</TD>
</TR>
<TR>
<TD></TD>
<TD><FONT size="2">Bu WEB sayfas Karasu MYO örencileri
tarafndan yaplmtr.</FONT></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Yukardaki gibi bir sayfay oluturmann bir baka yöntemi ise frame
(çerçeve) kullanmaktr.

Benzer belgeler