UYARI: İnternet bir özgürlük ortamı, evet fakat her site gibi bu site de yayınına devam edebilmesi için reklam almak zorunda, ama büyük ihtimalle siz de reklam görmekten sıkıldığınız için AdBlock veya benzeri bir programı kurdunuz. Bu durum anlaşılır bir durum birçok kişi bunu yapıyor, fakat bu yapıldığı zaman da siteler masraflarını karşılayamadıkları için kapanmak zorunda kalıyor. Sitemiz AdBlock kullanan birini "Sen siteye girme" kardeşim diye engellemiyor çünkü özgürlük bunu gerektiriyor, siteyi seven zaten AdBlock'u kapatıp desteğini gösterir buna gerek yok, bu yüzden sitede özgürce dolaşacak sadece her dolaştığınız sayfalarda bu uyarı bulunacaktır....
Logo
mobilmenu
RenkliKodlar
HTML5 Tanıtımı | 30 Kasım 2016

HTML5 Tanıtımı


HTML5 'le bazı yeni etiketler hayata girdi bazı etiketler ise kısaltılıp daha anlaşılır ve kolaylaştırıldı evet ama dikkat etmemiz gerek bazıları da geçersiz oldu eski bildiğimiz bazı etiketler bu sürümde artık kullanılmayacak bu yüzden eğer HTML5 ile uyumlu sayfalar tasarlıyorsak bunlardan kaçınmamız gerekli.

HTML5 için DOCTYPE bildirimi çok basitleştirildi.
<!DOCTYPE html>

Karakter kodlaması (charset) bildirimi de çok basit oldu.
<meta charset="UTF-8">

Basit bir HTML5 örneği
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sayfa başlığı</title>
</head>
<body>
diğer kodlarımız
</body>
</html>Kopyala

Yeni HTML5 etiketleri arasında en ilgi çeken yeni HTML5 etiketleri şunlardır.
Body içerisinde kullanacağımız en faydalı olanları <header>, <footer>, <article>, ve <section>.
Form tagına eklenen en faydalı olanları number, date, time, calendar, ve range
Grafik işlelerinde hatta grafikler çizebileceğimiz <svg> ve <canvas>
Multimedya işlelerinde çok faydasını göreceğimiz <audio> ve <video> 

HTML4'te kullandığımız ancak HTML5'te desteklenmeyen Etiketler var bazılarına CSS veya başka yöntemlerle eskiden yaptığımız işlemi yinede yaptırabiliyoruz bunlar aşağıdaki tabloda belirtilmiştir.
Kaldırılan Etiket Alternatif kullanım
 <acronym> <abbr>
 <applet> <object>
 <basefont> CSS kullanın
 <big> CSS kullanın
 <center> CSS kullanın
 <dir> <ul>
 <font> CSS kullanın
 <strike> CSS, <s>, veya <del>
 <tt> CSS kullanın
 <frame> Kaldırıldı
 <frameset> Kaldırıldı
 <noframes> Kaldırıldı

Tablodaki bu etiketler IE 9 öncesi sürümlerde desteklenmez eğer sitenizi kullanan ziyaretçiler arasında eski tarayıcı kullananlar varsa bir alternatif olması için HTML5Shiv adında script geliştirilmiş IE9'dan önceki Internet Explorer sürümlerinde HTML5 öğelerinin stilini etkinleştirmek için bir JavaScript çözümü olan bu dosyayı <head> etiketi içine dahil etmeniz yeterli https://github.com/aFarkas/html5shiv adresinden son sürümü indirebilirsiniz veya dosyayı kendi sitenizde depolamak istemiyorsanız bir CDN (içerik dağıtım ağı) sitesinde bulunan sürüme başvurabilirsiniz adresi https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

Head etiketinde şu şekilde kullanılır ve sadece IE9 öncesi tarayıcılar tarafından okunur
.
<head>
  <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head>Kopyala

dikkat ettiyseniz burda <!--[if lt IE 9]> ile if else gibi işlemleri html içinde yapmış oluyoruz ve tarayıcı sürümüne göre dosyayı dahil ediyoruz veya etmiyoruz

HTML5 ile gelen tüm yeni etiketler


