Web Tasarım - Grafik Tasarım

HTML5

Diğer Elemanlar

HTML5
Yukarıda anlatılan yapısal elemanlar dışında HTML5 yapısı içerisinde duyurulan diğer işlevsel elemanlara bakalım. <mark> Metni işaretlemek için kullanılır. Bu elemanı kullanarak okuyucunun dikkatini çekecek vurgulu metinler oluşturabilir ya da metnin referans olarak tanımlanmasını sağlayabilirsiniz. Satır içi bir elemandır. Özellikleri: [Standart Özellikler] Örneğin; <p> Metni <mark> işaretlemek </p> </mark>için kullanılır. CSS kodları ile mark elemanı içerisindeki metne stil vererek okuyucunun dikkatini bu kelimeye çekebilirsiniz. Örnek: <p> </p> Bu durumun çözümü için JavaScript yardımıyla belirtilen elemanları programatik olarak oluşturmamız yeterli olacaktır. <mark> IE9</mark>’un tanım

HTML5’in Getirdiği Yeni Elemanlar

HTML5
Yapısal Elemanlar Bir web sayfası tasarlarken muhtemelen sayfanız kabaca bir üst başlık alanı (sitenin tanıtımı için), bir içerik alanı ve yine içerik alanı içerisinde değişik alt başlıklar (bölümler), bir alt başlık ve bir ya da daha fazla navigasyon (yönlendirme) alanlarından oluşacaktır (Değişik site tasarımları olabilir. Burada genel yaklaşımdan söz edilmektedir). Sitenizin yapısını tasarlarken HTML5 ile yeni gelen yapısal elemanları kullanabilirsiniz. Bu elemanların kullanılması; kod okunabilirliğini arttırır, anlamlı eleman gurupları oluşturulmasını sağlar ve CSS’i daha etkili bir şekilde kullanmanıza yardımcı olur. <header> Başlık elemanı, bu elemanı kullanarak sayfa başlık alanı (sayfa hakkında bilgiler içeren bölüm), bölüm veya alt bölüm başlığı ya da yönlendirme al

Standart Özellikler

HTML5
HTML5’de her eleman aşağıdaki ortak özelliklere sahiptir. Şimdi bu özelliklerin neler olduğuna bakalım. accesskey • id class • lang contenteditable [HTML5] • spellcheck [HTML5] contextmenu [HTML5] • style dir • tabindex draggable [HTML5] • title dropzone [HTML5] • hidden [HTML5]   accesskey Alabileceği Değer: {Karakter} HTML elemanına klavye kısayolu tanımlamak için kullanılır. class Aldığı Değerler: {Sınıf Seçici Adı [*Birden fazla sınıf seçici adı yazılabilir]} Oluşturulmuş bir sınıf seçiciyi HTML elemanına atamak (uygulanmasını sağlamak) için kullanılır. <!DOCTYPE HTML> <html> <head> <meta         charset=”utf-8” /> <title>class özelliği</title> <style typ

Yeni Elemanlar ve Özellikler

HTML5
HTML5 dilinde elemanların saklayabilecekleri içerikler guruplandırılmış ve içerik Modeli (Content Models) olarak adlandırılmıştır. içerik modeli elemanların ne çe- şit bir içeriğe sahip olabileceklerini tanımlamak için kullanılır. Bir eleman birden fazla içerik türünü destekleyebilir. HTML5 tarafından tanımlanan içerik türleri şöyledir: Content Type Açıklama Embedded Dış kaynaklı  ve ya başka bir etiketleme dili ile ya da programatik olarak (Örneğin; JavaScript ile Canvas elemanı kullanımı) tanımlanan içerikler. Bu içerik türünü kullanan elemanlara örnek; <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video> Şow Metin, başka bir eleman ya da gömülü olarak tanımlanan içerikler. Bu içer

HTML5 Dili içerisindeki Tüm Etiketlerin Listesi

HTML5
  Etiket Durum <a>     <abbr>     <acronym> HTML5 tarafından desteklenmiyor. <address>     <applet> HTML5 tarafından desteklenmiyor. <area>     <article> Yeni (HTML5) <aside> Yeni (HTML5) <audio> Yeni (HTML5)   <b>   <base>   <basefont> HTML5 tarafından desteklenmiyor. <bdo>   <big> HTML5 tarafından desteklenmiyor. <blockquote>   <body>   <br>   <button>   <canvas> Yeni (HTML5) <caption>   <center> HTML5 tarafından desteklenm

Diğer Specifications (W3C Bildirimleri) ve Teknolojilere Tarayıcıların Verdiği Destek

