INTERNET & INTRANETS DERSİ BAHAR YILI - 3. HAFTA HTML KOMUTLARI. KONU 12 Sıralı Liste

Transkript

1 INTERNET & INTRANETS DERSİ BAHAR YILI - 3. HAFTA HTML KOMUTLARI KONU 12 Sıralı Liste Sıralı Liste nasıl yapılır? Bazen sayfamız da listeler kullanmak zorunda kalırız. Mesela sevdiğimiz müzik türlerini düzene sokmamız gerekebilir. Şimdi sıralı listelere birkaç örnek verelim: Numaralı (ya da) başka tür listeler yapalım: Bilgilerimizi düzene sokmamıza yarayan sıralı listeler <OL> </OL> etiketlerinin arasına < LI> ekleyerek yapılır. En sevdiğim hayvanlar: <ol> <li>kediler <li>köpekler <li>balıklar <li>kuşlar </ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Hayvanlar: 1. Kediler 2. Köpekler 3. Balıklar 4. Kuşlar Sıralı listemizin sıra numarasını Roma Rakamları ile göstermek istersek <OL> etiketimizin yanına "type" değerinin yanına Roma Rakamlarından birini yazarız. (Mesela I ): En sevdiğim hayvanlar: <ol type="i"> <li>kediler <li>köpekler <li>balıklar <li>kuşlar </ol> 1

2 Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Hayvanlar: I. Kediler II. Köpekler III. Balıklar IV. Kuşlar Listemizin Sıralamasında Harfler kullanalım (type) Listelerimizin sıralanmasında rakam değil de harf kullanmak istiyorsak <OL> etiketinin yanındaki "type" değerinin karşısına "a" yazmamız yeterli.. Belli bir harften başlamanız gerekiyorsa start etiketini kullanmanız gerekiyor... Hangi harften başlamasını istiyorsanız onun sıra numarasını yazmalısınız... En sevdiğim hayvanlar: <ol type="a"> <li>kediler <li>köpekler <li>balıklar <li>kuşlar </ol> En sevdiğim Hayvanlar: <ol type="a" start="3"> <li>kediler <li>köpekler <li>balıklar <li>kuşlar </ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Hayvanlar: a. Kediler b. Köpekler c. Balıklar d. Kuşlar En sevdiğim Hayvanlar: c. Kediler d. Köpekler e. Balıklar f. Kuşlar Bugün sayılı listeleri öğrendik. Bir de sayısız listeler ve Tanımlama Listeleri var... Bunları da bir sonraki dersimizde öğreneceğiz. Ne kadar çok deneme yaparsak o kadar çok şey öğreniriz. Bunu unutmuyoruz değil mi? Denemekten bıkmayın.. Bir de gezdiğiniz web sitelerinin kaynak kodlarını incelerseniz nasıl yapıldığını anlayabilirsiniz. 2

3 KONU 13 Sırasız Liste Sırasız Liste nasıl yapılır? Şimdi de sırasız listeleri öğrenelim. Yani bir sıraya dizilmemiş, numaralandırılmamış listeler böyledir. Listemizin başında minicik noktalar olur:) Sırasız liste yapıyoruz: Sırasız liste <UL> etiketi ile başlar </UL> etiketi ile biter. Aynı sıralı listelerdeki gibi <li> etiketleri arasına yazılır: En sevdiğim müzik türleri: <ul> <li>pop <li>jazz <li>modern </ul> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Müzik türleri: POP Jazz Modern İçi dolu, İçi Boş ve Kare noktacıklar: <UL> etiketin yandaki "type" değerinin karşısına "DISC" yazarsak içi dolu dairemiz, "CIRCLE" yazarsak, içi boş dairemiz ve "SQUARE" yazarsak köşeli bir noktamız olur. Şimdi bir örnek verelim: En sevdiğim müzik türleri: <ol type="disc"> <li>pop </ol> <ol type="circle"> <li>jazz </ol> <ol type="square"> <li>modern </ol> Bu kodların oluşturduğu sıralı liste aşağıdaki gibidir: En sevdiğim Müzik türleri: POP o Jazz Modern 3

4 Hem sayılı hem de sıralı listeler: Bazen de listemizin hem sayı ile listelemesini aynı zamanda da normal bir şekilde listelenmesini isteriz.. Bunun için: <ol> <li>en sevdiğim yaz meyveleri: <u> <li>kayısı <li>şeftali <li>erik <li>üzüm </ul> <br> <li>en sevdiğim kış meyveleri: <ul> <li>portakal <li>mandalina <li>nar <li>ayva </ul> </ol> Bu kodların oluşturduğu liste aşağıdaki gibidir: 1. En sevdiğim yaz meyveleri o Kayısı o Şeftali o Erik o Üzüm 2. En sevdiğim Kış meyveleri o Portakal o Mandalina o Nar o Ayva Tanımlama Listeleri nasıl yapılır? Tanımlama listeleri <dl> etikeli ile başlar </dl> etiketi ile biter. Listenin maddeleri <dd>, <dt> etiketleri arasına yazılır. <dl> <dt><font size="3" color="red"> En sevdiğim hayvanlar</font> <dd>kediler ve kaplumbağalardır. 2 kedim var. Biri beyaz biri sarman. İsimleri ipekpisi ve sütlü... Kaplumbağalarım suda yaşıyan cinsten ve onlar da iki tane... <dt>en Sevdiğim çiçekler <dd>papatyalara bayılırım. Her türlü kır çiçeğini severim. Tabii beyaz gülleri de... <dt>en sevdiğim yemekler <dd>köfte ve pilav başta gelir. Kurufasulye, karnıyarık ve biber dolmasını çok severek yerim </dl> 4

