HTML5'teki yenilikler neler? HTML5 Yeni satır içi öğeler hakkında bilmeniz gereken beş şey.

HTML5'teki yenilikler neler? HTML5 ve HTML 4 arasındaki farklar

HTML5 spesifikasyonu, farklı düzeylerde ve farklı önemlerde birçok değişikliği beraberinde getirir. Temel olarak önemli değişiklikler 7 bloğa ayrılabilir:

a) Anlambilim (dil birimlerinin anlamsal anlamı)

HTML5, web sayfalarının iç yapısını daha anlamlı bir şekilde düzenlemenize olanak tanıyan bir dizi yeni anlamsal etiket sunar. Bu, hem üst bilgi, alt bilgi, makale gibi blok etiketlerini hem de işaret, yakut, ayrıntılar gibi metin işaretleme etiketlerini içerir. Mevcut HTML4 etiketlerinin bir kısmının eski olduğu ilan edildi, tek tek etiketlerin anlamları değişti ve nitelikler belirli değişikliklere uğradı.

b) Multimedya

HTML5, yönetim için ilgili API ile birlikte multimedya içeriği (ses ve video) için doğrudan HMTL işaretlemesinde yerel destek ekler.

c) Grafikler

İstemci tarafında grafiklerle çalışmak fark edilir derecede kolaylaştı. Tuval öğesi ve onunla çalışmak için özel bir JavaScript API'si HTML5'e eklendi. Tuval, üzerine programlı olarak çizim yapabileceğiniz dinamik bir "yüzeydir". HTML5 ayrıca resmi olarak ilgili web standardı SVG (Ölçeklenebilir Vektör Grafikleri) tarafından tanımlanan vektör grafiklerini uygulamanıza olanak tanıyan svg etiketini de içerir.

d) Web formları

Yeni web formu öğeleri: giriş alanındaki ipuçlarından (yer tutucu) ve girilen değerlerin doğrulanmasından özel öğelere kadar, ek kitaplıklar kullanmadan yerleşik araçlarla geleneksel formların yeteneklerini genişletmenize olanak tanıyan türler ve nitelikler. tarih ve renklerin girilmesi.

e) JavaScript API'leri.

HTML5, nesneleri taşımak (Sürükle ve Bırak), geçiş geçmişiyle çalışmak (Geçmiş API'si) için yeni yeteneklerin yanı sıra, İçerik Düzenlenebilir niteliklerini kullanarak içeriği geçerli konumda düzenlenebilir hale getirme yeteneği gibi bir dizi küçük şey içerir. .

f) Yeni DOKÜP

DOCTYPE etiketi, standartlara uygun olduğunu iddia eden web sayfalarının önemli bir bileşenidir: bu etiket olmadan kod doğrulayıcıyı geçemez. DOCTYPE ayrıca sayfanın standartlara uygun tarayıcılarda düzgün görüntülenmesi ve çalışması açısından da önemlidir.

HTML 4'te 3 tür öğe vardı:

• 1. Katı
• 2. Geçiş
• 3. Çerçeveli (Çerçeve Seti)

Genellikle bir veya daha fazla DOCTYPE öğesini seçmek oldukça zordu. HTML5 DOCTYPE'ta yalnızca bir tane vardır, şu şekilde yazılır:

Bu kısa giriş eski, daha uzun formun yerini alır:

g) Sözdizimi

HTML 5'in iki sözdizimi olacaktır: "özel" HTML ve XML. HTML sözdizimi ayrıntılı ayrıştırma kurallarını ("hata işleme" dahil) tanımlar.

XML sözdizimi XHTML1 belgeleri ve uygulamalarıyla uyumludur. Bu söz dizimini kullanmak için MIME (Çok Amaçlı İnternet Posta Uzantıları) türünün XML türü olarak bildirilmesi ve öğelerin XML belirtimine göre oluşturulması gerekir.

Şekil 2 - Temel HTML5 Özellikleri

giriiş

HTML 4 yaklaşık 10 yıldır bizimle birlikte. Bu süre zarfında onu iyileştirmeye yönelik ciddi bir adım atılmadı. Elbette XHTML ortaya çıktı ama sadece kuralları sıkılaştırdı ve bizi daha iyi, daha kaliteli kod yazmaya zorladı. Aynı zamanda standarda uygunluk konusunda da tamamen endişeleniyorsunuz. HTML 5 daha fazlasını yapmak için tasarlandı. Bir dizi çok önemli yenilik ekliyor.

HTML5 üzerindeki çalışmalar 2004 yılında başladı ancak ancak şimdi (2009) ciddi ilgi görmeye başlıyor. Tarayıcı desteği artıyor ve en sevdiğim öğe (CANVAS), en yaygın 5 tarayıcıdan 4'ü tarafından destekleniyor. Aynı zamanda, yeni standart MSIE'de desteklenmediğinden HTML 5'i kullanmak mümkün olsa da tamamen gerçekçi değildir.

Peki HTML 5'teki yenilikler neler?

JavaScript kullanılarak kontrol edilen bir 2D grafik çizim kutusudur. Grafikler ve diğer dinamik görüntüler oluşturmak için kullanabilirsiniz.

Ve

etiketi, HTML sayfalarına video klip eklemeyi kolaylaştırır. Src, autoplay ve loop niteliklerini içerebilir. Etiket ayrıca video için bir metin açıklaması belirtmenize de olanak tanır (örneğin, görme engelli kişiler için). İdeal olarak bu, videonun tam metin yorumu olmalıdır.

Etiket, etiketine çok benzer ancak ses dosyaları için tasarlanmıştır. Beklenmedik değil mi?

Bağlam menüleri

