HTML5 ve CSS3


HTML web sayfaları oluşturmaya yarayan standart bir programlama dildir. HTML 5 ve CSS 3 gibi yeni teknolojiler web siteleriyle olan etkileşimimizi şimdiden değiştirmeye başladı. Peki bu yeni gelişmeler nedir ve biz internet kullanıcılarını nasıl etkileyecek gelin bakalım.

Öncelikle, HTML ve CSS nedir?

İnternet henüz yeniyken, web siteleri neredeyse sadece HTML ile geliştiriliyordu. Ancak bir siteyi sadece HTML ile biçimlendirmek zorlu bir çalışma ve yapabilecekleriniz de sınırlı. İşte bu noktada devreye CSS giriyor.

Açılımı Cascading Style Sheets (Stil Sayfaları) olan CSS, web tarayıcısına HTML sayfasının nasıl gözükmesi gerektiğini anlatan dosyadır. HTML web sitesinin iskeletidir. CSS ise sayfadaki belli elemanların nasıl gözükeceğini belirtir: Yazı fontları, font renkleri, arka plan stilleri vb. CSS web sitesi tasarlamayı kolaylaştırır. CSS öncesinde başlık, içerik, vb.nin nasıl gözükeceği ayrı ayrı HTML ile belirtiliyordu. CSS tek bir dokümanda değişiklik yapıp bu değişikliği tüm siteye uygulamaya olanak vererek tasarımcılara büyük esneklik ve kolaylık sağladı.

Sonraki adım: HTML 5 ve CSS 3

HTML 5 ve CSS 3, biçimlendirme dillerinin ulaştığı son noktadır. Şu an için HTML 5’in web sayfalarına video eklemeyi kolaylaştırması en dikkat çeken özelliği. Tabii HTML 5’in video ekleme dışında kullanıcılar ve geliştiriciler için pek çok gelişmiş özelliği bulunuyor.

Flash’sız Video ve Animasyon

HTML 5, internette Flash ya da Silverlight gibi eklentilere ihtiyaç duymadan video izleyebilmemizi sağlayacak. Peki bu konu neden bu kadar önemli? İlk olarak HTML 5 bedava ve Adobe Flash eklentisine ihtiyaç duymuyor. İkinci olarak sistem kaynaklarından kullandığı için bilgisayarınızı yavaşlatabilir. Gerçi şu an beta aşamasındaki Flash 10.1‘in donanımdan faydalanması bu hız problemini değiştirebilir. HTML 5’in video özelliği ise doğrudan tarayıcı içinde bulunuyor.

HTML5 video ile ilgili önemli bir nokta da giderek yayılması. Örneğin Safari, Chrome ve yeni çıkacak olan Internet Explorer 9, H.264 video formatını kullanan gömülü (embed) HTML 5 video desteğine sahip olacak. Diğer yandan Firefox şu an için Ogg Vorbis formatını kullanan HTML5 video desteği veriyor ama Firefox’un geliştiricileri H.264‘ün açık kaynak kodlu olmaması nedeniyle gelecekte lisans sorunu yaşanabileceğini düşünüyorlar.

HTML5 ve CSS3 web tasarımcılarının animasyonlar ve interaktif uygulamalar (oyunlar gibi) geliştirmelerini de kolaylaştırıyor. Tabii şu an için bu alanda Flash’ın yerini alması mümkün değil ama HTML 5 ve CSS 3 büyük birt potansiyele sahip.

Çevrimdışı Depolama: Web uygulamaları sahneye çıkıyor

Web uygulamaları giderek komplike bir hâle geliyor ve HTML5’in yeni özellikleri daha da gelişmelerini sağlayacak. HTML5 ile web uygulamaları bilgi saklayabilecekler, böylece internet araçları çevrimdışı olarak kullanılabilecek. Bu sayede kullanışlı web uygulamaları aracılığıyla e-posta, takvim vb. gibi bilgilerinize ulaşıp, bu bilgileri depolayabileceksiniz.

Online olduğunuzda bu uygulamalar daha hızlı yüklenecekler çünkü sayfanın yapısı tarayıcıda zaten kaydedilmiş olacak. Teorik olarak çevrimdışı iken web uygulamasında yaptığınız tüm değişiklikler online olduğunuzda da geçerli olacak. Örneğin Google Aralık ayında Web uygulamalarına HTML5’ten yararlanacağını açıkladı.

Çevrimdışı depolama sayesinde her sayfayı tek tek kaydetmeden hangi siteleri ya da site tiplerini önbelleğe almak istediğinizi belirleyebileceksiniz. Şu an bir sayfayı çevrimdışı olarak kaydetmek istediğinizde Dosya – Farklı Kaydet seçeneğini kullanmanız gerekiyor. Yeni sistem ile tarayıcının sizin belirlediğiniz tipte siteleri otomatik olarak kaydetmesini ayarlayabileceksiniz. Ayrıca bu yöntem ile yükleme sürelerini de artırmak mümkün olacak çünkü sayfanın bir bölümü zaten hafızada olacak.

Yeni Tasarım Araçları

HTML5 ve CSS3 ile web uygulamaları ve siteleri daha şık ve çekici olabilecek. HTML5’in yeni eklenen daha çok renk ve gradient, gölgelendirme, yuvarlak köşeler yapabilme ve tabii ki çevrim dışı depolama tasarımcıların çok daha kolay bir şekilde şık web siteleri oluşturmalarına olanak sağlayacak.

HTML5 Uyumluluğu

HTML5 ve CSS 3 henüz tamamlanmadı ama şimdiden web dünyasına etki etmeye başladılar bile. Örneğin Safari’nin ve Chrome’da HTML5 ve CSS3’ün geliştirme aşamasındaki sürümlerinden özellikler bulunuyor. Bu tarayıcıları kullanarak HTML5 kullanan CNN,The New York Times, YouTube (beta), ve Vimeo sitelerini inceleyebilirsiniz. Internet Explorer 8‘in HTML5 desteği oldukça sınırlı ama IE 9, h.264 video ve ses desteğine sahip olacak.

Şimdi isterseniz biraz da taglerdeki değişikliklere  göz atalım.

<video>

Video tagi web sitenize video klipleri kolayca eklemenizi saglayacak. Otomatik baslatma, döngüsel olarak çalistirma gibi özellikleri olan video elementi videonuzu etiketlemeniz için birçok özellik içeriyor.

<audio>

Audio tagi video elementi ile ayni sekilde kullaniliyor tek farki video degil ses dosyalarini sitenize eklemeniye yariyor.

Context menüler

HTML5 context menu tanimlamak için yeni metotlar içeriyor. Context menüler genellikle web sitelerinde kullanilmazlar fakat web uygulamalarinda kullanilan ve çok ise yarayan elementlerdendir.

HTML 5 ile gelen yeni elemenler:

  • <section>
  • <header >
  • <footer>
  • <nav>
  • <article>
  • <aside>
  • <figure>
  • <mark>
  • <time>
  • <meter>
  • <progress>

Ayrica HTML 5 ile yeni input (giris) tipleride geldi. Bunlar;

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

HTML 5 ile degisen veya devre disi kalan elementler:

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • s
  • strike
  • tt
  • u

 


Bu yazının içeriği, Deniz Nergis’in “Nedir bu HTML 5 ve CSS3?” başlıklı makalesi ile Mehmet Sabri KUNT’un “Html 5 ile Gelen Yeni Etiketler” başlıklı yazısından bir kısım bir araya getirilerek oluşturulmuştur.

Beğendiniz mi?

AKLINIZDAKİLERİ PAYLAŞIN, SORU SORUN veya YORUM YAZIN