5 Bu kodların oluşturduğu liste aşağıdaki gibidir: En sevdiğim hayvanlar Kediler ve kaplumbağalardır. 2 kedim var. Biri beyaz biri sarman. İsimleri ipekpisi ve sütlü... Kaplumbağalarım suda yaşıyan cinsten ve onlar da iki tane... En Sevdiğim çiçekler Papatyalara bayılırım. Her türlü kır çiçeğini severim. Tabii beyaz gülleri de... En sevdiğim yemekler Köfte ve pilav başta gelir. Kurufasulye, karnıyarık ve biber dolmasını çok severek yerim 5

6 KONU 14 Çerçeveler (Frame) Çerçeve (frame) Bazı sayfalarda görmüş olmalısınız. Yanda yeni bir pencere içinde linkler diğer yanda ise yazılar.. Yani sayfa sanki 2 tane pencereden oluşuyor ama tek pencere içerisinde görüntüleniyor... Web tasarımcıları çerçeveyi pek sevmez. Yani hoş bir görüntü kazandırmaz sayfaya. Web tasarımcısı kadar ziyaretçi de bundan pek hoşlanmaz.. Ama bazı zamanlar da bir kolaylıktır Çerçeveler.. Ve ayrıca Çerçeve teknolojisi HTML' e sonradan dahil edilmiş.. Buna göre eski browserlar bunu anlamayacak! Bir kuralı daha hatırlayalım: Yaptığımız sayfalar bizim bilgisayarımızdaki gibi görünmez ziyaretçimize hiçbir zaman! Bu derste Çerçeve yani Frame etiketini göreceğiz.. Çerçeve içinde Çerçeve.. Her yer çerçeve.. Çerçeveleri oluşturan etiket <frameset> etiketidir. <frame> etiketi ile de her bir frame'in (çerçevenin) özelliklerini ve frame'de gösterilecek sayfayı belirtiyoruz... Şimdi örneklerimizi yapalım ve inceleyelim: Örnekler: cerceve1.htm dosyası: <html> <head> <title>sol çerçeve</title> </head> <body bgcolor="#ff0000"> <font size=7>sol Çerçeve</font> </body> </html> cerceve2.htm dosyası: <html> <head> <title>sağ Çerçeve</title> </head> <body bgcolor="#000099"> <font size=7>sağ Çerçeve</font> </body> </html> Şimdi de bu iki çerçeveyi içine koyacağımız Ana Çerçeveyi yapalım ve frame.htm adı ile kaydedelim: <html> <head> <title>çerçeveli bir sayfa</title> </head> <frameset cols="30%, 70%"> 6

7 <frame name="solcerceve" src="cerceve1.htm"> <frame name="sagcerceve" src="cerceve2.htm"> <noframes>browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html> Şimdi de yazdığımız kodlamayı inceleyelim: Yukarıdaki butona basarak örneği inceleyebilirsiniz. Örneği incelediyseniz şimdi de yapımında kullandığımız kodlamayı bir inceleyelim: Öncelikle normal olarak 2 tane HTML sayfası yazdık. Ve bunları cerceve1.htm ve cerceve2.htm adı ile kaydettik. Daha sonra bu yaptığımız sayfaları içine alacak olan frame.htm ' yi yazdık.. Burada diğer sayfalardan farklı olarak <frameset> etiketini kullandık.. <frameset cols="30%, 70%"> bu etiket ile sayfaların bir tanesini sayfanın yüzde 30'unu kaplayacak şekilde diğerini ise sayfanın yüzde 70'ini kaplayacak şekilde ayarladık.. Daha sonra da sayfamızın içine çerçeveleri yerleştirdik <frame name="solcerceve" src="cerceve1.htm"> ile sol çerçeveyi, <frame name="sagcerceve" src="cerceve2.htm"> ile de sağ çerçeveyi sayfamıza yerleştirdik. Burada dikkatinizi çekti mi bilmem? <noframes> etiketi ile tarayısıcı eski olan ziyaretçimizi uyarıyoruz ve çerçeve teknolojisini destekleyen bir browser yüklemesini söylüyoruz. (biz de çok oluyoruz:) ) Bir sayfaya 4 tane çerçeve sığar mı? Bu bir arabaya 4 filin sığması kadar olağan bir durum! :) Şimdi biraz önce yazdığımız çerçevelere 2 çerçeve daha ilave edelim. Ve cerceve3.htm ile cerceve4.htm isimleri ile kaydedelim. Oldu mu? O zaman bunları bir sayfada birleştirelim: <html> <head> <title>çerçeveli Sayfa</title> </head> <frameset cols="50%, 50%" rows="50%, 50%"> <frame name="bir" src="cerceve1.htm"> <frame name="iki" src="cerceve2.htm"> <frame name="uc" src="cerceve3.htm"> <frame name="dort" src="cerceve4.htm"> <noframes>browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html> Bu sayfayı frame2.htm adı ile kaydedin.. Şimdii, bu sayfanın diğer sayfadan bir farkı var. Haydi şimdi bunu bulun. Demiyeceğim.. Bu sayfadaki fark <frameset rows=""> etiketidir. Bu etiket çerçevelerimizi yatay bir şekilde sayfaya yerleştirir.. (cols' da dikey öyle değil mi?) 7

