WEB TASARIMININ TEMELLERİ

Transkript

1 WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu

2 Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri 2. Hafta Html Temel Etiketleri Metin ve Görünüm Etiketleri 3. Hafta Metin ve Görünüm Etiketleri Bağlantı (Köprü) Oluşturma 4. Hafta Bağlantı (Köprü) Oluşturma Tablo İşlemleri 5. Hafta Tablo İşlemleri Formlar 6. Hafta Formlar 7. Hafta Çerçeveler 8. Hafta Çoklu Ortam Araçları 9. Hafta Çoklu Ortam Araçları 10. Hafta Stil Şablonu(CSS) Temelleri 11. Hafta Stil Şablonu(CSS) Özellikleri 12. Hafta Stil Şablonu(CSS) Özellikleri Menü İşlemleri 13. Hafta Javascript ve Menü İşlemleri 14. Hafta Domain Hosting ve Server işlemeleri

3 Form İşlemleri Artık formlarla birlikte dinamik web tasarımına ilk adımı atmış oluyoruz. Formlar yoluyla ziyaretçiden bilgi alabilir, aldığımız bilgi doğrultusunda birçok işlemi gerçekleştirebiliriz. Ziyaretçiye gönderilecek formu hazırlarken, göze hoş görünmesi açısından, tablolar en çok kullanacağımız bileşenler olacaktır. Formda Kullanılan Bazı Elemanları: Form Alanı Submıt Ve Reset Butonları (Button) Metin Kutusu(text) Seçme Listeleri (Select Lısts) Onay Kutusu (Checkbox) Seçenek Düğmesi (Radıo) Metin Alanı (Text Area)

4 Form Nesnesi Form öğelerini kullanabilmek için öncelikle bir form belirlemeniz gerekir. Form öğelerini bu etiketler arasına yazmalısınız. name ile formun adını, method ile gönderi metodunu (get veya post), action ile formun belirtilen metodla gönderileceği sayfayı belirleriz. Bu eleman tüm form elemanlarını kapsayacak şekilde yerleştirilmelidir ve bu çok önemlidir. Aksi halde yani kapsamazsa bazı bilgiler form ile gönderilmeyebilir. <form action= verial.php method= POST name= form1 >.... </form>

5 Form Nesnesi Özellikleri Form nesnemize ait bazı özellikler mevcuttur. Bunlar: Özellik Açıklama Aldığı Değerler action name Formda girilen bilgilerin gönderileceği adres yazılır. Eğer boş bırakılırsa mevcut sayfaya gönderilir. Her form elemanının kendine has bir ismi olmak zorunda Ör: "index.php" Ör: "form1" method Formdan gelen verilerin gizli yada açık olarak gönderileceğini belirtir. Post gizli, Get(Adres çubuğu) açık yoldur. POST GET enctype Formdan bir dosya gönderilecekse eklenir. "multipart/form-data" onsubmit onreset Form gönderilmeden önce hangi yazılımın çalışacağını belirtmek amacıyla kullanılır. Form temizlenmeden önce hangi yazılımın çalışacağını belirtmek amacıyla kullanılır.

6 Input Nesnesi Her türlü bilgiyi input'lar sayesinde girdi aldırırız. name ile, formun action parametresinde belirtilen sayfaya postalanırken değişken adlarını, girilen değer belirler. value parametresi ise o öğe için geçerli değeri taşır. Bu geçerli değerler çıktısı verilecek input türüne göre değişkenlik gösterir. type parametresi ile de çıktısı verilecek form öğesinin türünü belirleriz. Bir çok form öğesini type özelliği ile input nesnesinde oluşturuyoruz. HTML 5 ile Birlikte işimizi kolaylaştıran çok kullanışlı bir çok input nesnesi karşımıza çıkmıştır. Öncelikle eski versiyondaki input nesnelerini inceleyip daha sonrada HTML 5 deki nesnelere geçeceğiz. Bu öğeleri, türlerine göre ayrı ayrı inceleyelim ;

