Blog

HTML5 (Hypertext Markup Language version 5), web üzerinde içerik oluşturmak ve yapılandırmak için kullanılan HTML standardının en son sürümüdür. Bu, web geliştirmede temel bir teknoloji olup, tüm büyük tarayıcılar tarafından desteklenmektedir. HTML5, önceki sürümleri olan HTML 4.01 ve XHTML 1.0'a göre birçok yeni özellik ve geliştirmeyi içermektedir.

1. Semantik Elemanlar: HTML5, '<article>', '<section>', '<nav>', '<header>', '<footer>', '<aside>', '<figure>' ve '<figcaption>' gibi bir dizi yeni semantik eleman içerir. Bu elemanlar içeriğin yapısını ve anlamını belirlemeye yardımcı olur.
2. Ses ve Video: HTML5, üçüncü taraf eklentilere gerek olmadan ses ve video içeriği gömmek için doğal destek sağlar. '<audio>' ve '<video>' elemanları, medya dosyalarını doğrudan web sayfalarına gömmek için kullanılır.

               
   
                   
   
                       html
                   
                   
                       
                   
   
                       
                           
                               <audio controls>
                                  <source src="ses.mp3" type="audio/mp3">
                               Tarayıcınız ses etiketini desteklemiyor.
                               </audio>
                               <video width="400" height="300" controls>                          
                               <source src="video.mp4" type="video/mp4">
                               Tarayıcınız video etiketini desteklemiyor.
                             </video>
                             
               
           
               
           

3. Canvas: '<canvas>' elemanı, JavaScript kullanarak grafik ve animasyonlar için bir çizim yüzeyi sağlar. Genellikle oyunlar, grafikler ve etkileşimli içerikler oluşturmak için kullanılır.

               
   
                   
   
                       Html
   
                       
                   
                   
   
                       
                           <canvas id="benimCanvas" width="200" height="100"></canvas>
                       
                   
               
           

4. Yerel Depolama ve Oturum Depolama: HTML5, localStorage ve sessionStorage API'larını içerir. Bu API'lar, kullanıcının tarayıcısında veri depolamak için kullanılır. Bu, oturumlar arasında veri saklamak için bir yol sağlar.

               
   
                   
   
                       javascript
   
                       
                   
                   
   
                       
                           // Veriyi yerel depolamada sakla
                           localStorage.setItem("anahtar", "değer");
                           
                           // Veriyi yerel depolamadan al
                           var veri = localStorage.getItem("anahtar");
                           
                   
               
           

5. Coğrafi Konum: HTML5, web sitelerinin kullanıcının coğrafi konumunu Geolocation API aracılığıyla talep etmelerine olanak tanır. Bu, konum tabanlı hizmetlere ihtiyaç duyan uygulamalar için faydalıdır.

               
   
                   
   
                       javascript
   
                       
                   
                   
   
                       
                           if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(showPosition);
                            } else {
                           console.log("Geolocation is not supported by this browser.");
                         }
                         
                         function  showPosition(position) {
                           console.log("Latitude: " + position.coords.latitude +
                             ", Longitude: " + position.coords.longitude);
                         }
                         
                   
               
           

6. Web Workers: HTML5, web Workers kavramını tanıtarak geliştiricilere ana sayfadan bağımsız olarak arka planda betik çalıştırma olanağı sağlar. Bu, kaynak yoğun görevleri ayrı iş parçacıklarına aktararak daha iyi performans sağlar.

               
   
                   
   
                       javascript
   
                       
                   
                   
   
                       
                           // Yeni bir worker oluştur
                           var worker = new  Worker("worker.js");
                           
                           // Worker gelen mesajları dinle
                           worker.onmessage = function(event) {
                           console.log("Message from worker: " + event.data);
                           };
                           
                           // Worker mesaj gönder
                           worker.postMessage("Hello from the main page!");
                           
                   
               
           

Bunlar, HTML5'te tanıtılan birkaç örnek özelliktir. Web geliştirme teknolojileri evrimleştikçe, HTML5 modern ve etkileşimli web uygulamaları oluşturmak için temel bir yapı taşı olarak kalmaya devam eder.