8 Şimdi de bir başka örnek: <html> <head> <title>çerçeveli Sayfa</title> </head> <frameset rows="50%, 50%" frame border="yes" border="5" bordercolor="#000000"> <frame name="bir" src="cerceve1.htm" noresize > <frameset cols="*,*"> <frame name="iki" src="cerceve2.htm" scrolling="yes"> <frame name="uc" src="cerceve3.htm"> <noframes>browser'ınız çerçeve teknolojisini desteklemiyor. Üzgünüm. Lütfen yenileyin!</noframes> </frameset> </html> Şimdi de inceleyelim: Örneğimizi incelediyseniz eğer bu sayfanın diğer yaptığımız çerçeveli sayfalardan farklı var değil mi? Eveet, bayağı bir farklı :) Sayfamızın kodlamasına baktığımızda: frameborder="yes" border="5" bordercolor="#000000"> ilk dikkatimizi çeken etiket frameset etiketimize ekledğimiz bu etiket çerçevelerimizin kenarlarının ölçülerini belirlemeye yarar. "frameborder" etikenin iki şekli vardır. "Yes" çerçevenin kenarlıklı olmasını, "no" ise kenarlıksız olmasını sağlar. <frame name="bir" src="cerceve1.htm" noresize > etiketinin sonunda bulunan "noresize" etiketi çerçevelerin ölçülerinin değişmesini önlüyor. Yani alttaki çerçeve bakarsanız bunun ölçülerini mouse işaretçiniz ile değiştirebileceğinizi görüyorsunuz. Son olarak Çerçeve 2 de uyguladığım bir yöntem olan; scrolling="yes"> etiketi ile kaydırma çubuklarının olmasını istiyorum. Bunu 3 şekilde ayarlayabiliyoruz: "yes" kaydırma çubuğu olsun, "no" kayfırma çubuğu olmasın ve "auto" gerektiği zaman kaydırma çubuğu aktif olsun. Ayrıca; <frame name="uc" src="cerceve3.htm" marginwidth="0" marginheight="0"> marginwidth ve marginheight etiketleri ile çerçevenin içini de kontrol edebiliyoruz. marginwidth="50" yaparsak çerçevenin içine yazdığımız yazı kenarlardan bir hayli uzaklaşacaktır. Bu derste de çerçeveleri inceledik. Bir sonraki ders de çerçevelerin inceliklerini öğreneceğiz.. Çerçevelerde yapılan en sık hatalardan söz edeceğiz. Anlayamadığınız ya da öğrenmek istediğiniz konuları bana sorabilirsiniz.. Her zaman cevap alacağınızdan emin olun.. 8

9 KONU 15 Form 1 Form Yapalım 1 Sitemiz de ziyaretçi defteri olsun istiyoruz.. Ya da ziyaretçimizin doldurması için form alanı oluşturmamız lazım.. Şimdi de Form alanı oluşturmak için gereli araç ve gereçleri öğrenelim:) Form alanı nelerden oluşur? Okul da ya da günlük yaşantınızda eminim ki form doldurdunuz.. Hayatınıza internet geldi ve formlarla daha çok karşılaşmaya başladınız.. Gezdiğiniz sitelerde gördüğünüz ziyaretçi defterlerinin artık kendi sitenizde olmasını istiyorsunuz.. Ancakk Ziyaretçi Defterimizin sayfasını oluşturabiliriz ama Ziyaretçi Defterimizin işleyebilmesi için CGI denen programlama dilini bilmemiz gerekir.. Biz şimdilik sadece form alanı oluşturmak ile yetineceğiz.. İleri de belki Ziyaretçi Defterinin işleyişinden de söz edebiliriz :-) Bu kısa ziyaretçi defteri kursundan sonra gelelim form alanı oluşturmaya: Form'u yapı taşları Sayfamızda bulunan form, isteğe bağlı olarak değişik text alanlarından oluşabilir.. Ya da aşağı doğru açılan bir menü ile ziyaretçinin isteğini seçmesine izin verebiliriz.. Şimdi tek tek forum'u oluşturan temel yapı taşlarından söz edelim.. Bir de bunları örnekler ile gösterelim.. Sıvayın kolları Form Alanı yapıyoruz! FORM ALANI Text Area (metin alanı): Form alanının dışında da kullanılabilen text area yani metin alanı, isminden de anlaşıldığı gibi içine yazı yazabileceğimiz bir alandır.. Şimdi bir örnek: <form><textarea rows="5" cols="20">yazınızı buraya yazın!</textarea><form> Yazınızı buraya yazın! Yukarıda örneğini verdiğimiz metin alanı Form alanının bir parçasıdır.. Form alanı <form> ile başlar </form> ile biter.. Tekrar yukarıdaki örneğimize bakar isek <textarea> ile başlayan </textarea> ile biten metin alanı oluşturma etiketlerini görüyoruz.. textarea 9

