HTML5 Nedir?
HTML5, HTML’nin en yeni sürümüdür.Bu terim iki şeyi ifade eder. Biri, yeni öğelere ve niteliklere sahip yenilenmiş ve yükseltilmiş HTML dilinin kendisidir. İkincisi, yeni bir video türü gibi HTML’nin bu yeni güncellemesiyle çalışan ve daha karmakarışık ve detaylı web siteleri ile uygulama yazılımları oluşturmanıza olanak tanıyan daha geniş bir teknoloji alanıdır.
HTML’nin yıllar içinde nasıl gelişip yol aldığını anlamak için HTML ve HTML5 arasındaki farklara bakabiliriz aslında.
HTML5’teki en büyük değişiklik, artık sadece bir web sayfasında içerik görüntülemekle ilgili olmamasıdır. Aynı zamanda, verileri bir uygulama içinde yerel olarak depolamanın yanı sıra internet üzerinden diğer cihazlarla (akıllı telefonlar gibi) iletişim kurmakla da ilgilidir. Örneğin, uygulamanızın oturum açma bilgileriniz gibi bir şeyi hatırlamasını istiyorsanız, başka birinin her kullanıcı hesabı için erişim haklarını kontrol ettiği sunucu tarafı bir veritabanına güvenmek yerine yerel olarak bir HTML5 uygulamasında depolayabilirsiniz (bu, her zaman bir tür giriş işlemi olur).
Bir diğer büyük değişiklik ise, bir uygulamada yerel olarak depolanan verilerle çalışırken (veya hatta internet üzerinden uzak verilerle çalışırken) sunucu tarafı kodu yerine JavaScript kullanabilmenizdir.
Bir biçimlendirme dili kullanarak web sayfaları tasarlamak için kullanılmaktadır.Köprü metni, web sayfaları arasındaki bağlantıyı tanımlar. Web sayfalarının yapısını tanımlayan etiket içindeki metin belgesini tanımlamak için bir biçimlendirme dili kullanılır. Bu dil, bir makinenin onu anlayabilmesi ve metni buna göre değiştirebilmesi için (bilgisayar notunda) metne açıklama eklemek için kullanılır. İşaretleme (örneğin HTML) dillerinin çoğu, insan tarafından okunmasına olanaklıdır.Web sayfalarındaki içeriği yapılandırmak ve sunmak için kullanılır.
HTML5, 2014 yılında World Wide Web Consortium (W3C) tarafından başlatılan HTML’nin beşinci sürümüdür. HTML 4 ve XHTML 1 gibi önceki sürümlere kıyasla birçok yeni öğe içerir; bazı öğeler de bu sürümden kaldırılmıştır. Yeni öğeler, kodunuzdaki her öğe hakkında daha fazla anlamsal bilgi sağlayarak web sitelerini yapılandırmada daha fazla esneklik sağlayan başlık, altbilgi, makale, bölüm, gezinme vb. özellikleriyle HTML e göre oldukça gelişmiş bir yapıya sahiptir.
HTML ve HTML5 incelemesi
HTML5, World Wide Web’in temel biçimlendirme dili olan HTML’nin en son yinelemesidir. Geliştiricilerin çevrimdışı çalışan, yüksek çözünürlüklü video ve animasyonları destekleyen ve konum olarak nerede olduğunuzu tespit edebilecek web uygulamaları oluşturmasına olanak tanıyan bir dizi yeni özelliğe sahip olması en dikkat çekicidir. Bu yeni özellikler, web geliştiricilerinin, Flash veya diğer tescilli teknolojileri desteklemeyenler de dahil olmak üzere herhangi bir cihazda çalışan uygulamalar oluşturmasını mümkün kılar.
HTML’nin ilk versiyonu 1993 yılında Tim Berners-Lee tarafından yaratıldı. HTML bilimsel belgeleri tanımlamanın anlamsal bir yolu olma amacıyla hazır hale getirildi. O zamandan beri HTML, neredeyse her şeyi tanımlayabilen güçlü bir dil haline geldi. Ancak yine de sınırlamaları vardı: web geliştiricileri sitelerine HTML4’te desteklenmeyen içerik veya özellikler eklemek isterse, Adobe Flash gibi (kullanıcıların tarayıcı eklentileri yüklemesini gerektiren) standart olmayan özel teknolojileri kullanmaları gerekirdi.
– HTML5, kutudan çıktığı anda video ve sesi desteklerken, HTML yalnızca metni destekler.
– HTML5 çoğu modern tarayıcıyla çalışır, HTML ise yalnızca Firefox ve Mozilla ile çalışır.
– HTML’de JavaScript, tarayıcı arayüzüyle aynı iş parçacığında çalışır; HTML5’te, web geliştiricilerinin API’leri sayesinde JavaScript’i yan yana çalıştırabilirsiniz.
– HTML’de vektör grafikleri Silverlight veya Flash tarafından desteklenir; HTML5’te vektör grafikleri varsayılan olarak yerel olarak desteklenir; SVG kullanabilirsiniz!
– HTML4’te web uygulamalarına bağlantılar için bir uygulama etiketi kullandık; HTML5’te, istemci ve sunucu arasında tam çift yönlü iletişim kurmamızı sağlayan yeni bir tür bağlantı etiketi kullanıyoruz.
HTML5’te neler yeni?
HTML5’e geçiş yapmak için birçok neden var!
HTML5, aşağıdakiler de dahil olmak üzere başlıca hedeflerle tasarlanmıştır:
- Kodun kullanıcılar ve ekran okuyucular için daha kolay okunmasını sağlamak,
- HTML, CSS ve JavaScript arasındaki örtüşmeyi azaltmak,
- Tarayıcılar arasında tasarım duyarlılığını ve tutarlılığını desteklemek,
- Flash veya diğer eklentiler.
HTML5 ile Responsive web tasarımı!
Responsive diğer bir deyişle duyarlı web tasarımları günümüz de oldukça önemlidir. Responsive web tasarımı, bir web sitesinin birden çok cihazda düzgün çalışmasını sağlamak için HTML ve CSS kullanan bir tekniktir.Responsive web tasarımınız yoksa siteniz mobil cihazlarda kötü görünür ve potansiyel müşterileri uzaklaştırabilir.Responsive web tasarımı, kullanıcıların herhangi bir ekran boyutunda gezinmesi ve kullanması için kolay olmalıdır.
Web siteleri, masaüstü ve dizüstü bilgisayarlardan cep telefonlarına ve tabletlere kadar çeşitli cihazlarda görüntülenmek üzere tasarlanmıştır. Hem duyarlı tasarım hem de uyarlanabilir tasarım, sitenizin tüm bu ekranlarda iyi görünmesini sağlamanıza yardımcı olsa da, bu soruna yaklaşımlarında farklılık gösterirler.
Duyarlı tasarım, bir sayfanın düzenini, onu görüntüleyen cihaza göre uyarlamak için medya sorgularını kullanır. Uyarlanabilir tasarım ise, sayfanın, onu görüntüleyen cihaza göre uyarlanabilen tek bir versiyonuyla başlar.
HTML5 ve Javascript
HTML5, dinamik ve etkileşimli web sayfaları oluşturmak için kullanılan bir programlama dilidir. Bu sayfaların dinamik ve etkileşimli olabilmesi için bir programlama diline ihtiyaçları vardır. Bugün kullanılan en yaygın dil JavaScript’tir. JavaScript, çalışması için HTML5’in içine yerleştirilebilir.
JavaScript’i bir HTML5 sayfasına gömmek için <script>…</script> etiketlerini kullanmanız gerekir. Bu etiketler, komut dosyanızın kodunu içerir veya içinde kod bulunan harici bir dosyaya başvurur.
HTML5’e nasıl başlamalıyım?
Web sitelerinizde HTML5’i kullanmak için öncelikli olarak HTML şablonu oluşturmanız önerilmektedir. Daha sonra bunu, ileriye dönük tüm gelecekteki projeleriniz için bir standart olarak kullanabilirsiniz.
Web projeleriniz için bir HTML şablonu oluşturabilmeniz için bu dosyayı satır satır oluşturma sürecini inceleyelim. Notepad++ gibi temel bir metin düzenleyiciyi kullanarak takip edebilirsiniz.
Notepad++’da yeni bir dosya oluşturup proje klasörünüzün içine index.html olarak kaydederek başlamak isteyeceksiniz (burası tüm dosyalarımızı depolayacağız).
Şimdi bu dosyaya bazı ortak kodlar ekleyelim, böylece çalışacak bazı temel yapılarımız olsun:
Kod: <html> <head> <meta charset=”UTF-8″> <title>Sitem</title> </head> <body></body> </html>
Bu kod, kullandığınız tarayıcıya HTML5 ile çalıştığımızı iletecek ve bu site için kullanılan karakter seti (UTF-8) hakkında bilgi verecektir.
Web sitenizi daha kolay erişilebilir hale getirmek için ilk yapmanız gereken belgenin türünü HTML5 olarak bildirmektir.
Bildirmek için, ilk satıra <!DOCTYPE html> yazımını ekleyin. HTML5, önceki HTML standartlarının yalnızca bir değişimi olduğundan, bu bildirime “5” eklemeye gerek yoktur.
Ardından, kök öğeyi tanımlayarak sisteme bildirin. Bu öğe hangi dilde yazacağınızı işaret ettiğinden, bir HTML5 belgesinde yine <html> olacaktır.
Bir dil niteliği ekleyin ve bunu HTML öğesinin açılış etiketinde tanımlayın. Bir dil özniteliği olmadan, ekran okuyucular varsayılan olarak işletim sisteminin dilini kullanır ve bu da sayfanızdaki başlıkların ve diğer içeriğin yanlış telaffuz edilmesine neden olabilir. Bu özelliğin belirtilmiş olması, ekran okuyucu tanımlamaların belgenin hangi dilde olduğunu belirlemesini ve web sitenizi teknolojiyi etkili bir şekilde kullanma yeteneklerini sınırlayan diğer engelli kişiler için ve diğer herkes için daha erişilebilir hale getirmesini sağlar. Temelden profesyonele giden yolda eğitimlerimizle ilerleyebilirsiniz!