TEMEL HTML DERS NOTLARI - Table-Form

Transkript

1 Tablolar <table>... Tablolar, sayfalari satirlara/sütunlara bölmek ya da metin veya grafiklerin sayfada istedigimiz yerde durmasini saglamak amaçlariyla kullanabilecegimiz HTML'nin en önemli yapitaslarindandir. Sayfada gözüksün ya da gözükmesin tablolari bir iskelet gibi kullanabilir, böylece su ana kadar ögrendiklerinizle yapamayacaginiz gerçek düzenlemeyi yapabilirsiniz. Elbette HTML dizayn konusunda bir masaüstü yayincilik programinin gösterdigi hassasiyeti göstermez, bir de browserlarin tablo etiketlerini yorumlamada gösterdigi farkliliklar da buna eklenirse, genel ziyaretçi kesimine hitab etmenin ne kadar zor oldugu anlasilir. Fakat burada konumuz bunu tartismak degil tablolar konusunu islemek. --- Tabloda baslik ve gövde --- Tablolar da HTML sayfasinda oldugu gibi baslik (head) ve gövde (body) bölümlerine ayrilabilir. Tabloda basligi <thead> gövdeyi <tbody> etiketleri arasina yazariz. <caption> etiketi ile ikinci bir açiklama vermek mümkündür. Sütun basliklarina gelince, her bir baslik <th> etiketi ile belirtilir ve bunlar <td> etiketinde oldugu gibi... arasina yazilir. Tabloda satir ve sütunlari belirten ve <td> etiketleri <tbody>...</tbody> arasina alinir. Yukaridaki örneklerden birisini degistirerek bu anlattiklarimizi uygulayalim; <table border="1"> <thead>tablo Basligi (thead)</thead> <caption align="bottom"> alt-yazi (caption) <caption> <th>1.sütun</th> <th>2.sütun</th> <th>3.sütun</th> <tbody> <td>hücre1 <td>hücre2 <td>hücre3 <td>hücre4 <td>hücre5 <td>hücre6 <td>hücre7 <td>hücre8 <td>hücre9 </tbody>

2 Parametreler <table border="..." cellpading="..." cellspacing="..." align="..." width="..." height="..."> border parametresi çerçevenin kalinligini belirtir. border=0 çerçevenin görünmemesini saglar. cellpadding parametresi hücre içi marj degerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitisik olmasini saglar. cellspacing parametresi hücreler arasi marji belirler. align parametresi tabloyu düsey hizalamada kullanilir, align=left sola, align=right saga dayali yapar, align=center ortalar width ve height parametreleri resimler konusunda gördügümüz gibi tabloda en ve boy uzunlugunu belirtir. Tablonun deger verilmediginde sahip oldugu normal ölçülerinden küçük degerler verilirse bu degerler dikkate alinmaz, bir baska deyisle tabloyu büyütebiliriz fakat küçültemeyiz. <td> etiketi için parametreler <td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> bgcolor parametresi hücreyi renklendirmede kullanilir. background parametresi ile hücreye grafik-artalan yerlestirebiliriz. width ve height parametreleri ile hücrenin boyutlarini belirleyebiliriz. Yalniz height komutu ile tek sütunlu bir tabloda her hücrenin yüksekligini degistirebilirken, width komutu ile her hücreyi degistiremeyiz.en büyük width degeri tüm sütun için geçerli olacaktir. Ayni sekilde tek satirli tabloda width degerini her hücre için degistirebilirken en büyük height degeri tüm satir için geçerli olacaktir. align parametresi hücre içinde yatay hizalama yapar. valign parametresi hücre içinde düsey hizalama yapar. Hücreleri Birlestirme <td colspan=".." rowspan=".."> Ayni satirdaki hücreleri birlestirmek için colspan, ayni sütundaki hücreleri birlestirmek için de rowspan parametresini kullaniyoruz. Birlestirilen hücreye ait <td>.. etiketini siliyoruz. FORMLAR Web sayfalarimiza etkilesim ya da çift yönlü iletisim özelligi kazandirmanin en temel yolu "FORM" kullanmaktir. Örnegin sayfalari ziyaret eden insanlarin öneri ve görüslerini size gönderebilecekleri bir bölüm olusturmak için en iyi çözüm yolu budur... Çogu sitede görüldügü gibi; anket yapmak, siparis almak, veri istemek, mesaj göndermek, ziyaretçi defteri olusturmak vb islemler için hep form kullanilmistir. Bu sitedeki "KAYIT" ve "MESAJ" bölümleri de form kullanilarak olusturulmustur... Bu tür sayfalarda ziyaretçilerin yapmasi gereken; doldurulmasi istenen bölümleri doldurup, "GÖNDER" butonuna tiklamaktan ibarettir. Bu "gönder" komutu ile ziyaretçinin giris yaptigi bilgiler; ya basitçe bir adresine yönlendirilir, ya da bir CGI programcigina gönderilir... CGI programciklarin islevi ise; gelen bilgileri isleyip, degerlendirmek ve ziyaretçiye geri bildirimde bulunmak yada sayfalarin yayincisinin istedigi sekilde etkilesimi sonuçlandirmaktir... Ama suda bir gerçek ki, formlar sadece ziyaretçilerle etkilesimde bulunmak için kullanilmaz, örnegin sayfamizda bir menü yapmak içinde form kullanabiliriz... Neyse lafi uzatmadan konuya girelim...