7 Metin Kutusu (Text) Nesnesi Formlarda en çok kullanılan nesnelerdir. Herhangi bir metin veya sayısal giriş işleminde kullanılır. Bilgi girişinin (ınput) ne şekilde olacağı type özelliği ile belirlenir. Normal bir metin kutusunun oluşturulma şekli : <input type="text" name="degisken_adi" value="adınız">

8 INPUT Nesnesi Özellikleri İnput nesnemize ait bazı özellikler mevcuttur. Bunlar: Özellik Açıklama Aldığı Değerler value Metin kutusunun içerisindeki değeri değiştirir. Karakter name maxlength size type Her form elemanının kendine has bir ismi olmak zorunda Metin kutusuna yazılacak karakterleri sınırlandırmak için kullanılır. Yukarıda 15 karakter ile sınırlandırılmış. Metin kutusuna karakter cinsinden bir genişlik vermek için kullanılır. Yukarıdaki mrtin kutusu 30 karakter genişliğe sahip. Tüm input elementlerinde olması gereken ve o nesnenin tipini belirten özellik. Yukarıda metin kutusu için aldığı değer "text" dir. Karakter Sayısal değer Sayısal değer "text, button password, checkbox vb."

9 INPUT Nesnesi Özellikleri İnput nesnemize ait bazı özellikler mevcuttur. Bunlar: Özellik Açıklama Aldığı Değerler autocomplete Html5 ile gelen bir özellik, önceden kayıtlı verilerin çıkmasını engeller. Siz bir metin kutusuna bir şeyler yazmaya başladığınızda daha önceden benzer bir şeyler yazılmışsa otomatik olarak tarayıcı bunları çıkarır, bu durumu engellemek için değeri "off" yapılmalıdır. on off autofocus placeholder Html5 ile gelen bir özellik, sayfa yüklendiğinde otomatik olarak odaklanılmasını istediğiniz input elemanına yazabilirsiniz. Html5 ile gelen bir özellik, başlangıçta metin kutusu içerisinde görünmesini istediğiniz metni yazabilirsiniz. Tıklanıp yeni bir metin yazılmaya başlandığında kaybolacaktır. autofocus Karakter

10 INPUT Nesnesi Özellikleri İnput nesnemize ait bazı özellikler mevcuttur. Bunlar: Özellik Açıklama Aldığı Değerler required Bir input alanının boş bırakılmasını istemiyorsanız zorunlu hale getirmek için kullanılır. required pattern novalidate Html5 ile gelen bir özellik, regexp yazım formatı ile kullanıcıyı istediğiniz formata uygun veri girişine zorlamanız mümkün. HTML5 ile gelen validation özelliklerini iptal Regexp Bir çok nesnede etmek için bu kullanılır özelliklerden bazıları standarttır ve validate> kullanılır. Mesela, name, id, value gibi Bu özellikler her nesne için standarttır ve tekrar tekrar anlatılmayacaktır. <form action="de mo_form.asp" no

11 INPUT Password Nesnesi İnput nesnemizin type özelliğini password yaparak şifre alanı oluşturabiliriz: <input type="password" name="psw">

12 INPUT Button Nesnesi İnput nesnemizin type özelliğini değiştirerek üç farklı buton türü oluşturabiliriz: Bunlar: Buttton Submit Reset Öğr. Gör. M. Mutlu YAPICI

13 INPUT Button Nesnesi Öğr. Gör. M. Mutlu YAPICI İnput nesnemizin type özelliğini button yaparak buton oluşturabiliriz: Bu tür butonların olaylarına her hangi bir görev tanımlamadığımız sürece bir iş yapmazlar sadece buton görünümü meydana getirirler. <input type="button" name="btn" id="btn" value="gönder">