HTML5 ayrıca bir web sayfasına içerik menülerini kolayca eklemek için bir yöntem sağlar. Belki de bu tür menüler sıradan siteler için pek kullanışlı değildir. Ancak pek çok fonksiyonun gruplandırılıp bağlamsal olarak görüntülenmesini istediği uygulamalar için bu fırsat tam olarak doğru.

Yeni yapısal elemanlar

HTML 4 kötü yapılandırılmış olduğundan, bu eksikliği düzeltmek için spesifikasyonun 5. sürümüne yeni öğeler eklendi:

• - bölüm veya paragraf.
• - sayfa başlığı (karıştırılmamalıdır)
• - Sayfa altbilgisi.
• - diğer sayfalara bir dizi bağlantı içerir. Örneğin sitenizin navigasyonunu buraya yerleştirebilirsiniz.
• - bu etiket örneğin bir blog makalesini içerebilir.
• - bir metin bloğuna ek bilgi sağlamak için kullanılabilir.
• - örneğin diyagramlar oluşturmak için kullanılabilir.

Yeni satır içi öğeler

HTML5 standardı, zamanları ve sayıları içeren metin parçalarını özel olarak vurgulamanıza olanak tanıyan yeni öğeler sunar:

• - bir metin parçasını işaretler. Örneğin, arama sonuçları listesinde bulunan terimleri işaretleyebilirsiniz.
• - bir metin bloğundaki saati veya tarihi görüntülemek için bu etiketi kullanabilirsiniz.
• - belirli bir aralıktaki sayıları temsil etmek için. Çeşitli özelliklere sahip olabilir: değer, minimum, maksimum, düşük, yüksek ve optimum.
• Bir proses durumu göstergesini görüntülemek için kullanılabilir. Birkaç özelliği vardır: değer ve maks.

Yeni giriş alanı türleri

HTML5, veri giriş alanları için bir dizi yeni tür ekler:

• tarihsaat
• tarihsaat-yerel
• ay
• sayı
• menzil
• e-posta

Bazıları masaüstü uygulama kullanıcı arayüzlerinde yaygın olarak kullanılmaktadır. Ve büyük olasılıkla, tüm kullanıcılarınız zaten tanıdık gelecektir.

Kullanımdan kaldırılan öğeler

Aşağıdaki HTML öğeleri kullanımdan kaldırılmıştır:

• kısaltma
• küçük uygulama
• temel yazı tipi
• merkez
• çerçeve
• çerçeve kümesi
• dizin
• çerçevesiz
• noscript
• çarpmak

Kodlamayı ayarlamak için sözdizimi

HTML5'te bir belgenin kodlamasını ayarlamaya yönelik sözdizimi artık çok basit:

İnteraktif yenilikler

Web siteleri ve web uygulamaları oluşturmayı daha kolay ve daha keyifli hale getirecek çeşitli yenilikler:

• - bir şey hakkında ek bilgi. Örneğin, bu etiket tarayıcılarda bir araç ipucu uygulamak için kullanılabilir. Bir etiket, etiket içeriğinin başlangıçta kullanıcıya gösterilip gösterilmeyeceğini belirten bir open niteliğine sahip olabilir.
• - Geleneksel tabloların (statik olması amaçlanan) aksine, bu etiket etkileşimli bir veri kümesini temsil etmek için kullanılabilir. Örneğin, satır veya sütun seçme, satır içi veri düzenleme, sıralama vb. içeren bir tablo için.
• - daha önce kullanımdan kaldırılan etiket, yeni bir görünümle HTML5 standardına geri döndü. Artık örneğin karşılık gelen komutları çağıran öğeleri içerebilir. Bu öğe bir araç çubuğu veya içerik menüsü sunmak için kullanılabilir (yukarıya bakın). Bir etiket, etiket ve simge özelliklerine sahip olabilir. Çok seviyeli menüler oluşturmak için eklenebilirler.

Yeni Belge Türü Tanımı (DTD)

HTML5, DTD'leri bildirmeyi çok daha kolay hale getirdi: DTD'leri bildirmek artık daha güzel ve inanıyorum ki hatırlanması daha kolay. Bu büyük olasılıkla HTML'nin artık SGML'ye bağlı olmamasının bir sonucudur.

Bağlantılarda isteğe bağlı href

Bağlantılar komut dosyalarıyla birlikte kullanılabildiği için href özelliği artık isteğe bağlıdır. Bu muhtemelen web uygulamalarında faydalı olacaktır.

eşzamansız özellik

Bu özellik, tarayıcıya, sayfanın tamamen yüklenmesini beklemek yerine, komut dosyası bloğunun eşzamansız olarak yürütülebileceğine dair bir ipucu verir.

Çözüm

Doğal olarak, tüm tarayıcılar standardın tamamını desteklemeyecektir (sanırım okuyucu az önce “favori” MSIE'sini hatırladı). Ancak zamanla destek gelecektir. Yeni HTML 5 öğeleri de mevcut durum göz önünde bulundurularak tasarlandı. Öte yandan, çoğu tarayıcı zaten spesifikasyonu kısmen desteklemektedir. Örneğin etiket Firefox, Opera, Chrome ve Safari'de desteklenir. Ayrıca bildiğim kadarıyla Firefox 3.5 ve .

Bu yüzden sabırsızlıkla bekliyoruz.

İlgilenenler için HTML 5 spesifikasyonu aşağıdaki bağlantıda bulunabilir -

HTML 5, en popüler işaretleme dilinin yeni bir sürümüdür.

10 yıldan fazla bir süredir, hiper metin biçimlendirme dili HTML neredeyse hiç değişmeden kaldı; Web teknolojilerinin muazzam gelişme hızı göz önüne alındığında bu çok garipti ve sonunda bir değişiklik oldu ve HTML 5 ortaya çıktı.

HTML 5, birkaç yeni öğe ve nitelik ekler ve birkaç eski öğeyi (font ve center gibi) kaldırır.

Aşağıdaki öğeler eklenmiştir:

1) başlık.