3 Basit bir form yaratmak için gereken komut; <FORM> komutudur... Ve formun tüm elemanlari <FORM> ile </FORM> etiketleri(tag) arasinda tanimlanir. Ve önemli bir husus; bir form içinde baska bir form OLAMAZ... <form>... Forumla Ilgili Bütün Kodlamalar.... Bu Bölümde Yapilir. </form> Bu FORM etiketinin 3 parametresi bulunuyor. Bunlari ve kullanimina dair örnek kodlamayi asagidaki sekillerde görmektesiniz... Tabi bu arada hemen su saptamayi yapalim, FORM tag'inin parametre ile kullanimi iki amaca yönelik olabilir. Birincisi form bilgilerini bir adresine göndermek... Ikincisi ise form bilgilerini bir CGI programcigina göndermek... FORM Tag'inin PARAMETRELERI : METHOD ACTION ENCTYPE < > FORM Örnek < > <FORM METHOD="POST" ACTION="mailto:isminiz@uzmanweb.net" ENCTYPE="text/plain"> yada <FORM METHOD="POST" ACTON=".../cgi-bin/mailgönder.pl"> Bu kadarcik bilgiden sonra isterseniz önce bir FORM kullanarak bir menü yapalim. Bu menüyü yapmaktaki amacimiz ziyaretçilerimizle etkilesim degil tabii. Onu daha sonra görecegiz... Amacimiz öncelikle formlarin baska isler için de kullanilabilecegini göstermek... < > Sizin için Yaptigim Menü'nün Kodlarini Asagida Bulabilirsiniz. <FORM> <font color=#d65000 face=arail size=2>menü - Sayfa Listesi <SELECT NAME="list" size=0> <OPTION VALUE="test15.htm">Sayfa 1 <OPTION VALUE="test15.htm">sayfa 2 <OPTION VALUE="test15.htm">sayfa 3 <OPTION VALUE="test15.htm">Sayfa 4 <OPTION VALUE="test15.htm">sayfa 5 <OPTION VALUE="test15.htm">sayfa 6 </SELECT> <INPUT TYPE=BUTTON VALUE="Sayfaya Git" onclick="top.location.href=this.form.list.options[this.form.list.selectedindex].value" target="t"> </FORM>

4 Evet, bu örnekler FORM etiketinin PARAMETRESIZ kullanimina dair örnekler gördügünüz gibi... Ve islevleri ise bir MENÜ olusturmak yada bir MESAJ KUTUSU görüntülemek... Sayfayi ziyaret eden herhangi birisinden etkilesim yoluyla bilgi alis-verisi burada sözkonusu degil... Ama bizim asil derdimiz su; Yapacagimiz bir sayfa üzerinde; bilgi giris bölümleri olusturup, ziyaretçilerden bu bölümleri doldurmalarini istemek ve "GÖNDER" butonuna tikladiklarinda da girilen bilgilerin bize gönderilmesini saglamak... Bu isi nasil yapacagimizi bundan sonraki dersde görelim. Devam... Simdi bir "MESAJ FORMU" yapalim. Tabi bu mesaj formunu; daha önce anasayfasini hazirladigimiz "Ilk Sayfam" konulu örnek projemiz çerçevesinde olusturacagiz. Ki böylece bir "WEB SITESI" içindeki anasayfa-altsayfa arasindaki iliskiyi de kavramis olalim... Öncelikle "Sitemizle"le ilgili projemizdeki anasayfanin en son halini hatirlayalim. Son biraktigimizda bu anasayfa; "ilksayfam.htm" adiyla kaydedilmisti... Bu sayfayi Not Defterinde açiyoruz ve kaynak kodlarina, yapacagimiz "MESAJ FORMU" için bir LINK yerlestiriyoruz... Bunu yaparken de mesaj formumuzun dosya isminin "ilkform.htm" olmasini öngörüyoruz... Kaynak kod üzerinde yaptigimiz ekleme neticesinde elde ettigimiz kodlarin son halini asagida görmekteyiz... <html> <head> <title>ilk Sayfam</title> <LINK REL="stylesheet" HREF="stil.css" TYPE="text/css"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1254"> <META NAME="Description" CONTENT="Ilk Web sayfam- (Author: NuRuLLaH)"> <META NAME="KEYWORD" CONTENT="web sayfanizla ilgili anahtar kelimeler"> <META NAME="AUTHOR" CONTENT="NuRuLLaH - Yazar"> </head> <body background="ardalan.gif"> <center> <img src="kus0001.gif" border=0> <img src="kusbaslik.gif" border=0> <table border=1 width=580 cellpadding=0 cellspacing=0 bordercolor="#000000"> <td align=middle valign=center width=580 bgcolor="#000000"> <font size=2 color="#ffffff" face="helvatica, verdana"> Web sitemize hosgeldiniz!... <td align=middle valign=middle width=580 bgcolor="#ffffff"> <table border=0 width=550 cellpadding=0 cellspacing=0> <td width="200" height="200" align=middle valign=middle> <img src="kus_menu.gif" border=0 usemap="#menu" ismap>

