HTML5 NEDİR?

Web Tasarım

HTML5, HTML’yi tanımlayan standardın en son evrimidir . Terim iki farklı kavramı temsil eder. Yeni öğeler, öznitelikler ve davranışlar ve daha çeşitli ve güçlü Web sitelerinin ve uygulamalarının oluşturulmasına izin veren daha büyük bir teknoloji kümesiyle HTML dilinin yeni bir sürümüdür .

Anlambilim : içeriğinizin ne olduğunu daha kesin bir şekilde tanımlamanıza olanak tanır.
Bağlantı : sunucuyla yeni ve yenilikçi yollarla iletişim kurmanıza olanak tanır.
Çevrimdışı ve depolama : web sayfalarının verileri istemci tarafında yerel olarak depolamasına ve çevrimdışı olarak daha verimli çalışmasına olanak tanır.
Multimedya : Açık Web’de birinci sınıf video ve ses vatandaşları yaratmak.
2D / 3D grafikler ve efektler : çok daha çeşitli sunum seçeneklerine izin verir.
Performans ve entegrasyon : daha hızlı optimizasyon ve bilgisayar donanımının daha iyi kullanımını sağlar.
Cihaz erişimi : çeşitli giriş ve çıkış cihazlarının kullanımına izin verir.
Stil : yazarların daha sofistike temalar yazmasına izin vermek.

ANLAMBİLİM

HTML5’te bölümler ve ana hatlar

HTML5’teki yeni Outlining ve kesit elemanları: <section>, <article>, <nav>, <header>, <footer>ve <aside>.

HTML5 ses ve videoyu kullanma

<audio>Ve <video>elementler gömmek ve yeni multimedya içeriğinin değiştirilmesini sağlar.

Form iyileştirmeleri

API , yeni özellikler, yeni değerler <input>öznitelik typeve yeni <output>eleman.

Gelişme<iframe>

sandboxVe srcdocözniteliklerini kullanarak , yazarlar artık güvenlik seviyesi ve bir <iframe>öğenin arzu edilen şekli hakkında kesin olabilir .

MathML

Doğrudan matematiksel formüllerin yerleştirilmesine izin verir.

HTML5’e Giriş

Bu makale, web tasarımınızda veya web uygulamanızda HTML5 kullandığınızı tarayıcıya nasıl belirteceğinizi açıklamaktadır.

HTML5 Başvuru Kılavuzu

İşaretleme oluşturucuları, kod örnekleri ve web geliştirici araçlarını içeren hızlı başvuru HTML5 sayfasıdır. Kılavuz, kullanım ve erişim kolaylığı için indirilebilir durumdadır. Bu sayfa, HTML5 kullanımıyla ilgili temel bilgileri ve deneyimi olanlar için hızlı bir kılavuz olarak W3C’nin yardımıyla oluşturulmuştur.

İndirilebilir HTML5 Kılavuzu

Ortak HTML etiketlerinin yanı sıra yeni HTML5 etiketlerini de içeren hızlı bir HTML5 kılavuzudur. PDF ve PNG formatlarında indirilebilir.

HTML5 Hile Sayfası

HTML 5, öğeleri, etkinlik özellikleri ve uyumluluğunda uzmanlaşmak isteyen yeni başlayanlar için kullanışlı bir HTML 5 hile sayfasıdır.

HTML5 uyumlu ayrıştırıcı

Bir HTML belgesinin baytlarını bir DOM’a dönüştüren ayrıştırıcı genişletildi ve artık geçersiz HTML ile karşılaşıldığında bile her durumda kullanılacak davranışı tam olarak tanımlıyor. Bu, HTML5 uyumlu tarayıcılar arasında çok daha fazla öngörülebilirlik ve birlikte çalışabilirlik sağlamaktadır.

BAĞLANTI

Web Soketleri: Sayfa ile sunucu arasında kalıcı bir bağlantı oluşturmaya ve bu yolla HTML dışı veri alışverişine izin vermektedir.
Sunucu tarafından gönderilen etkinlikler: Bir sunucunun, sunucunun yalnızca bir istemcinin isteğine yanıt olarak veri gönderebildiği klasik paradigma yerine olayları istemciye göndermesine izin verir.
WebRTC: RTC’nin Gerçek Zamanlı İletişim anlamına geldiği bu teknoloji, bir eklentiye veya harici bir uygulamaya ihtiyaç duymadan başka kişilere bağlanmaya ve video konferansları doğrudan tarayıcıdan kontrol etmeye izin verir.