2) altbilgi.

4) bölüm.

5) makale.

6) bir kenara.

7) şekil .

8) diyalog.

9) m (işaret) .

10) zaman.

11) metre.

12) ilerleme.

13) videosu.

14) ses.

15) ayrıntılar.

16) veri kılavuzu.

17) menü.

18) komut.

Geri kalan her şey değişmeden kalır. Yani standart olana aşina olmanız şartıyla herhangi bir sorun yaşanmayacaktır. Aslında her şey aynı kalıyor, sadece yeni özellikler eklendi.

HTML 5'in yenilikleri sayesinde, aynı işaretleme basitleştirilerek Web Yöneticilerinin işi önemli ölçüde basitleştirilebilir.

Elbette şunu merak ediyorsunuzdur: “HTML 5 eski tarayıcılarla çalışır mı?” Cevap şu: "Elbette evet, ancak yeni öğeler elbette görüntülenmeyecek." Veya başka bir deyişle, yeni sayfaları herkes görecek, ancak modern tarayıcı sürümlerinin sahipleri biraz daha fazla ve farklı görecek.

Eminim ki yakın gelecekte HTML 5, halihazırda 10 yıldan daha eski olan HTML 4 ile aynı oranda kullanıcı tarafından görülecektir.

Sonraki yazılarımızda sizlerle HTML 5'in yeni özelliklerinin kullanımından bahsedeceğiz.

HTML5 - yeni nesil. HTML 4.01 önerisinin (1999) yayımlanmasından bu yana 10 yıldan fazla zaman geçti ve bu nedenle pek çok değişiklik ve ekleme beklenmelidir. HTML5 spesifikasyonu şu anda hala geliştirilme aşamasındadır. World Wide Web Konsorsiyumu standart geliştirmez, yalnızca öneriler yayınlar. Her şey çalışma tartışmalarıyla başlar, ardından bir çalışma taslağı başlatılır, ardından tavsiye rolü için bir aday yayınlanır ve ancak o zaman spesifikasyon nihayet tavsiye statüsünü alır. Şu anda HTML5 üzerindeki çalışmalar hâlâ taslak aşamasındadır. Buna rağmen, en popüler İnternet tarayıcılarının çoğu halihazırda HTML5 yeniliklerini kısmen desteklemektedir. Bunlara kısa bir genel bakış yapmadan önce, tüm tarayıcıların bu işlevi uygulamadığını ve henüz tam olarak uygulanmadığını tekrarlayacağım. Bugün Opera, Chrome, Firefox, Safari ve Internet Explorer'ın HTML5'i değişen derecelerde desteklediğine güvenebiliriz.

HTML5'teki yenilikler

Ve gerçekten yeni olan pek çok şey var. Artık web geliştiricileri, web tuvali üzerinde geometrik şekiller çizme, yerleşik sürükle ve bırak özellikleri ve video ve ses dosyalarını oynatma gibi bir dizi ek özelliğe sahip olacak (daha önce bu yalnızca aşağıdaki eklenti bileşenleri kullanılarak yapılabilirdi: Adobe Flash Player gibi) ve çok daha fazlası, biraz sonra tartışılacak. Başlangıç ​​olarak HTML'nin gelişimindeki genel eğilimler hakkında birkaç söz söylemek istiyorum.

HTML5 spesifikasyonunun yeni etiketler şeklinde öne çıkan kısmı buzdağının sadece görünen kısmıdır. HTML5'in gelişmiş özelliklerinin çoğu yalnızca istemci tarafı web programlamanın temeli olan komut dosyası programlama dili kullanılarak kullanılabilir. Etiket kullanılarak uygulanan çizim işlevinin aynısını alırsak, sanılabileceği gibi geometrik şekil etiketlerini kullanan "çizim işaretlemesinden" bahsetmiyoruz. Kanvas düzeni, tuval öğesinin sayfaya yerleştirilmesiyle sona erer ve bu kadar. Çizimin kendisi, tuvale erişildiğinde, normal Windows uygulamalarının grafikleri GDI (Grafik Aygıt Arayüzü) arayüzleri aracılığıyla pencerelere görüntülemesine benzer şekilde, tuval üzerine şekiller çizecek bir JavaScript işlevidir. Bu nedenle, HTML5 spesifikasyonu, belge nesne modeliyle (DOM) çalışmak için program arayüzünü () büyük ölçüde düzenleyen JavaScript ile çalışmanın uygulanması açısından İnternet tarayıcılarına oldukça ciddi gereksinimler getirir. Bu iyi bir haber, çünkü birçok kişi farklı tarayıcıların, birbirinden farklı program arayüzleri aracılığıyla nesne modeliyle çalışmayı organize edebildiğini biliyor. Kısmen, yazılım arayüzünün spesifikasyonu organizasyonun esasıdır Web Köprü Metni Uygulama Teknolojisi Çalışma Grubu (WHATWG) Yalnızca işaretleme dilinin değil, JavaScript gibi betik dillerinde yazılan uygulamalarda kullanılan API'lerin de standartlaştırılması için çaba gösteren . WHATWG ayrıca W3C ile birlikte geliştirme çalışmalarına da katılmaktadır.

