HTML5 İLE GELEN YENİLİKLER

Merhaba arkadaşlar. Önceki HTML5 derslerimizde HTML5 Nedir, faydaları nelerdir? ve HTML’te yapısal etiketler konularını işlemiştik. Bugünkü dersimizde HTML5 ile gelen yeniliklere değineceğiz.

HTML5 ile sanal dünyamızda ne gibi değişiklikler oldu?

• HTML5 sayesinde sitelerimize animasyon ekleyebiliyoruz.
• Yüklemek istediğimiz videolar daha kalite bir şekilde tarayıcı ekranında görüntüleniyor.
• Kullandığımız tarayıcıların daha hızlı çalışmasını sağlıyor.
• Aynı anda birden fazla site bağlantısı gerçekleştirebiliyoruz.
• Bilgisayardan istediğimiz dosyayı sürükle bırak özelliğini kullanarak web sitesine yükleyebiliriz.
• İnternet bağlantısı olmadan web sitesindeki dosyaları tarayıcı ekranında görüntülenmesini sağlıyor.

Aklıma gelenleri sizlerle paylaştım. HTML5 ile gelen yenilikleri arttırabiliriz.

HTML5 İle Gelen Etiketler

HTML5’te yapısal etiketler yazısında bahsetmediğim etiketlerden bahsedeceğim.

•  <canvas>, etiketi javascript sayesinde grafiksel çizimler yapmak için kullanılır. Örneğin; daire, çember, dikdörtgen vb. şekiller oluşturulabilir. <canvas> etiketi tarayıcı ekranında dikdörtgen bir şekle sahip. Herhangi bir kenarlığa sahip değil.

 <canvas style="border: 1px solid red;" ></canvas>

Örneğimizde genişlik ve yükseklik değerlerini vermedik ve göründüğü gibi tarayıcı ekranında dikdörtgen şekli oluştu.

• <audio>, HTML5 öncesinde sayfada ses oynatmak için eklenti kullanmamız gerekiyordu. HTML5 sayesinde eklenti kullanmadan sayfada ses oynatma işlemi gerçekleştiriliyor.

<audio controls="controls">
  <source src="ses.ogg" type="audio/ogg" />
  <source src="ses.mp3" type="audio/mpeg" />
  Tarayıcınız audio etiketini desteklemiyor.
</audio>

Controls özelliği ses dosyası için çalma, durdurma gibi kontroleri eklemede kullanılır. <source> etiketi dosya kaynağını belirler. Tarayıcı bu kaynaklardan desteklediği dosya kaynağını açar.

• <progress>, bir görevin, işlemin ilerleme veya tamamlanma sürecini kullanıcıya görsel olarak göstermemizi sağlar, iki standart özelliği vardır. Max; Görevin ya da işlemin bitirilme durumunu tanımlar. Value; Görevin ya da işlemin şu anki durumunu tanımlar. Örneğin;

<p>1. Durum:  
   <progress value="25" max="100"> </progress>  
</p>  
<p>2. Durum:  
   <progress value="50" max="100"> </progress>  
</p>  
<p>3. Durum:  
   <progress value="75" max="100"> </progress>  
</p>  
<p>4. Durum:  
   <progress value="100" max="100"> </progress>  
</p>  

• <caption>, etiketi tablo başlığını tanımlar. Her tabloda yalnızca bir tane başlık tanımlanabilir. Basit ir örnek verecek olursak;

 <table border="1px">
   <caption>Kurs İçerikleri</caption>            
     <tr>          
       <th>Dersler</th>            
        <th>Süre</th>            
      </tr>            
      <tr>            
        <td>HTML Dersleri</td>               
        <td>120 Saat</td>
      </tr>    
       <tr>            
          <td>CSS Dersleri</td>               
          <td>100 Saat</td>
      </tr>            
</table>

• <embed>, etiketi sayesinde sayfamıza başka bir sayfadan kaynak, içerik, eklenti gibi bir çok özelliği sayfamıza dahil etmemizi sağlayan bir etikettir. Diyelimki farklı bir sayfada bulunan bir resmi sitenizde kullanmak istiyorsunuz.  <embed> etiketimiz içinde src=”” ile çekmek istediğiniz alanın url adresini belirtiyorsunuz. İsterseniz CSS ile biçimlendirebilsiniz.

• <details>, etiketi kullanıcı tarafından görüntelenip gizlenebilen ek bilgiler tanımlanmasını sağlar.

• <summary>, etiketi <details> etiketinin başlığını tanımlar. Başlık bilgisi içeriğin gösterilip/gizlenmesi için tıklanabilirdir.

<details>
   <summary>Göster / Gizle</summary>            
   <p>Başlığa tıklandığında bu içerik gizlenir veya gösterilir.</p>   
</details>
<details>
   <summary>Göster / Gizle</summary>            
   <p>Başlığa tıklandığında bu içerik gizlenir veya gösterilir.</p>   
</details>

• <time>, etiketinin tarayıcı üzerinde görsel açıdan bir etkisi yoktur. <time> etiketi Gregoryan takvimine göre saat veya tarih tanımlar. Örneğin;

<p>Her sabah <time>10:00</time> gibi kalkarım.

• <mark>, yazıda vurgulamak istediğimiz parçaları mark etiketi içine yazabiliriz. Örneğin;

<p>HTML derslerini <mark>tekrar etmeyi</mark> unutma.</p>

• <hgroup>,  etiketi başlık etiketlerinin gruplandırılması için kullanılır.Bu etiket <h1> … <h6> başlıkları, başlıklar alt başlıklara sahipse gruplandırmak için kullanılır.

• <datalist>, etiketi <input> etiketi için önceden tanımlanmış açılabilir liste tanımlar. <datalist> etiketi “otomatik tamamlama” özelliğini tanımlar. Kullanıcı veri girişi yaptığında önceden tanımlanmış açılabilir liste gözükecektir. <input> etiketine bağlanırken input etiketinin list özelliği kullanılır. Örneğin;

<input list="ProgramlamaDilleri">
   <datalist id="ProgramlamaDilleri">         
     <option value="PHP">         
     <option value="JAVASCRİPT">         
     <option value="C#">         
     <option value="C++">         
     <option value="RUBY">         
   </datalist>