10 etiketinin yanına yazdığımız "rows" alanımızın yüksekliğini, "cols" ise genişliğini belirlememize yarar.. Böylece metin alanımızın boyutlarını da ayarlıyabiliriz.. Renkli Metin alanı yapalım: <form><textarea rows="5" cols="20" style="background:#ff33ff" style="fontfamily:verdana" style="color:#ffccff" "style="border style:solid;" >Buraya yazınızı yazın!</textarea></form> Yukarıda örneğimiz ve örneğimizin altında da kaynak kodunu görüyoruz.. Bu seferki kaynak kodumuz diğerinden biraz daha uzun. Bu kodlara biraz daha yakından bakalım: Tekrar <form> etiketi ile başlayan </form> etiketi ile biten, alanımızın form' a ait olduğunu belirten kodlarımızı yazdıktan sonra, alanımızın metin alanı olduğunu belirten <textarea; etiketimizi yazdık. Yükseklik (rows) ve genişliği (cols) belirttik. Daha sonra, metin alanımızın zemin rengini belirten style="background:#ff33ff" etiketini tekrar <textarea> etiketimizin içine yazdık.. Aynı yere bu sefer yazı tipimizi ve rengini belirlemeye yarayan style="font-family:verdana" style="color:#ffccff" "style="border style:solid;" etiketimizi yazdık.. Sonuç: Şeker gibi bir metin alanımız oldu:) Dikkat! Örneklerimiz de sözünü ettiğimiz "style" etiketlerini daha sonra ayrıntılı şekilde göreceğiz.. Şimdi kafanızı karıştırmasını istemem... Bir de umarım renk kodlamalarını hatırladınız! Eğer hatırlamadı iseniz diğer derslerimize bir göz gezdirin! Bu açıklamadan sonra devam edelim:) Metin alanımıza arka plan resmi ekleyelim: 10

11 <form><textarea rows="5" cols="26" style="background-image: url('kablumbik.gif')" style="font-family:comic sans ms" style="color:#9900ff" style="border style:solid" >Yazınızı buraya yazın!</textarea></form> Bu seferki metin alanımızın zeminin de resimler var.. Bunu daha önceki derslerimizde de gördüğümüz "background" etiketi ile yaptık.. Normal "form" ve "textarea" etiketilerimizin yanına bu sefer: style="background-image: url('kablumbik.gif')" Etiketini ekledik. Böylece metin alanımızın arka planı resim ile doldu.. Ben elimde olan kaplumbikleri kullandım.. Siz de kendi zevkinize göre istediğiniz resmi kullanabilirsiniz.. Şimdilik form unsurlarından en dikkat çekeni olan Metin Alanı ' nın nasıl yapıldığını öğrendik.. Form alanımızı oluşturan bütün unsurları oluşturduktan sonra hepsini bir araya getirip bir form oluşturacağız.. Ama biraz sabredin.. Ve unutmayın hiçkimse mükemmel değildir... 11

12 KONU 15 Form 2 Form Yapalım 2 Geçen haftalarda başladığımız Form'un temel yapı taşlarını öğrenmeye bu hafta da devam ediyoruz.. INPUT = minik metin alanı :) <form><input type="text" size="10" maxlenght="21"></form> Bir önceki dersimizde gördüğümüz form oluşturmakta işimize yarayacak olan Metin Alanının küçüğünü yaptık.. Bu minik metin alanını Form' un dışında da kullanabiliriz.. Mesela ana sayfamızda.. Şimdi bu minik metin alanımızı oluşturan kodlara bir göz atalım: İlk başta alanımızın Form' a ait olduğunu belirten <form>...</form> etiketlerimizi yazıyoruz.. Daha sonra (<input ) ile metin alanımızın başladığını belirtiyor, -size="10"- ile kutumuzun genişliğini, -maxlenght="20"- ile de ziyaretçimizin yazabileceği metin uzunluğunu ayarlayabiliriz.. Eğer -maxlenght- değerini vermezsek normal karakter olarak 21 karakter belirlenir.. Eğer minik metin alanımızın içinde açıklayıcı bir yazı olmasını istiyorsak: Buraya <form><input type="text" size="20" value="buraya Adınızı yazın" maxlength="10"></form> Yukarıdaki örnek de gördüğümüz gibi, (kalın harfler ile yazdığımız yere dikkatle bakın.) normal form etiketlerini ve minik metin alanımızı oluşturan input etiketlerini yazdık.. Metin alanımızın ölçülerini belirleyen ölçüleri verdik.. Artı olarak metin alanımızın içinde açıklayıcı bir yazı olmasını sağlayan value="buraya Adınızı yazın" etiketini ekledik.. Sonuç= Metin alanımızın içinde açıklayıcı yazı oldu. :) Bir açıklama yapmam gerekiyor :) Neden bu metin alanımıza minik metin alanı dedik? Çünkü bu metin alanımızın sadece enini ayarlıyabiliyoruz... Boyunu ayarlıyabilmek için büyük metin alanımızı yapmamız lazım.. Sanırım anladık :) Bu açıklamadan sonra devam edelim:) 12

13 Parola yazmak için metin alanı.. <form> <input type="password" size="10" maxlenght="21"> </form> Yukarıdaki metin alanının içine birşeyler yazmaya çalışın bakalım:) Yazdıklarınız yıldız şeklini aldı değil mi? Bu yüzden metin alanımızın ismi "Parola yazmak için metin alanı".. Buradaki yaptığımız tek değişiklik input (yani minik metin alanımızı oluşturan etiket) etiketinin yanındaki type (tip) etiketinin değerini password yapmak.. password daha çok kullanırken lazım olur.. Ya da üye olduğumuz bir sayfaya girebilmek için.. Yavaş yavaş form alanımız oluşuyor.. Az kaldı biraz daha beklersek çok güzel bir form alanımız olacak.. Bol bol denemeler yapıyor, araştırmalar yapıyoruz değil mi? Ee ne demişler çok yaşayan değil çok gezen bilirmiş:) Biz de çok araştırma yaparak bu gezi olanağımızı kullanmış oluruz:) 13

