25 Temmuz 2015 Cumartesi

HTML5 Yeni Form Özellikleri

HTML Dersleri    
HTML5 Yeni Form Özellikleri

HTML5 <form> ve <input> için birkaç yeni özellik içerir.

HTML5  <form> için yeni özellikler:

<form> ve <input> autocomplete özelliği: Bir form yada input alanının autocomplete'sinin açık olup olmadıgını kontrol eder. autocomplete açık olduğunda, tarayıcı kullanıcının önceden girdiği değerlere göre alanları tamamlar. Autocomplete özelliği <form> ve takip eden <input> tipleri ile çalışır:text, search, url, tel, email, password, datepickers, range ve color. 
<!DOCTYPE html>
<html>
<body>

<form action="#" autocomplete="on">
  İsim:<input type="text" name="isim"><br>
  Soyisim: <input type="text" name="soyad"><br>
  E-Posta: <input type="email" name="eposta" autocomplete="off"><br>
  <input type="submit">
</form>

</body>
</html>
Bu özellik Chrome, Safari, Firefox ve IE tarafından desteklenmektedir. 

NOT: Bazı tarayıcılarda bu örneğin çalışması için "otomatik tamamlama" özelliğini aktifleştirmeniz gerekebilir.  

<form> novalidate özelliği: Bir boolean özelliktir. (TRUE - FALSE) Var olduğunda, form gönderildiğinde <input> elementinin doğrulanıp doğrulanmayacağını belirler.
<!DOCTYPE html>
<html>
<body>

<form action="#" novalidate>
E-Posta: <input type="email" name="user_email">
<input type="submit">
</form>

</body>
</html>
Bu özellik Safari ve IE tarafından v9 öncesinde desteklenmemektedir. 

HTML5 <input> için yeni özellikler:

<input> autofocus özelliği: Bir boolean özelliktir. (TRUE - FALSE) Var olduğunda, tarayıcının <input> elementine sayfa yüklendiğinde otomatik olarak odaklanmasını belirler.
<!DOCTYPE html>
<html>
<body>

<form action="#">
  İsim:<input type="text" name="ad" autofocus><br>
  Soyisim: <input type="text" name="soyad"><br>
  <input type="submit">
</form>

</body>
</html>
Bu özellik IE tarafından v9 öncesinde desteklenmemektedir.  


<input> form özelliği: Bir <input> elementinin hangi form ya da formlara ait olduğunu belirtir.
<!DOCTYPE html>
<html>
<body>

<form action="#" id="form1">
İsim: <input type="text" name="ad"><br>
<input type="submit" value="Submit">
</form>
Soyisim: <input type="text" name="soyad" form="form1">

</body>
</html>
Bu özellik Chrome, Safari, Opera ve Firefox tarafından desteklenmektedir.


<input> formaction özelliği: <input> elementinin formun action özelliğini değiştirmesini sağlar. bir form gönderildiğinde giriş denetimi (input control) işleyecek bir dosyanın url'ni belirtir. Bu özellik type="submit" ve type="image" ile kullanılır.
<!DOCTYPE html>
<html>
<body>

<form action="form.php">
  İsim: <input type="text" name="ad"><br>
  Soyisim: <input type="text" name="soyad"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="admin.php" value="Submit as admin">
</form>

</body>
</html>
Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

<input> formenctype özelliği: form-data'nın sunucuya gönderilirken nasıl şifrelenmesi gerektiğini belirtir.  formun enctype özelliğini değiştirmesini sağlar. Bu özellik type="submit" ve type="image" ile kullanılır.
<!DOCTYPE html>
<html>
<body>

<form action="post_enctype.php" method="post">
  İsim: <input type="text" name="ad"><br>
  <input type="submit" value="Gönder">
  <input type="submit" formenctype="multipart/form-data" value="Multipart/form-data Olarak Gönder">
</form>

</body>
</html>
Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

HTML5 Yeni Form Elementleri

HTML Dersleri   
HTML5 Yeni Form Elementleri

Bu dersimizde HTML5'in yeni form elementleri olan <datalist>, <keygen> ve <output> elementlerini inceleyeceğiz.