5 <map name="menu"> <area shape=rect coords="16,21,116,36" HREF="test.htm" target="re"> <area shape=rect coords="15,41,163,58" HREF="test.htm" target="re"> <area shape=rect coords="16,64,136,77" HREF="test.htm" target="re"> <area shape=rect coords="12,82,151,96" HREF="test.htm" target="re"> <area shape=rect coords="13,102,80,115" HREF="test.htm" target="re"> <area shape=rect coords="13,122,90,137" HREF="test.htm" target="re"> <area shape=rect coords="13,143,65,157" </map> <td width="350" height="200" align=middle valign=top background="kus_zemin.gif"> <font size=2 color="black" face="helvatica, verdana"><b> Arkadaslar Buraya Istediginiz Yaziyi Yazin.Resimler Siz ayni resimlere Sahib olmadiginizdan Görünmüyo.Bunun için Begendiginiz Resimleri [Örn :] img src=" <u>kus0001.gif</u>" border=0 Alti Çizili Bölümü Degistirin. </b> <font face="arial, verdana" size=2 color="blue"> <a href="ilkform.htm">mesaj Formu</a> <font face="arial, verdana" size=1 color="000000"> Tasarim & Grafik: NuRuLLaH-Sitebuilder Web Tasarimi Egitim Grubu, 2004, TURKIYE Son Güncelleme : 31 Temmuz 04 Bu siteyi en iyi IE4.0 ve üzeri browser, 800x600 ekran genisligi ve yüksek renk modunda izleyebiliriniz. Her hakki saklidir. </center> <P ALIGN="right" CLASS="copyright"> 1999, NuRuLLaH-Sitebuilder</P> </body> </html> Anasayfamizi bu sekilde ayarladiktan sonra artik MESAJ FORMU sayfamizin yapimina girisebiliriz... Ben bu amaçla; Örnek projemiz çerçevesinde yapmakta oldugumuz "sitemiz" için anasayfanin "GRAFIK BÜTÜNLÜGÜ" nü de esas alarak ayri bir sayfa hazirladim ve bunu ilkform.htm adiyla kaydettim. Simdi bu dosyanin, yani "ilkform.htm" sayfasinin kaynak kodlarini inceleyin... <html>

6 <head> <title>ilk Web Sayfamiz-Forumu</title> <LINK REL="stylesheet" HREF="stil.css" TYPE="text/css"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1254"> <META NAME="Description" CONTENT="Ilk Web Sayfamiz - (Author: NuRuLLaH-Sitebuilder Web Egitim Grubu)"> <META NAME="KEYWORD" CONTENT="anahtar kelimeleri yazin"> <META NAME="AUTHOR" CONTENT="NuRuLLaH-Sitebuilder Web Egitim Grubu"> </head> <body bgcolor="gray"> <center> <table border=1 width=580 cellpadding=0 cellspacing=0 bordercolor="#000000"> <td align=middle valign=center width=580 bgcolor="#000000"> <font size=2 color="#ffffff" face="helvatica, verdana"> MESAJ FORMU!... <td align=middle valign=middle width=580 bgcolor="#f7ede3"> <table border=0 width=550 cellpadding=0 cellspacing=0> <td width="550" bgcolor="#f7ede3" align=middle valign=middle> <font size="2"> Mesajinizi iletmek için, asagidaki formu doldurarak gönder butonuna basabilirsiniz... <form method="post" action="mailto:isim@mesela.com" ENCTYPE="text/plain" > <table border="0" cellpadding="0" cellspacing="0" width="500"> color="#000000"><small>adiniz </small> <td valign="top" align="left" width="350" bgcolor="#f7ede3" height="25"><input name="adi" size="35"> color="#000000"><small>soyadiniz</small> name="soyadi" size="35">