14 KONU 16 Form 3 Form Yapalım 3 Form alanının temel yapı taşlarını oluşturan malzemeleri öğrenmeye son sürat devam ediyoruz.. Sonunda çok güzel bir form alanımız olacak.. Hadi kolları sıvayın bakalım:) İşaret koyulan kutucuklar (Checkbox) Bunu severim bunu sevmem <form><input type="checkbox" name="isaret"> </form> Yukarıdaki örneklerimize bir bakın.. Yazıların yanındaki kutucuklara işaret koyun.. Bu yaptığımız kutuların ismi işaret Kutucukları yani "Checkbox".. Bunları da diğerleri gibi Form alanında kullanırız.. Gelin bu işeret kutucuklarını yakından inceleyelim. Artık alıştığımız ve form alanı oluştururken unutmamamız gereken etiket <form> etiketini hiç unutmuyoruz değil mi? Daha sonra da (bakınız diğer 2 dersimiz:) diğer 2 dersimizde de gördüğümüz "input" etiketini görüyoruz.. Burada değiştirdiğimiz tek kısım "input" etiketinin type' ini (tipini) "checkbox" yani işaret kutucuğu diye adlandırırız.. Radyo Düğmesi Bunu severim Bunu sevmem <form><input type="radio" name="isaret"> </form> Radyo düğmesi diyince aklınıza bildiğimiz Radyolar geldi değil mi:) Haklısınız ilk başta benim de aklıma öyle gelmişti. Diğer forum öğelerinden pek bir farkı yok.. Sadece Type (tip) ' ini "Radio" Yapmamız yeterli.. Form alanına bir adım daha yaklaştık.. Biraz sabır ve çalışma ile çok güzel bir form alanımız olacak. Bir dahaki dersimizde yine form alanımıza tanımaya devam edeceğiz.. 14

15 KONU 17 Form 4 Form Yapalım 4 Form alanımız yavaş yavaş oluşmaya başladı mı? Bir form alanım olsun diye sabırsızlanıyormusunuz? O zaman siz form alanı yapmaya hazırsınız. Bizi form alanına bir adım daha yaklaştıracak olan kodları öğrenmeye devam edelim.. Aşağı Doğru Açılan Seçme Kutucuğu (Select) En Sevdiğin Mevsim <select name="mevsimler" size="1"><option selected>en Sevdiğim Mevsim <option value="sonbahar">sonbahar <option value="kış">kış <option value="ilkbahar">ilkbahar <option value="yaz">yaz</select> Şimdi de yukarıdaki kutucuktan bir seçim yapmaya çalışın. En sevdiğiniz mevsimi seçin. Örnek de gördüğümüz kutucuğun adı: Aşağı Doğru Açılan Seçme Kutucuğu. Şimdi de kodlamamızı inceliyelim: Form alanımızın içerisin de "select" yani "aşağı doğru açılan seçme kutucuğu" nun ismini belirliyoruz = "name="mevsimler". Ben mevsimler ismini verdim. siz istediğiniz ismi verebilirsiniz. Bu daha sonra formu bulmanızı kolaylaştırır ve formunuzun içeriğine uygun olsa iyi olur. Daha sonra "option selected" ile açılan kutumuzun başlık yazısını yazıyoruz.. Yani kutumuzun konusunu belirliyoruz. Daha sonra aşağı doğru açılan menümüzün seçeneklerini belirliyoruz: "option value=sonbahar". (Tekrar söylüyorum burada ben örnek menümüzün içeriğine göre seçenekler yaptım!) Son olarak </select> diyor ve menümüzü bitiriyoruz... Bu Menümüz de sadece </select> etiketini bitiririz. Diğer etiketleri bitirmeyiz. Mesela "option value="isim" etiketi bitirilmez. Bu önemli noktayı da anladık değil mi? :) Gönder ve Sil Düğmeleri Gönder sil <input type="submit" name="gonder" value="gönder"> <input type="reset" name="sil" value="sil"> Bakın ne kadar tatlı iki butonumuz oldu değil mi? Şimdi onlara tıklayın. (Biliyorum ben demesen de tıklayacaktınız:) Ama hiçbirşey olmadı değil mi? Gelin bu butonlarımıza biraz daha yakından bakalım: 15

16 <input> etiketini hatırladınız değil mi? Bu sefer <input> etiketimizin Gönder botunundaki type (yani tip)' i "submit", Sil butonundaki değeri type' i ise "reset". Form' umuzun nasıl gönderileceğini daha sonra öğreneceğiz.. Yani formun bize nasıl bilgi ulaştırdığını.. Şimdi geçelim.. Gönder ve Sil düğmelerini biz yapalım! <button type="submit" name="gönder" value="gönder"><img src="gonder.jpg"></button> <button type="reset" name="sil" value="sil"><img src="sil.jpg"></button> Düğmelerimizi biz yapalım dememin sebebi, butonlarımızı bu sefer kodlar ile değil de bir grafik programı ile yapmamızdır.. Butonumuzun kodlamasını daha yakından inceleyelim. Öncelikle butonumuzun type (tip) ' ini belirledik.. Gönder düğmesinin ki "gönder" sil düğmemizin tipi ise "sil". Butonumuzun bitirmeden önce ise grafik öğemizi belirliyoruz. Ben elimde olan gönder ve sil grafiklerini kullandım. Siz de elinizde olan ama gönder ve sil düğmesi olduğu belli olan bir düğme kullanın. Vee mutlu son :) Form alamızın inşaatın da gerekli olan bütün malzemeleri öğrendik.. Sıra geldi başlı başına bir form yapmaya.. Sonra ki dersimizde öğrendiklerimizi birleştirerek çok güzel olacağına inandığım bir form yapacağız. Bekleyin :) 16