Ayrıca HTML5 yazarlarının bazı popüler ve aranan web programlama görevlerinin uygulanmasını İnternet tarayıcılarının sorumluluğuna devretmeye çalıştıkları sonucuna da varabiliriz. Örneğin, HTML5'i kullanarak, çevrimiçi mağazaların kullanıcı arayüzlerinde çok popüler hale gelen öğeleri sürükleyip bırakma işlevini (sepete ürün seçme) oldukça kolay bir şekilde uygulayabilirsiniz. Önceden, bunu yapmak için çeşitli destekleyici kitaplıkları kullanarak JavaScript'te bir komut dosyası yazmanız gerekiyordu. Bir dizi ek özellik tanımlayarak ve ihtiyacınız olan etiketler için birkaç olay işleyicisi ekleyerek sürükle ve bırak özelliğini uygulamak artık çok daha kolay. JQuery kullanarak "sürükle ve bırak" işlemini düzenlemek de özellikle karmaşık değildir, ancak HTML5 durumunda, tüm İnternet yazılımı istemcileri için tek bir öneriyle ilgileneceğiz ve bu, tamamen farklı bir destek düzeyi ve tarayıcılar arası uyumluluk garantisidir. HTML5 önerilerini destekleyen tarayıcıların artık oturum ayarlarını web oturumu bağlamında kaydetme ve geri yükleme olanağı sağlayacağı ortaya çıktı. Örneğin, sayfa yeniden yüklendiğinde, daha önce girilen bilgiler kaybolmaz, ancak mevcut oturumun ortamından geri yüklenir. Bu zaten sunucu tarafı web programlamanın "bölgesine girmektir", çünkü daha önce bu yalnızca HTML ve JavaScript kullanılarak yapılamıyordu.

Şimdi HTML5'teki en dikkate değer yeniliklerin bir listesi:

Web tuvali üzerinde çizim yapmak veya tuval öğesini kullanmak

Daha önce de belirtildiği gibi, yeni unsurun kullanımına ilişkin önerilerin ana kısmı üzerinde grafik görüntülemek için kullanılan bir yazılım arayüzünün spesifikasyonudur. Başlamak için sayfaya bir etiket yerleştirirsiniz belirli bir genişlik ve yükseklik, ardından JavaScript kodunda ona erişirsiniz (örneğin, kimliğe göre) ve üzerinde çizim yapmaya başlarsınız. Çizim, vuruşStyle çizgi stilini, fillStyle dolgu stilini sırayla tanımlamak ve moveTo (kalemi hareket ettir), lineTo (çizgi çiz), arc (yay çiz) vb. gibi çizim yöntemlerini çağırmak anlamına gelir. Aşağıda bir örneğe bakın - fareyle çizim yapmanın en basit aracı. Aşağıda JavaScript ve HTML işaretlemesindeki kaynak kodu bulunmaktadır. Kalemle çizim yapmak için farenin sol tuşuna basın ve imleci tuval üzerinde hareket ettirin. "Çizgiler" veya "çokgenler" modunda, tuval üzerine sırayla tıklamanız yeterlidir, böylece sürekli çizgilerin veya alan nesnelerinin köşeleri gösterilir.

Bir tuval öğesi üzerine çizim örneği

HTML5 kullanarak bir öğe üzerinde çizim işlemlerinin uygulanmasına bir örnek.

JavaScript kaynak kodu

//Geçerli işlemin kodu var işlem=0; //İşlem durumu var aktif=yanlış; //Grafiksel bir işlem işlevi başlatın startOperation(e) ( if (operation==0) return; if (active) return; var context = getContext(); context.strokeStyle = getColor("stroke"); context.fillStyle = getColor ("fill"); context.beginPath(); var point = getPoint(e); context.moveTo(point.x, point.y); active = true; ) //Grafiksel işlem fonksiyonunun tamamlanması stopOperation() ( if (! active) return; var context = getContext(); context.closePath(); active = false; ) //Mouse olayları fonksiyonu mouseDown(e) ( var e = e || window.event; if (!active) ( startOperation( e); return; ) else ( var context = getContext(); var point = getPoint(e); context.lineTo(point.x, point.y); context.stroke(); if (operation == 3 ) context .fill(); ) return true; ) function mouseUp(e) ( var e = e || window.event; if (!active || operasyon != 1) return; stopOperation(); return true; ) function mouseMove( e) ( var e = e || window.event; if (!active || işlem != 1) return; var context = getContext(); var point = getPoint(e); context.lineTo(nokta.x, nokta.y); bağlam.stroke(); doğruyu döndür; ) function getColor(control) ( var color = document.getElementById(control).value; if (color == "") color = "#000"; return color; ) //Canvas element function getCanvas() ( return document. getElementById("canvas"); ) //Tuval öğesi işlevinde 2 boyutlu grafikleri görüntülemek için bağlam getContext() ( return getCanvas().getContext("2d"); ) //Eleman "seçili işlem" işlevi getSelected() ( return document.getElementById("selected"); ) //Fare imleci fonksiyonunun göreceli koordinatları getPoint(e) ( var x = event.pageX || event.x; var y = event.pageY || event.y; var rect = getCanvas() .getBoundingClientRect(); var point = (); point.x = x - rect.left; point.y = y - rect.top; dönüş noktası; ) //Bir işlem fonksiyonu seçin selectOperation(code) ( stopOperation(); işlem = kod; switch(işlem) ( durum 1: ( getSelected().innerText = "Seçili: kalem"; break; ) durum 2: ( getSelected().innerText = "Seçili: satırlar"; break; ) durum 3: ( getSelected().innerText = "Seçili: çokgenler"; kırmak; )) ))

Kaynak HTML kodu

kalem çizgileri çokgenler Seçilen: çizgi rengi dolgu rengi

Öğeleri sürükleyip bırakın

Bu, normal GUI uygulamalarında çok popüler olan klasik "sürükle ve bırak" modeli için tarayıcı desteğinden başka bir şey değildir. “Sürükleyeceğiniz” elemanlar için sürüklenebilir niteliğini tanımlayın ve sürüklenen elemanları “atacağınız” elemanlar için ondragenter, ondragover ve ondorp olay işleyicilerini tanımlayın. Aslında hepsi bu. Aşağıdaki örnek.