7 color="#000000"><small>mesleginiz</small> name="jobtitle" size="35"> color="#000000"><small>firma Adi</small> name="company" size="35"> color="#000000"><small>tel</small> name="telno" size="20"> color="#000000"><small>fax</small> name="fax" size="20"> color="#000000"><small>gsm</small> name="gsm" size="20"> color="#000000"><small> Adresiniz</small> name="eposta" size="35"> <td valign="top" align="left" width="150" bgcolor="#f7ede3" height="119"><font color="#000000"><small>mesajiniz </small>

8 <td valign="top" align="left" width="350" bgcolor="#f7ede3" height="119"><textarea rows="5" name="mesaj" cols="40"></textarea> <tr align="center" bgcolor="#ffffff"> <td valign="top" align="left" width="150" bgcolor="#f7ede3" height="27"> <td valign="top" align="left" width="350" bgcolor="#f7ede3" height="27"><table border="0" width="100%"> <td width="50%"><div align="center"><center><p><input type="submit" value="gonder" name="submit"> <td width="50%" align="center"><div align="center"><center><p><input type="reset" value="temizle" name="reset"> </center></div> </form> <a href="ilksayfam6.htm">anasayfa</a> <font face="arial, verdana" size=1 color="000000"> Tasarim & Grafik: NuRuLLaH-Sitebuilder Web Tasarimi Egitim Grubu, 2004, TURKIYE Son Güncelleme : 31 Temmuz 04 Bu siteyi en iyi IE4.0 ve üzeri browser, 800x600 ekran genisligi ve yüksek renk modunda izleyebiliriniz. Her hakki saklidir. </center> <P ALIGN="right" CLASS="copyright"> 1999, NuRuLLaH-Sitebuilder</P> </body> </html> Oldukça kolay degil mi?...

9 Simdi geriye bir sorun kaliyor; Form içindeki "ONAY KUTUSU", "INPUT ALANI", "TEXT ALANI", "BUTON", "RADYO DÜGMELERI", "HIDDEN ALANLAR", "RESET ve SUBMIT ALANLARI" gibi elemanlari nasil tanimlamaliyiz?.. Bunlari anlatmayi bilinçli olarak bundan sonraki sayfaya biraktim... Çünkü önce ilkform.htm sayfasinin kodlarini inceleyerek ne yapildigini anlamaya çalismanizi istedim. Böylece ziyaretçilerle etkilesimde bulunabilmek için <FORM>...</FORM> tag'leri içinde hangi elemanlarin kullanildigina dair bir ön fikriniz olusacak... Konuyu bu sekilde daha iyi kavrayacaginizdan ve kullanici dostu, islevsel ve sevimli formlar içeren sayfalari kolayca hazirlayacaginizdan eminim... Meta Tag Asagidaki META komutlarini sayfamiza ekleyecegiz; <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=windows-1254"> Bu kod satiri, sayfamizdaki türkçe karakterlerin dogru olarak görüntülenmesi için gerekli.... <META NAME="Description" CONTENT="web tasarim,müzik,siir,chat "> Bu kod satiri, sitenin baslik satirini içeriyor.sayfamiz bu sekilde, Bir arama motoruna kayit olursa; bu arama sitesinin arama sonuçlari penceresinde bu belirttigimiz bilgiler aynen yer alir... <META NAME="Author" CONTENT="UzmanWeb"> Bu kod satiriyla, sayfanin tasarimcisi olarak kendimizi ifade etmekteyiz... <META NAME="Keywords" CONTENT="web tasarim,java,mp3,siir,chat,vs..."> Bu kod satiriyla, arama motorlarinin bulmasini istedigimiz kelimleri belirliyoruz. <html> <head> <title>sayfa Basligi</title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1254"> <META NAME="Description" CONTENT="web sayfasini kisa tanitimi,"> <META NAME="KEYWORD" CONTENT="web sayfasinin içeriginden basliklar"> <META NAME="AUTHOR" CONTENT="Sayfayi hazirlayanin ismi"> </head> <Body bgcolor=#eceee0> </body> </html>