17 KONU 18 Form 5 Form Yapalım 5 İştee beklediğimiz an geldi. Bugüne kadar öğrendiklerimiz ile bir form alanı yapacağız. Umuyorum ki çok güzel olacak. Haydi kolları sıvayalım bakalım şöyle bir. Sıra ellerimiz de. Başlıyoruz kodlamayı yapmaya.. İşte Form Örneğimiz: <html> <head> <title>bize ulaşın</title> <meta http-equiv="content-type" content="text/html; charset=windows-1254"> </head> <body bgcolor="#ffffff"> <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="35%"><img src="img-/cicek.jpg" width="230" height="252"> <td width="65%"> <div align="center"> <h1><font face="arial, Helvetica, sans-serif">bize Ulaşın</font></h1> </div> </tr> </table> <p> </p> <table width="75%" border="0" cellspacing="0" cellpadding="0" height="391"> <tr> <td width="37%" height="42"> <div align="right"> <p><font face="verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">adınız Soyadınız: <br> <br> </font> <font face="verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"> </font></p> </div> <td width="63%" height="42"> <form name="form2" > <input type="text" name="textfield2"> </form> </tr> <tr> <td width="37%" height="2"> <div align="right"> <p><font color="#000000" size="2" face="verdana, Arial, Helvetica, sansserif"> adresiniz: <br> </font> <font color="#000000" size="2" face="verdana, Arial, Helvetica, sans-serif"> </font></p> </div> <td width="63%" height="2"> <form name="form1" > <input type="text" name="textfield3"> </form> </tr> <tr> <td width="37%" height="2"> <div align="right"> <p> <font color="#000000" size="2" face="verdana, Arial, Helvetica, sans-serif">web Siteniz: <br> </font> <font color="#000000" size="2" face="verdana, Arial, Helvetica, sans-serif"><br> </font></p> </div> <td width="63%" height="2"> <form name="form1" > <input type="text" name="textfield32" value=" </form> 17

18 </tr> <tr> <td width="37%" height="2"> <div align="right"> <font color="#000000" size="2" face="verdana, Arial, Helvetica, sansserif">eğitim Durumunuz: <br> </font></div> <td width="63%" height="2"> <form name="form3" > İlk <input type="radio" name="radiobutton" value="radiobutton"> Orta <input type="radio" name="radiobutton" value="radiobutton"> Lise <input type="radio" name="radiobutton" value="radiobutton"> </form> </tr> <tr> <td width="37%" height="2"> <div align="right"> <font size="2" face="verdana, Arial, Helvetica, sans-serif" color="#000000">sitemizi Nasıl Buldunuz? <br> </font></div> <td width="63%" height="2"> <form name="form4"> <select name="temas" size="1"> <option selected>bir Seçim Yapın</option> <option>iyi</option> <option>kötü</option> <option>fena değil</option> </select> </form> </tr> <tr> <td width="37%" height="80"> <div align="right"> <font face="verdana, Arial, Helvetica, sans-serif" size="2" color="#000000">bize Söylemek İstedikleriniz <br> </font></div> <td width="63%" height="80"> <textarea name="textfield" cols="35" rows="5">buraya mesajınızı yazınız.</textarea> </tr> <tr> <td width="37%" height="32"> <td width="63%" height="32"> <form name="form5" > <input type="submit" name="gonder" value="gönder"> <input type="reset" name="sil" value="sil"> </form> </tr> <tr> <td width="37%"> <td width="63%"> </tr> </table> </body> </html> Yukarıdaki HTML kod kümesi size çok uzun geldi değil mi? Aslında hiç de korkulacak birşey değil.. Birazcık sabır bize yeterli olacaktır:) Bu form' a bakarak siz de kendi web siteniz için formlar yapabilirsiniz.. 18

19 KONU 19 Form 6 Form Yapalım 6 Form alanı yapmayı öğrendik. Peki şimdi ne eksik? Aklımıza geliyor değil mi? Eksik olan Formumuzu gönderme işlemidir. Form yaptık ama bu gönder butonuna bastığımız zaman bu form nereye gidecek? İşte bugün de bu sorulara cevap bulacağız.. Form nasıl gönderilir? Nereye gider? Form gönderme işlemi HTML gibi diller ile yazılan programlar vasıtası ile yapılır. Bu programlar CGI ve ASP ' dir. Biz burada o programları öğrenmeyeceğiz. Ama formumuz yolda mı kaldı? Hayır.. Bu formu göndermenin ikinci bir yolu daha var. "mailto:" mailto: ile form gönderme İsminden de anlaşılacağı gibi mail ile gönderme işlemi. Ama nasıl? Bir Form alanı oluşturduğumuz zaman bu alanı <form>..</form> etiketleri içinde yaparız. Buraya kadar doğru. Formu göndermek içi ise, <form> etiketinin içinde Action yüklemi ile formumuzun doldurulup gönderilemsi ile içindeki bilgilerin nereye, hangi adrese gideceğini belirleriz. Yine form etiketinin içirisin de olan Method yüklemine ise hangi yöntem ile göndereceğimizi bildiririz. Biraz karışık geldi değil mi? Korkmayın.. Şimdi daha derine inelim.. Şöyle bir Form etiketi düşünelim: <FORM ACTION="mailto:myserenity1@hotmail.com" METHOD=GET> Bu "mailto:" ile form gönderme işlemidir. Dikkat etmemiz gereken birşey var ki, bu yöntem ziyaretçinin bilgisayarın da bir uyarı mesajı çıkmasını sağlar. Bu yüzden çok tercih edilmez. Diğer Form Gönderme Teknikleri Mailto: bizim için en kolay form gönderme tekniğidir. Ancak örneklerde de gördüğümüz gibi uyarı mesajı verdiği için pek tercih edilmez. Bunun yerine programlama dilleri ile yazılmış form gönderme teknikleri kullanılır. Ama bizim için yapılmış olan ücretsiz servisler de var. Bu sayede hiçbir programlama diline ihtiyaç duymadan bir ziyaretçi defteri sahibi oluyoruz. Konular bitmiyor :) Form alanı yapmasını ve gönderme işlemini öğrendik.. Geriye ne kaldı?? Önümüzdeki haftalarda CSS ile dinamik, rengarenk sayfalar hazırlayacağız.. O zamana kadar form gönderme işlemini iyi okuyun iyi anlayın:) 19