Aşağıdaki tabloda yeni HTML5 etiketlerin listesini ve bunların kullanım açıklamaları yer almaktadır.
 Etiketler Açıklama
 <article> Belgede bir makaleyi tanımlar
 <aside> İçeriği sayfa içeriğinden ayırır
 <bdi> Başka bir metinden farklı bir yönde biçimlendirilebilen bir metin parçasını tanımlar
 <details> Kullanıcının görüntüleyebileceği veya gizleyebileceği ek ayrıntıları tanımlar
 <dialog> Bir iletişim kutusu veya pencere tanımlar
 <figcaption> <figure> öğesinin başlığını tanımlar
 <figure> Resim, diyagram, fotoğraf, kod listeleri vb. Gibi kendine yeten içeriği tanımlar.
 <footer> Belge veya bölüm için altbilgi tanımlar
 <header> Belgenin veya bölümün üstbilgisini tanımlar
 <main> Belgenin ana içeriğini tanımlar
 <mark> İşaretli veya vurgulanmış metni tanımlar
 <menuitem> Kullanıcının bir açılır menüden başlatabileceği bir komut / menü öğesi tanımlar
 <meter> Bilinen bir aralıkta bir ölçümü tanımlar (bir gösterge)
 <nav> Belgedeki gezinme bağlantılarını tanımlar
 <progress> Görevin ilerleme durumunu tanımlar
 <rp> Ruby ek açıklamalarını desteklemeyen tarayıcılarda neyin gösterileceğini tanımlar
 <rt> Karakterlerin açıklaması / telaffuzunu tanımlar (Doğu Asya tipografisi için)
 <ruby> Yakut açıklaması tanımlar (Doğu Asya tipografisi için)
 <section> Belgede bir bölüm tanımlar
 <summary>  <details> öğesi için görünür bir başlığı tanımlar
 <time> Bir tarih / saat tanımlar
 <wbr> Olası bir satır sonunu tanımlar
 Form Etiketleri Açıklama
 <datalist> Giriş kontrolleri için önceden tanımlanmış seçenekleri tanımlar
 <keygen> Bir anahtar / çift jeneratör alanı tanımlar (formlar için)
 <output> Bir hesaplamanın sonucunu tanımlar
 Yeni Form inputları Yeni input Öznitelikleri
 color autocomplete
 date autofocus
 datetime form
 datetime-local formaction
 email formenctype
 month formmethod
 number formnovalidate
 range formtarget
 search height ve width
 tel list
 time min ve max
 url multiple
 week pattern (regexp)
  placeholder
  required
  step
 Grafik Etiketleri Açıklama
 <canvas> Komut dosyası (genellikle JavaScript) vasıtasıyla grafik çizme
 <svg> Ölçeklenebilir vektör grafikleri çizme
 Medya Etiketleri Açıklama
 <audio> Ses içeriğini tanımlar
 <embed> Harici uygulamalar için kontörleri (eklentiler gibi) tanımlar
 <source> <audio> ve <video> için kaynakları tanımlar
 <track> <audio> ve <video> için parçaları tanımlar
 <video> Video veya film içeriğini tanımlar

Üstteki tabloda Yeni Form inputları ve Yeni input Öznitelikleri olan yerdeki açıklamalar biraz karmaşık gelebilir diye bu konuda kısacık bir açıklama yapayım.
Yeni Form inputları icinden number kullanım şu şekildedir <input type="number"> bu sayede input elemanımız sadece sayılar girilebilir olur ve yukarı aşağı ok işaretleri belirerek arttırılabilir veya azaltılabilir bir hale dönüşecektir.

Yeni input Özniteliklerinden autocomplete şu şekilde kullanırız <input type="email" name="email" autocomplete="off">  böylelikle bu inputa asla tarayıcı tarafından daha önce kaydedilmiş bir veri otomatik tamamlanmaz.

Diğer yazılarımda bu etiketlerin teker teker detaylı açıklamalarına yer vereceğim şimdilik yeniliklerin neler olduğunu anlamak adına bu makale yeterlidir diye düşünüyorum etiketlerin daha detaylı anlatımları tabi ki yeni makaleler gerektiren bir durum yoksa bu sayfanın sonu gelmeyeceğini siz de anladınız sanıyorum.

Başka bir yazıda görüşmek dileği ile kalın sağlıcakla...

HTML5 Tanıtımı Yorumları:


Yorum yazılmamış!



Bağlan