HTML5 sürükle ve bırak örneği - "Basketbol Sepeti"

HTML5 kullanarak sürükle ve bırak işlemlerinin (öğelerin sürüklenmesi) uygulanmasına bir örnek.

Kaynak HTML kodu

HTML5: Sürükle ve Bırak html, gövde ( yazı tipi ailesi: Arial yazı tipi boyutu: 11 piksel; ) .basket ( border: 1px katı #777; genişlik: 105 piksel; yükseklik: 120 piksel; dolgu: 10 piksel; kenarlık yarıçapı: 0 0 10 piksel 10px; arka plan rengi: #eee; kutu gölgesi: iç metin 0px 0px 5px #777; ) .basket .ball ( genişlik: 30 piksel; yükseklik: 30 piksel; kenarlık yarıçapı: 15 piksel; kutu gölgesi: 5px 5px 10px #777; kayan nokta: sağ; ) .top ( kenarlık: 1 piksel katı #FF7F50; genişlik: 20 piksel; yükseklik: 20 piksel; kenarlık yarıçapı: 10 piksel; arka plan rengi: #FF8C00; kutu gölgesi: 0px 0px 5px #777; kayan nokta: sol; kenar boşluğu: 1px; ) function startDrag(e) ( var e = e || window.event; e.dataTransfer.setData("Ball", e.target.id); e.dataTransfer. effectAllowed="move"; return true ; ) function endDrag(e) ( var e = e || window.event; e.dataTransfer.clearData("Ball"); return true; ) function drop(e) ( var e = e || window.event; e .target.appendChild(document.getElementById(e.dataTransfer.getData("Ball"))); e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; yanlış döndür; ) ...

Video ve ses dosyalarını oynatma

Burada her şey oldukça basit; çoğaltılacak bir şey olacak ve nerede. Etiketleri yerleştir Ve sayfanızda, oynatma kaynağını belirten src özelliğini tanımlayın ve İnternet tarayıcılarının bu harika talimatları işlemeyi ve en yaygın formatları oynatmayı öğrenmesini bekleyin.

Yeni özel web formu öğeleri

HTML5 yeni öğe türleri vaat ediyor İnternet adresinin, e-posta adresinin, sayısal değerlerin, tarihin, saatin, rengin vb. girişini kontrol eden . Tarayıcınız tüm bu yenilikleri zaten destekliyorsa, aşağıda bunu nasıl yaptığını göreceksiniz. Tarayıcı tüm yeni öğe türlerini desteklemiyorsa, nasıl çalışılacağını henüz bilmediği öğeler normal metin giriş alanlarına benzeyecektir.

Kullanıcı Kontrolleri

Farklı tür öznitelik değerlerine sahip öğe çeşitleri:

Adres değeri formatla eşleşmiyorsa URL, ardından [onayla] öğesine tıkladıktan sonra tarayıcı bunu düzeltmeye çalışacaktır. Bunu yapamazsa bir hata mesajı görüntüler. E-posta değeri formatla eşleşmiyorsa e-posta, ardından [onayla] öğesine tıkladıktan sonra tarayıcı ya adresi düzeltecek ya da bir giriş hatası bildirecektir.

Sayısal değerlerin görselleştirilmesi

Düşük normun altındaki ve yüksek normun üzerindeki aralıkları ve optimum değer optimumunu gösterme yeteneğine sahip sayısal bir değerin ölçek biçiminde sunulması.

Öğe:

Yürütme sürecinin görselleştirilmesi. Yalnızca maksimum maksimum ve geçerli değeri belirleyebilirsiniz.

Öğe HTML Kaynak Kodu

Aralıktaki sayı:

Tamsayı:

Tarih ve saat:

Tarihi:

Zaman:

Ay:

Bir hafta:

Renk:

URL'si:

e-posta:

Tarama geçmişini yönetme

JavaScript ve nesneyi kullanarak önceden yüklenen sayfalara geçişi bağımsız olarak yönetmek mümkün olacak tarih. Örneğin, window.history.length'in çağrılması "geçmiş uzunluğunu" döndürür ve window.history.back(), window.history.forward() veya window.history.go(stepCount)'un çağrılması uygun geçişleri gerçekleştirir. Aşağıda küçük bir örnek verilmiştir:

İleri >

Oturum durumu kaydediliyor

Bu harika işlevsellik, oturum verilerini kaydetmenize ve geri yüklemenize olanak tanır. Siparişi doldurduk, ürünü görmeye gittik, siparişi tekrar doldurmak için (bağlantıyı kullanarak) geri döndük, ancak önceden girilen veriler hala oradaydı. Daha önce böyle bir sayfa özelliğinin sağlanması için web uygulamasının sunucu tarafında ek çaba sarf edilmeden yapılması mümkün değildi. Artık verileri bir web oturumu bağlamında kaydetmek mümkün olacak ( oturumDepolama) veya yerel olarak tarayıcının RAM'inde ( yerel depolama). sessionStorage'ın, başlatıldığı oturum aktif olduğu sürece verilerin saklanmasına izin vermesi gerekiyor. Saklanan verilere tarayıcı tarafından yüklenen çeşitli web sitesi sayfalarından erişilebilir. Görünüşe göre localStorage seçeneği, tarayıcı açıkken verileri kaydetmelidir. localStorage'a erişimin her zaman mevcut olması gerektiğinden, sunucuyla bağlantı olmasa bile tarayıcı tarafından açılan herhangi bir sayfa localStorage'dan veri alabilir. Her iki durumda da oturum durumu, xxxStorage.setItem(key, value) ve xxxStorage.getItem(key) çağrılarıyla erişilen bir anahtar/değer çiftleri kümesidir.

Örnek: Yeni özelliği kullanarak öğe içeriğini düzenlemeyle ilgili bölüme bakın içeriği düzenlenebilir HTML5'te tanıtılan . Aşağıya iki düğme eklendi; bunlardan biri düzenlenen bloğun içeriğini kaydeder, ikincisi ise onu geri yükler. [Kaydet]'e tıklayın, bloğun içeriğini düzenleyin ve [Geri Yükle]'ye tıklayın. Tarayıcınız HTML5 işlevini destekliyorsa oturumDepolama, ardından bloğun içeriği içeriği düzenlenebilir restore edilecek.

Eski haline getirmek

Geri Yüklemeyi Kaydet

Sayfalar arasında mesaj alışverişi yapın

Sayfanız öğeler içeriyorsa diğer sayfaların içeriğini yükleyenler: yalnızca sitenizin sayfaları değil, aynı zamanda tamamen farklı bir alandaki sayfalar, o zaman HTML5 önerilerinin uygulanmasıyla bu tür pencerelerle mesaj alışverişi yapmak mümkün olacaktır. Mesajı gönderen sayfa bunu window.postMessage(message, target) işlev çağrısını kullanarak yapar ve mesajı alan sayfanın bir "onmessage" olay işleyicisi içermesi gerekir; burada eğer gerçekten olaysa, event.data mesaj metnini zaten işlemelidir. alıcısı - event.origin değerine karşılık gelir. Bu mekanizmanın ortaya çıkmasından önce istemci tarafında çeşitli İnternet kaynaklarıyla iletişim kurmak mümkün değildi. Yeni HTML5 mesaj mekanizmasını kullanarak iki sayfa arasındaki iletişimin en basit uygulamasına bir örnek aşağıda verilmiştir. İlk bakışta örnekte özel bir şey olmuyormuş gibi görünebilir. Daha doğrusu, tüm bunlara neden ihtiyaç duyulduğu belli değil. Aslında mesajlaşma, çeşitli İnternet hizmetlerini tek bir yerde birleştiren bilgi portalları oluştururken popüler hale gelebilir. Örneğin, hizmetlerinin ancak çok sayıda elektronik başvurunun doldurulmasından sonra kullanılabildiği belirli bir İnternet hizmetinin olduğunu varsayalım. Ayrıca, bu hizmetin hizmetlerini oldukça sık kullanan, ancak istekleri her seferinde birbirinden çok az farklı olan bir müşteri olduğunu varsayalım (parametrelerin çoğu her zaman aynıdır). Böyle bir İnternet hizmeti, başvuruyu doldurmak için kullanılan elektronik formun yanı sıra, hizmetleri için otomatik sipariş vermek için bir "mesaj alıcısını" da destekliyorsa, müşterileri bu hizmetin penceresini "sürükleyebilir". sayfalarında (öğesini kullanarak), kendi (kendiniz için optimize edilmiş) başvuru formları ve bunları hedef hizmete mesaj biçiminde göndermek için işlevler oluşturun. Bu durumda parametrelerin çoğu (örneğin müşteri ayrıntıları) otomatik olarak oluşturulur. Elbette benzer iletişim, istemciden sunucuya gerekli parametrelerin aktarıldığı HTTP istekleri aracılığıyla da gerçekleştirilebilir, ancak HTML5 mesaj mekanizması durumunda geçiş sırasında sıfır trafik olduğunu belirtmekte fayda var. parametreler, çünkü her şey istemci tarafında gerçekleşir.

Mesaj alışverişinde bulunan iki sayfa örneği

HTML5 kullanarak sayfalar arasında mesaj alışverişinin uygulanmasına bir örnek.

Mesaj kaynak sayfasının kaynak kodu

function init() ( document.getElementById("form").onsubmit = sendMessage; ) function sendMessage() ( var konum = window.location; var message = document.getElementById("message").value; var hedef = belge. getElementById("target"); target.contentWindow.postMessage(message,location.protocol+"//"+location.host); return false; ) ...

message_source.html:

message_target.html yüklenemedi!

Mesaj metni

Mesaj alıcı sayfasının kaynak kodu

function init() ( if (window.addEventListener) window.addEventListener("message", getMessage, false); else window.attachEvent("onmessage", getMessage); ) function getMessage(event) ( document.getElementById("target") ).innerHTML = olay.veri; document.getElementById("origin").innerHTML = "from " + event.origin; ) ...