20 KONU 19 HTML de Püf Noktaları - 1 Bu dersimizde işe yaramaz gibi görünen ama bazen çok ihtiyacımız olan HTML etiketlerinden bahsedeceğiz. <big> ve <small> etiketleri Yazı tipi ve font büyüklüklerinden daha önceki derslerimizde bahsetmiştik. Sayfamızdaki yazıların büyük olmasını istiyorsak: Yazı tipi ve font büyüklüklerinden daha önceki derslerimizde bahsetmiştik. Sayfamızdaki yazıların büyük olmasını istiyorsak: <big> Bu yazı büyük olmalı </big> <big><big> Bu yazı çok daha büyük olmalı </big></big> Bu <big> etiketi yazımızın büyüklüğünü bir ölçü büyütmeye yarıyor.. Ne kadar büyümesini istiyorsak o kadar <big> etiketi yazmalıyız. Küçük olmasını istiyorsak: <small> Bu yazı küçük olmalı </small> <small><small> Bu yazı daha küçük olmalı </small></small> <small> etiketi ise normal font boyundan bir ölçü küçük olmasını sağlar.. İstediğimiz kadar <small> etiketi yazabiliyoruz! Not: Bu etiketleri kullanacağımız zaman <font size=""> etiketini kullanmıyoruz. Eğer kullanırsak istediğimiz sonucu elde edemeyiz... <blockquote> etiketi Bu etiket paragraflarımızı bir satır içeriden başlatmamızı sağlar. Kullanımı: <p> Webdersleri </p> <blockquote> Photoshop için en iyi kaynak..<br> Tabii ki HTML için de :)) <blockquote> Bu kodlamanın sayfadaki görünümü: Webdersleri Photosop için en iyi kaynak.. Tabii ki HTML için de :)) <hr> (Horizontal Rule = Yatay Çizgi) Etiketi <hr> etiketi sayfamızda bir yatay çizgi çizmekte kullanılır.. Bunun bir bitirme etiketi yoktur. Yani <hr> yazdıktan sonra </hr> yazılmaz... 20

21 Kullanımı: Şimdi bir alt satırda bir çizgi olsa ne iyi olurdu.. <hr> aa zaten varmış:)) Sayfaki görünümü: Şimdi bir alt satırda bir çizgi olsa ne iyi olurdu... aaa zaten varmış:)) <hr> etiketinin ayarları şunlardır: "align" = left çizgiyi sola hizalar, center ortaya, right ise sağa hizalamamıza yardımcı olur.. "noshade" çizgimizin gölge efektini kaldırır. Koyu renkli bir çizgi olmasını sağlar.. "size" çizgimizin kalınlığını belirler. Mesela: size="2" "width" ise çizgimizin genişliğini belirler... Mesela: width="100" 21

22 KONU 20 HTML de Püf Noktaları - 2 Özel Karakterler Şimdi açın çok amaçlı not defteri programınız notepad'i. Ve şunları aynen yazın. Boşlukları da unutmayın.. Ardından deneme.htm adı ile kaydedin: <html> <head> </head> <body> <p> Bugün bir garip martı gördüm havada... <br> Bugün bir garip martı gördüm havada... </body> </html> Bu denemenin sayfada görünümü şöyle olmalıdır: Bugün bir garip martı gördüm havada... Bugün bir garip martı gördüm havada... Gördüğünüz gibi kodlamayı yaparken istediğiniz kadar boşluk bırakın, bu sayafada normal olarak görünecektir.. Peki ya bu boşluklara ihtiyacınız varsa.. İşte o zaman imdadımıza "Küçük ama işlevi büyük HTML kodları" giriyor :) Sadece boşluk bırakmak için değil "" (Tırnak işaretleri) "<" ">" (büyüktür ve küçüktür işaretleri) yani söylemek istediğim karakterlerin da bazı kodlamaları olduğu.. Ben burada Web sayfalarında en çok kullanılan özel karakterlerin kodlamalarından bahsedeceğim: (boşluk) " " & & < < > > Şimdi bunları sayfamızda deneyelim bakalım nasıl sonuçlar alacağız?? <p> Bugün hava nasıldı? </p> <p> < HTML > kodları böyle yazılmalı.. </p> <p> Kitap & Cd satan bir yer biliyor musun? </p> <p> Bu sözün lisansı benimdir:) 22