14 INPUT Button Nesnesi Öğr. Gör. M. Mutlu YAPICI İnput nesnemizin type özelliğini Submit yaparak gönderi butonu oluşturabiliriz: Bu tür butonlar ile herhangi bir form nesnesine ait değerlerin gönderilmesi sağlanmaktadır. Görünüş olarak diğer butonlardan bir farkı yoktur. <input type="submit" name="btn" id="btn" value="gönder">

15 INPUT Button Nesnesi Öğr. Gör. M. Mutlu YAPICI İnput nesnemizin type özelliğini RESET yaparak form temizleme butonu oluşturabiliriz: Bu tür butonlar ile herhangi bir form nesnesine ait değerlerin temizlenmesi (silinmesi) sağlanmaktadır. Görünüş olarak diğer butonlardan bir farkı yoktur. <input type="reset" name="btn" id="btn" value="gönder">

16 LABEL (Etiket) Nesnesi Verilerimize etiket tanımlamak için kullanılır. For parametresi ile tanımlanan etiketin hangi nesneye ait olduğu belirtile bilinir <label for="ad"> ADINIZI GİRİN </label> <input type="text" name="ad" value="adınız"> ADINIZI GİRİN Label tagine stil ekleyerek biçimlendirebilriiz.

17 INPUT Radio Nesnesi Öğr. Gör. M. Mutlu YAPICI İnput nesnemizin type özelliğini radio yaparak radio butonları oluşturabiliriz oluşturabiliriz. radio : Seçim butonları koyar. Kullanıcıya birden çok seçenek arasından birinin seçilmesi istenirse bunları kullanırız. Bir seçim gurubunda her seçenek için bir tane radio türünde input öğesi eklenir, name yani isim parametrelerine aynı değer verilir ve value parametresine verilen değerlerden, form gönderilirken seçilmiş olanının değeri o isim yani değişken ile gönderilecek sayfaya gönderilir. <form> Cinsiyetinizi Seçiniz <br> </form> <input type="radio" name="cinsiyet" value="bayan"> Bayan <input type="radio" name="cinsiyet" value="bay"> Bay Radio butonlarının çalışabilmesi için ortak çalışacak olanların her birinin name özelliği aynı olmalıdır.

18 INPUT Check Box Nesnesi İnput nesnemizin type özelliğini check yaparak check box butonları oluşturabiliriz oluşturabiliriz. Bu butonlarda aynı radio butonları gibidir tek farkları radio butonlarında sadece birini seçebiliyor iken check box larda istediğimiz kadarını seçebiliriz. <form> <input type="checkbox" name="arac" value="bisiklet">bisikletim var <br> <input type="checkbox" name="arac" value="araba">arabam var <br> <input type="checkbox" name="arac" value="ucak">uçağım var </form>

19 INPUT file Nesnesi İnput nesnemizin type özelliğini file yaparak dosya yükleme alanı oluşturabiliriz: <form> Dosya Yükle: <input type="file" name="yukle"> </form>

20 HTML 5 Input Nesneleri Öğr. Gör. M. Mutlu YAPICI Buraya kadar gördüğümüz input nesnesine ait type parametresi ile oluşturduğumuz nesneler HTML 5 ten önce de var olan nesnelerdi. Şimdi HTML 5 ile beraber gelen diğer nesneleri göreceğiz. HTML 5 ile gelen İnput nesneleri : Type color date datetime datetime-local month Type number range search tel time url week

21 INPUT Color Nesnesi İnput nesnemizin type özelliğini color yaparak renk seçme paleti oluşturabiliriz: <form> Favori Renginizi Seçiniz: <input type="color" name="favcolor" value="#ff0000" > </form>

22 INPUT Date Nesnesi İnput nesnemizin type özelliğini date yaparak tarih seçme paleti oluşturabiliriz: <form> Doğum Gününü Seç: <input type="date" name="dgunu" max=" " min=" " > </form>

23 INPUT Datetime Nesnesi İnput nesnemizin type özelliğini datetime yaparak tarih seçme paleti oluşturabiliriz: <form> Doğum Gününü Seç: <input type="datetime" name="dgunu" max=" " min=" " > </form>