mesajlar_target.html:

Bir mesaj bekliyorum...'dan...

Öğe içeriğini düzenleme

Artık contenteditable özelliğini tanımlayarak, metin blokları, listeler vb. gibi bireysel işaretleme öğelerini düzenlenebilir hale getirebilirsiniz. Designmode özelliğini kullanarak sayfanın tamamını düzenlenebilir hale getirebilirsiniz. Bu işlevsellik, kaynağın sahibiyle geri bildirim düzenlemek, örneğin bir başvuruyu, siparişi veya buna benzer bir şeyi doldurup göndermek için yararlı olabilir. Formun orijinal biçiminde bir HTML sayfası oluşturur ve doldurması için kullanıcıya verirsiniz. Doldurduktan sonra kullanıcı girilen verileri onaylar ve düzenlenen belge sunucuya gönderilir. Düzenlenebilir işaretlemenin bir örneği aşağıda gösterilmektedir:

Bu bloğun içeriği düzenlenebilir çünkü nitelik onun için tanımlıdır. içeriği düzenlenebilir:

Tablo hücrelerini düzenlerken sütunların genişliği ve satırların yüksekliği otomatik olarak değişir.

Yeni bir liste öğesi girmek için tuşuna basın.

• Liste öğesi 1
• Liste öğesi 2
• Liste öğesi 3

