Giriş Html temelleri Ders 2 World Wide Web (Kısaca web) uygun protokoller kullanarak haberleşen yazılımların çalıştırıldığı internet üzerindeki sistemlerin bir koleksiyonudur. Çoğu sistem gününüzde en yaygın olan TCP/IP haberleşme protokolünü kullanır. Kullanıcı bir yerden başlar ve diğer yerlerle ve kaynaklara bağlantı kurar. Bu işlemlerin yerine getirilmesi için üç farklı yazılıma ihtiyaç vardır: Server (hizmet sağlayıcı) Web sayfası (Bizim dersin konusu) Kullanıcı yazılımı, tarayıcı (browser) 1 2 Giriş -devam Çoğu büyük şirketler kendi web serverlarına sahiptir, küçük şirketler ve bireysel kullanıcılar Internet Service Providers (ISPs, internet servis sağlayıcılar) tarafından sunulan hizmetten yararlanarak web sayfalarını internette sergilerler. Web tarayıcıları GUI (Graphical User Interface) veya CUI (Character User Interface) olmak üzere iki ana grupta toplanır. Web sayfaları programlama sayesinde web ortamını etkileşim kazandırır. URL nedir? Universal Resource Locator olarak bilinir. Web sayfalarındaki link bağlantıları için kullanılır. URL, protokol, kullanıcı ismi ve şifresi (genellikle ihmal edilir), sistem ismi, yeri, istenilen dosyanın ismi gibi bilgileri sağlar. http://www.comu.edu.tr/index.html 3 4 1
www protokolleri Hypertext nedir? Protokol file ftp gopher http mailto news telnet Tanımlama Get file on current system (client) File Transfer Protocol Information Service protocol superseded by http HyperText Transport Protocol Send e-mail Net News Transport Protocol (NNTP) Terminal session communications Dokümanın herhangi bir bölgesine veya diğer dokümanlara linkler sağlayan herhangi bir dokümana uygulanan tanımlamadır. Dokümanı baştan sonra incelemek yerine, dokümanın belirli bölgelerine linkler yardımıyla geçme imkanı sağlar. Referans ile aralarındaki en önemli fark, kullanıcının referansı kendisinin içindekiler veya indeks yardımıyla kendisinin arayıp bulmasıdır. Hypertext de bu ise bir tıklama mesafesi uzaklıktadır. 5 6 Web Sayfası HTML tanıtımı -1 Bir web sitesindeki ilk sayfaya erişilmesi için standart dosya isimleri verilir. Bu kurulu olan sunucu yöneticisi tarafından ayarlanır. Bunun için kullanılan genel isimler index.html veya welcome.html Buradaki uzantı windows yüklü makinelerde bazen.htm olur. Tarayıcınızda http://193.255.97.98/ yazıldığında otomatik olarak http://193.255.97.98/index.html bağlantısı kurulur. Sonuç olarak sunucumuza yerleştireceğimiz web sayfamızın giriş sayfası index.html ismine sahip olmalıdır. Bireysel Web sayfalarının programlaması HTML (Hypertext Markup Language) yardımıyla yapılır. HTML sayfaya erişildiğinde tarayıcıdan elde edilecek görüntü ve diğer sayfalara yapılacak linkleri tanımlar. Bu dil, web tarayıcısı tarafından text (yazı), resim ve linklerin nasıl görüntüleneceğini belirleyen kod ve takıları (tag) tanımlar. HTML dilinde takılar < ve > sembolleri arasına yerleştirilirler. Takılar için büyük veya küçük harf duyarlılığı yok olmasına karşılık değişkenlere veya özelliklere atanan değerler de büyük veya küçük harf duyarlılığı olabilmektedir. Takıların büyük çoğunluğu kapatılmalıdır. <title> Başlık </title> 7 8 2
HTML - 2 <title> Title text goes here </title> <H1> İlk başlık buraya gelir </h1> <! Yorumlar buraya yazılır --> <hr> <! yatay çizgi çizer --> Dikkat edilirse <hr> için kapatma takısı gerekli değildir. Bir çok HTML versiyonu bulunmaktadır. Hatta artık XHTML olarak adlandırılmaktadır ve temel olarak HTML 4.1 üzerinden geliştirilmiştir. Daha geniş bilgi için http://www.w3.org/ Web tarayıcıları tanımadıkları takıları görmezden gelirler. Çoğu web sayfası aşağıdaki açıklamayı kullanır: This page optimized for the XYZ browser. Bu sayfa XYZ tarayıcısı için optimize edilmiştir. 9 HTML - 3 Makul minimumdaki bir HTML dokümanı dört eleman içerir: 1. <html> </html> Dokümanın tamamını içerir 2. <head> </head> Baş kısım bilgisini içerir 3. <title> </title> Başlığı içerir. 4. <body> </body> Dokümanın vücut kısmını içerir. <html> <head> <title> Başlık Buraya Yazılır </title> </head> <body> Web Sayfasının Ana Kısmı Burasıdır </body> </html> html örnekler\örnek1.html 10 HTML - 4 Font büyüklüklerini kontrol etmek için altı seviyeli başlık takısı bulunmaktadır. <h1>, <h2>,,<h6> html örnekler\örnek2.html Fontların kalınlık, italik, vurgulu vb. özellikleri için <ADDRESS>, <CITE>, <CODE>, <EM>, <KBD>, <SAMP>, <STRONG>, <VAR> takıları kullanılır. html örnekler\örnek3.html <br> satır başına geçilmesi gerektiğini ifade eder. <i> italik yazı için, <b> ise kalın yazı için kullanılır. <S> üzeri çizgili, <U> altı çizili, <TT> Typewriter, <BLINK> yanıp sönen yazı için kullanılır. html örnekler\örnek4.html HTML - 5 Yeni paragraf <P> takısıyla yapılır. Kapanış istemez. Bir kimsenin eserinden alıntı yapacaksanız bunu <blockquote> ve </blockquote> ile yapabilirsiniz. Eğer özel bir format kullanmak isterseniz bunu <pre> ve </pre> ile yapabilirsiniz. html örnekler\örnek5.html Ortalı yazı yazmak için <center> ve </center> takıları kullanılır. Hizalama yapılırken <h5 align=left> veya <p align=right> takılarından da yaralanılabilir. html örnekler\örnek6.html 11 12 3
HTML - 6 HTML içerisinde beş değişik liste tipi vardır: 1. Sıralanmamış 2. Sıralanmış 3. Klasör 4. Menü 5. Sözlüksel Listeye eleman eklemek için <li> ve </li> list item takısı kullanılır. Sıralanmamış liste için <ul> ve </ul>, sıralanmış liste için <ol> ve </ol> takıları kullanılır. html örnekler\örnek7.html HTML - 7 Klasör türü liste için <dir> ve </dir> takıları kullanılır. Menü türü liste için <menu> ve </menu> takıları kullanılır. html örnekler\örnek8.html Sözlük veya tanımlama türü listeleme <dl> ve </dl> ile yapılır. Liste içerisindeki tanımlanacak her bir eleman <dt> ve tanımlama <dd> ile yapılır. html örnekler\örnek9.html Sıralı ve sırasız listeler için type (tip) belirtmek mümkündür. html örnekler\örnek10.html 13 14 HTML - 8 Hypertext takıları iki ana değişik şekilde karşımıza çıkar: Anchors ve Images. Anchors, resim veya yazıya bir olay eklemek için kullanılır. Kullanıcı ilgili resim veya yazı üzerine tıkladığında URL linke doğru yapılacak gezintiyi çalıştırır. Anchor ile ilgili 10 değişik durum söz konusudur: 1. Yeni bir html dokümanına geçiş <A HREF="http://www.dca.net/"> Link yazısı</a> 2. Html doküman içerisindeki bir işaret pozisyonu oluşturmak <A NAME="Section1"> Aktarılacak Pozisyon yeri</a> 3. Html doküman içerisindeki bir işaret pozisyonuna aktarmak <A HREF="#Section1">Bölüm 1 e Git</a> HTML - 9 4. Başka bir html dokümanı içerisindeki pozisyona aktarmak <A HREF="http://www.host.domain/page.html#Section1">Go to Section 1</a> 5. Bir resmi veya başka bir ses, video veya çalıştırılabilir kodu çalıştırmak. <A HREF="http://www.host.domain/file.gif">Display the picture</a> 6. Telnet bağlantısı açmak <A HREF="telnet://host.domain">Log into host.domain</a> 7. Ftp Bağlantısı açmak <A HREF="ftp://ftp.host.domain">Use FTP to get files</a> 15 16 4
HTML - 10 8. Goopher bağlantısı (kaynak arama hizmeti) açmak <A HREF="gopher://gopher.host.domain">Use Gopher to find files</a> 9. E-mail mesajı oluşturmak <A HREF="mailto:name@host.domain">Send mail to the webmaster</a> 10. Kullanıcının diskinde bir dosyayı yüklemek için <A HREF="file:///c:/directory/file.ext">Look at file.ext on this machine</a> html örnekler\örnek11.html HTML - 11 Html dokümanı yüklendiğinde bir resim göstermek için image takısı kullanılır: <IMG SRC="URL" ALIGN=TOP WIDTH=200 HEIGHT=250 BORDER=1 ALIGN="right ALT="[Text in place of image]"> Resim formatlarının çoğu desteklenmektedir, gif, jpg vs. html örnekler\örnek12.html Image ile anchors birleştirilerek resim üzerine tıklama yapıldığında istenilen link çalıştırılabilir. html örnekler\örnek13.html 17 18 HTML - 13 <A HREF takısının içinde bir stil tanımı kullanmanız yeterli. Bu stil takısını kullandığınızda hem kısayol alt çizgisiz olacak hem de ziyaret edildikten sonra rengi değişecek. <A HREF="http:// www.comu.edu.tr " STYLE="text-decoration: none"> Çanakkale Onsekiz Mart Üniversitesi </a> Üzerine gidince rengi değişen bir link oluşturalım. Bunu yapmak için uzun kodlar kullanmaya gerek yok sadece onmouseover özelliğini kullanmak yeterli. <A HREF="http:// www.comu.edu.tr" onmouseover="this.style.color='#cc0000' onmouseout="this.style.color='blue'"> Çanakkale Onsekiz Mart Üniversitesi </a> HTML - 14 Şimdide hem altçizgisiz hem de üzerine gelince renklenen bir link kullanalım. Tahmin edebileceğiniz gibi hem onmouseover hem de STYLE özelliklerini kullanacağız. <A HREF="http://www.comu.edu.tr" STYLE="text-decoration: none onmouseover="this.style.color='#cc0000'" onmouseout="this.style.color='blue'"> Çanakkale Onsekiz Mart Üniversitesi </a> html örnekler\örnek14a.html 19 20 5
HTML - 15 LINK parametresi ile belli bir süredir ya da hiç ziyaret etmediğiniz bağlantıların renklerini belirleyebilirsiniz, varsayım olarak saf mavi renge ayarlıdır. VLINK parametresi ziyaret edilmiş bağlantıların rengidir, genellikle LINK'e göre daha koyu bir tona ayarlanır, varsayım olarak koyu mavi renge ayarlıdır. Bir bağlantıya tıkladığınızda bağlantının rengi kısa bir süre için değişir. Eğer farenin düğmesini yeterince uzun basılı tutarsanız bu rengin ne olduğunu görebilirsiniz. ALINK ile bu rengin ne olacağını belirleriz. Pek çok web tarayıcısında varsayım olarak kırmızı renge ayarlıdır. <BODY BGCOLOR="#0000A0" TEXT="#FFFFFF" LINK="#FFFF00" VLINK="#808000 ALINK="#FF0000 > html örnekler\örnek14b.html HTML - 15 <BODY BGCOLOR=x> ile web sayfanızın arkaplan rengini değiştirebilirsiniz. Hatta bir de varsayılan metin rengini değiştirmek istiyorsanız bu işaretin arkasına TEXT=x parametresini eklemeniz yeterli. Genel renk tanımı : "#RRGGBB" dir. Burada, RR, GG, ve BB, sırasıyla kırmızı (red), yeşil (green) ve mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren hexadecimal sayılardır. Bu sayılar yerine aşağıdaki renk tanımlama kelimeleri de kullanılabilir : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white veya yellow. 21 22 HTML - 16 HTML - 17 <FONT> takısını kullanarak fontu değiştirebiliriz. Örneğin fontu Arial yapmak için <FONT FACE="Arial"> yazmak yeterlidir. Bir fontun hem kendisini, hem büyüklüğünü hem de rengini tek bir işaretle değiştirebilirsiniz. <FONT FACE="Arial" SIZE=3 COLOR="#C00000"> html örnekler\örnek14c.html <table>...</table> takısı kullanılır. <tr> etiketi ile satırları <td> etiketi ile de sütunları oluşturuyoruz. 23 24 6
HTML - 18 HTML - 19 25 26 Tabloda başlık ve gövde Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir açıklama vermek mümkündür. Sütun başlıklarına gelince, her bir başlık <th> etiketi ile belirtilir ve bunlar <td> etiketinde olduğu gibi <tr>...</tr> arasına yazılır. Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına alınır. 27 HTML - 20 <table border="1"> <thead>tablo Başlığı (table head)</thead> <caption align="bottom"> alt-yazı (caption) <caption> <tr> <th>1.sütun</th> <th>2.sütun</th> <th>3.sütun</th> </tr> html örnekler\örnek15a.html <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> 28 7
Parametreler <table border="..." cellpading="..." cellspacing="..." align="..." width="..." height="..."> border parametresi çerçevenin kalınlığını belirtir. border=0 çerçevenin görünmemesini sağlar. Parametreler cellpadding parametresi hücre içi marj değerini belirtir. cellpadding=0 hücre ile içinde bulunan unsurun (metin/grafik) bitişik olmasını sağlar. 29 30 Parametreler cellspacing parametresi hücreler arası marjı belirler. Parametreler width ve height parametreleri resimler konusunda gördüğümüz gibi tabloda en ve boy uzunluğunu belirtir. Tablo için normal ölçülerinden küçük değerler verilirse bu değerler dikkate alınmaz, bir başka deyişle tabloyu büyütebiliriz fakat küçültemeyiz. 31 32 8
<td> etiketi için parametreler <td bgcolor="..." background="..." width="..." height="..." align="..." valign="..."> bgcolor parametresi hücreyi renklendirmede kullanılır. Parametreler background parametresi ile hücreye grafik-artalan yerleştirebiliriz. 33 34 Parametreler width ve height parametreleri ile hücrenin boyutlarını belirleyebiliriz. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştiremeyiz. En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır. Parametreler align parametresi hücre içinde yatay hizalama yapar. valign parametresi hücre içinde düşey hizalama yapar. 35 36 9
Hücreleri Birleştirme <td colspan=".." <td rowspan=".."> Aynı satırdaki hücreleri birleştirmek için colspan, Aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanıyoruz. Birleştirilen hücreye ait <td>..</td> etiketini siliyoruz. Hücreleri Birleştirme A ve B hücrelerini birleştirmek için A hücresine ait <td> etiketine colspan=2 parametresini ekliyoruz ve B hücresine ait <td>b</td> etiketini siliyoruz. E F ve G hücrelerini birleştirmek için E hücresine ait <td> etiketine colspan=3 parametresini ekliyoruz ve F ve G hücrelerine ait <td>f</td>, <td>g</td> etiketlerini siliyoruz. 37 38 Hücreleri Birleştirme E ve I hücrelerini birleştirmek için E hücresine ait <td> etiketine rowspan=2 parametresini ekliyoruz ve I hücresine ait <td>i</td> etiketini siliyoruz. C G ve K hücrelerini birleştirmek için C hücresine ait <td> etiketine rowspan=3 parametresini ekliyoruz ve G ve K hücrelerine ait <td>g</td>, <td>k</td> etiketlerini siliyoruz. Frame Çerçeveler Web sayfasını birden fazla html sayfa ile oluşturmaya imkan tanır. html örnekler\örnek17.html örnek17.html htm1.html htm1.html 39 40 10
<frameset>...</frameset> <frameset>...</frameset> Çerçeve oluşturmada kullandığımız etiket frameset, cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor, buraya rows yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır. <frameset rows="*,*"> cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz, cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır, cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor. 41 42 frame name="..." src="..." frame name="..." src="..." etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor (bu konuya aşağıda değineceğiz). src pencerede görüntülenecek html dosyasının yerini gösteriyor. resimler bahsinde belirttiğimiz yer (kaynak) gösterme kuralları burada da geçerli. Açılacak çerçeve sayısı kadar frame name="..." src="... etiketi kullanıyoruz. Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik, işte noframes kısmı bu browserlara hitap ediyor. <body> kısmını bu eski browserlar görüntüleyebiliyor. FRAMESET parametreleri frameborder="..." (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler. border="..." (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler 43 44 11
Daha karmaşık çerçeveler Daha karmaşık çerçeveler a 45 46 Daha karmaşık çerçeveler FRAME parametreleri marginwidth="..." marginheight="..." (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler. scrolling=".." (yes, no, auto) Kaydırma çubuklarının durumunu belirler. noresize Pencere boyutlarının sabit olmasını sağlar. 47 48 12
Resim Haritalarına Giriş & Dikdörtgensel Alanlar Resim haritaları, resimleri tıklanabilir bölgelere ayırabilmemize olanak sağlıyor. Klasik örnekler olarak Türkiye haritasının veya insan anatomisinin resimlerini düşünebilirsiniz. Ankara'ya veya karaciğere tıklamak sizi ilgili sayfalara götürecektir. Resim üzerinde bir harita tanımlarken dikdörtgensel, dairesel ve çokgensel alanlar tanımlayabiliriz. Resim Haritaları <MAP NAME="harita1"> <AREA SHAPE=RECT COORDS="7,11,89,37" HREF="servis.html" ALT="Servis"> </MAP> İlk yaptığımız <MAP> işareti ile bir harita tanımlamak. NAME="harita_ismi" parametresi ile haritamıza mutlaka bir isim vermelidir. Çünkü aynı sayfada birden çok harita kullanabiliriz. Tanımladığımız haritayı hangi resimde kullanacaksak o resmin <IMG SRC=""> işaretinin arkasına USEMAP="#harita_ismi" parametresini eklemeliyiz. <IMG SRC="menu_ust.gif" WIDTH=287 HEIGHT=49 USEMAP="#harita1" BORDER=0> 49 50 Resim Haritaları ve Alanları Harita tanımlarken <MAP> ve </MAP> işaretleri arasında kalan bölüme, kaç tıklanabilir alana ihtiyaç varsa o kadar <AREA> takısı eklememiz gerekiyor. SHAPE parametresi tanımlanan alanın tipini belirlemek için kullanılıyor ki şimdilik sadece dikdörtgensel (RECT, CIRCLE, POLY) alanlar tanımlıyoruz. COORDS parametresi de tanımladığımız alanın koordinatlarını belirlemek için kullanılıyor. RECT için sırasıyla sol üst köşenin x, y koordinatları ile yine sırasıyla sağ alt köşenin x, y koordinatları verilir COORDS ="7,11,89,37". html örnekler\örnek18.html CIRCLE için merkezinin koordinatları x:140, y:40 iken yarıçapı da 40 olan dairesel düğme için COORDS ="140,40,40. html örnekler\örnek18a.html Resim Haritaları ve Alanları POLY için ilgili çokgenin köşe noktalarının koordinatları sırasıyla yazılır. Bu liste çoğu zaman oldukça uzun olmaktadır. html örnekler\örnek18b.html 51 52 13
Kayan Çerçeveler Web sayfası içerisine kaydırılabilir çerçeveler yerleştirmek için <IFRAME NAME="content_frame" width="400" height="244" SRC="fframe.htm">Web sayfasının bu kısmında kayan çerçeve kullanılmaktadır! </IFRAME> kullanılır. Bu özelliği desteklemeyen tarayıcılar Web sayfasının bu kısmında kayan çerçeve kullanılmaktadır! yazısını görüntüleyeceklerdir. html örnekler\örnek19.html Marquee Yazı Kaydırma Web sayfasının sağ kısmından sol kısmına doğru kayan yazı göstermek için kullanılır. <MARQUEE>Bu yazı sağdan sola doğru yavaşça hareket etmektedir. </MARQUEE> <MARQUEE BEHAVIOR="ALTERNATE" SCROLLAMOUNT="50" SCROLLDELAY="8">Bu yazı sağdan sola gidip gelmektedir.</marquee> <MARQUEE BEHAVIOR="SLIDE">Bu yazı sağdan sola doğru kayacak ve sağ tarafa dayalı kalacaktır.</marquee> Bu özelliği desteklemeyen tarayıcılar sadece yazıyı görüntüleyecektir. BU ARADA <BLINK> ve <MARQUEE> kullanımı tavsiye edilmemektedir. html örnekler\örnek19b.html 53 54 Meta HTML dosyasındaki <head> bölümü içinde tanımlanan bu takı tarayıcıya ve arama motorlarına sayfamız hakkında bilgi verir. name= veri_tipi Bu bölümde author, description ve keywords özellikleri tanımlanır. equiv= veri_tipi Bu bölümde refresh, expires, content ve content-style-type özellikleri tanımlanır. <meta name= author content= Linux.org.tr web Grubu > <meta name= description content= Türkiye Linux Kullanıcıları Grubu Web Sayfası > <meta name= keywords content= linux, unix, bsd, openbsd, freebsd, programlama, serbestyazılım, sunucu, internet > Meta - 2 Sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır. <meta http-equiv= refresh content= 5; URL=http://www.linux.org.tr/ > GMT saat sistemine göre belirtilen saat ve tarihte geçerliliğini yitirecektir (silinecektir). <meta http-equiv= expires content= Wed, 25 Feb 2002 12:00:00 GMT > Belgemizde kullanılan CSS (Cascading Style Sheet) dosyamızın text dosyası olduğunu belirtir. <meta http-equiv= content-style-type content= text/css > 55 56 14
Türkçe Karakterler Özel Karakterler <meta http-equiv= Content-Type content= text/html; charset=8859-9 > <meta http-equiv= Content-Type content= text/html; charset=windows-1254 > Kod parçası yardımıyla Türkçe karakterlerin web sayfamızda doğru gözükmesi sağlanmaktadır. html örnekler\örnek16.html Tag < > & " &#nnn; Tanımı < (less than symbol) > (greater than symbol) & (ampersand) " (double quote) Registered Trademark [TM] Copyright [c] ASCII code (where nnn is the value) 57 58 Formlar & Metin Alanları Formlar yardımıyla kullanıcılardan etkileşimli veri girişi sağlayan alanlar oluşturulur. Pek çok web sitesinde; bazı programları çekmeden önce isminizi ve e-posta adresinizi girmeniz gerekir veya küçük anketler olur onları doldurmanız istenir, gezdiğiniz web sitesi hakkındaki görüşleriniz sorulur vs. Siz de web sitenize bu ve benzeri pek çok amaç için kullanılabilecek formlar yerleştirebilirsiniz. Dikkat!!! ACTION parametresi form içerisine girilen verilerin işleneceği uygulamanın URL sini içermektedir. <FORM ACTION="http://www.comu.com/cgi-bin/update" >... </FORM> Ne yazık ki <FORM> işaretinin ACTION parametresine e-posta adresinizi yazmanız her zaman için form içeriğinin size ulaşacağını garanti etmez. Size e-posta gelebilmesi için sayfanızdaki formu dolduran kişilerin web tarayıcılarındaki e-posta sunucu ayarları doğru yapılmış olmak zorundadır ki bazen bu ayarlar yapılmamış veya yanlış olabiliyor. Burada kesin çözüm CGI programları kullanmak ki bunun için web hosting hizmeti aldığınız kuruluşa danışmanız gerekiyor. 59 60 15
Verileri İletme Metotları <FORM> takısı içerisinde kullanılar method özelliği verilerin işlenmek için hangi metot ile gönderileceğini belirler. Bu işlem için iki değişik yol vardır: POST ve GET metotları. Metin Alanları Form hazırlarken kullanılan alanlar Metin satırı (<INPUT TYPE="TEXT >) Metin alanları (<TEXTAREA >) Radyo düğmeleri (<INPUT TYPE="RADIO >), İşaret kutucukları (<INPUT TYPE="CHECKBOX" >) Kombo kutuları (<SELECT NAME="liste >) Şifre satırı (<INPUT TYPE="PASSWORD >) Dosya yükleme (< INPUT TYPE ="file >) Çerçeve kutusu (<FIELDSET STYLE= PADDING: 2">) Gelişmiş düğme (<BUTTON NAME="B1"> ) Resim (<input src="getaway.jpg" type="image"> Etiket (<label>demene</label>) Saklanmış alan (<INPUT TYPE= HIDDEN >) 61 62 Metin Alanı <TEXTAREA> işareti, boyutlarını COLS (en) ve ROWS (boy) parametreleriyle belirleyebileceğimiz, içine yazı yazılabilecek bir alan tanımlamamızı sağlıyor. Bu alana yazılan yazı, alanın fiziksel sınırlarını aşınca otomatik olarak kaydırma çubukları çıkacaktır. Böylece alanın fiziksel boyutlarıyla sınırlanılmadan istenildiği kadar yazı yazılabilir. WRAP parametresi bir satırın sonuna gelindiğinde satırın otomatik olarak bölünüp bölünmeyeceğini belirler. Yazılanların Enter'a basılmadığı sürece sağa doğru uzayıp gitmesini istemiyorsanız her zaman için "soft" değerini kullanın. html örnekler\örnek20.html Metin ve Şifre Satırı <INPUT TYPE=TEXT> ile metin satırları tanımlıyoruz. NAME parametresiyle her birine bir isim veriyoruz. SIZE parametresi ise satırın görünür boyutunun kaç karakter olacağını belirliyor. Her ne kadar görünür boy çoğu zaman çok uzun olamasa da MAXLENGTH parametresiyle maksimum kaç karakter girilebileceğini belirleyebilirsiniz. Böylece satırın görünür boyunu aşan girdiler kaydırılarak gösterilecektir. Eğer metin satırına yazılan karakterlerin görünmesini istemiyorsanız TYPE parametresinin değerini PASSWORD yapın. Böylece her yazılan karakter yerine bir yıldız görüntülenecektir. Adından belli olduğu üzere bu özel metin satırı genellikle şifre girişleri için kullanılır. html örnekler\örnek21.html 63 64 16
Radyo Düğmeleri Radyo düğmeleri, sunulan bir dizi seçenekten sadece bir tanesini seçmenize izin veren form öğeleridir. Örneğin Bu dersi anlatan hocanızdan memnun musunuz?" sorusuna hem evet hem de hayır yanıtını veremezseniz. Radyo düğmeleri web sitelerinde sık sık görmeye alıştığımız oylamalarda yoğun olarak kullanılır; seçeneklerden bir tanesini seçer ve Gönder düğmesine basarsınız. Radyo düğmesini seçili yapmak için <INPUT TYPE=RADIO NAME="Web_Sayfasi" VALUE="Zaten_Var" CHECKED> Örnek olarak biz de basit bir oylama/anket yapalım. html örnekler\örnek22.html İşaret Kutucukları İşaret kutucukları, radyo düğmelerinin aksine birden çok seçenek seçmenize izin verirler. Örneğin "Dışarıda yemek yerken tercih ettiğiniz yiyecekler:" sorusuna birden çok yanıt verebilirsiniz. Yanıtı birden çok olabilen sorular için işaret kutucukları kullanılmalıdır. İşaret kutucuklarını oluşturmak için <INPUT TYPE=CHECKBOX> ile başlayan satırları kullanıyoruz. Dikkat ederseniz bu satırlar herhangi bir VALUE değeri içermiyorlar; bunun yerine her bir işaret kutucuğunun kendine ait bir ismi var. CHECKED parametresi istediğiniz seçeneğin otomatik olarak seçili gelmesini sağlar. Radyo düğmelerinin aksine birden çok seçeneği otomatik olarak seçebilirsiniz. html örnekler\örnek23.html 65 66 Kombo Kutuları Kombo kutuları, sayfayı uzanıp giden seçeneklerle doldurmak istemediğiniz zamanlarda çok yararlı olur. Bir kombo kutusu, yanındaki ok işaretine tıklandığında açılan ve içerdiği seçeneklerden birini seçmenize izin veren özel bir form öğesidir. Kombo kutusunu tanımlamak için <SELECT> ve <OPTION> işaretlerini kullanıyoruz. <SELECT> işareti kombo kutusunun tümüne karşılık geliyor ve NAME parametresiyle isimlendirilmesi gerekiyor. <OPTION> işareti ile ise kombo kutumuzda yer alacak her bir seçeneği belirliyoruz. Buradaki --Modem-- yazılı satırın bir VALUE parametresine sahip olmadığına dikkat edin. html örnekler\örnek24.html Örnek Form Yandaki form doldurulup ilgili Submit Query düğmesine basıldığında bu veriler işlenecekleri uygulama içerisine gönderilirler. Bu işlem sonucunda http protokolü bir kısmı arka sayfada verilen veri transferini gerçekleştirir. örnekform1.html 67 68 17
Tarayıcının gönderdiği istek Alanlar - Özet POST /cgi-bin/banking.pl HTTP/1.0 Content-Length: 154 Accept: image/gif... (more headers ) acct=11732432&pin=0545&transaction=account+balanc es&verify_by_mail=yes&info=cds,autoloans&comments =What+use+is+this+without+withdrawals+and+deposits% 21%21 Alan Tipi text Hidden image password textarea select option submit reset Tanımlama Normal tek satırlık giriş Kullanıcı girişi için kullanılmaz, sunucudan alındıktan sonra formu izlemek için kullanılır. Üzerine resim konulan düğme Yazılanı göstermeyen kullanıcı girişi için Çok satırlı giriş Açılabilir veya kaydırılabilir seçim listesi Tamamlanan formu sunucuya gönderir Form içeriğini temizler 69 html örnekler\örnek14.html 70 CGI Scripts HTML text, grafik ve diğer elemanları birleştirme ve görüntülenmesini sağlamasına rağmen yordamsal programlama için herhangi bir destek sağlamaz. HTML formları gibi ortamlar tarafından sağlanan verileri işlemek için CGI programları ve Scriptlerin kullanılmasına ihtiyaç vardır. CGI Common Gateway Interface- sunucuda bulunan programların web sayfası ile etkileşimde bulunmasına imkan tanımak için geliştirilmiş bir standarttır. Çoğu CGI programı UNIX shell script veya Perl gibi dillerde yazılır. Bunlar aynı zamanda C/C++ gibi derlenen dillerde de yazılabilir. CGI Scripts CGI scriptlerini çalıştırmak için üç farklı yol vardır. <A HREF="http:/www.host.domain/cgi-bin/name.pl"> <IMG SRC="http:/www.host.domain/cgi-bin/name.gif"> <FORM ACTION="http://www.host.domain/cgibin/handle_form.pl" METHOD="POST"> Anchor üzerine tıklandığında CGI scripti çalıştırılır. Web sayfası yüklendiğinde image cgi scripti çalıştırır. Submit düğmesi üzerine tıklandığında form olayı çalıştırılır. 71 72 18