HTML 5 DERSLERİ HTML 5 NEDİR?

HTML5'in ne olduğunu açıklamadan evvel HTML hakkında geniş bir bilgi vereyim:

HTML NEDİR?

HTML, (Hyper Text Markup Language) Zengin metin işaretleme dili anlamını taşır. Tarayıcının okuyabileceği herhangi belge veya sayfayı oluşturmak için özel Köprü Metin dilidir. HTML çeşitli anlamları ifade eden kodlardan (tag) ve basit metinlerden oluşturulmuştur. Bu kodlar Web Browser (Internet Explorer, Firefox, Chrome vb) tarafından okunduğunda anlam kazanmaktadır. Bu kodla yazılmış dosyaların uzantıları .html veya .htm sonları ile biter. HTML, en basit metin düzenleme poqramlarından olan Notepad++ yazılabilir.

HTML TARİHİ

HTML dilinin gelişim tarihi 1989 yılında Oxford Üniversitesi öğrencisi Tim Berners-Lee tarafından HTML işaretleme belge sisteminin çıkarılması teklifi ile başladı. 1990 yılında HTML işaretleme dilini geliştirmesinden sonra World Wide Web(WWW) sistemini kurmuştur. 1990 yılında Berners-Lee'nin HTML işaretleme belgelerini okuyan tarayıcı oluşturdu. Nihayet, 1995 yılında dilin birinci versiyonu - HTML 1.0 çıktı. Sadece 1995 yılında HTML 2.0 versiyonunun işlenmesi tamamlandıktan sonra, HTML dili standartlaşdı. HTML dilinin yeni sürümünü tarayıcıların çoğu destekliyordu.

HTML ilk kullanıma sunulduğunda oluşturulan sayfalar sadece metinlerden oluşmaktadır ve grafik olarak çok bir şey ifade etmiyordu. Etiketler büyük veya küçük harflerle yazılabiliyordu Daha sonra XML ve HTML'nin kombinasyonu olan Extensible HTML, yani "Genişletilebilir HTML" olan XHTML, W3C tarafından bir standart olarak oluşturuldu. XHTML'de kurallar daha sertti. Örneğin, Tüm etiketler küçük harflerle yazılmalı idi. Buna rağmen web browser'larla uyum sorunu zaman içinde çözümlemeye başlandı.

1996 yılında artık dilin HTML 3.2 (HTML 3.0 versiyonunda tablolar oluşmuştu) sürümünü tüm tarayıcılar destekliyordu. Bunun sonucunda, web tasarım yüksek seviyesine yükseldi.

Ama yine de XHTML'de grafik olarak tek başına bir şey ifade etmiyordu. 1996'lı yılların sonunda CSS ilk sürümü yayımlandı, bundan sonra siteler daha grafiksel olarak daha dikkat çekici olmaya başladı.

Bu şekilde bilgi paylaşımını kolaylaştırma amacı doğrultusunda ortaya çıkan HTML günümüzde hayatımızın vazgeçilmezi olan internetin başlıca temelini oluşturmuştur.

HTML 5 NEDİR?

HTML 5 web tasarım temel dili olan HTML ailesinin son üyesidir. Bundan önce birçok sürümü bulunan HTML, beşinci sürümü ile bambaşka bir hal almıştır.

HTML giderek gelişti ve yıllar geçtikçe CSS yeni özellikleri ile birlikte 4. versiyona kadar yükseldi. HTML 4 her ne kadar yeterli gibi görünse de CSS ile yazılan çoklu kodlar hatalara neden oluyordu ve bunun önüne geçmek için HTML 5 geliştirildi.

HTML5 ile gelen esnek yapı kod hatalarını en aza indirdi, hatta birçoğunu görmezden geliyordu. CSS ile olan uyum sorunu düzeltildi ve beraberinde getirdiği yeni etiketler ile hem içerik ve görüntüye, hem de arama motorları için önemli kolaylıklar sağladı.

Henüz HTML 5 ile gelen özelliklerin tamamı bazı tarayıcılar tarafından desteklenmese de ileride web tasarımının vazgeçilmezi haline geleceği kesin. Bunun nedeni ise daha önce web programla dilleri ile yapılan işler HTML 5 ile kolay şekilde yapılıyor olması. Bunun yanında web tasarımında birçok farklı yeni özellikler HTML 5 ile kullanılmaya başlandı.

