HTML, BODY Etiketleri 2. Kısım ve Çıplak Özellikleri

HTML & CSS Dersleri

HTML, BODY Etiketleri 2. Kısım ve Çıplak Özellikleri

BODY etiketinin içerisine yerleşecek alt etiketlere devam edelim;


    12) IMG Etiketi (Image): Resim anlamında Türkçeleştirilebilir. Resim formatındaki görsel dosyaların görüntülenmesi için kullanılır. SRC (source/kaynak) özelliği olmadan hiç bir işe yaramaz. Çıplak haldeyken resmin orijinal genişliği ve yüksekliği kadar geniş ve yüksektir. Bu etiketin </img> ile kapatılmaması gerekir, çünkü bu etiketin çocuğu bulunamaz. Yalnızca özellikleri bulunabilir. Özelliklerine birlikte bakalım;

        a) SRC (Source/Kaynak) özelliği: Gösterilecek olan görselin tam yolunu belirtir. <img src="http://www.alanadi.com/resim.jpg"> Şeklinde yazılır. Bu özelliğin olmadığı IMG etiketi görüntülenmez. Belirtilen yolda bulunamayan görsel için bazı tarayıcılar, linkin kırık olduğunu bildiren bir sembol bırakırlar.

        b) WIDTH (Genişlik) Özelliği: Bir görsele uygulanacak genişliğin piksel ölçüsüyle değerini belirtir. 

        Örn; <img src="http://www.alanadi.com/resim.jpg" width="100">

        c) HEIGHT (Yükseklik) Özelliği: Bir görsele uygulanacak yüksekliğin piksel ölçüsüyle değerini belirtir. 

        Örn; <img src="http://www.alanadi.com/resim.jpg" height="100">

        *** Width ve Height değerlerinden birisi tanımlanmış, diğeri tanımlanmamışsa resim orijinali üzerinden aynı oranda ölçeklenerek gösterilir. Örneğin genişliği 100 piksel ve yüksekliği 100 piksel olan bir görsel için, sadece genişliği 50 piksel olarak tanımlarsak yükseklik de otomatik olarak 50 piksele ayarlanır. Ancak, yükseklik için faklı bir değer de girilirse resim orijinal ölçeğinden ayrılabilir.

        d) BORDER (Sınır) Özelliği: Gösterilecek resmin kenarlarına bir çerçeve çizmek için kullanılır. İçerisine alacağı değer piksel cinsinden okunur. 

        Örn; <img src="http://www.alanadi.com/resim.jpg" width="100" height="100" border="5">

        *** Resimleri link haline getirmek için (kullanıcının resme tıkladığında farklı bir sayfaya yönlendirilmesi), A etiketinin çocuğu haline getirilmesi gerekmektedir. 

        Örn: <a href="index.html"><img src="http://www.alanadi.com/resim.jpg"></a>


    13) FORM Etiketi: Kullanıcıdan sunucuya bilgi aktarırken kullanılan HTML etiketidir. Bir nevi, kullanıcının dolduracağı ve site yönetimine gönderilecek olan değerler dizisi/form'dur. Çocuk etiketleri ve bazı özellikleri yazılmadan hiç bir şey ifade etmez. </form> son etiketiyle kapatılması mecburidir. Alt etiketlerden topladığı değerleri ACTION etiketinde bildirilen sayfaya gönderir. Gönderilecek değerlerin FORM ÖĞESİ olması ve NAME özelliğinin olması şarttır. Bu konulara daha sonra değinilecektir.

        a) ACTION (Hareket) Özelliği: Formun kullanıcıyı hangi sayfaya yönlendireceğini ve hangi sayfada işlem göreceğini belirtir. Bu özellik yazılmaz ise form gönderildiğinde, gönderen sayfaya yeniden yönelecektir.

        b) METHOD Özelliği: Gönderim yöntemini belirtir. POST veya GET değerlerinden birini alır.

            i) GET Methodu: Formun içindeki değerleri sonraki sayfaya link sonuna ek yaparak gönderir. Kullanıcı adı ve şifre gibi mahrem bilgilerin bu şekilde taşınması SON DERECE SAKINCALIDIR! Daha çok gösterilecek sayfa numarası ve benzeri mahremiyeti olmayan bilgiler bu yöntemle sunucuya bildirilir. Form, form.php dosyasına yönlendirildiyse örnek yönlendirme linki; form.php?kullaniciadi=websanat&sifre=1234 biçiminde olacaktır. Tarayıcı geçmişinde de bu değerler görünecektir.

            ii) POST Methodu: Formun içindeki değerleri sonraki sayfaya gizli bir şekilde gönderir. Kullanıcı adı/şifre ve benzeri mahrem bilgiler bu yöntemle gönderilerek mahremiyeti korunmuş olur, gönderim linki; form.php biçiminde görünecektir. GET methodu gibi değerleri kullanıcıya göstermez.


    14) INPUT Etiketi: GİRDİ olarak Türkçeleştirilebilir. TYPE özelliği sayesinde biçimi belirlenir. TYPE özelliği belirtilmeden bir şey ifade etmez. NAME özelliği belirtilmez ise formlardan gönderilmez.

        a) TYPE Özelliği: Input etiketinin türünü belirler. Bu türlerin anlaşılması, değerlerin örnekli izahla daha mümkündür;

            i) TEXT Değeri: Yazı şeklinde Türkçeleştirilebilir. <input type="text"> biçiminde ifade edildiğinde tek satırlık bir metin kutusu ortaya çıkar.

            Örnek:  

