HTML5 ve yeni web programlama yeteneklerine genel bakış. HTML5'teki yenilikler neler? Resim özelliği srcset

Tercüme: Vlad Merzhevich

"Eski tarayıcılar HTML5'i desteklemiyorsa HTML5'i nasıl kullanabilirim?" diye sorabilirsiniz. Aslında bu soru yanlış. HTML5 büyük bir şey değil, farklı özelliklerin bir koleksiyonudur. Mantık dışı olduğu için "HTML5 destekleniyor" yazamazsınız, ancak çizim, video ve coğrafi konum gibi bazı HTML 5 teknolojileri için destek belirtebilirsiniz.

HTML'yi etiketler ve açılı ayraçlar olarak düşünebilirsiniz. Bu elbette önemli bir kısım ama tamamı değil. HTML5 spesifikasyonu ayrıca bu açılı ayraçların Belge Nesne Modeli (DOM) aracılığıyla JavaScript ile nasıl etkileşime girdiğini de belirtir. HTML5 yalnızca bir etiketi tanımlamakla kalmaz, aynı zamanda DOM'a tüm video nesneleri hakkında da bilgi verir. Kullanıcı ile etiket arasındaki etkileşime bağlı olarak farklı video formatlarını desteklemek, video oynatmak, durdurmak, sesi kapatmak, dosya indirme işlemlerini takip etmek ve çok daha fazlasını yapmak için uygulama programlama arayüzünü (API) kullanabilirsiniz.

Beğenseniz de beğenmeseniz de HTML4'ün en başarılı biçimlendirme formatı olduğunu inkar edemezsiniz. HTML5 bu şansın üzerine kuruludur, dolayısıyla mevcut işaretlemeyi bir kenara atıp yeniden öğrenmenize gerek kalmaz. Web uygulamanız bugün HTML4'te çalışıyorsa, aynı zamanda HTML5'te de çalışacaktır, nokta.

İşte somut bir örnek: HTML5, HTML4'ün yaptığı tüm form öğelerini destekler ve ayrıca yeni öğeler de içerir. Kaydırıcılar ve tarih seçimi gibi bazılarının gelmesi uzun zaman aldı, diğerleri ise o kadar belirgin değil. Örneğin, e-posta adresi girme alanı sıradan bir metin alanıdır ancak bu alana yönelik modern tarayıcılar, adresin yazılmasını kolaylaştırır. Daha eski tarayıcılar input type="email" öğesini desteklemez, dolayısıyla normal bir metin alanı gösterirler ve formlar herhangi bir ek hileye gerek kalmadan onunla çalışır. Bu, bazı kullanıcılar hala IE6'ya takılıp kalsa bile formlarınızı bugün geliştirmenize olanak tanır.

HTML5'e "yükseltme" yalnızca doküman tipini değiştirerek yapılabilir. Öğe her zaman herhangi bir web sayfasının ilk kod satırına yerleştirilmelidir. HTML'nin önceki sürümü çeşitli belge türü seçenekleri tanımlıyordu ve doğru olanı seçmek kolay değildi. HTML5'te yalnızca bir belge türü vardır:

Doküman tipini değiştirmek mevcut düzeni bozmaz çünkü HTML4'te tanımlanan tüm etiketler HTML5'te de desteklenir. Ayrıca , , ve gibi yeni anlamsal öğeleri doğru bir şekilde kullanabilirsiniz.

İster resim çizmek, ister video oynatmak, formların işlevselliğini geliştirmek veya çevrimdışı bir web uygulaması oluşturmak istiyor olun, HTML5'in tarayıcılar tarafından iyi bir şekilde desteklendiğini göreceksiniz. Firefox, Safari, Chrome ve mobil tarayıcılar etiket, video, coğrafi konum, yerel depolama vb. özelliklerle çalışır. Google, mikro veri açıklamalarını anlar. Genellikle standartların gerisinde kalan Microsoft bile Internet Explorer 9 tarayıcısında temel HTML5 özelliklerini desteklemektedir.

Bu kitabın tüm bölümleri popüler tarayıcılar için bir uyumluluk tablosu içermektedir. Çok daha önemlisi, eski tarayıcıları destekleme seçeneklerine ilişkin bir tartışma da yer alıyor. Coğrafi konum ve video gibi HTML5 teknolojileri, Gears veya Flash gibi eklentiler kullanılarak uygulandı. Çizim gibi diğer özellikler JavaScript aracılığıyla taklit edilebilir. Bu kitap, modern tarayıcıların yerleşik özelliklerini, eski sürümleri atmadan nasıl kullanacağınızı gösterir.

Tim Berners-Lee doksanlı yılların başında World Wide Web'i icat etti. Daha sonra web standartlarını sürdürmek için on beş yıldan fazla bir geçmişe sahip bir kuruluş olan W3C'yi kurdu. İşte W3C'nin Temmuz 2009'da web standartlarının geleceği hakkında duyurduğu şey:

Yönetim bugün, XHTML 2 Çalışma Grubu'nun sözleşmesinin 2009 yılı sonunda sona ermesi durumunda yenilenmeyeceğini duyurdu. Bunun amacı HTML Çalışma Grubunun kaynaklarını artırmaktır. W3C, bunun HTML5'in ilerlemesini hızlandıracağını ve W3C'nin HTML'nin geleceği konusundaki konumunu netleştireceğini umuyor.

HTML5 burada. Hadi derinlemesine inceleyelim.

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

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.

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:

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.

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

//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; )) ))

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

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 kullanarak sürükle ve bırak işlemlerinin (öğelerin sürüklenmesi) uygulanmasına bir örnek.

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; ) ...

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.

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.

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.

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:

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 >

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

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.

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

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:

Mesaj metni

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:

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österilmiştir:

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.

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.

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ü α

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 açık), 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.

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ı:

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

HTML5, ana web sayfası işaretleme dilinin en son sürümüdür. HTML'de son 10 yılda büyük bir değişiklik olmadı; web teknolojisinin ne kadar hızlı geliştiği göz önüne alındığında bu biraz tuhaf. Ve son olarak HTML5 bizim için yeniden düzenlendi ve bu makale size bu sürümde ne gibi yeniliklere sahip olduğumuzu anlatacak.

HTML5'in önceki XHTML'ye kıyasla daha az katı kuralları vardır; artık şunları yapabilirsiniz:

• Kapanış etiketlerini kullanmanıza gerek yoktur.
• Özellik değerlerinde tırnak işaretleri kullanmayın.
• Öğelerde ve niteliklerde büyük harf karakterler kullanın.

Yeni etiketler.
Ve böylece HTML5'te yeni etiketler ortaya çıktı.

Artık alakalı olmayan ve kullanılması tavsiye edilmeyen hariç tutulan etiketler de vardır.