¯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“ 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" 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.