Listeye yeni bir öğe eklendikten sonra numaralandırma otomatik olarak güncellenecektir.

Numaralandırılmış liste öğesi 1

Numaralı liste öğesi 2

Numaralı liste öğesi 3

Vektör grafikleri

Destek bekleniyor SVG- vektör grafikleri işaretleme dilini temel alan . Grafikler, etiketi kullanılarak mantıksal olan işaretlemeye eklenecektir. örneğin şu şekilde:

Aşağıdaki geometrik şekilleri görüyorsanız tarayıcınız zaten svg'yi destekliyor demektir.

Matematiksel İfadeler

Destek de bekleniyor MathML- XML'e dayalı matematiksel ifadeler için bir işaretleme dili. Kosinüs teoremini kullanarak bir üçgenin bir tarafının uzunluğunu hesaplamak için formülü işaretlemeye bir örnek:

a = b 2 + c 2 - 2 b c çünkü α

Karekök sembolüne sahip bir formül görürseniz tarayıcınız MathML'i zaten anlıyor demektir.

A = b 2 + c 2 - 2 b c çünkü α

Diğer işaretleme öğeleri

Her şeyden önce, daha önce açıkça mevcut olmayan bir grup yeni sayfa işaretleme öğesini vurgulamak istiyorum. Bunlar etiketi içerir - makale, not, haber vb.; - makale başlığı veya başlığı - altbilgi veya altbilgi - makalenin bölümü veya bölümü. Aynı şey elementler kullanılarak da yapılabiliyorsa buna neden ihtiyaç duyuluyor? farklı sınıflar mı? Bu, işaretlemenizin anlamının onu analiz etmeye çalışanlar için de açık olması için gereklidir. Metninizi okuyan kişiden bahsetmiyorum (işaretlemeyi görmüyor, onsuz her şey onun için net), ancak otomatik sistemlerden bahsediyorum ve her şeyden önce bu arama motorları için geçerli. Anlamsal yük, arama motorları için sayfalarınızın belirli bir arama sorgusuyla alaka düzeyini hesaplarken çok önemlidir. Bu bağlamda unsur özel ilgiyi hak etmektedir. , çünkü sayfanızdaki ana gezinme bağlantılarının bulunduğu bloğu vurgulamak için tasarlanmıştır. Belki arama motorları bu tür bağlantılara farklı davranacaktır. Aşağıda işaretlemeye anlam katan yeni HTML5 etiketlerinin özet tablosu bulunmaktadır.

Etiket Kısa açıklaması

	Makale, haber, not, yorum veya diğer herhangi bir bireysel yayın türü. Etiket madde Bir konu veya sorunla ilgili bilgileri birleştirir. Bir element madde diğer unsurları içerebilir madde(aşağıdaki örnek).
	Açıklama, konu dışı. Etiket bir kenara reklam yerleştirmek gibi amaçlarla, sayfanın ana içeriğiyle ilgili olmayan metin bölümlerini vurgulamak için de kullanılabilir.
	Talep üzerine genişletilebilecek ayrıntılı bilgi bloğu.
	Çizimin imzası. Etiket Şekil başlığı etiketin içinde kullanılır figür.
	İmzalı çizim. Bu öğe bir resim içermelidir img ve imza Şekil başlığı.
	Altbilgi. Etiket alt bilgi onu bir etiketin içine yerleştirmek de mantıklıdır madde Bir makalenin veya notun yazarını belirtmek için.
	Sayfa başlığı veya makalenin girişi. Bir etiketin içine yerleştirildiğinde madde etiketlemek başlık Bir başlık, yayının kısa bir açıklaması ve ilgili materyallere bağlantılar ekleyebilirsiniz.
	Başlıkları Gruplandırma h1 - h6çok düzeyli bir başlığa dönüştürün.
	İşaret. Etiket işaret Metnin bir bölümünü farklı bir stille vurgulamanız ve ona belgenin başka bir yerinden başvurmanız gerekiyorsa kullanmak mantıklıdır.
	Gezinme bağlantılarının bloğu.
	Sayfa bölümü, makale bölümü. Bir makalenin içine yerleştirildiğinde (etiket madde) kendi ayrı bölümü olarak yorumlanabilir.

Aşağıda listelenen etiketleri kullanan bir HTML işaretleme örneği verilmiştir.

HTML5 henüz bir öneri haline gelmedi ve "anlamsal etiketlerin" kullanımı konusunda tartışmalar var. Ve zaten oldukça fazla. Henüz hiç kimse bunların işaretlemeye doğru bir şekilde nasıl eklenmesi gerektiğini bilmiyor, ancak yeni HTML5 yapısal etiketlerinin kullanımına ilişkin, anlamları açık olduğundan tartışılması zor olan bir dizi ipucu var. Bunlardan bazıları:

Etiket kullanmayın başlık sadece bir başlık etiketi yerleştirmek için h1 - h6 tıpkı başlık etiketlerinin içine başlıkların metni dışında herhangi bir şey doldurmaya gerek olmadığı gibi. Bunu yapmamalısınız: Site adı

Etiket kullanmayın grup tek bir öğeden başlık grupları oluşturmak için. Her bir element h1önce h6 ve böylece başlığın kendisi. İşte yapılmaması gerekenlere bir örnek: Site adı

Öğe eklemenize gerek yok bölüm diğer öğelerin içinde, eğer bu öğelerin tüm ana içeriklerini içeriyorlarsa. Yukarıdaki örnekte her yorumun içinde ayrı bloklar yoktur bölüm Yorum metninin kendisini vurgulamak için. İşte ekstra bir öğe örneği bölüm :

Yorum metni

Yayınlanan...