<datalist> Elementi: Düzenlenebilir elementlere otomatik tamamlama (autocomplete) drop-down özelliği sağlamak için yani input elementlerine ön tanımlı değerler vermek için kullanılır. 
<!DOCTYPE html>
<html>
<head>
         <title>DATALIST ORNEK</title>
</head>
 
<body>
<p>
     <input type="text" name="ARA" id="ARA" placeholder="GIRIS YAP" list="ARA_LIST" autocomplete="off">
     <datalist id="ARA_LIST">
               <option>JAVA</option>
               <option>C SHARP</option>
               <option>PASCAL</option>
               <option>COBOL</option>
     </datalist>
</p>
 
</body>
Bu özellik Safari ve IE tarafından v9 öncesinde desteklenmemektedir. 

Örneğimizde <datalist> elementi bilgi girişinde kullanıcıya kolaylık sağlamak amacıyla bir drop down menu içinde bilgi giriş seçeneklerini listelemiştir. Ayrıca bir harf girilirse, menüdeki sadece o harf ile ilişkili seçenekler listelenecektir. <datalist> kullanmak için <datalist> elementinin id'si ile input etiketinin list özniteliği aynı değerlere sahip olmalıdır.

<keygen> Elementi: Formlar için bir çift anahtar oluşturur. Yani bir form içerisinde bir anahtar çifti (key-pair) jeneratörü belirtir. Daha basit açıklamak gerekirse kullanıcılara kimlik doğrulaması yapmak çin güvenli bir yol sağlar. Form gönderildiğinde 2 ayrı key üretilir, bir özel (private key) ve bir açık (public key). Özel key yerel olarak depolanırken, açık key sunucuya bir istemci sertifikası üretip kullanıcı doğrulaması yapması için gönderilir.
<!DOCTYPE html>
<html>
    <head>
        <title>Kullanıcı Kontrolü</title>
    </head>
    <body>
        <form action="keygen.php" method="post">
            Kullanici Adi: <input type="text" name="text">
            Kodlama: <keygen name="key">
            GONDER:<input type="submit" name="submit" >
        </form>
    </body>
</html>
Bu özellik Chrome, Safari, Firefox ve Opera tarafından desteklenmektedir. 

<output> Elementi: Bir işlemin sonucunu temsil eder. Yani formdaki elemanların değerleri kullanılarak bir hesaplama yapılır ve bu hesaplamanın sonucu yine formda kullanılacak olursa output elemanı kullanılır. 
<!DOCTYPE html>
<html>
<body>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

</body>
</html>
Bu özellik Chrome, Safari, Firefox ve Opera tarafından desteklenmektedir.

Hristiyan Orta Çağı ve Augustinus

FELSEFE Ders Notları 4
Tarih Felsefesi 1
Hristiyan Orta Çağı ve Augustinus

Orta Çağ Kültürünün ve Felsefesinin Temel Özellikleri
Plotinos: Yeni Platonculuk adı verilen akımın başlıca filozofudur. Mistik - Panteist bir düşünce ortaya atarak her türlü maddeciliğe tutarlı biçimde karşı çıkmıştır.  Geliştirdiği düşünceler için her zaman Platon'u model aldığını ve öğretisini Platon'un felsefe sisteminden yola çıkarak oluşturduğunu ifade eden düşünürdür. Platinos'a göre gerçek, maddeden oluşmaz; salt tinsel niteliktedir. 

Plotinos Panteizmin felsefe tarihinde bilinen başlıca temsilcilerinden biridir.

Panteizm: Kökeni Yunancaya dayanan, dilimize tüm tanrıcılık biçiminde de çevrilen metafizik anlayıştır. Panteizmde, her şey Tanrı'nın bir parçası olarak kabul edilir, Tanrı her şeydir ve her şey Tanrı'dır. Tanrı doğada, nesnelerde, insan dünyasında vardır.

Platinos'a göre tüm var olanlar, "Bir"in kendisinden taşması sonucu il Akıl'ı, onun evren ruhunu, evren ruhunun tek tek ruhları ve son olarak da ruhların maddeyi meydana getirmesi sayesinde oluşmuşlardır.