23 Bu kodlamanın sayfada görünümü: Bugün hava nasıldı? <HTML> kodları böyle yazılmalı. Kitap & Cd satan bir yer biliyor musun? Bu sözün lisansı & benimdir :) Nasıl küçük ama işlevi büyük HTML kodları işe yarıyor değil mi? 23

24 KONU 21 Meta Etiketleri Meta etiketleri, HTML sayfalarının başından ayrılmayan bekçileridir:) Bunu bir HTML öz sözü olarak kabul edin ve iyi dinleyin; Meta etiketlerinin fonksiyonunu kısaca açıklamak gerekirse, Meta Etiketlerinin görevi Web Sayfası hakkındaki bilgileri tutmaktır.. Şunu hatırlayın, Web sayfalarımızın başına koymayı alışkanlık haline getirdiğimiz: <meta http-equiv="content-type" content-text/html; charset=windows-1254"> etiketleri hatırlayın.. Şimdi Meta etiketlerinin işleyiş şekillerini ve bu şekillerin ne işe yaradığına bir göz atalım.. Meta etiketleri ve onların işlevleri.. Türkçe Font Meta etikeketleri bir çok bakımdan işimize yarar.. (Bize çay, kahve pişirmese de biz yine de severiz onları..) Sayfalarımız da Türkçe font kullanmış isek bunu ziyaretçinin browserında Türkçe olarak gösteren <meta http-equiv="content-type" content="text/html; charset=iso "> <meta http-equiv="content-type" content-text/html; charset=windows-1254"> etiketi.. Eğer bu etiketi kullanmaz isek kullandığımız türkçe harfler ziyaretçimizin bilgisayarında düzgün görünmyecek ve ne yazdığımızı anlamayacaktır.. Bunu istemeyiz değil mi?? Siteniz arama motorlarında görüntülensin... Web sayfanızın bir takım yerler de görülmelidir ki siz amacınıza ulaşın. Bu da ya Arama Motorlarına ve bazı listelere üye olmak ile ya da sayfanız ile aynı amacı paylaşan sayfalara link vermek ile mümkün olabilir. Bunun bir yolu daha var.. Sayfamızdaki meta etiketi ile bazı arama motorlarında görüntülenmesini sağlayabiliriz.. <meta name="keywords" content="kelime1, kelime2, kelime3.."> Meta etiketimizin adı "keywords" yani Anahtar Kelimeler. Meta etiketimizin content bölümüne sayfamız ile ilgili bazı anahtar kelimeler yazmalıyız.. Mesela sayfamız Fotoğraf Sanatçılığı ile ilgili bir sayfa ise kullandığımız meta etiketi şöyle olmalıdır: <meta name="keywords" content="fotograf, Fotograf, fotoğraf, fotoğraf, film"> Bu listeyi genişletmek mümkündür. Ama unutmayın, sayfanız ile ilgili olmayan kelimeleri lütfen kullanmayın! Böylece isteyen istediği bilgiye hemen ulaşabilsin. 24

25 Tanıtım Metni: Sayfamızın Arama Motorlarında görüntülenmesini sağladık.. Ama bir de sayfamızın içeriği hakkında daha geniş bilgi vermeliyiz. Bu sayede ziyaretçi hiç tereddüt etmeden aradığının bizim sayfamızda olduğunu anlayacak ve ziyaret edecektir: <meta name="description" content="fotoğraf Sanatları Hakkında Herşey.. İyi bir fotoğrafrafçı olmak istiyorsanız, size en iyi hizmeti vermeyi bir görev biliriz..."> Böylece sitemizin tanımı da yapmış oluyoruz... Kendinizi de tanıtın:) Eveet, bu sayfanın yapımcısı sizsiniz.. Siz yazdınız bütün kodları.. Siz koydunuz sayfanın adını.. Bu kadar motive yeter.. Sayfamız arama motorlarında görüntülendiğinde bu sayfanın yapımcısının da adının bulunması gerekir değil mi? Bunun için: <meta name="author" content="serenity"> Bazı arama motorları arama yapalara sonucu gösterirken site yapımcısının adını "author" ifadesini okumak sureti ile yapar. Bu bir nevi sizin imzanız da sayılabilir. Her arama motorunun indeksleme yöntemi farklıdır.. Bazen istediğimiz sonucu elde edemeyebiliriz. Birçok arama motoru da bir süre geçtikten sonra sayfamızı kaydedebilir.. Hiçbir zaman umudumuzu yitirmeyelim, bekleyelim de arama motorlarının keyfi yerine gelsin:) Diğer Meta Tagleri.. <META http-equiv=expires content="wed, 04 Apr :59:59 GMT"> Bu meta tag'i sayfanın 4 Nisan 2001'de Griniç saatiyle 23:59:59'dda tüm arama motorlarından ve Browser'ların geçici internet dosyaları klasöründen silinmesini sağlar... <meta http-equiv="refresh" content="5; url= Bu tag ise, sayfanın 5 saniye sonunda belirtilen adrese yönlendirilmesini sağlar.. Sık güncellenen sayfalar bakımından kullanışlıdır... Hayatımızı kolaylaştıran Meta Tag'lerini öğrendik bu dersimizde de. Her zamanki gibi unutmuyoruz: Çalışacak, başarılı olacağız.. 25