Öğenin anlamını anlamanıza gerek yok madde gerçekten. Bu sadece bir makale değil, aynı zamanda tam bir düşüncenin herhangi bir sunum şeklidir. Bu nedenle daha önce verilen örnekte makaleye yapılan yorumlar da ayrı bloklara ayrılmıştır. madde.

HTML5 yapı etiketlerini yalnızca arama motorlarının işaretlemenizin semantiği hakkında daha fazla bilgi edinmesine yardımcı olacağına inanıyorsanız kullanın. Etiket ayrı bir anlam taşımayıp sadece “güzellik” için eklenmişse, eklenmesinin sonucu sayfanızın “fazla kilosu” olur ki bu da bilindiği üzere “sağlığa zararlıdır”. alan.

HTML5 önerisinin yayınlanmasıyla birlikte ortaya çıkması gereken hiper metin işaretleme dilinin yeni özellikleriyle ilgili benim için bu kadar.

HTML5'te HTML4'te olmayan yenilikler neler?

Ve temelde her şey yeni. HTML5 spesifikasyonu, farklı düzeylerde ve önemde birçok değişikliği beraberinde getirir. Temel değişiklikler birkaç bloğa ayrılabilir:

• Dilin anlambilimi. HTML5, web sayfalarının iç yapısını daha anlamlı bir şekilde düzenlemenize olanak tanıyan bir dizi yeni anlamsal etiket sunar.

Bunlardan en ünlülerine bakalım:

• nav - bir gezinme çubuğu oluşturmak için kullanılır;
• kenara - bir kenar çubuğunu vurgulamak için en uygun olan birleştirici bir etikettir. Hem gezinme bloklarını hem de diğer gezinme dışı öğeleri (reklam banner'ları, yazarın fotoğrafı, sosyal ağ düğmeleri vb.) içerebilir;
• bölüm aynı zamanda birleştirici bir etikettir. Dahası, farklı roller oynayabilir: ya sayfayı birkaç tematik alana bölebilir ya da sayfadaki makalenin kendisini ayrı bölümlere ayırabilir;
• makale - sayfayı ayrı makalelere bölmeye yarar. Hem bölüm hem de makale etiketlerinin bir dizi ilginç özelliği vardır. Örneğin, artık birinci düzey H1 başlığını bir sayfada birkaç kez güvenle kullanabilirsiniz; bu daha önce kabul edilemezdi;
• hgroup - etiketi, sayfa başlıklarını tek bir mantıksal birimde gruplamak için tasarlanmıştır;
• video - site sayfalarına videonun basit bir şekilde eklenmesine hizmet eder;
• ses - ayrıca medya içeriğinin web sitesi sayfalarına kolayca eklenmesi için tasarlanmıştır;
• tuval - JavaScript kullanarak çeşitli nesneler çizebileceğiniz, görüntüleri görüntüleyebileceğiniz, bunları dönüştürebileceğiniz ve özelliklerini değiştirebileceğiniz bir alan oluşturur.

Diğer etiketler hakkında htmlbook.ru adresinden bilgi edinebilirsiniz.

• Multimedya. HTML5 artık, oynatmayı ve codec bileşenlerini kontrol etmek için ilgili API ile birlikte, kutudan çıktığı gibi HMTL işaretlemesinde multimedya içeriğini (ses ve video oynatıcı) destekliyor.
• Grafik Sanatları . Canvas etiketi ve onunla çalışmaya yönelik özel bir JavaScript API'si sayesinde grafiklerle çalışmak çok daha kolay hale geldi. Ayrıca HTML5, ilgili web standardı (SVG, Ölçeklenebilir Vektör Grafikleri) tarafından açıklanan vektör grafiklerini uygulamanıza olanak tanıyan svg etiketini resmi olarak içerir.
• Web formları. Yeni web formu öğeleri: formlardaki giriş verilerini ve araç ipuçlarını doğrulamak için ek kitaplıklar kullanmadan, yerleşik araçlarla geleneksel formların yeteneklerini genişletmenize olanak tanıyan hem türler hem de nitelikler.
• JavaScript API'si. Grafikler ve multimedya ile çalışmaya yönelik bir API, nesneleri taşımak ve geçiş geçmişiyle çalışmak için yeni gelişmiş yetenekler (Geçmiş API'si) ve ayrıca İçeriği kullanarak içeriği geçerli konumda düzenlenebilir hale getirme yeteneği gibi bir dizi küçük şey Düzenlenebilir nitelikler.
• Daha fazla. Gelişmiş ağ iletişimi. Önemli ölçüde geliştirilmiş veri depolama. Arka plan işlemlerini yürütmek için Web Worker araçları. Yerleşik bir uygulama ile sunucu arasında kalıcı bir bağlantı kurmak için WebSocket arayüzü. Sayfaları kaydetme ve yükleme hızında artış. Kullanıcı arayüzü kontrolü için CSS3 desteği, HTML5'in içerik merkezli olmasını sağlar.

Dolayısıyla, HTML5 formatının, etkili ve akılda kalıcı grafikler, etkileşimli öğeler ve yüksek kaliteli web tasarımı ve arayüzünün diğer bileşenlerini oluşturmaya yönelik temelde yeni bir yaklaşım sergilediği açıktır. Bu, şüphesiz bir avantaj sağlar - sayfaların yüklenmesinde belirli zorluklar yaratan flash öğelerinden kaçınma yeteneği. Aynı zamanda bu tür sayfaların yüklenmesi de biraz zaman alıyor. Ayrıca, HTML5 ile doğru şekilde çalışmak için uygun sistem kapasitesine sahip bir bilgisayara ihtiyacınız vardır ve tarayıcı geliştiricileri, tüm HTML5 özellikleri için tam destek ekleyemeyecek kadar tembeldir.