TEMEL HTML DERS NOTLARI TEMEL HTML DERS NOTLARI

Transkript

TEMEL HTML DERS NOTLARI - TableTable-Form
Tablolar
<table>...</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 <tr>...</tr> arasina yazilir.
Tabloda satir ve sütunlari belirten <tr> 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>
<tr>
<th>1.Sütun</th>
<th>2.Sütun</th>
<th>3.Sütun</th>
</tr>
<tbody>
<tr>
<td>hücre1</td>
<td>hücre2</td>
<td>hücre3</td>
</tr>
<tr>
<td>hücre4</td>
<td>hücre5</td>
<td>hücre6</td>
</tr>
<tr>
<td>hücre7</td>
<td>hücre8</td>
<td>hücre9</td>
</tr>
</tbody>
</table>
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>..</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 e-mail 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...
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 e-mail
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:[email protected]" 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</font><br><br>
<SELECT NAME="list" size=0>
<OPTION VALUE="test15.htm">Sayfa 1
<OPTION VALUE="test15.htm">sayfa 2
<OPTION VALUE="test15.htm">Sayfa 4
</SELECT>
<INPUT TYPE=BUTTON VALUE="Sayfaya Git"
onClick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value"
target="t">
</FORM>
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">
<br>
<center>
<img src="kus0001.gif" border=0>
<br>
<img src="kusbaslik.gif" border=0>
<br>
<table border=1 width=580 cellpadding=0 cellspacing=0 bordercolor="#000000">
<tr>
<td align=middle valign=center width=580 bgcolor="#000000">
<font size=2 color="#ffffff" face="helvatica, verdana">
Web sitemize hosgeldiniz!...
</font>
</td>
</tr>
<tr>
<td align=middle valign=middle width=580 bgcolor="#FFFFFF">
<table border=0 width=550 cellpadding=0 cellspacing=0>
<tr>
<td width="200" height="200" align=middle valign=middle>
<img src="kus_menu.gif" border=0 usemap="#menu" ismap>
<map name="menu">
<area shape=rect coords="16,21,116,36" HREF="test.htm" target="re">
<area shape=rect coords="13,143,65,157" HREF="mailto:[email protected]">
</map>
</td>
<td width="350" height="200" align=middle valign=top background="kus_zemin.gif"><br>
<font size=2 color="black" face="helvatica, verdana"><b>
Arkadaslar Buraya Istediginiz Yaziyi Yazin.Resimler Siz ayni resimlere Sahib olmadiginizdan
Görünmüyo.<br>Bunun için Begendiginiz Resimleri <br>[Örn :] img src="
<u>kus0001.gif</u>" border=0 <br>Alti Çizili Bölümü Degistirin. <br>
</b></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br><br>
<font face="arial, verdana" size=2 color="blue">
<a href="ilkform.htm">Mesaj Formu</a>
</font>
<br><br>
<font face="arial, verdana" size=1 color="000000">
Tasarim & Grafik: © NuRuLLaH-Sitebuilder Web Tasarimi Egitim Grubu, 2004, TURKIYE<br>
Son Güncelleme : 31 Temmuz 04<br>
Bu siteyi en iyi IE4.0 ve üzeri browser, 800x600 ekran genisligi ve yüksek renk modunda
izleyebiliriniz.<br>
Her hakki saklidir.
</font>
<br>
</center>
<br><br>
<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>
<head>
<title>Ilk Web Sayfamiz-Forumu</title>
<LINK REL="stylesheet" HREF="stil.css" TYPE="text/css">
<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">
<br>
<center>
<table border=1 width=580 cellpadding=0 cellspacing=0 bordercolor="#000000">
<tr>
<td align=middle valign=center width=580 bgcolor="#000000">
<font size=2 color="#ffffff" face="helvatica, verdana">
MESAJ FORMU!...
</font>
</td>
</tr>
<tr>
<td align=middle valign=middle width=580 bgcolor="#F7ede3">
<table border=0 width=550 cellpadding=0 cellspacing=0>
<tr>
<td width="550" bgcolor="#f7ede3" align=middle valign=middle>
<br>
<font size="2">
Mesajinizi iletmek için, asagidaki formu doldurarak gönder butonuna basabilirsiniz...
</font>
<br>
<form method="post" action="mailto:[email protected]" ENCTYPE="text/plain" >
<table border="0" cellpadding="0" cellspacing="0" width="500">
<tr align="center">
<td valign="top" align="left" width="150" bgcolor="#f7ede3" height="25"><font
face="Arial"
color="#000000"><small>Adiniz </small></font></td>
<td valign="top" align="left" width="350" bgcolor="#F7ede3" height="25"><input
type="text"
name="Adi" size="35"></td>
</tr>
<tr align="center">
face="Arial"
color="#000000"><small>Soyadiniz</small></font></td>
<td valign="top" align="left" width="350" bgcolor="#f7ede3" height="25"><input
type="text"
name="Soyadi" size="35"></td>
</tr>
<tr align="center">
face="Arial"
color="#000000"><small>Mesleginiz</small></font></td>
<td valign="top" align="left" width="350" bgcolor="#f7ede3"
type="text"
name="jobtitle" size="35"></td>
</tr>
<tr align="center">
face="Arial"
color="#000000"><small>Firma Adi</small></font></td>
type="text"
name="company" size="35"></td>
</tr>
<tr align="center">
face="Arial"
color="#000000"><small>Tel</small></font></td>
type="text"
name="telno" size="20"></td>
</tr>
height="25"><input
height="25"><font
height="25"><input
height="25"><font
height="25"><input
<tr align="center">
face="Arial"
color="#000000"><small>Fax</small></font></td>
type="text"
name="Fax" size="20"></td>
</tr>
<tr align="center">
face="Arial"
color="#000000"><small>GSM</small></font></td>
type="text"
name="GSM" size="20"></td>
</tr>
<tr align="center">
face="Arial"
color="#000000"><small>E-Mail Adresiniz</small></font></td>
type="text"
name="EPosta" size="35"></td>
</tr>
<tr align="center">
face="Arial" color="#000000"><small>Mesajiniz <br>
</small></font></td>
<td valign="top" align="left" width="350" bgcolor="#f7ede3" height="119"><textarea
rows="5" name="mesaj" cols="40"></textarea></td>
</tr>
</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td valign="top" align="left" width="150" bgcolor="#f7ede3" height="27"></td>
<td valign="top" align="left" width="350" bgcolor="#f7ede3" height="27"><table
border="0"
width="100%">
<tr>
<td width="50%"><div align="center"><center><p><input type="submit"
value="Gonder"
name="submit"></td>
<td width="50%" align="center"><div align="center"><center><p><input type="reset"
value="Temizle" name="reset"></td>
</tr>
</table>
</td>
</tr>
</table>
</center></div></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br><br>
<a href="ilksayfam6.htm">Anasayfa</a>
<br><br>
<font face="arial, verdana" size=1 color="000000">
Tasarim & Grafik: © NuRuLLaH-Sitebuilder Web Tasarimi Egitim Grubu, 2004, TURKIYE<br>
Son Güncelleme : 31 Temmuz 04<br>
Bu siteyi en iyi IE4.0 ve üzeri browser, 800x600 ekran genisligi ve yüksek renk modunda
izleyebiliriniz.<br>
Her hakki saklidir.
</font>
<br>
</center>
<br><br>
<P ALIGN="right" CLASS="copyright">© 1999, NuRuLLaH-Sitebuilder</P>
</body>
</html>
Oldukça kolay degil mi?...
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 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>

TEMEL HTML DERS NOTLARI TEMEL HTML DERS NOTLARI

Transkript

Benzer belgeler

HTML Nedir - egitimde

Pratik Yapılar

Bağlantılarla ilgili hazırlanan uygulama HTML Kodu