HTML5
  Özellik Adı Internet Explorer Firefox Opera Safari Selectors API Level1   IE8   Firefox 3.5 Opera 10   Safari 3 Web Storage Opera 10.5 Web SQL Database Yok Yok Opera 10.5 Safari 3.2 WebSockets Yok Firefox 4 Opera 11 Safari 5   Web Workers   Yok     Firefox 3.5     Opera 10.6   Safari 5 Geolocation API Yok Ofşine Web Applications Yok Safari 4 WebGl Yok Firefox 4 Yok Nightly Build* eklentisi ile Drag-And-Drop Kısmen Firefox 3.5 Yok Desteği var   HTML5 ile beraber gelen Standart (Ortak) özellikler ve elemanlar için tanımlanan diğer yeni özellikler 2. Bölümde anlatılacaktır.

HTML5 ile Yeni Tanımlanan Elemanlara ve Özelliklere Tarayıcıların Verdiği Destek

HTML5
Yeni Yapısal Elemanlar Eleman Adı Internet Explorer Firefox Opera Safari <section>               Trident 5.0               Gecko2                   Presto 2.7               WebKit 533 <nav>   <article> <aside> <hgroup> <header>   <footer> <figure> <figcaption> Nightly Build* eklentisi ile <mark>   Win7 için yok   <progress> Yok Yok <time> Yok Yok Yok Yok <meter&

Tarayıcı Görüntüleme Motoru (Layout Engine) ve JavaScript Motoru (JavaScript Engine)

HTML5
Tarayıcı görüntüleme motoru, web sayfasının içeriğini tarayıcı ekranında oluştur- mak/göstermekle sorumludur. Tarayıcılar modüler sistemi benimsemişlerdir. Bu şu anlama gelir tarayıcı yapısı genel olarak kullanıcı arayüzü ve iş yapan arabirimler olmak üzere ikiye ayrılabilir. Web tarayıcısı geliştiricileri aslında görüntüleme motoru temelli tarayıcı oluştururlar. Tarayıcılar kendi oluşturdukları görüntüleme motorlarını kullanırlar ve bunları güncellerler (Aslında görüntüleme motorlarını güncellediklerinde belirtilen tarayıcı için yeni bir sürüm ortaya çıkmış olur). Bu görüntüleme motorlarına dayalı uygulamalar geliştirirler. Bir tarayıcının yeni teknolojileri desteklemesi; görüntüleme motorunun belirtilen teknolojileri desteklemesi anlamına gelir. Tarayıcılarda kullanıcı arayüzleri sadece

HTML5 için Tarayıcı Desteği

HTML5
Yeni nesil ta- rayıcılar (Modern web tarayıcılarının son sürümleri), HTML5’in yeni getirdiği tek- nolojileri, elemanları ve özellikleri destekleme konusunda hızlı adımlar atmaktadır- lar. Bu adımlar sonucunda tarayıcıların son sürümleri (IE9, Firefox 4, Safari 5, Opera 11.11) HTML5’i büyük ölçüde destekler duruma gelmişlerdir. HTML5’e ta- rayıcılar tarafından verilen desteği  sadece yeni elemanlar ya da özelliklere verilen destek olarak düşünmemek gerekir. Bu destek; CSS3, JavaScript eklentileri, DOM (Document Object Model) ve HTML5’in duyurulması (kullanılması) ile beraber et- kinliği (önemi) artan (artacak olan)  yeni ya da var olan teknolojileri de bir paket olarak içermektedir. Bu nedenle aşağıda HTML5 teknolojisinin getirdiği ya da HTML5 ile beraber kullanımı artan/kullanımı giren

HTML5 Söz Dizimi Kuralları

HTML5
HTML5, XHTML gibi XML temelli olmadığı için programcılara çok gevşek bir söz dizimi yapısı sunar. Örneğin; bir HTML5 sayfası oluştururken html, head, body etiketlerini belirli şartlar altında kullanmayabilirsiniz. Bu durumda sizin yaz- madığınız html, head, body etiketleri tarayıcı tarafından sayfaya dahil edilecektir. Ancak bu durum kullanışlı değildir. Çünkü bu durumda IE’de problemler yaşabili- riz. Aşağıdaki uygulamamızı HTML5’in ne kadar esnek bir söz dizimi olduğunu göstermek için yapıyorum. Biz uygulamalarımızda html, head, body elemanlarını HTML5 temel ağaç yapısı içerisinde her zaman kullanacağız. Aşağıdaki örneği farklı tarayıcılarda  çalıştırıp sonuca bakalım. <!DOCTYPE html> <meta charset=”utf-8”> <title>Her Yönüyle HTML5</title> <p>HTM