<input type="text">
 

            ii) PASSWORD Değeri: ŞİFRE şeklinde Türkçeleştirilebilir. <input type="password"> biçiminde ifade edildiğinde TEXT değeri ile aynı özellikleri taşır fakat içine yazılan yazı görünmez. Şifrelerin yazılacağı kutucuklar için kullanılır.

            Örnek: 

<input type="password">
 

            iii) SUBMIT Değeri: GÖNDER şeklinde Türkçeleştirilebilir. <input type="submit"> biçiminde ifade edildiğinde annesi olan FORM etiketini gönderme işlemi için kullanılacak düğmeyi oluşturur. Eğer bir Formun çocuk öğesi değil ise sadece bir düğme olarak kalır. 

            Örnek:  

<input type="submit" value="Gönder!">
 

            iv) RADIO Değeri: Türkçesi ile çok farklı bir anlamda çalışan bu değer, bir grup içerisinde birden çok değer içerisinden tek seçim yapılmasını sağlar. Grup üyelerinin TAMAMININ NAME özelliğinin aynı değerde olması şarttır. Grup bu şekilde tanımlanır. Öğelerden birisi seçildiğinde diğer seçilmiş olanın seçimi sonlandırılır. Yalnızca tek öğe seçilmiş olabilir. Örnekle daha kolay anlaşılabilir.
 

           Örnek 1: WebSanat |  ReklamSan
           Örnek 2:  Broşür |  Web Sitesi

<!-- Firma Seçim Kutuları -->
<span><input type="radio" name="firma_secim" value="WebSanat"> WebSanat</span>
<span><input type="radio" name="firma_secim" value="ReklamSan"> ReklamSan</span>

<!-- Hizmet Seçim Kutuları -->
<span><input type="radio" name="hizmet_secim" value="Broşür"> Broşür</span>
<span><input type="radio" name="hizmet_secim" value="Web Sitesi"> Web Sitesi</span>


            v) CHECKBOX Değeri: TİK KUTUSU şeklinde Türkçeleştirilebilir, RADIO'dan farklı olarak bunun taşıdığı değer bireyseldir. Çoklu seçim için kullanılabilir. Bireysel bu şekilde tanımlanır.  Örnekle daha kolay anlaşılabilir.
            Örnek:  WebSanat |  ReklamSan


<span><input type="checkbox" name="firma_secim" value="WebSanat" checked> WebSanat</span>
<span><input type="checkbox" name="firma_secim" value="ReklamSan"> ReklamSan</span>

            vi) FILE Değeri: Sunucuya dosya yüklemek için kullanılır. Bununla birlikte NAME değerinin de gönderilmesi zorunludur. Bu öğeye tıklandığında dosya seçim ve kayıt kutusu  ortaya çıkar. İçinde bulunduğu öğenin tüm genişliğini kaplar.

            Örnek:  