ÇEVRİMDIŞI VE DEPOLAMA

Çevrimdışı kaynaklar: Uygulama önbelleği

Firefox, HTML5 çevrimdışı kaynak belirtimini tam olarak destekler. Diğer uygulamaların büyük çoğunluğu, belir bir düzeyde çevrimdışı kaynak desteğine sahiptir.
Çevrimiçi ve çevrimdışı etkinlikler: Firefox 3, uygulamaların ve uzantıların etkin bir İnternet bağlantısının olup olmadığını algılamasına ve bağlantının ne zaman yukarı ve aşağı gittiğini algılamasına izin veren WHATWG çevrimiçi ve çevrimdışı olaylarını destekler.
WHATWG istemci tarafı oturumu ve kalıcı depolama (diğer adıyla DOM depolama): İstemci tarafı oturum ve kalıcı depolama, web uygulamalarının yapılandırılmış verileri istemci tarafında depolamasına olanak tanır.
IndexedDB: IndexedDB, tarayıcıda önemli miktarda yapılandırılmış verinin depolanması ve bu veriler üzerinde indeksler kullanılarak yüksek performanslı aramalar için bir web standardıdır.
Web uygulamalarındaki dosyaları kullanma: Gecko’ya yeni HTML5 Dosya API’si desteği eklendi ve web uygulamalarının kullanıcı tarafından seçilen yerel dosyalara erişmesine olanak tanımıştır. Bunu kullanarak birden fazla dosya seçimini destekler. <input>ve type dosyası HTML elementin yeni multiple niteliğini. Ayrıca FileReader. vardır

MULTİMEDYA

HTML5 ses ve videoyu kullanma: <audio>Ve <video>elementleri embed etmek ve yeni multimedya içeriğinin değiştirilmesine izin vermektedir.
WebRTC: RTC’nin Gerçek Zamanlı İletişimi anlamına gelmektedir. Bir eklentiye veya harici bir uygulamaya ihtiyaç duymadan başka kişilere bağlanmaya ve video konferansları doğrudan tarayıcıdan kontrol etme olanağı sağlar.
Camera API’yi kullanma: Bilgisayarın kamerasından bir görüntünün kullanılmasına, değiştirilmesine ve depolanmasını sağlar.
Track ve WebVTT: <track>Eleman altyazı ve bölümler verir. WebVTT bir metin izleme formatıdır.

2D / 3D GRAFİKLER VE EFEKTLER

Canvas eğitimi

Yeni <canvas>öğe hakkında ve Firefox’ta grafiklerin ve diğer nesnelerin nasıl çizileceği hakkında bilgi edinin .

<canvas>Öğeler için HTML5 Metin API’si

HTML5 metin API’si artık <canvas>öğeler tarafından desteklenmektedir .

WebGL

WebGL, HTML5 <canvas>öğelerinde kullanılabilen OpenGL ES 2.0 ile yakından uyumlu bir API sunarak 3D grafikleri Web’e getirir .

SVG

Doğrudan HTML’ye gömülebilen, vektörel görüntülerin XML tabanlı bir biçimidir.