Türüm Teorisi - Sudür Teorisi: Varlık hiyerarşisinde en alt basamak olarak kabul edilen maddi her şey, aslında Bir'den bir zerre taşımaktadır düşüncesinin yer aldığı öğretidir.

HTML5 (Input) Tipleri

HTML Dersleri   
HTML5 (Input) Tipleri

HTML5 formlar için bir kaç yeni input tipine sahiptir. Bu yeni özellikler daha iyi kontrol ve doğrulama olanağı sağlar. HTML5 ile gelen bu yeni input tiplerini gelişmiş tarayıcılar destekler. Ancak desteklemeyen tarayıcılar bu yeni inputları normal text alanları gibi görmektedir. Şimdi HTML5 ile birlikte gelen input tiplerini birlikte inceleyelim..

color Input Tipi: Giriş alanının bir renk içermesi için color kullanılır. 
<!DOCTYPE html>
<html>
<body>

<form action="#">
  Bir renk seçin: <input type="color" name="renksec"><br />
  <input type="submit">
</form>

</body>
</html>
Bu özellik Chrome ve Opera tarafından desteklenmektedir.

date Input Tipi:  Tarih seçmemize yardımcı olur.
<!DOCTYPE html>
<html>
<body>

<form action="#">
  Doğum günü: <input type="date" name="dogumgunu">
  <input type="submit">
</form>

</body>
</html>
Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir.

datetime Input Tipi: Tarih ve Saat seçmemize yarar.
<!DOCTYPE html>
<html>
<body>

<form action="#">
  Tarih ve Saat: <input type="datetime" name="tarihsaat">
  <input type="submit">
</form>

</body>
</html>
Bu özellik Safari ve Opera tarafından desteklenmektedir.

datetime-local Input Tipi: Bir tarih ve saat seçmenizi sağlar (time zone olmadan).
<!DOCTYPE html>
<html>
<body>

<form action="#">
  Toplantı Günü (tarih ve saat): <input type="datetime-local" name="tdaytime">
  <input type="submit">
</form>

</body>
</html>
Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir.

email Input Tipi:  Form giriş alanında bir e-posta adresi olması gerektiğinde kullanılır.
<!DOCTYPE html>
<html>
<body>

<form action="#">
  E-Posta: <input type="email" name="eposta">
  <input type="submit">
</form>

</body>
</html>
Bu özellik Chrome, Firefox, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

month Input Tipi:  Kullanıcının bir ay ve yıl seçmesine olanak verir.
<!DOCTYPE html>
<html>
<body>

<form action="#">
  Ay ve yıl: <input type="month" name="Ayyil">
  <input type="submit">
</form>

</body>
</html>
Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir.

number Input Tipi: Input alanı numerik bir değer gerektirdiği zaman kullanılır. Ayrıca hangi sayıların kabul edilebileceğini belirtebilirsiniz.
<!DOCTYPE html>
<html>
<body>

<form action="#">
  Miktar girin (10 ve 20 arasında): <input type="number" name="quantity" min="10" max="20">
  <input type="submit">
</form>

</body>
</html>
Bu özellik Chrome, Safari ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

search Input Tipi:  Arama işleri için search tipi giriş kullanılır. (bir search alanı tipik bir metin (text) alanı gibi davranır)
<!DOCTYPE html>
<html>
<body>

<form action="#">
  Google'da ara: <input type="search" name="googlesearch"><br />
  <input type="submit">
</form>

</body>
</html>
Bu özellik Chrome ve Safari tarafından desteklenmektedir.

url Input Tipi: Bir giriş alanı bir URL bağlantısı içerecekse kullanılır. Bu özellik form gönderildiği sırada doğrulanır. 
<!DOCTYPE html>
<html>
<body>

<form action="#">
  Ana sayfanızı ekleyin: <input type="url" name="anasayfa">
  <input type="submit">
</form>

</body>
</html>
Bu özellik Chrome, Firefox ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

range Input Tipi: Belirli bir aralıkta olan bir sayıyı seçmenizi sağlar Hangi sayıların kabul edilebileceğini belirtebilirsiniz: 
<!DOCTYPE html>
<html>
<body>

<form action="#" method="get">
Puanlar: 0<input type="range" name="points" min="1" max="10">10
<input type="submit">
</form>

