bölüm 6 - WordPress.com
Transkript
bölüm 6 - WordPress.com
İleri Düzey Uygulamalar-ODTÜ-2000 BÖLÜM 6 İleri Düzey Uygulamalar 15. Tablolar 15.1 Tablo Oluşturma Tablolar HTML diline 3.2 sürümü ile birlikte girmiştir ve yaygın olarak kullanılmaktadır. Tablo kullanımı ile sayfada bilgiyi görüntülemek ve bazı tasarımları yapmak daha kolay hale gelmiştir. Tablolar herhangi bir Kelime İşlemci (word processor) programı veya Hesap Tablosu (spreadsheet) programında kullandığımız tablo yapılarına çok benzer bir yapıdadır ve aynı amaç için kullanılabilirler. HTML dokümanlarında Tablo oluşturmak için ilgili belirteçleri kullanmanız gerekmektedir. Dosya içerisinde tablo <TABLE> ... </TABLE> belirteçleri kullanılarak yaratılmaktadır. Sayfa içerisinde kullanılışı; <TABLE> Tablo İçeriği </TABLE> şeklinde olmaktadır. Tablo içerisinde yer alan hücre ve satırları tanımlamak için ilgili belirteçlerin kullanılması gerekmektedir. <TABLE> belirtecinin en çok kullanılan özelliği BORDER (çerçeve) seçeneğidir. Bu özellik ile tablonun çerçeve kalınlığı ayarlanabilmektedir. 15.2 Satır ve Hücreler Bir tablo içerisine istenen bilgiler satır olarak girilir. Önce birinci satır oluşturulur, içerisine bilgiler hücreler halinde girilir ve satır sonlandırılır, daha sonra diğer satıra geçilir. Tablo içerisinde bir satır tanımı yapmak için <TR> belirteci kullanılır, bu belirteç </TR> belirteci ile sonlandırılır. Bir hücreden oluşan (bir satır ve bir sütun) tablo oluşturmak için dokümanımızda; <TABLE> <TR> 1.Satır </TR> </TABLE> 60 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 satırlarını yazmamız gerekir. Bu dosyanın gözgezdiricideki görüntüsü Şekil 6.1’de verilmektedir. Genel olarak satırlar içerisine bilgiler doğrudan <TR> … </TR> belirteçleri arasına girilemez, bilgi girmek için bilgi hücreleri <TD> … </TD> belirteçleri kullanılır. Bir satırda istenildiği kadar hücre kullanılabilir, ancak her satırdaki hücre sayısının eşit olmasına dikkat edilmelidir, aksi takdirde tabloda oluşan sütünlar hizasız olarak yerleştirilecektir. Şekil 6.1 Bir hücreli tablo örneği <TABLE> <TR> <TD> 1.hücre <TD> 2.hücre <TD> 3.hücre </TR> <TR> <TD> 1.hücre <TD> 2.hücre <TD> 3.hücre </TR> </TABLE> Şimdi iki satır ve altı hücreden oluşan bir tablo yaratalım. Bunun için aşağıdaki bilgiyi yazmamız gerekecektir. </TD> </TD> </TD> </TD> </TD> </TD> Bu bilgiyi içeren dosya gözgezdiricide incelendiğinde Şekil 6.2’deki gibi görülecektir. Şekil 6.2 Bir tablo örneği 15.3 Tablo Hizalama Tablolar normal olarak sayfada sola dayalı olarak ve yazıldıkları satırda görüntülenirler. Ancak “ALIGN” (pozisyon) özelliğini kullanarak tablonun sayfanın sağına veya soluna hizalanması sağlanabilir, ve aynı zamanda resimlerde olduğu gibi çevresindeki yazının yerleşimide ayarlanabilir. Bir tabloyu sayfada ortalanmış olarak görüntülemek için <CENTER> (ortala) özelliği kullanılabilir. Ortalanmış bir tablo içeren HTML dosyasında şu bilgilerin bulunması gerekmektedir. <CENTER> <TABLE> <TR> <TD> 1.hücre <TD> 2.hücre <TD> 3.hücre </TR> <TR> <TD> 1.hücre <TD> 2.hücre <TD> 3.hücre </TD> </TD> </TD> </TD> <TD> </TD> Şekil 6.3 Ortalanmış tablo örneği Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 61 İleri Düzey Uygulamalar-ODTÜ-2000 </TR> </TABLE> </CENTER> Eğer bu dosyaya gözgezdiricide bakacak olursak sayfa görüntüsü Şekil 6.3’deki gibi olacaktır. 15.4 Hücre Hizalama Hücrelerin içerisindeki yazıların veya resimlerin hizalanması tablonun içerisindeki bilginin sunumu açısından önemlidir. Bu amaç için <TD> belirtecinde iki farklı özellik mevcuttur: “ALIGN” ve “VALIGN”. “ALIGN” özelliği hücre içerisindeki yazının sağa dayalı, sola dayalı veya ortalanmış olarak görüntülenebilmesi amacı ile yatay hizalanmasında kullanılır. VALIGN özelliği ise yazının hücre içerisinde dikey olarak üst, orta ve alt hizalanmasında kullanılır. Her iki özellikte, TOP, BOTTOM ve MIDDLE değerlerini alabilir. TOP değeri verildiğinde yazı hücrenin üstüne hizalanır, BOTTOM değeri verildiğinde altına, MIDDLE değeri verildiğinde ise ortasına hizalanır. Bu özelliklerden hiç biri kullanılmazsa gözgezdirici kendiliğinden yazıyı hücrenin içerisinde yatay ve dikey olarak ortalayarak görüntüler. Şimdi değişik hücreler içerisinde farklı yerleşimlere sahip bilgiler içeren bir tablo oluşturalım. Bunun için; <TABLE BORDER=1> <TR> <TD VALIGN=BOTTOM> İlk hücre </TD> <TD VALIGN=MIDDLE> İkinci hücre </TD> <TD VALIGN=TOP> Üçüncü hücre </TD> </TR> <TR> <TD VALIGN=TOP> Dördüncü hücre </TD> <TD VALIGN=MIDDLE> 5. hücre </TD> <TD VALIGN=BOTTOM> 6. hücre </TD> </TR> </TABLE> Şekil 6.4 Hizalı tablo örneği satırlarını içeren bir sayfa yaratmamız gerekmektedir. Bu dosya gözgezdiricide Şekil 6.4’deki gibi görülecektir. Tablo oluşturulurken “BORDER=1” seçildiği için, oluşturulan tabloda hücre ve satırlar çizgi ile ayrılmışlardır. 15.5 Satır veya Sütun Atlamaları Standard tablolarda satır ve sütun sayıları eşit olarak kullanılmaktadır. Ancak, bir hücrenin bir alt satırda iki hücrenin üzerinde bulunması gerekebilir. Bu tür uygulamalarda tablo oluşturulurken gerekli düzenlemelerin yapılması gereklidir. Örneğin; 62 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 <TABLE BORDER=1> <TR> <TD COLSPAN=2> örnek </TD> <TD> normal </TD> <TD> normal </TD> </TR> <TR> <TD> normal </TD> <TD> normal </TD> <TD> normal </TD> <TD> normal </TD> </TR> </TABLE> Şekil 6.5 Sütun atlaması tablo örneği satırlarını içeren bir HTML dosyası gözgezdiricide Şekil 6.5’deki gibi görülecektir. Bu örnekte “örnek” bilgisini içeren hücre iki hücrenin birleştirilmesi ile oluşmaktadır. Bunun için “COLSPAN=2” (sütun genişliği) bilgisinin yazılması gerekmektedir. COLSPAN hücreleri (sütunları) birleştirmekte kullanılırken ROWSPAN (satır genişliği) ise satırların birleştirilmesi için kullanılabilir. Yukarıda verilen örneği biraz değiştirerek yazacak olursak; <TABLE BORDER=1> <TR> <TD ROWSPAN=2 COLSPAN=2> örnek </TD> <TD> normal </TD> <TD> normal </TD> </TR> <TR> <TD> normal </TD> <TD> normal </TD> </TR> <TR> <TD> normal </TD> <TD> normal </TD> <TD> normal </TD> <TD> normal </TD> </TR> Şekil 6.6 Satır atlaması tablo örneği </TABLE> bu dosyanın görünümü Şekil 6.6’daki gibi olacaktır. 15.6 Hücrelerin Renklendirilmesi Bir tablodaki hücreleri farklı renklerde görüntülemek için “BGCOLOR” (arka alan rengi) özelliği kullanılır. Altı farklı renge sahip hücrelerden oluşan bir tablo oluşturmak için; Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 63 İleri Düzey Uygulamalar-ODTÜ-2000 <TABLE BORDER=2> <TR> <TD BGCOLOR=blue> normal </TD> <TD BGCOLOR=cyan> normal </TD> <TD BGCOLOR=green> normal </TD> </TR> <TR> <TD BGCOLOR=red> normal </TD> <TD BGCOLOR=yellow> normal </TD> <TD BGCOLOR=pink> normal </TD> </TR> Şekil 6.7 Hücre renklendirilmesi örneği </TABLE> bilgisini içeren bir dosya oluşturmak gerekecektir. Bu dosyanın görünümü ise Şekil 6.7’de verilmektedir. 16. Çerçeveler Çerçeveler (Frames) günümüz gözgezdiricilerinin tamamında görüntülenebilmektedir. HTML 3.2 ile birlikte kullanımı artmıştır. Çerçeve oluşturmadan önce <A> belirtecine verilen bir özellikten bahsedilecektir. Normal olarak <A> belirteci ile verilen bir bağın (link) içeriği, o an çalışılan gözgezdirici penceresinde görüntülenecektir. Çerçevelerin kullanıldığı bir sayfada ise bağın içeriği TARGET (hedef) özelliği sayesinde istenilen pencere içerisinde görüntülenebilmektedir. Çerçeve kullanımı sayesinde gözgezdirici penceresi birden fazla pencereye ayrılabilmektedir. Bu durumda aynı sayfa içerisinde birden fazla HTML dosyası çağırıp görüntülemek mümkün olmaktadır. 16.1 Çerçeve Oluşturma Çerçevelere sahip bir sayfa yaratmak için, öncelikle çerçevelerin özelliklerini tanımlayan bir ana HTML dosyası hazırlanması gerekmektedir. Bu dokümanın içerisinde sadece sayfada bulunacak çerçevelerin sayısı, boyutları ve içerisinde görüntülenecek dokümanların isimleri tanımlanır. Bu tanımlamaları yapmak için değişik belirteçler kullanılmaktadır. Şimdi sırası ile bu belirteçleri inceleyelim. <FRAMESET> Belirteci <FRAMESET> (pencere grubu) belirteci sayfadaki çerçeve sayısını ve bu çerçevelerin büyüklüklerini tanımlamak amacıyla kullanılır. Çerçeveleri oluşturacak ana sayfa; <HTML> <HEAD><TITLE> Örnek çerçeve tanımlaması </TITLE></HEAD> <FRAMESET> Çerçeve tanımlamaları</FRAMESET> </HTML> bilgisi yer almalıdır. Burada dikkat edilmesi gereken en önemli nokta çerçeve özelliklerinin tanımlandığı bu tip dokümanlarda <BODY> belirteci kullanılmamaktadır. <BODY> belirteci yerine <FRAMESET> belirteci kullanılır. Diğer bir önemli nokta ise, bu tip dokümanların içerisinde <FRAMESET> belirteci ile 64 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 yapılmış tanımlamalardan başka hiçbir HTML belirteci kullanılmamasıdır. <FRAMESET> … </FRAMESET> belirteçleri arasında o sayfada bulunması gereken ve oluşturulacak çerçevelerin sayısını belirtmek için COLS ve ROWS özellikleri kullanılmaktadır. COLS Özelliği Cols özelliği <FRAMESET> belirtecinde kullanılması zorunlu iki özellikten birisidir. Kullanım şekli aşağıdaki gibidir. <FRAMESET COLS="1. sütun genişliği, 2. sütun genişliği …"> COLS özelliği kullanıldığında sayfada dikey olarak tanımlanan genişliklerde çerçeveler oluşturulur. Sütunların genişlikleri pixel cinsinden veya yüzde cinsinden belirtilebilir. Örneğin; <FRAMESET COLS="100, 50%, *"> bilgisi üç tane sütun oluşumuna neden olur ve birinci sütun 100 pixel genişliğinde, ikinci sütun sayfanın %50'si genişliğinde ve üçüncü sütun ise ("*" işareti) sayfada kalan boşluğun tamamını kaplayacak boyuttadır. Bu sayfa 640x480 ekran çözünürlüğüne sahip bir ekranda yorumlanacak olursa birinci çerçeve 100 pixel, geriye kalan iki çerçeve ise sırası ile 320 ve 220 pixel genişliğinde olacaktır. "*" işaretini kullanmak, değişik ekran çözünürlüğü ve boyutlarında çok yararlıdır, ekran boyutları değişsede bu işaret sayesinde ikinci veya üçüncü sütun ekranda kalan boşluğun tamamını alır. ROWS Özelliği Rows özelliğide, COLS özelliği ile aynı şekilde çalışmaktadır, tek fark ROWS özelliği sayfada yatay çerçeveler (satır gibi) oluşturmaktadır. Sayfada görüntülenecek olan çerçevelerin sayısı ve büyüklükleri belirlendikten sonra her pencerenin içeriği <FRAME> belirteci ile belirlenmektedir. 16.2 <FRAME> Belirteci Tanımlama yapılırken her bir çerçevenin içeriği için bir kaynak doküman <FRAME> belirteci kullanılarak belirtilir. İçeriği; <FRAMESET COLS="50%, *"> <FRAME SRC="pencere1.htm"> <FRAME SRC="pencere2.htm"> </FRAMESET> olan bir ana pencere dosyası gözgezdiricide Şekil 6.8’deki gibi görülecektir. Eğer ‘pencere1.htm’ ve ‘pencere2.htm’ dosyaları önceden oluşturulmuşsa gözgezdiricide bu sayfalar gösterilecektir. <FRAME> belirteci ile SRC özelliğinden başka kullanılabilecek diğer özellikler Tablo 6.1’de verilmektedir. Şekil 6.8 Çerçeve örneği Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 65 İleri Düzey Uygulamalar-ODTÜ-2000 16.3 Diğer Çerçeve Özellikleri Tablo 6.1 Diğer Çerçeve Özellikleri Özellik Değer Açıklama SCROLLING AUTO Eğer çerçevenin içerisindeki doküman çerçevenin büyüklüğünden fazla yer kaplıyor ise gözgezdirici kendiliğinden çerçevenin çevresine kaydırma çubukları ekler. SCROLLING NO Çerçevenin içerisindeki doküman çerçeveden daha büyük olsada kaydırma çubukları eklenmez ve kullanıcı çerçevenin dışında kalan kısmı göremez. SCROLLING YES Bu durumda gerekli olsada olmasada kaydırma çubukları eklenir. NORESIZE Kullanıcı çerçevelerin sınırlarını kullanarak çerçeve boyutlarını değiştirebilir, bunu engellemek için NORESIZE özelliği kullanılır. MARGINWIDTH Pixels Çerçevenin içerisindeki dokümanın üst ve altındaki boşluğu ayarlamak için kullanılır. MARGINHEIGHT Pixels Çerçevenin içerisindeki dokümanın üst ve altındaki boşluğu ayarlamak için kullanılıır. 16.4 <NOFRAME> Belirteci Çerçevelerden oluşan bir sayfa, çerçeveleri desteklemeyen bir gözgezdirici kullanılarak izlenmeye çalışılırsa, sayfada hiç bir şey görüntülenmez. Bu gibi durumlarda çerçevelerden oluşan sayfanın, çerçeveleri desteklemeyen bir gözgezdiricidede görüntülenmesi için <NOFRAME> belirteci kullanılır. Daha önce bahsedildiği gibi çerçeve tanımlamalarının bulunduğu sayfa içerisine herhangi bir şekilde resim ve yazı eklemek mümkün değildir, ancak bahsedilen problemi çözmek için <NOFRAME> belirteci içerisine istenilen resim ve yazı eklenebilir. Bu resim ve yazılar sadece çerçeveleri desteklemeyen gözgezdiricilerde görüntülenecektir. FRAME ve NOFRAME belirteçlerini içeren bir sayfayı aşağıdaki gibi oluşturmak mümkündür. <HTML> <HEAD> <TITLE> Örnek Sayfa </TITLE> </HEAD> <FRAMESET> Çerçeve tanımlamaları <NOFRAME> yazılar ve resimler </NOFRAME> </FRAMESET> </HTML> 66 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 16.5 İç İçe <FRAMESET> Belirteçleri İç içe <FRAMESET> belirteçleri kullanarak dikey ve yatay çerçeveler oluşturmak mümkündür. Örneğin içeriği; <FRAMESET ROWS="200,*"> <FRAMESET COLS="30%,*"> <FRAME SRC="test.html"> <FRAME SRC="test.html"> </FRAMESET> <FRAME SRC="test.html"> </FRAMESET> olan bir ana pencere dokümanı gözgezdiricide incelendiğinde (Şekil 6.9) iki satır ve iki sütun olarak görülecektir. Birinci satır 200 pixel, ikinci satır ise görüntülenmenin yapıldığı bilgisayarın ekran çözünürlüğüne bağlı olarak Şekil 6.9 İç içe çerçeve örneği değişecektir. Birinci satırda yer alan ilk hücre ekran genişliğinin %30’unda görüntülenirken, ikinci hücre ise ekran çözünürlüğüne bağlı olarak geriye kalan alanı kullanacaktır. 16.6 Çerçevelerin İsimlendirilmeleri Bazı dokümanları istenilen çerçeveler içerisinde görüntülemek için o çerçevelerin isimleri olmak zorundadır (TARGET özelliğininde kullanılması için). Çerçevelere isim vermek için <FRAME> belirtecinin NAME (isim) özelliği kullanılır. <FRAME SRC="test.html" NAME="yenipencere"> <BASE> Belirteci İçerisinde çerçeveler olan bir sayfadaki bağların tamamı yada çoğu aynı pencerede görüntülenecek ise, TARGET özelliğini her bağ için ayrı ayrı vermek yerine <BASE> belirteci kullanılarak, dokümanın tamamı için genel bir TARGET tanımlaması yapılmış olur. <BASE TARGET="yenipencere"> tanımlamasıyla açılacak olan her yeni bağ “yenipencere” adı verilen çerçevede görüntülenecektir. <BASE> belirteci dokümanın <HEAD> … </HEAD> kısmında yer alır. <BASE> belirteci ile bir tanımlama yapıldıktan sonra, sayfada bazı bağların farklı pencerelerde görüntülenmesi isteniyorsa, bağlar için TARGET özelliği kullanılır ve gözgezdirici <BASE> belirtecindeki tanımlamayı kullanmaz. Özel yönlendirmeler yapmak için kullanılan 4 standart hedef (target) ismi vardır: _blank Bağlanmış dokümanı göstermek için yeni ve isimsiz bir gözgezdirici penceresi açar. Örnek: target=”_blank” Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 67 İleri Düzey Uygulamalar-ODTÜ-2000 _self Bağlanmış dokümanı aynı çerçeve veya pencere içerisine kaynak doküman olarak açar. Örnek: target=”_self” _parent Bağlanmış dokümanı çerçeve hiyerarşisi içerisindeki bir üst çerçeve içerisinde açar. Örnek: target=”_parent” _top Bağ içeren dokümanın en üstteki pencere içerisine yüklenmesini sağlar. Örnek: target=”_top” 17. Resim Haritaları 17.1 Giriş HTML dokümanlarında metin tabanlı bağlarda olduğu gibi herhangi bir resim veya kullanılan resmin belirli bir bölgesinede aktif bağ oluşturmak mümkündür. Bu durumda, resmin üzerinde yer alan bağ içeren alanlara tıklandığında, bir tek bağ aktif hale gelir, bağın yönlendirildiği adrese bağlanılır ve ilgili doküman gözgezdirici ekranında görüntülenir. Bir resim üzerinde farklı noktalara tıklandığında farklı bağların aktif hale gelmesi için resim haritaları (image map) kullanılır. Resim haritası, üzerinde farklı alanlarda farklı bağlar bulunan bir resimdir. Resim haritaları üzerindeki bu alanlar, resmin koordinat bilgileri verilerek parçalara bölünmesi ve her parçaya farklı bir bağ adresi verilmesi ile yapılabilir. 17.2 <MAP> ve <AREA> Belirteçleri Resim haritası tanımlamaları <MAP>...</MAP> belirteçleri arasında yapılır. NAME özelliğine verilen isim resim haritasının ismidir ve daha sonra kullanılacaktır. Örnek: <MAP NAME="map_ismi"> Koordinatlar ve linkler </MAP> <MAP> belirteçleri arasında resim üzerindeki farklı bağlara koordinatlarını tanımlamak için <AREA> belirteci kullanılır. sahip alanların Örnek: <AREA SHAPE="poly" COORDS="70,0, 0,37, 0,183, 27,192, 27,48, 103,9" HREF="link.html"> SHAPE özelliği ile belirtilen şekil aktif bağ olacak şekildir, alabileceği değerler ise: RECT (diktörtgen), POLY (poligon) ve CIRCLE (daire) değerleridir. <AREA SHAPE="poly" COORDS="x1,y1, x2,y2, x3,y3, ... xn,yn" HREF=""> <AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF=""> <AREA SHAPE="circle" COORDS="x,y,çap" HREF=""> Kullanımları yukarıdaki gibidir. Poligon şekli istenilen noktaların birleştirilmesinden oluşur, dikdörtgen şekli sol üst ve sağ alt noktaları verilerek belirlenir, daire şekli ise orta nokta ve yarı çap verilerek belirlenir. 68 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 İstenilen herhangi bir resim, koordinat bilgilerini veren bir program aracılığı ile kullanıcı tarafından resim haritasına dönüştürülebilir. Windows ortamında Paint, Photo Editor, Photo Shop vb. programlar resmin koordinat bilgilerini öğrenmek için kullanılabilir. Örneğin; Şekil 6.10’daki resmin orta bölümünde yer alan “Internet” yazısının olduğu alana basıldığında “internet.htm” isimli dosyanın ekrana gelmesini sağlamak istiyorsak sırası ile şu adımları gerçekleştirmemiz gerekmektedir: Öncelikle resmin koordinatları bulup tanımlayabilmemiz için resmi bir resim editörü programı içerisinde, bu örnekte Paint programı, görüntülememiz gerekmektedir. Daha sonra fare yardımı ile ilgili alanın başlangıç (Şekil 6.10) ve bitiş (Şekil 6.11) koordinatlarını görür ve not ederiz. Şekil 6.10 Bağ tanımlanacak alanın başlangıç koordinatları Şekil 6.11 Bağ tanımlanacak alanın bitiş koordinatları Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 69 İleri Düzey Uygulamalar-ODTÜ-2000 Daha sonra bu koordinat bilgilerini (dikey ve yatay konumları) HTML kodu içerisinde belirtiriz. Başlangıç koordinatları X,Y düzlemi üzerinde düşünülürse X1,Y1 ve bitiş koordinatlarıda aynı şekilde X2,Y2 şeklinde ard arda verilmektedir. Bu örnek için kod örneği aşağıda görülmektedir: <AREA SHAPE="rect" COORDS="94,151,414,207" HREF="internet.htm"> Böylece üzerine tıklandığında “internet.htm” dosyasını çağıracak dikdörtgen bir alan tanımlanmış olacaktır. 17.3 USEMAP Özelliği Resim haritası hazırlandıktan sonra bu resim haritasını bir resim ile ilişkilendirmek gerekmektedir, bunun için <IMG> belirtecinin USEMAP özelliği kullanılır. <IMG SRC="resim.gif" USEMAP="#map_ismi"> Kodun tamamına bakacak olursak; <img src="gif/internet.gif" usemap="#internet"> <map name="internet"> <area shape="rect" coords="29,23,130,97" href="telnet.html"> <area shape="rect" coords="216,27,299,97" href="e-mektup.html"> … </map> Öncelikle hangi resim belirtmemiz gerekir. dosyasını hangi alan tanımına göre kullanacağımızı <img src="gif/internet.gif" usemap="#internet"> Daha sonra ise alan tanımlarını koordinat bilgilerini veererek belirttiğimiz resim için tanımlamamız gerekir. <map name="internet"> <area shape="rect" coords="29,23,130,97" href="telnet.html"> <area shape="rect" coords="216,27,299,97" href="e-mektup.html"> … </map> Böylece “internet.gif” isimli resim dosyasını “#internet” olarak tanımlanmış koordinatlara göre “href=” bölümünde belirttiğimiz dosyalara bağlamış oluruz. 18. Formlar 18.1 Giriş Buraya kadar öğrendiğiniz bütün konular, elinizdeki bilgiyi sunmak için kullanabileceğiniz belirteçlerden oluşmaktaydı. Bu bilgi metin, resim, resim haritası ve benzeri şekillerde olabilir. Temel olarak siz bilgiyi uygun biçimde sunarsınız ve kullanıcılar sadece pasif olarak bu bilgileri okuyabilirler. Doldurulabilen formlar ile bu mantık değişmiştir. Formların kullanımı ile kullanıcıdan bilgi alınması mümkün olabilmektedir. Formlar HTML 2.0 sürümünün bir parçası olup, neredeyse tüm 70 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 gözgezdiriciler tarafından desteklenmektedir. Şimdi istemci ve sunucu tarafından formların nasıl işlendiğini ve formun nasıl çalıştığını anlatmaya başlayalım: • • Temel form elemanları; metin kutuları (text fields), radyo tuşları (radio buttons) ve kontrol kutuları (check boxes) ile, bilgileri göndermek için (submit) ve formu temizlemek (reset) için kullanılan tuşlardan oluşmaktadır. Diğer form elemanları; metin alanları (text areas), seçenek menüleri (menu options) ve saklı alanlardır (hidden fields). 18.2 Formun Yapısı Bir form oluşturmak genellikle iki bağımsız adımdan oluşmaktadır: 1. Formun görünümünü oluşturmak. 2. Sunucu tarafında çalışacak ve form ile alınan bilgiyi işleyecek programın yazılması (CGI, ASP yazılımı). Bir form oluşturmak için <FORM> belirteci kullanılır. Açılış ve kapanış FORM belirteçleri arasına bağımsız form elemanları ve HTML içeriği (paragraflar, başlıklar, tablolar vb.) eklenerek formun görünümü oluşturulur. Bir HTML dokümanında istediğiniz kadar form kullanabilirsiniz. Ancak formlar iç içe (nested) kullanılmazlar, yani bir <FORM> belirtecini kapatmadan yeni bir <FORM> belirteci açılamaz. FORM açılış belirteci, genellikle iki özellik içermektedir: METHOD ve ACTION. METHOD özelliğinin değeri GET veya POST olabilir. Bu değerler ile, oluşturulan forma yazılan verinin program tarafından işlenebilmesi için nasıl gönderileceği belirlenir. ACTION özelliği, sunucu üzerinde veri ile işlem yapacak olan programı adreslemektedir. ACTION özelliği yerel adres veya tüm bir URL adresi olabilir. Örneğin; aşağıdaki <FORM> belirteci, "www.myserver.com" isimli sunucu üzerinden "cgi-bin" dizininden "form-name" isimli programı çalıştırmaktadır: <FORM METHOD=POST ACTION="http://www.myserver.com/cgi-bin/form-name"> ... </FORM> Konuya basit bir örnek ile başlayalım. İçerisinde sadece kişisel bilgi olarak adınızı soran bir HTML dosyası oluşturalım. Bu formda sizden yalnızca adınız sorulmaktadır. Bu forma adınızı girmeli ve Gönder tuşuna basmalısınız. Gönder (Submit) tuşu girmiş olduğunuz bilgileri işlenmesi için sunucuya gönderir. Daha sonra sunucuda bulunan program çalışır ve veri ile ne yapılması isteniyorsa (veritabanına eklemek, başka işlemler için başka kişilere göndermek vb.) o işlemi gerçekleştirilir. Çoğu gözgezdirici Gönder (Submit) tuşuna basmak yerine, klavye üzerindeki Enter tuşuna basarakda formun aktif olmasına olanak sağlayabilmektedir. Buraya kadar anlattıklarımızı denemek için aşağıda verilen örneği gözgezdiricide incelediğinizde Şekil 6.12’deki görüntü ile karşılaşacaksınız. Şekil 6.12 Form örneği Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 71 İleri Düzey Uygulamalar-ODTÜ-2000 <HTML> <HEAD> <TITLE>Isminizi yazin</TITLE> </HEAD> <BODY> <H2>Siz kimsiniz?</H2> <FORM METHOD=POST ACTION="http://www.mcp.com/cgi-bin/post-query"> </FORM> </BODY> </HTML> Formun belirteçlerini eklerken <FORM> belirteci içerisinde formun görünümü belirlenir. Bu işlem için diğer HTML belirteçlerini kullanmamız gerekir. Bu formdaki ilk eleman isim girilebilmesi için oluşturulmuş metin kutusudur. Öncelikle diğer HTML dokümanlarında yaptığınız gibi bir açıklama yazınız. <P>Lütfen isminizi giriniz: Daha sonra HTML koduna bilgisi alınacak olan metnin girilebilmesi için bir metin kutusu tanımlayınız. <P>Lütfen isminizi giriniz:<INPUT NAME="isim"></P> <INPUT> belirteci bir form elemanıdır ve en az iki özelliği bulundurur: TYPE ve NAME. TYPE özelliği ile tanımlanabilen bir kaç seçenek vardır. Bunlar; metin girişi için "text", radyo tuşları için "radio" ve kontrol kutuları için "check" seçenekleridir. Eğer hiç bir seçenek belirtilmezse metin girişi olarak tanımlanır. NAME özelliği belirtilen seçeneğe isim vermek için kullanılır. Formunuz sunucuya gönderilirken, bilgileri işleyecek olan program bu bilgileri bir seri "isim ve değeri" çiftleri şeklinde almaktadır. Buradaki değer (value) kullanıcı tarafından girilen bilgi, isim (name) ise sizin o elemana vermiş olduğunuz isimdir. Her elemana anlamlı isimler vererek, hangi değerin hangi elemana verilmiş değer olduğunu kolayca anlayabilirsiniz. Bir elemana istediğiniz ismi verebilirsiniz, ama bu isimlerin mümkün olduğunca açık olması daha sonraki işlemlerinizi kolaylaştıracaktır. Şimdi son form elemanını ekleyelim: Gönder (Submit) tuşu. <P><INPUT TYPE="submit"></P> <INPUT> belirteci burada da kullanılmaktadır. TYPE özelliği kullanılarak, form için bilgilerin gönderileceği tuş "submit" değeri verilerek oluşturulur. Yalnızca bir tane Gönder tuşu kullanılacaksa bu tuşa isim vermeye gerek yoktur. Formunuzda tek bir metin giriş alanı olsa bile Gönder tuşunu kullanmanız tavsiye edilir. Bu tuşun kullanımı o kadar yaygındır ki, kullanıcılar bu tuşu görmedikleri zaman şaşırabilirler. Her belirteç biçimlendirme için elemanlar içerir. Form elemanları metinler ile aynı özelliklere sahiptirler ve gözgezdiriciler tarafından aynı şekilde biçimlendirilirler. <P> belirtecini kullanmazsanız bütün form elemanları aynı satırda görülecektir. 72 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 Şimdi bu forma bilgi girip Gönder tuşuna basıldığında, bilgiler sunucuya gönderilir ve “post-query” isimli CGI programı çağırılır. Bu örnekte “post-query” programı forma girilen orjinal verileri geri göndermek dışında başka işlem yapmamaktadır. Buraya kadar, iki elemandan oluşan basit bir form yaratmış bulunuyoruz. Bu form için HTML kodunun aldığı son durum aşağıda verilmektedir. <HTML> <HEAD> <TITLE>Isminizi yazin</TITLE> </HEAD> <BODY> <H2>Siz kimsiniz?</H2> <FORM METHOD=POST ACTION="http://www.mcp.com/cgi-bin/post-query"> <P> Lütfen isminizi giriniz:<INPUT NAME="isim"></P> <P><INPUT TYPE="submit"></P> </FORM> </BODY> </HTML> Sonucu görmek için gözgezdiricide bu dosya çağırıldığında oluşan ekran görüntüsü Şekil 6.13’de verilmektedir. Şekil 6.13 Form örneği 18.3 Basit Form Görüntüsü Bu bölümde <INPUT> belirteci ile birlikte kullanılabilen basit elemanları göreceğiz. Bu bölümde anlatılacak elemanların her biri <FORM>...</FORM> belirteçleri arasında kullanılmalıdır. Buradaki örneklerde formun işlevi (çağıracağı program) olarak, “post-query” programını kullanmaya devam edeceğiz. Gönder (Submit) Tuşu Gönder tuşları (grafik olmayan gözgezdiricilerde bağ şeklinde görülecektir) gözgezdiriciye forma girilen verileri sunucuya göndermesini söyler. Her form için en az bir tane Gönder tuşu tanımlamalısınız. Gönder tuşu yaratmak için, <INPUT> belirteci içerisinde TYPE özelliğini kullanmalı ve SUBMIT değerini vermelisiniz: <INPUT TYPE="SUBMIT"> Tuşun üzerinde yazılacak olan metni VALUE özelliğini kullanarak değiştirebilirsiniz: Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 73 İleri Düzey Uygulamalar-ODTÜ-2000 <INPUT TYPE="SUBMIT" VALUE="Gönder"> <INPUT> belirteci içerisinde NAME özelliğini kullanarak birden fazla Gönder tuşu tanımlayabilirsiniz. Gönder tuşlarının NAME ve VALUE özellikleri işlenmek üzere sunucuya gönderilir. Hangi gönder tuşuna basıldığını anlamak için CGI programı içerisinde isim ve değer çiftlerini kontrol etmemiz gerekir. Örneğin gönder kullanabilirsiniz: <INPUT <INPUT <INPUT <INPUT <INPUT <INPUT tuşlarını TYPE="SUBMIT" TYPE="SUBMIT" TYPE="SUBMIT" TYPE="SUBMIT" TYPE="SUBMIT" TYPE="SUBMIT" bir form içerisinde yönlendirme yapmak için NAME="sol" VALUE="Sol"> NAME="sag" VALUE="Sag"> NAME="yukari" VALUE="Yukari"> NAME="asagi" VALUE="Asagi"> NAME="ileri" VALUE="Ileri"> NAME="geri" VALUE="Geri"> şeklinde yazılan bir dosyanın gözgezdiricideki görüntüsü Şekil 6.14’de verilmektedir. Şekil 6.14 Tuş örneği 18.4 Metin Giriş Kutuları Metin giriş kutuları kullanıcının tek satırdan oluşan bir kutuya metin girmesine olanak tanır. Birden fazla satır gerektiği durumlarda metin alanı tanımlamak için <TEXTAREA> (metin alanı) belirteci kullanılır. Bir metin girişi kutusu yaratmak için <INPUT> belirteci içerisinde TYPE="text" yazmanız gerekmektedir. TYPE özelliğinin varsayılan değeri “text” olduğu için yazmadığınız durumda da bu özellik kullanılacaktır. Aynı zamanda NAME özelliğini de kullanmalısınız. NAME özelliği bu kutunun ismini tanımlamak için kullanılır ve veriler işlenmek üzere programa gönderildiğinde gereklidir. <INPUT> belirteci içerisinde SIZE (boyut) ve MAXLENGTH (kullanılabilecek karakter sayısı) özelliklerini de kullanabilirsiniz. SIZE özelliği ile metin giriş kutusunun uzunluğu karakter cinsinden belirtilir, varsayılan değeri 20 karakterdir. Kutucuk içerisine metin girildiği sürece yatay olarak kayacaktır. SIZE değerini, tüm gözgezdirici ekranlarına sığmasını sağlamak için, 50 karakterden az tutmaya çalışmalısınız. <INPUT TYPE="text" NAME="uzunmetin" SIZE="50"> MAXLENGTH özelliği kullanılarak kullanıcının metin kutusuna girilebilecek karakter sayısına sınır konularak, belirlenen karakter sayısı kadar karakter girilmesine izin verilebilir. MAXLENGTH değerinin SIZE özelliğine verilen değerden küçük olması durumunda, gözgezdiriciler bazen MAXLENGTH değerini kullanırlar. 74 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 Sıradan metin giriş kutularının yanı sıra, TYPE=password olarak tanımlanan şifre (password) kutuları vardır. Şifre metin kutularının normal metin kutularından farkı, girilen karakterlerin gözgezdirici tarafından gizlenmesidir (girilen karakterler yerine genellikle “*” karakteri görülür). <INPUT TYPE="PASSWORD" NAME="sifre"> Karakterler gözgezdirici tarafından gizlenmesine rağmen, şifre metin kutuları güvenli değildir. Şifre, diğer metin bilgilerinin arasında sunucuya gönderilir, herhangi biri tarafından rahatlıkla okunabilir. Buraya kadar anlatılanları örneklemek için aşağıdaki bilgileri içeren bir dosya yaratalım. Lütfen isminizi giriniz:<INPUT NAME="isim"><BR> Yasinizi giriniz: <INPUT TYPE="TEXT" NAME="yas" SIZE="3" MAXLENGTH="3"><BR> Adresinizi giriniz: <INPUT TYPE="TEXT" NAME="adres" SIZE="40"><BR> Bu dosya gözgezdiricide Şekil 6.15’deki gibi görülecektir. Şekil 6.15 Metin kutusu örneği 18.5 Radyo Tuşları Radyo tuşları, içlerinden sadece birinin seçilebileceği seçenekli listeler için kullanılır. Bir listedeki bir radyo tuşunu seçilmesi, aynı listedeki diğer seçeneklerin hiçbirinin seçilmediği anlamına gelmektedir. Radyo tuşları TYPE özelliğine "radio" değeri verilerek yaratılır. Bir grupta yer alan tüm radyo tuşlarına aynı isim (NAME) verilir. Ancak, bir grupta yer alan her radyo tuşuna hangi seçeneğin seçildiğini anlayabilmek için farklı değer (VALUE) verilmelidir. Örneğin; <OL> <LI><INPUT TYPE="radio" NAME="gida" VALUE="meyve" CHECKED>Meyve<BR> <LI><INPUT TYPE="radio" NAME="gida" VALUE="sebze">Sebze<BR> <LI><INPUT TYPE="radio" NAME="gida" VALUE="icecek">İçecek<BR> </OL> bilgisini içeren bir dosya gözgezdiricide Şekil 6.16’daki gibi görülecektir. Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 75 İleri Düzey Uygulamalar-ODTÜ-2000 Şekil 6.16 Radyo tuşu örneği Her grup için farkli bir isim kullanarak, birden fazla radyo tuşu grubu oluşturulabilir. <OL> <LI><INPUT <OL> <LI><INPUT <LI><INPUT <LI><INPUT </OL> <LI><INPUT <LI><INPUT </OL> TYPE="radio" NAME="gida" VALUE="meyve">Meyve<BR> TYPE="radio" NAME="meyve" VALUE="elma">Elma TYPE="radio" NAME="meyve" VALUE="portakal">Portakal TYPE="radio" NAME="meyve" VALUE="karpuz" CHECKED>Karpuz TYPE="radio" NAME="gida" VALUE="sebze">Sebze<BR> TYPE="radio" NAME="gida" VALUE="icecek">İçecek<BR> Bu dosya ise gözgezdiricide Şekil 6.17’deki gibi görülecektir. Şekil 6.17 Radyo tuşu örneği Eğer radyo tuşlarından birinin seçilmiş durumda olarak görüntülenmesi istenirse, CHECKED özelliğini kullanılabilir. Şimdi bunu bir örnekle görelim; <OL> <LI><INPUT TYPE="radio" NAME="gida" VALUE="meyve" CHECKED>Meyve<BR> <LI><INPUT TYPE="radio" NAME="gida" VALUE="sebze">Sebze<BR> <LI><INPUT TYPE="radio" NAME="gida" VALUE="icecek">İçecek<BR> </OL> bilgisini içeren bir dosyanın görüntüsü Şekil 6.18’de verilmektedir. 76 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 Şekil 6.18 Radyo tuşu örneği Varsayılan değer olarak bütün radyo tuşları ilk olarak seçilmemiş durumdadır. Form verileri sunucuya gönderildiğinde, bir grup radyo tuşu içerisinden tek bir isim-değer çifti çalışacak programa iletilir. Bu bilgi çifti NAME ile belirlenen ismi ve seçilen seçeneğin VALUE ile belirlenen değeri içerir. Aşağıdaki örnekte iki grup radyo tuşunun gözgezdiricideki görünümü yer almaktadır (Şekil 6.19). <OL> <LI><INPUT TYPE="radio" NAME="gida" VALUE="meyve">Meyve<BR> <OL> <LI><INPUT TYPE="radio" NAME="meyve" VALUE="elma">Elma <LI><INPUT TYPE="radio" NAME="meyve" VALUE="portakal">Portakal <LI><INPUT TYPE="radio" NAME="meyve" VALUE="karpuz">Karpuz </OL> <LI><INPUT TYPE="radio" NAME="gida" VALUE="sebze">Sebze<BR> <LI><INPUT TYPE="radio" NAME="gida" VALUE="icecek">İçecek<BR> </OL> Şekil 6.19 Radyo tuşu örneği 18.6 Kontrol Kutuları Kontrol kutuları, listede yer alan seçenekler içerisinden birden fazla seçeneğin seçilmesine olanak sağlayabilir. Her bir kontrol kutusu seçilebilir veya seçilmemiş duruma getirilebilir. Kontrol kutuları TYPE özelliğine “checkbox” değeri verilerek yaratılır. Örneğin; <UL> <LI><INPUT TYPE="checkbox" NAME="kirmizi">Kırmızı <LI><INPUT TYPE="checkbox" NAME="yesil">Yesil <LI><INPUT TYPE="checkbox" NAME="mavi">Mavi </UL> Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 77 İleri Düzey Uygulamalar-ODTÜ-2000 bilgisini içeren bir dosya gözgezdiricide Şekil 6.20’deki gibi görülecektir. Şekil 6.20 Kontrol kutusu örneği Form verileri sunucuya gönderildiğinde, bir grup kontrol kutusu içerisinden seçilmiş olan tüm seçeneklerin isim-değer bilgileri çalışacak programa iletilir. Bilgisinin mutlaka programa gönderilmesini istediğiniz bir seçenek varsa, VALUE özelliğini kullanarak bunu gerçekleştirebilirsiniz. Aşağıdaki örnekte bütün kontrol kutuları seçilmemiş durumdadır ve her birine NAME özelliği kullanarak farklı isimler verilmiştir. <UL> <LI><INPUT TYPE="checkbox" NAME="kirmizi" VALUE="chosen">Kırmızı <LI><INPUT TYPE="checkbox" NAME="yesil" VALUE="chosen">Yesil <LI><INPUT TYPE="checkbox" NAME="mavi" VALUE="chosen">Mavi </UL> Bu dosya gözgezdiricide Şekil 6.21’deki gibi görülecektir. Şekil 6.21 Kontrol kutusu örneği Radyo tuşlarında olduğu gibi, CHECKED özelliği kullanılarak kontrol kutusunun sayfanın ilk yüklenişinde seçili olarak ekrana gelmesi sağlanabilir. Örneğin; <P>Meslek (uygun olan tüm seçenekleri seçin): </P> <UL> <LI><INPUT TYPE="checkbox" NAME="doktor" CHECKED>Doktor <LI><INPUT TYPE="checkbox" NAME="avukat">Avukat <LI><INPUT TYPE="checkbox" NAME="ogretmen" CHECKED>Öğretmen <LI><INPUT TYPE="checkbox" NAME="muhendis">Mühendis </UL> bilgisini içeren bir dosya gözgezdiricide Şekil 6.22’deki gibi görülecektir. 78 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 Şekil 6.22 Kontrol kutusu örneği 18.7 Resimler Formları kullanırken, <INPUT> belirteci içerisinde TYPE=IMAGE özelliğini kullanarak resim haritalarını kullanabilirsiniz. Bu özelliği SRC özelliği ile birlikte kullanarak resim dosyasının dizin bilgisini veya URL adresini belirtebilirsiniz (<IMG> belirteci ile SRC özelliğinin kullanımı gibi). Örneğin; <INPUT TYPE="image" SRC="turkeymap.gif" NAME="map"> Formlar içerisinde yer alan resim haritaları diğer resim haritaları ile aynı mantıkla çalışırlar. Resim üzerinde herhangi bir nokta tıklandığında, form bilgileri sunucuya gönderilir. Tıklamış olduğunuz alanın koordinat bilgileri, form bilgilerinin bir parçası olarak, isim bilgisi ile birlikte sunucuya gönderilir. Örneğin resim haritanızın ismi "map" olarak verilmişse, "map.x" değeri x koordinatı, "map.y" değeri ise y koordinatı değerini içerir. Bu değerleri, form bilgilerini işleyecek olan programda göz önünde bulundurmanız gerekmektedir. Resim üzerine tıklanıldığında form bilgileri sunucuya gönderildiği için bu özellik, değişik görünümlü Gönder tuşları kullanabilmenize olanak tanımaktadır. Örneğin; <UL> <LI><INPUT TYPE=”IMAGE” SRC="./images/magnif5.gif" NAME="arac" VALUE="meyve">Büyüteç<BR> <LI><INPUT TYPE=”IMAGE” SRC="./images/key04.gif" NAME="arac" VALUE="meyve">Anahtar<BR> </UL> bilgisini içeren bir dosya 6.23’deki gibi görülecektir. gözgezdiricide Şekil Şekil 6.23 Resimli form örneği 18.8 Varsayılan Değerler Her form elemanının varsayılan değerleri vardır. Bu değerleri değiştirmek için; • Metin alanları için VALUE özelliği kullanılarak verilen değer varsayılan değer olarak yüklenir. Form görüntülendiği zaman verilen değer kutu içerisinde görülecektir. Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 79 İleri Düzey Uygulamalar-ODTÜ-2000 • Radyo tuşları ve kontrol kutuları varsayılan değerler degiştirilebilir. için, CHECKED özelliği kullanılarak Her eleman için bütün bu varsayılan değerlere ek olarak formunuza sıfırlama (reset) yapmak için bir tuş ekleyebilirsiniz (gönder tuşu gibi). Sıfırlama tuşu kullanıcının yapmış olduğu tüm işlemleri silerek formdaki tüm elemanlara varsayılan değerleri yükler. VALUE özelliği kullanılarak bu tuşa isim verilebilir. Örneğin; <UL> <LI><INPUT TYPE="checkbox" VALUE="avukat">Avukat </UL> <INPUT TYPE="RESET" VALUE="Girilen Değerleri Temizle"> bilgisini içeren bir dosya gözgezdiricide Şekil 6.24’deki gibi görülecektir. Şekil 6.24 Form örneği Şimdi daha karışık bir örneği inceleyelim. Bir spor merkezinin kullanıcılarına yaptığı bir anketi örnek olarak alalım. <HTML> <HEAD> <TITLE>Kullanıcı Formu</TITLE> </HEAD> <BODY> <H1>Kullanıcı Bilgi Formu</H1> <P>Sizlere daha iyi hizmet verebilmemiz için lütfen aşağıdaki anketi doldurunuz.</P> <P>Yanıtlarınızı göndermek için lütfen formu doldurduktan sonra <B>Gönder</B> tuşuna tıklayınız.</P> <HR> <FORM METHOD="POST" ACTION="http://www.mcp.com/cgi-bin/post-query"> <P><B>Isim-Soyisim: </B><INPUT TYPE="TEXT" NAME="isim"></P> <P><B>Cinsiyet: </B> <INPUT TYPE="radio" NAME="cinsiyet" VALUE="kadin">Kadın <INPUT TYPE="radio" NAME="cinsiyet" VALUE="erkek">Erkek </P> <P><B>Lütfen, uygun olan tüm seçenekleri isaretleyiniz.</B><BR> <INPUT TYPE="checkbox" NAME="memnuniyet”>Tüm teknik ve idari personelden memnunum.<BR> <INPUT TYPE="checkbox" NAME="servis">Verilen tüm servislerin kalitesi iyidir.<BR> <INPUT TYPE="checkbox" NAME="temizlik">Soyunma odalarının, havuzun ve spor aletlerinin temizliği yeterlidir.<BR> <INPUT TYPE="checkbox" NAME="csaat">Çalışma saatleri uygundur.<BR> </P> <P>Diğer görüş ve önerileriniz varsa lütfen burada belirtiniz. 80 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 <INPUT TYPE="TEXTAREA" NAME="gorusler"></P> <P><INPUT TYPE="SUBMIT" VALUE="Gönder"> <INPUT TYPE="RESET" VALUE="Formu Temizle"></P> </FORM> </BODY> </HTML> Bu dosya gözgezdiricide Şekil 6.25’deki gibi görülecektir. Şekil 6.25 Form ile oluşturulmuş bir anket örneği 18.9 Diğer Özellikler <INPUT> belirteci içerisinde kullanılan iki özellik daha vardır. Bunlar; asağı doğru açılan menüler oluşturmaya olanak sağlayan SELECT (seç) ve uzun metinlerin girilebilmesine olanak veren TEXTAREA (metin alanı) özellikleridir. SELECT Özelliği Bu özelliğin kullanımı radyo tuşları ve kontrol kutuları ile çok benzerdir. Ancak ekranda görünümleri farklıdır. Bu özelliğin kullanımı, kullanıcıya bir menüden veya Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 81 İleri Düzey Uygulamalar-ODTÜ-2000 listeden bir veya daha fazla seçenek seçebilme olanağı tanır. Bu seçim menüleri veya listeleri <SELECT> belirteci ile, menü veya listelerde yer alacak olan maddeler <OPTION> seçeneği ile tanımlanır. Ayrıca, sunucuya işlenmek üzere bilgi gönderildiğinde anlamlı olabilsin diye, <SELECT> belirteci içerisinde NAME özelliği kullanılarak bir isim verilir. <SELECT> ve <OPTION> belirteçlerinin kullanımı, listelerde kullanılan mantık ile aynıdır. Örneğin; <P>Bir renk seçiniz: <SELECT NAME="renk"> <OPTION>Siyah <OPTION>Sarı <OPTION>Kahverengi <OPTION>Kırmızı <OPTION>Mavi </SELECT></P> dosyasının görüntüsü Şekil 6.26’da verilmektedir. Form gönderildiğinde, OPTION belirteci ile tanımlanan değer sunucuya gönderilir (bu örnekte sarı, mavi vb.). Sunucuya farklı bir değer göndermek istenirse, VALUE özelliği kullanılır: <OPTION VALUE="sicakrenk">Kırmızı Bu şekilde tanımlanan seçim menüleri gözgezdiricide aşağı doğru açılan menüler şeklinde görüntülenir. Şekil 6.26 Seçenek özelliği örneği Genellikle, listede yer alan ilk madde seçili olarak görülür. <OPTION> belirteci içerisinde SELECTED özelliğini kullanarak bu varsayılan değeri değiştirebilirsiniz. Örneğin; Şekil 6.27 Seçenek özelliği örneği <P>Bir renk seçiniz: <SELECT NAME="renk"> <OPTION>Siyah <OPTION>Sarı <OPTION SELECTED>Kahverengi <OPTION>Kırmızı <OPTION>Mavi </SELECT></P> dosyası Şekil 6.27’de olduğu gibi görülecektir. Seçim menüleri radyo tuşları gibi çalışır. Yani bir listede tek bir madde seçilebilir. MULTIPLE özelliğini kullanarak bir listeden birden fazla maddenin seçilebilmesi sağlanabilir. <P>Alışveriş Listesi: <SELECT NAME="alisveris” MULTIPLE> <OPTION>Peynir <OPTION>Süt <OPTION>Un <OPTION>Yumurta <OPTION>Yoğurt <OPTION>Zeytin <OPTION>Ekmek </SELECT></P> 82 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 Birden fazla seçimli listeler oluşturduğunuzda, bu bilgileri işleyecek olan programıda bu bilgilere göre ayarlamanız gerektiğini unutmayınız. <SIZE> özelliğinin kullanımı genellikle grafik gözgezdiricilerde kayan bir liste olarak (SIZE özelliğinde belirtilen eleman sayısı kadar) görüntülenmesini sağlar. Örneğin; <FORM METHOD="POST" ACTION="http://www.mcp.com/cgi-bin/post-query"> <P>Alışveriş Listesi: <SELECT NAME="alisveris” MULTIPLE SIZE="5"> <OPTION>Peynir <OPTION>Süt <OPTION>Un <OPTION>Yumurta <OPTION>Yoğurt <OPTION>Zeytin <OPTION>Ekmek </SELECT></P> </FORM> Şekil 6.28 Seçenek özelliği örneği dosyası Şekil 6.28’de olduğu gibi görülecektir. TEXTAREA Özelliği Metin alanları (Text areas) kullanıcının bilgi girebildiği alanlardır. Metin giriş kutularından (<INPUT TYPE="text">) farklı olarak, metin giriş alanları bir çok satırdan oluşabilir. Örneğin; kullanıcıların elektronik mektup gönderebileceği bir form oluşturmak isterseniz bu özellik çok faydalı olacaktır. Metin giriş alanları <TEXTAREA> belirteci kullanılarak oluşturulur. <TEXTAREA> aşağıdaki 3 özelliği içerir: NAME Form gönderildiğinde programa gönderilecek isim ROWS Metin giriş alanının yüksekliği, satır cinsinden COLS Metin giriş alanının genişliği, sütun (karakter) cinsinden <TEXTAREA> belirteci iki taraflı bir belirteçtir. Metin alanına yazmak istediğiniz metni yazarken ikisini de kullanmak gereklidir: <TEXTAREA NAME="mesaj" ROWS="14" COLS="50">Mesajınızı buraya yazınız.</TEXTAREA> Metin alanına girilecek bilginin yazı gözgezdiricilere bağlı olarak değişebilir. tipi, alt satıra inmesi vb. özellikler <FORM METHOD="POST" ACTION="http://www.mcp.com/cgi-bin/post-query"> <P>Görüş ve önerilerinizi buraya yazabilirsiniz: <TEXTAREA NAME="gorusler" ROWS="8" COLS="30"> </TEXTAREA> </P> </FORM> Bu dosya gözgezdiricide Şekil 6.29’daki gibi görülecektir. Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 83 İleri Düzey Uygulamalar-ODTÜ-2000 Şekil 6.29 Metin alanı örneği 18.10 Basit Bir Uygulama Oluşturduğunuz forma girilen bilgileri özel bir işleme tabi tutmadan (bir program ile işlemeden) elde etmenin en kolay yolu, girilen bilgileri elektronik mektup ile kendinize göndermenizdir. Bunun için <FORM> belirteci içerisinde ACTION özelliği olarak "mailto:user@domain" değerini tanımlamanız yeterli olacaktır. Aşağıdaki örnekte girilen tüm bilgiler, Gönder tuşuna basıldığında "mailto:" kısmında verilen adrese elektronik mektup olarak gönderilecektir. <FORM METHOD="POST" ACTION="mailto:bote@tutor.fedu.metu.edu.tr"> <UL> <LI><INPUT TYPE="checkbox" NAME="kirmizi">Kırmızı <LI><INPUT TYPE="checkbox" NAME="mavi">Mavi </UL> <OL> <LI><INPUT TYPE="radio" NAME="gida" VALUE="meyve">Meyve<BR> <LI><INPUT TYPE="radio" NAME="gida" VALUE="sebze">Sebze<BR> </OL> <P>Bir renk seçiniz: <SELECT NAME="renk"> <OPTION>Siyah <OPTION>Sarı <OPTION>Kahverengi </SELECT></P> <TEXTAREA NAME="mesaj" ROWS="5" COLS="20"> Mesajınızı buraya yazınız. </TEXTAREA><BR> <INPUT TYPE=”submit” VALUE=”Gönder”> </FORM> Bu dosyanın gözgezdiricideki görünümü Şekil 6.30’da görülmektedir. Bu form Şekil 6.31’deki gibi doldurulup “Gönder” butonuna basıldığında, gönderilen bilgiler yada diğer bir deyişle formun çıktısı elektronik mektup olarak belirtilen adrese gönderilecektir. 84 Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü İleri Düzey Uygulamalar-ODTÜ-2000 Şekil 6.30 Form örneği Şekil 6.31 Doldurulmuş form örneği Elektronik mektubun içeriği boş olacak ve formun bilgileri “POSTDATA.ATT” isimli bir dosya içerisinde mektuba eklenmiş olarak gelecektir. Bu dosyanın içeriği aşağıda görüldüğü gibi olacaktır: "kirmizi=on&gida=meyve&renk=Sari&mesaj=Bu+deneme+amaci+ile+gonderilen+ bir+formdur." Bu dosyanın içeriği Notepad, Wordpad veya MS Word gibi kelime işlemci programlar tarafından görülebilmektedir (Şekil 6.32). Şekil 6.32 Mektuba ek olarak gönderilen form bilgisi dosyası – postdata.att Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü (Özden, Yiğit, Çengel, Allı) 85