HTML5’e Giriş

Hazır programlar olmadan çalışan, koda hakim, gerçek web tasarımcıların HTML5‘e geçişleri görmek beni mutlu ediyor. Eski tarayıcılara da yavaş yavaş kullanıcılarımızın veda etmeleri ve bilinçlenmeye başlamalarıyla artık biraz daha rahat hareket edebilmeye başladık. Bu rahatlıktan kastım yeni teknolojileri kullanabilmek tarafında tabii ki. Bilgi ve pratik anlamda geri olmasak da, daha önce de bir yazıda belirttiğim gibi ülkece teknolojinin kullanımı konusunda geriden geliyorduk. Neyse ki artık bu değişiyor.

 

Önce biraz genel bilgi

Bildiğiniz (ya da bilmediğiniz) gibi 1997’de HTML 3.2, 2000’lerin başında HTML 4.01 ile çalışıyor ve pek fazla standarda bakmadan – sayfadaki görünüme bakarak sayfalar üretiyorduk. Çünkü ne sayfaların hızlı açılması, ne de Google’ın puanlamaları vardı o zamanlar. Daha sonra XHTML 1.0 girdi hayatımıza. “O öyle yazılmaz, bunun bir standardı var!” diyordu bize. Aynı dönemlerde de Google’daki sıralamalar, puanlamalar ve diğer detaylar girdi hayatımıza. Tasarımcıların artık dikkat etmeleri gereken daha çok detay ve ufak nüans farklılıkları vardı. Son olarak da birkaç yıl önce modern tarayıcıların da hızla gelişmeleri sayesinde 2012’de HTML5 ile (tam adıyla xhtml version 5.0) ile tanıştık.

HTML5 ile bazı şeyler artık daha net, daha kolay ve hızlı çalışıyor. Engelliler için (görme – işitme – duyma) artık erişilebilirlik ile ilgili daha çok hareket imkanı sağlanıyor ve tabii meşur “flashsız video izleme” imkanı geliyor. Hem ayrıca internet dünyası artık sadece masaüstü bilgisayarların egemenliğinden çıkıp boy boy tabletler ve cep telefonlarına da girdi ve responsive tasarım her zamankinden önemli. HTML5’de responsive tasarımlarda css desteğiyle birlikte büyük kolaylıklar ve avantajlar getiriyor.

her-cihaz-icin-html5

Diğer taraftan artık bazı html etiketleri hayatımızdan çıkarken yenileri geldi. Gelin önce bunlara bir göz atalım.

 

HTML4’ten HTML5’e Geçiş

Az önce de bahsettiğimiz gibi artık bazı alışılmış HTML etiketlerini kullanmayacağız. Kullansak ne olur? Hiç bir şey olmaz, çalışmaya devam eder, ama sayfamız Validator dediğimiz onay süreçlerinde HTML5 olarak görünmek yerine, artık standartlara uymayan – melez bir sayfa olarak tanımlanacaktır.

Çıkarılan etiketlere ve yerlerini alanlara göz atarsak, şöyle bir tabloyla karşılaşıyoruz:

Html 4 etiketi Yerine kullanılacak
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame> tamamen kalkıyor
<frameset> tamamen kalkıyor
<noframes> tamamen kalkıyor
<strike> CSS
<tt> CSS

Tabii, yukarıda da bahsettiğimiz gibi HTML5 ile hayatımıza giren yeni etiketlerimiz de var. Bunlar sayfadaki görevleri daha iyi nitelerken, standartlaşmaya da büyük katkı sağlıyor.

HTML4 Kullanımı HTML5 Kullanımı
<div id=”header”> <header>
<div id=”menu”> <nav>
<div id=”content”> <section>
<div id=”post”> <article>
<div id=”footer”> <footer>

html5-etiketleri
 

Doküman tipi seçimi

Bildiğiniz gibi bir web sayfası her zaman hangi doküman tipiyle yazılacağı <html> etiketinden önce belirtilerek başlar. Html4’te şu şekilde olan doküman tip tanımı:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

artık yerini HTML5 ile daha sade olan

<!DOCTYPE html>

etiketine bırakıyor. Bu satır en başta tanımlanarak tarayıcıya “Ben bir HTML5 sayfasıyım” diyor.

 

HTML5 Kodlaması

Dil kodlaması için Html4’te kullandığımız standart satır olan

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

ise yerini yine daha sade olan

<meta charset="utf-8">

tanımına bırakıyor.

 

Peki Ya Eski Tarayıcılar?

Tamam, biz kodumuzu yeniliyoruz ama tüm kullanıcılarımız tarayıcılarını yenilemedi. Onlarda bu yeni kodların çalışmasını nasıl sağlayacağız?

Google’ın Internet Explorer gibi eski ve kullanışsız tarayıcılarda da HTML5 kodlarının çalışabilmesi için oluşturduğu Shiv eklentisini sayfamıza ekleyerek, sayfamızı ziyaret eden tarayıcıya bu işi öğretebiliyoruz.

Shiv’i kullanmak için şu yapıyı kullanmak yeterli:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Bu sadece bir giriş – genel tanıtım amaçlı bir yazı olduğundan şimdilik daha fazla detaya girmiyorum, ancak yukarıda bahsettiğim yeni etiketlerin kullanımlarına örnek vermek amacıyla basit bir sayfa hazırlıyorum. Bittiğinde bu yazıyı güncelleyerek tam buradan paylaşacağım :)

Eğer bu yazıyı faydalı bulduysanız paylaşmaktan lütfen çekinmeyin. Ne kadar çok tasarımcı arkadaş HTML5’i kullanırsa, gelişim o kadar rahat olacaktır ;)

Görüşmek üzere.

Altuğ.

 

Beğendiniz mi?

1 Yorum

  1. Simuzer   •  

    Yazınızı beğedim. Devamını bekliyorum :)

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