</body>
</html>
Bu özellik Chrome, Firefox ve Opera tarafından desteklenmektedir. IE tarafından v9 öncesinde desteklenmemektedir.

NOT: Kullanmış olduğunuz web tarayıcının HTML5 desteğini html5test.com adresine girerek test edebilirsiniz.

24 Temmuz 2015 Cuma

HTML5 Yeni Semantik Elementler

HTML Dersleri  
HTML5 Yeni Semantik Elementler

HTML5'in özellikleri incelendiğinde, birçok yeni etiketin eklendiğinden bir önceki HTML5 Giriş dersinde kısaca bahsetmiştim. Bu dersimizde semantik (anlamsal) etiketlerden bahsedeceğim.

Peki nedir bu semantik ve semantik olmayan elementler. Semantik Elementler kısaca anlamı olan elementler. Anlamdan kasıt semantik bir element hem tarayıcıya hem de geliştiriciye kendisinin anlamını açıkça belirten element demektir. Daha basit açıklamak gerekirse <form>, <table>, ve <img> elementleri içeriği açıkça belirtirler yani birer semantik elementtirler. Semantik olmayan elementlere ise <div> ve <span> gibi içerik hakkında bir şey söylemeyen elementleri örnek verebiliriz.

Klasik HTML ve Semantik HTML5 Sayfa Yapıları
Günümüzde bir çok HTML sayfası resimdeki HTML sayfa yapısı standardında kodlanmıştır. HTML5 buna daha anlamlı bir çözüm buluyor. Bu hem Tarayıcı, hemde sitenizi indexleyen botlar için daha anlamlı bir yapı demek oluyor.

<header>: Sitenin en üst kısmını içine alır.
<nav>: Menüler içindir.
<section>: Genel bölümleme öğesidir.
<article>: Makale, deneme tarzı yazıları kapsar.
<aside>: Ana içerikten ayrı yazılan kısımdır.
<figure>: Çeşitli medya içeriği gruplarını belirler.
<figcaption>: <figure> elementinin başlığını belirler.
<footer>: Sitelerin en alt kısmını içine alır.
<details>: Detay bilgisi içerir.
<summary>: Detay bilgisi başlığını içerir.
<mark>: Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<time>: Tarih, saat verilerini kapsar.

<header> Elementi: <header> elementi bir sayfa veya bir kısmın (section) başlık alanını belirtir. Sadece başlık yazılacaksa <h1> den <h6> ya kadar olan başlıklardan biri yeterlidir. Başlığı temsil eden başka öğelerde varsa <header> etiketi kullanılmalıdır. Bu etiket bir sayfada birden fazla kullanılabilir.
<header>
 <h1>Başlık Alanı</h1>
 <h2>Sitemizin Tanımı</h2>
</header>
 
<article>
  <header>
    <h1>Tarayıcılar</h1>
  </header>
  <p>Chrome, Internet Explorer, Firefox</p>
</article>

<nav> Elementi: Navigasyon bağlantıları olan sayfalar için kullanılır ama sayfadaki tüm linkler bu element içinde olmak zorunda değildir. Gezinti bağlantıları, menüler veya içerik listesi...
<nav>
<a href="/html/html5-giris.html/">HTML5 Giriş</a><br>
<a href="http://www.google.com/">GOOGLE</a><br>
</nav>

<section> Elementi: Genel bölümleme öğesidir. <section> elementi içinde içinde başlığı ve bir yazısı olan bir makale olabilir. Eğer section elementi bir başlık ile başlamamışsa yanlış kullanılmış demektir. İstisnası aside veya nav yerine kullanılan section lardır.
<section>
  <h1>Bölüm 1</h1>
  <p>Bu bölüm personel listesini içermektedir.</p>
</section>

<article> Elementi: Bir makale ya da yazı alanını temsil eder. Kullanılabileceği örnekler; Blog Sayfalarındaki yazılar, Haber'in özeti, yorumlar, makaleler vs. gibi.
<article>
  <header>
   <h2>Makale Başlık</h2>
   <p><time datetime="2015-07-24T22:29:26+00:00">24-07-2015</time></p>
  </header>
  <p>Makale yada özetin bulunduğu bölüm</p>