HTML 5 henüz geliştirilme aşamasında olsa da bu gün bir çok web tasarımcı artık bu yeni sürümü tercih etmektedir. Kısmen daha az kod yazma imkanı verse de HTML 5 asıl gücünü PHP, ASP, ASP.net gibi web programlama dillerinden, JavaScript ve CSS den almaktadır.

HTML 5 İLE GELEN YENİ ETİKETLER

• <aside> : Sayfanın geri kalan kısmı ile biraz alakalı olan bir içeriği temsil eder. İçerik bölümünün yanında yer alır. Kenar elemanındaki içerik, Ana içerikle uyum sağlamalıdır. Bir makalenin ek notları, referans linkleri veya küçük açıklama olmalı. Bir arama kutusu veya ilgisiz reklamlar Ana içerikle uyum göstermiyecektir.
• <bdi> : Başka bir metinden farklı bir yönde biçimlendirilebilen bir metnin bölümünü tanımlar. Metin yönü bilinmediğinde, soldan sağa metin (İngilizce gibi) içinde sağdan sola metin (Arapça gibi) görüntülerken yararlı olabilir. <bdi> öğesi, metin yönü bilinmeyen olduğunda (kullanıcı tarafından oluşturulan içerikte olduğu gibi) oluşturulan içerik metin ile karıştırılarak kullanılmasında, sayfa düzenin sağlanması için bu etiketi kullanmak fayda sağlar.
• <details> : Öğesi, kullanıcının ek bilgileri alabileceği bir açıklama aracı olarak kullanılır.
• <dialog> : Bir iletişim kutusu veya pencere tanımlar.
• <figcaption> : <figure> öğesinin başlığını tanımlar.
• <figure> : Resimler, diyagramlar, fotoğraflar, kod listeleri vb... içeriği tanımlar.
• <footer> : Web sayfasının en altında veya en yakın bölümünde bulunan içerikler için. Bir altbilgi, genellikle, kimin yazdığını, ilgili belgelerle olan bağlantıları, telif hakkı verilerini, vb... Bölümleri hakkında bilgi içerir. Buna ek olarak, ekler, dizinler, lisans sözleşmeleri ve benzeri diğer içerikle birlikte tüm bölümler olabilir.
• <header> : <head> öğesiyle karıştırılmamalıdır, <header> etiketi genellikle bir bölümün başlığını (H1-H6 öğesi) ve ayrıca bir gezinme bağlantıları, içindekiler tablosu, arama formu gibi diğer içerikleri içerir; Veya ilgili logolar.
• <main> : Belge veya web uygulamasının gövdesinin ana içeriğini tanımlar. Bu nedenle, ana içerik alanı, sayfanın merkezi konusuyla doğrudan ilgili olan veya genişleyen içerik barındırır. Üstelik ekran okuyucuları ve diğer yardımcı teknolojilerin ana sayfa içeriğinin nerede başlayacağını anlamasına yardımcı olur.
• <mark> : İşaretli veya vurgulanan metni tanımlar.
• <menuitem> : Kullanıcının bir açılır menüden başlatabileceği bir komut, menü öğesini tanımlar.
• <meter> : Bilinen bir aralıkta skaler bir ölçümü tanımlar (bir gösterge).
• <nav> : Öğesi (HTML Gezinti Öğesi), diğer sayfalara veya sayfadaki bölümlere bağlantı veren bir sayfanın bir bölümünü temsil eder; gezinme bağlantıları olan bir bölüm.
• <progress> : Elemanı, bir görevin tamamlanma ilerlemesini görüntülemek için kullanılır. Nasıl görüntülendiğinin özellikleri tarayıcı geliştiricisine bırakılmış olsa da, genellikle bir ilerleme çubuğu olarak görüntülenir. Javascript ilerlemenin değerini değiştirmek için kullanılabilir.
• <rp> : Ruby ek açıklamalarını desteklemeyen tarayıcılarda nelerin gösterileceğini tanımlar.
• <rt> : Elemanı, Doğu Asya karakterlerinin telaffuzunu tanımlamak için kullanılan bir yakut dili açıklamasında sunulan karakterlerin telaffuzunu içerir. Bu öğe daima bir <ruby> öğesinde kullanılır.
• <ruby> : Elemanı, bir yakut dili ek açıklamasını temsil eder. Ruby ek açıklamalar, Doğu Asya karakterlerinin telaffuzunu göstermek içindir. Japonca, çince, kore dili yazılan metnin altında kendi dilimizde o metnin küçük açıklamasıdır.
• <section> : Genel belge veya uygulama bölümü temsil eder
• <time> : Bir tarih veya saat temsil eder.
• <wbr> : Metin içinde tek bir sözcük olarak yazılan olası bir satır sonunu tanımlar.