<input type="file">
 

            vii) COLOR Değeri: RENK şeklinde Türkçeleştirilebilir. <input type="color"> biçiminde ifade edilir ve tıklandığında bir renk seçim kutusu ortaya çıkarır. 

            UYARI: Bu seçim; Firefox, Safari 9.1 ve öncesi versiyonlarında, Internet Explorer 11 ve öncesi versiyonlarında desteklenmemektedir.

            Örnek: 

<input type="color">
 

            viii) DATE Değeri: TARİH şeklinde Türkçeleştirilebilir. <input type="date"> biçiminde ifade edilir ve kullanıcının tarih seçmesini sağlar. 

            UYARI: Bu seçim; Safari, Internet Explorer 11 ve öncesi versiyonlarında desteklenmemektedir.

            Örnek: 

<input type="date">
  

            ix) TIME Değeri: ZAMAN şeklinde Türkçeleştirilebilir ama burada SAAT anlamında kullanacağız. <input type="time"> biçiminde ifade edilir ve kullanıcının tarih seçmesini sağlar. 

            UYARI: Bu seçim; Safari, Internet Explorer 11 ve öncesi versiyonlarında desteklenmemektedir.

            Örnek: 

<input type="time">
 

            x) MONTH Değeri: AY şeklinde Türkçeleştirilebilir. <input type="month"> biçiminde ifade edilir ve kullanıcının ay ve yıl seçmesini sağlar. 

            UYARI: Bu seçim; Firefox, Safari, Internet Explorer 11 ve öncesi versiyonlarında desteklenmemektedir.

            Örnek: 

<input type="month">
 

            xi) DATETIME-LOCAL Değeri: Tam Türkçesinden farklı bir iş yapmaktadır.. <input type="datetime-local"> biçiminde ifade edilir ve kullanıcının gün, ay, yıl, saat ve dakika seçmesini sağlar. 

            UYARI: Bu seçim; Firefox, Safari, Internet Explorer 12 ve öncesi versiyonlarında desteklenmemektedir.

            Örnek: 

<input type="month">

            *** Son olarak INPUT TYPE özelliği bir de  "hidden" değeri alır. Input tipi "hidden" şeklinde yazıldığında öğe görünmez olur fakat değer TEXT verilmiş gibi işlem görür.

            *** GÖRDÜĞÜNÜZ GİBİ APPLE'IN SAFARI TARAYICISI BİR ÇOK GELİŞMİŞ INPUT ÖZELLİĞİNİ DESTEKLEMİYOR. KODLARINIZDA BU KONUYA DİKKAT EDİN!

            xii) HTML 5 Öncesi Yardımcı Değerler:

                DISABLED: Bu değer <input type="xxx" disabled> biçiminde tanımlanır ve içinde bulunduğu etiketi engelli hale getirir fakat form içinde gönderildiğinde girdi değeri işlem görür.

                MAXLENGTH: Bu değer<input type="xxx" maxlength="10"> biçiminde tanımlanır ve INPUT değerinin içerisine gelebilecek maksimum karakter sayısını belirler.

                READONLY: Bu değer <input type="xxx" readonly> biçiminde tanımlanır ve INPUT değerinin değiştirilememesini sağlar, aslında tüm girdi öğelerinin değiştirilmemesini sağlar.

                SIZE: Bu değer <input type="xxx" size="10"> biçiminde tanımlanır ve INPUT değerinin, gönderilmeden önce kaç karakter olması gerektiğini belirler.

                VALUE: Bu değer <input type="xxx" value="WebSanat"> biçiminde tanımlanır ve INPUT etiketinin, ön tanımlı değerini belirtir. DISABLED veya READONLY değil ise bu ön tanımlı değer değiştirilebilir.

            xiii) HTML 5 Sonrası Yardımcı Değerler:
                MAX: Bir INPUT değerinin alabileceği maksimum değeri belirtir.

                MIN: Bir INPUT değerinin alabileceği minimum değeri belirtir.

                REQUIRED: Bir INPUT değerinin GEREKLİ olduğunu belirtir. Bu değer boş bırakılırsa FORM gönderilmez.

    Sonraki derste FORM içerisine gelebilecek diğer etiketlerle devam edeceğiz.