</article>

<aside> Elementi: <aside> elementi yan menü olarak kullanılır. <aside> onu kapsayan içerikle yüzeysel bir bağlantısı olan içeriğe denir.
<article>
  <h2>C Programlama Dersleri</h2>
  <p>C Programlama Dersleri Konunun Anlatımı</p>
    <aside>
      <!--Bu bölüm yazı ile doğrudan ilişkilidir ama yazının devamı değildir -->
      <h3>Benzer Dersler</h3>
      <ul>
        <li>C Programlama Değişkenler</li>
        <li>C Programlama Veri Tipleri</li>
      </ul>
    </aside>
</article>
<aside>
  <!--Bu bölüm yazı ile doğrudan ilişkili değildir. Sitenin kendisiyle ilişkisi vardır. -->
  <h2>Kategoriler</h2>
    <ul>
      <li><a href="/cprogramlama/">C Programlama</a></li>
      <li><a href="/sql/">SQL</a></li>
      <li><a href="/html/">HTML</a></li>
      <li><a href="/php/">PHP</a></li>
    </ul>
</aside>

<figure> Elementi:  Figure elementi kod tarayıcı tarafından yorumlandığında, ekranda görsel olarak bu koda ait herhangi bir nesne göremezsiniz yani bir UI'e (User Interface / Kullanıcı Arayüzü) sahip değildir. Figure resim (img), çizim (svg) gibi elemanları belirtmek için kullanılan etikettir. Arama Motoru Örümcekleri tarafından kaynak kodun okunmasını kolaylaştırır.
<figure>  
     <img src="resim1.jpg" alt="Resim Açıklaması"/>  
     <img src="resim2.jpg" alt="Resim Açıklaması"/>  
     <img src="resim3.jpg" alt="Resim Açıklaması"/>  
</figure>  

<figcaption> Elementi: <figure> etiketinin başlığını tanımlamamızı sağlar, figure kullanılan bir kodda figcaption kullanmak zorunda değilsiniz, w3c açısından böyle bir mecburiyet yok.
<figure>  
    <img src="resim1.jpg" alt="Resim Açıklaması"/>  
    <img src="resim2.jpg" alt="Resim Açıklaması"/>  
    <img src="resim3.jpg" alt="Resim Açıklaması"/>  
    <figcaption>Buraya resimlerle ilgili açıklama girilir.</figcaption>  
</figure>   

<footer> Elementi: Bir sayfa veya bir kısım için alt bilgi belirten bölümdür. <footer> elementi genelde sitenin / yazının yazarını, telif hakkını, iletişim bilgileri vb. içerir. Bir sayfada bir kezden fazla kullanılabilir.
<footer>
  <p>Yazan: İbrahim BAYRAKTAR</p>
  <p><time pubdate datetime="24-07-2015"></time></p>
</footer>

<details> Elementi: Sayfa içindeki uzun yazılarımızı kategorize etmek için kullanırız. <summary> elementi ile başlık bilgisi girilir ve details ile içerik belirlenir.
<details>
  <summary>Copyright 2013-2015.</summary>
  <p> - by İbrahim BAYRAKTAR. Tüm Hakları Saklıdır.</p>
  <p>Bu web sitesindeki tüm içerik ve grafikler .....lisansı ile korunmaktadır.</p>
</details> 

<mark> Elementi: Bazen cümle içindeki bir kelimeyi ya da sözcük öbeğini fosforlu kalemle çizilmiş gibi önplana çıkartmak isteyebiliriz. Bunun için <mark> etiketini kullanabiliriz.
<p>Bu cümledeki vurgulanmış kelime <mark>cümle</mark>dir.</p>

<time> Elementi: Gregoryan takvimine göre saat veya tarih tanımlar. <time> etiketinin tarayıcılar üzerinde görsel olarak bir etkisi yoktur.
<p>Her sabah <time>07:00</time> gibi kalkarım.
<p>Özel bir gün <time datetime="2016-06-21">Babalar Günü</time>'ne az bir zaman kaldı.</p>

HTML5 Elementler ile ilgili Faydalı Linkler

Copyright 2013-2017 | İbrahim BAYRAKTAR /dev/null Web Günlüğü