YENİ FORM ELEMANLARI

• <datalist> : Öğesi, bir <input> öğesi için önceden tanımlanmış seçeneklerin bir listesini belirtir. Kullanıcılar, veri girdiklerinde önceden tanımlanmış seçeneklerin açılır listelerini görürler. Otomatik tamamlama metin kutusuna benzer şekilde çalışır.
• keygen : Öğesinin amacı, kullanıcıların kimliğini doğrulamak için güvenli bir yol sağlamaktır. <keygen> öğesi, bir formdaki bir anahtar / çift jeneratör alanını belirtir. Form gönderildiğinde, biri özel, biri de genel olmak üzere iki anahtar oluşturulur. Özel anahtar yerel olarak saklanır ve genel anahtar sunucuya gönderilir. Genel anahtar, ileride kullanıcının kimliğini doğrulamak için bir istemci sertifikası oluşturmak için kullanılabilir.
• output : Öğesi, bir hesaplamanın sonucunu temsil eder.

HTML 5 GRAFİK ETİKETLERİ

JavaScript'i ve html 5'deki SVG'yi kullanarak grafik çizim yapılır.

• <canvas> : HTML <canvas> Elemanı, komut dosyası (genellikle JavaScript) yoluyla grafik çizmek için kullanılabilir. Örneğin, grafikler çizmek, fotoğraf kompozisyonları yapmak veya hatta animasyonlar yapmak için kullanılabilir.
• <svg> : Öğesi, SVG grafikleri için bir kapsayıcıdır. SVG, yolları, kutuları, daireleri, metinleri ve grafik resimlerini çizmek için çeşitli yöntemlere sahiptir.

YENİ MEDYA ELEMANLARI

Tarayıcılar artık ek eklentilere ihtiyaç duymadan HTML 5 sayesinde birçok medya türüyle baş edebilecek donanıma sahiptir. En önemli örnek, YouTube video paylaşımında kullanılması gereken <embed> öğesidir.

• <audio> : Ses içeriğini tanımlar.
• <embed> : Harici uygulamalar için eklentileri tanımlar (genellikle bir video oynatıcı).
• <source> : Medya öğeleri için, <video> ve <audio> gibi birden çok medya kaynağını tanımlar.
• <track> : Medya oynatıcılarda metin parçalarını tanımlar.
• <video> : HTML5'den önce, bir video yalnızca bir eklentiyle (flaş gibi) bir tarayıcıda oynatılabilir. HTML 5 <video> : Öğesi, bir videoyu bir web sayfasına eklemek için standart bir yöntem belirtir.

HTML 5'DE KALDIRILAN ETİKETLER

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

YENİ İNPUT TÜRLERİ

HTML 5, HTML 4.01 için eksik olan belirli davranışsal ve biçimlendirme gereksinimlerini gidermek için formlar için yeni giriş türleri sundu. Örneğin, tarihlerin, sayıların, telefon numaralarının girilmesi vb. işlemler.

HTML Global Öznitelikleri(Attributes)

Özellikler (Attributes) başlangıç ​​etiketlerinde belirtilebilir ve asla bitiş etiketlerinde kullanılmamalıdır.

HTML 5 nitelikleri büyük / küçük harf duyarlı değildir ve en yaygın olarak etiketlerde öznitelikler küçük harfle yazılır olsa da, tümü büyük harf ya da karışık durumda yazılabilir.