Web Çalışanları: JavaScript değerlendirmesinin arka plan iş parçacığına devredilmesine izin vererek bu etkinliklerin etkileşimli olayları yavaşlatmasını engeller
XMLHttpRequest Seviye 2: Sayfanın bazı bölümlerinin eşzamansız olarak getirilmesine, zamana ve kullanıcı eylemlerine göre değişen dinamik içeriği görüntülemesini sağlar. Ajax’ın arkasındaki teknoloji budur .
JIT derleyen JavaScript motorları: Yeni nesil JavaScript motorları çok daha güçlüdür ve daha yüksek performans sağlar.
History API: Tarayıcı geçmişinin değiştirilmesini sağlar. Bu, özellikle etkileşimli olarak yeni bilgiler yükleyen sayfalar için çok kullanışlıdır.
ContentEditable Attribute: Web sitenizi wiki’ye dönüştürün!: HTML5, contentEditable özelliğini standartlaştırdı. Bu özellik hakkında daha fazla bilgi edinin.
Sürükle ve bırak: HTML5 sürükle ve bırak API’si, öğeleri web siteleri içinde ve arasında sürükleme ve bırakma desteği bulunmaktadır. Bu ayrıca, uzantılar ve Mozilla tabanlı uygulamalar tarafından kullanım için daha basit bir API desteği vermektedir.
HTML’de odak yönetimi: Yeni HTML5 activeElementve hasFocusöznitelikler desteklenmektedir.
Web tabanlı protokol işleyicileri: Artık, navigator.registerProtocolHandler()yöntemi kullanarak web uygulamalarını protokol işleyicileri olarak kaydedebilirsiniz .
requestAnimationFrame: Optimum performans elde etmek için animasyon oluşturma işleminin kontrolünü sağlar.
Tam ekran API: Tarayıcı kullanıcı arayüzü görüntülenmeden bir Web sayfası veya uygulama için tüm ekranın kullanımını kontrol eder.
İşaretçi Kilit API’si: İşaretçinin içeriğe kilitlenmesine izin verir, böylece işaretçi pencere sınırına ulaştığında oyunlar ve benzer uygulamalar odağı kaybetmez.
Çevrimiçi ve çevrimdışı etkinlikler: Çevrimdışı özellikli iyi bir web uygulaması oluşturmak için, uygulamanızın gerçekte ne zaman çevrimdışı olduğunu bilmeniz gerekir. Bu arada, başvurunuzun tekrar çevrimiçi duruma ne zaman döndüğünü de bilmeniz gerekir.

CİHAZ ERİŞİMİ

Camera API’yi kullanma: Bilgisayarın kamerasından bir görüntünün kullanılmasına, değiştirilmesine ve depolanmasına izin verir.
Dokunma etkinlikleri: Kullanıcıların dokunmatik ekranlara basarak oluşturduğu olaylara tepki vermek için işlem yapar
Coğrafi konumu kullanma: Tarayıcıların coğrafi konumu kullanarak kullanıcının konumunu bulmasını sağlar
Cihaz yönünü algılama: Tarayıcının üzerinde çalıştığı cihazın yönü değiştiğinde bilgileri alın. Bu, bir giriş cihazı olarak (örneğin, cihazın konumuna tepki veren oyunlar yapmak için) veya bir sayfanın düzenini ekranın yönüne (dikey veya yatay) uyarlamak için kullanılabilir.
İşaretçi Kilit API’si: İşaretçinin içeriğe kilitlenmesine izin verir, böylece işaretçi pencere sınırına ulaştığında oyunlar ve benzer uygulamalar odağı kaybetmez.

STYLING

CSS , öğeleri çok daha karmaşık bir şekilde biçimlendirmek için genişletilmiştir. Bu genellikle CSS3 olarak adlandırılır , ancak CSS artık monolitik bir şartname değildir ve farklı modüllerin hepsi 3. seviyede değildir: bazıları 1. seviyede ve diğerleri 4. seviyede, tüm orta seviyeler kapsanmaktadır.

Yeni arka plan stil özellikleri Kullanarak elemanlarında gölgeleri koymak mümkündür box-shadow, çoklu arka planlar , ve CSS filters. Gelişmiş kutu efektlerini okuyarak bunlar hakkında daha fazla bilgi edinebilirsiniz .
Daha süslü sınırlar: Artık resimleri kullanarak border-imageve ilişkili uzun el özelliklerini kullanarak sınırları biçimlendirmek değil, aynı zamanda yuvarlatılmış kenarlıklar da border-radiusözellik aracılığıyla destekleniyor .

Tipografi iyileştirmesi: Yazarlar, daha iyi tipografiye ulaşmak için çok daha iyi bir kontrole sahiptir. Kontrol text-overflowve hyphenation yapabilirler , ancak aynı zamanda ona bir shadow ekleyebilir veya dekorasyonlarını daha kesin bir şekilde kontrol edebilirler . Yeni @font-faceat-kuralı sayesinde özel yazı biçimleri indirilebilir ve uygulanabilir .
Yeni sunum düzenleri: Tasarımların esnekliğini artırmak için iki yeni düzen eklendi: CSS çok sütunlu düzenler ve CSS esnek kutu düzeni .