24 INPUT Datetime-local Nesnesi İnput nesnemizin type özelliğini datetime-local yaparak tarih seçme paleti oluşturabiliriz: <form> Doğum Gününü Seç: <input type="datetime-local" name="dgunu" max=" " min=" " > </form>

25 INPUT month Nesnesi İnput nesnemizin type özelliğini month yaparak aylık tarih seçme paleti oluşturabiliriz: <form> AY YIL Seç: <input type="month" name="ay"> </form>

26 INPUT week Nesnesi İnput nesnemizin type özelliğini week yaparak haftalık tarih seçme paleti oluşturabiliriz: <form> Haftayı Seçin: <input type="week" name="hafta"> </form>

27 INPUT time Nesnesi İnput nesnemizin type özelliğini time yaparak haftalık tarih seçme paleti oluşturabiliriz: <form> Haftayı Seçin: <input type="time" name="saati"> </form>

28 INPUT Nesnesi İnput nesnemizin type özelliğini yaparak tarih seçme paleti oluşturabiliriz: <form> Mail Adresi: <input type=" " name="posta"> </form>

29 INPUT number Nesnesi İnput nesnemizin type özelliğini number yaparak numara seçme paleti oluşturabiliriz: <form> Numara Seçin : <input type="number" name="points" min="0" </form> Öğr. Gör. M. Mutlu YAPICI max="100" step="10" value="30">

30 INPUT range Nesnesi İnput nesnemizin type özelliğini range yaparak numara seçme paleti oluşturabiliriz: <form oninput="x.value=parseint(a.value)"> Numara Seçin : <input type="range" name="a" min="0" max="100" value="30"> <output name="x" for="a b"></output> </form> Öğr. Gör. M. Mutlu YAPICI

31 INPUT url Nesnesi İnput nesnemizin type özelliğini url yaparak web sayfası giriş alanı oluşturabiliriz: <form> Web Sayfası Girin : <input type="url" name="websayfasi"> </form>

32 INPUT required Nesnesi İnput nesnemizin içerisinde kullandığımız required parametresi nesnenin içerisinin boş kalmamasını sağlamaktadır: <form> Adınızı Girin : <input type="text" name="adi" required> </form> Öğr. Gör. M. Mutlu YAPICI

33 INPUT datalist Nesnesi İnput nesnemizin içerisinde kullandığımız list parametresi nesnenin üzerine tıklandığında liste çıkmasını sağlamaktadır: <input list="browsers"> <datalist id="browsers"> <option value="internet Explorer"> <option value="firefox"> <option value="chrome"> <option value="opera"> <option value="safari"> </datalist>

34 TEXT AREA Nesnesi HTML de çok satırlı bir yorum kutusunu textarea nesnesi ile oluşturmaktayız. Bu nesnenin rows özelliği ile satır sayısını cols özelliği ile sütun sayısını belirleriz. <textarea rows="4" cols="50"> </textarea>

35 Select Nesnesi HTML de select nesnesi ile seçme kutusu oluşturabiliriz. Select nesnesinin multiple özelliği ile çoklu seçme sağlanır. Her bir seçeneği option özelliği ile belirleriz. Option özelliğinin disabled ve selected özellikleri vardır <select> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select>

36 Option Group Özelliği HTML de select nesnesinin option group (optgroup) özelliği ile seçenekleri gruplar halinde listeleyebiliriz. <select> <optgroup label="swedish Cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> </optgroup> <optgroup label="german Cars"> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </optgroup> </select>

37 Fieldset Nesnesi HTML de fieldset nesneleri daha güzel bir tasarım oluşturmak için kullanılır. Belirli nesneleri gruplamaya yarar. Grup halinde gösterir. Legend nesnesi başlığını belirler. <fieldset> <legend>kişisel Bilgiler:</legend> Ad: <input type="text"><br> <input type=" "><br> Doğum Tarihi: <input type="date"> </fieldset>