• contenteditable : Kullanıcının öğenin içeriğini düzenleyip düzenleyemeyeceğini belirtir.
• contextmenu :Bir öğe için bir bağlam menüsü belirtir. Bağlam menüsü, bir kullanıcı öğeyi sağ tıkladığında görüntülenir.
• data-* :Özel nitelikler. Bir HTML sayfasını oluşturan webmasterlar kendi öz niteliklerini tanımlayabilir. 'data-' ile başlamalı.
• draggable :Bir öğe sürüklenebilir olup olmadığını belirtir.
• dropzone :Sürüklenebilir nesne, hedef nesne üzerinde bırakıldığında; kopyalama, taşıma veya link bırakma özelliklerinden hangisini kullanacağını belirtir.
• hidden :Öğenin görünür olup olmayacağını belirtir.
• spellcheck :Elementin yazım veya dilbilgisi işaretli olması gerekip gerekmediğini belirtir.
• translate :Bir öğenin içeriğinin tercüme edilmesi gerekip gerekmediğini belirtir.

HTML5 API (Application Programming Interfaces)

• HTML, Coğrafi Konum API : Kullanıcının konumunu bulmak için kullanılır.
• HTML, Sürükle ve bırak API : HTML 5'te, sürükle ve bırak standartın bir parçasıdır; Herhangi bir öğe sürüklenebilir.
• HTML, Yerel Depolama Alanı :Yerel depolama birimleri ile web uygulamaları, kullanıcı tarayıcısına yerel olarak veri depolayabilir.
• HTML, Önbellek uygulaması :Uygulama önbelleği ile, bir önbellek listesi dosyası oluşturarak bir web uygulamasının çevrimdışı sürümünü oluşturmak kolaydır.
• HTML, Web (Workers) işcileri :JavaScript, tek işte çalıştırılacak şekilde tasarlanmıştır, yani birden çok komut aynı anda çalıştırılamaz. UI (user interface:kullanıcı arayüzü) olaylarını işlemek, büyük miktarda API verilerini sorgulamak ve işlemek ve DOM'u değiştirmek zorunda olduğunuz bir durumu düşünün. Javascript, CPU kullanımının yüksek olduğu durumlarda tarayıcınız kullanıcıya cevap veremez hale gelir. Web işcisi, sayfanın performansını etkilemeden diğer script'lerden bağımsız olarak arka planda çalışan bir JavaScript kodudur. Web (Workers)işcileri kullanarak istediğiniz başka her türlü şeyi yapmaya devam edebilirsiniz: tıklama, nesneleri seçme vs...Web (Workers) işcileri kullanmak, çok çekirdekli işlemcilere sahip bilgisayarlarda daha etkilidir.
• HTML, SSE (Server-Sent Events) :Sunucu Tarafından Gönderilen Etkinlikler, bir Web sayfasının bir sunucudan güncelleme almasını sağlar. Bu daha önce de mümkündü, ancak Web sayfası herhangi bir güncelleme olup olmadığını sormak zorunda kalacaktı. Sunucu tarafından gönderilen etkinliklerle, güncellemeler otomatik olarak gerçekleşir.

KODLAMADA YAPILAN DEĞİŞİKLİKLER

HTML 5 ile kodlamada birtakım değişiklikler yapılmıştır. Bir çok kodlama şekli daha kısa ve basit hale getirildi.

örnek olarak HTML 4.01'de döküman tipini şu şekilde belirliyorduk.

ÖRNEK:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

HTML 5'de ise bu tanımlama çok daha kısa bir hal aldı.

<!DOCTYPE html>

Bu kısaltmala basitleştirme değişiklerden meta ,script ,style etiketlerde etkilendi.

ÖRNEK:

<!-- eski yöntem -->

<meta http-equiv="Content-Type" 

content="text/html;charset=UTF-8" />

<!-- yeni yöntem -->

<meta charset="UTF-8">

Script ve style etiketlerinde ise type ifadesi kaldırılmıştır.

ÖRNEK:

<script>

  kodlar
  
</script>

<!-- Diğer dosya eklemeli kullanımı  -->

<script src="javascript.js">

    kodlar
	
</script>

<!-- css'de dosya eklemeli kullanımı  -->